[pull] master from marmelab:master

docs/Datagrid.md

@@ -6,7 +6,7 @@ storybook_path: ra-ui-materialui-list-datagrid--basic
 
 # `<Datagrid>`
 
-> **Note:** React-admin v5.8.0 introduced a successor to `<Datagrid>` called [`<DataTable>`](./DataTable.md). It offers a better developer experience by removing child inspection, and avoids 'polluting' the field components with props only serving in datagrid columns (e.g. sortBy, label, etc). Hence, we recommend using `<DataTable>` instead of `<Datagrid>` for new projects. `<Datagrid>` is of course still available for backward compatibility.
+> **Note:** React-admin v5.8.0 introduced a successor to `<Datagrid>` called [`<DataTable>`](./DataTable.md). It offers a better developer experience by removing child inspection, and avoids 'polluting' the field components with props only serving in datagrid columns (e.g. sortBy, label, etc). Hence, we recommend using `<DataTable>` instead of `<Datagrid>` for new projects. `<Datagrid>` is of course still available for backward compatibility. If you want to migrate to `<DataTable>`, we offer a [codemod](./DataTable.md#migrating-from-datagrid-to-datatable) that makes it easier.
 
 The `<Datagrid>` component renders a list of records as a table. It supports sorting, row selection for bulk actions, and an expand panel. It is usually used as a descendant of the [`<List>`](./List.md#list) and [`<ReferenceManyField>`](./ReferenceManyField.md) components. Outside these components, it must be used inside a `ListContext`.
 

docs/js/ra-navigation.js

@@ -60,9 +60,15 @@ function buildPageToC() {
             hasInnerContainers: true,
         });
 
-        const storybookPathMetaContent = document.querySelector(
+        const storybookPathMetaElement = document.querySelector(
             STORYBOOK_PATH_META_SELECTOR
-        ).content;
+        );
+        let storybookPathMetaContent;
+        if (storybookPathMetaElement) {
+            storybookPathMetaContent = document.querySelector(
+                STORYBOOK_PATH_META_SELECTOR
+            ).content;
+        }
         const tocList = document.querySelector('.toc-list');
         if (!tocList || !storybookPathMetaContent) {
             return;
@@ -113,12 +119,24 @@ function replaceContent(text) {
     );
 
     const newStorybookPathContent = newStorybookPathMeta?.content ?? '';
-    document
-        .querySelector(STORYBOOK_PATH_META_SELECTOR)
-        .setAttribute('content', newStorybookPathContent);
+    const storybookPathMetaElement = document.querySelector(
+        STORYBOOK_PATH_META_SELECTOR
+    );
+    if (storybookPathMetaElement && newStorybookPathContent) {
+        document
+            .querySelector(STORYBOOK_PATH_META_SELECTOR)
+            .setAttribute('content', newStorybookPathContent);
+    } else if (newStorybookPathContent) {
+        const metaElement = document.createElement('meta');
+        metaElement.setAttribute('name', 'storybook_path');
+        metaElement.setAttribute('content', newStorybookPathContent);
+        document.head.appendChild(metaElement);
+    } else {
+        // Remove the meta element if it doesn't exist in the new content
+        storybookPathMetaElement?.remove();
+    }
 
     window.scrollTo(0, 0);
-
     buildPageToC();
 
     navigationFitScroll();