@strapi/content-manager 5.60.0 → 5.61.0

package/dist/admin/pages/EditView/components/FormLayout.js

@@ -2,9 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
+var useHasBeenNearViewport = require('../../../hooks/useHasBeenNearViewport.js');
 var InputRenderer = require('./InputRenderer.js');
 
 function _interopNamespace(e) {
@@ -27,6 +29,139 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+/**
+ * Rough rendered heights, only used to size placeholders so the scrollbar stays sensible.
+ */ const ESTIMATED_HEIGHT = {
+    richtext: 320,
+    blocks: 320,
+    json: 240,
+    component: 240,
+    dynamiczone: 160,
+    relation: 120,
+    media: 160,
+    text: 120
+};
+const DEFAULT_ESTIMATED_HEIGHT = 80;
+const requestIdle = (callback)=>typeof window.requestIdleCallback === 'function' ? window.requestIdleCallback(callback, {
+        timeout: 2000
+    }) : window.setTimeout(callback, 16);
+const cancelIdle = (handle)=>typeof window.cancelIdleCallback === 'function' ? window.cancelIdleCallback(handle) : window.clearTimeout(handle);
+/**
+ * Mounts the rows that weren't needed for the first paint, one per idle period, in the order
+ * they were scheduled (top to bottom). Rows are then already rendered when the user scrolls to
+ * them, and the browser search finds every field.
+ */ const createIdleMountQueue = ()=>{
+    let queue = [];
+    let handle = null;
+    const flush = ()=>{
+        handle = null;
+        queue.shift()?.();
+        if (queue.length > 0) {
+            handle = requestIdle(flush);
+        }
+    };
+    return {
+        schedule: (mount)=>{
+            queue.push(mount);
+            if (handle === null) {
+                handle = requestIdle(flush);
+            }
+            return ()=>{
+                queue = queue.filter((scheduled)=>scheduled !== mount);
+            };
+        },
+        dispose: ()=>{
+            queue = [];
+            if (handle !== null) {
+                cancelIdle(handle);
+                handle = null;
+            }
+        }
+    };
+};
+const IdleMountContext = /*#__PURE__*/ React__namespace.createContext(null);
+const useIdleMountQueue = ()=>{
+    const [queue] = React__namespace.useState(createIdleMountQueue);
+    React__namespace.useEffect(()=>queue.dispose, [
+        queue
+    ]);
+    return queue.schedule;
+};
+/**
+ * Some inputs set a value when they mount: a required UID fetches its default value, and custom
+ * fields may set a default. Their rows are mounted with the page, as they always were, so that
+ * saving right after the page loads doesn't miss those values. Non-repeatable components are
+ * expanded by default, so the inputs they contain count too.
+ */ const hasMountSideEffects = (attribute, components, depth = 0)=>{
+    if (attribute.type === 'uid' && attribute.required || 'customField' in attribute) {
+        return true;
+    }
+    if (attribute.type === 'component' && !attribute.repeatable && depth < 10) {
+        return Object.values(components[attribute.component]?.attributes ?? {}).some((nested)=>hasMountSideEffects(nested, components, depth + 1));
+    }
+    return false;
+};
+/**
+ * Mounts its children once they get close to the viewport, or in the background when the
+ * browser is idle, then keeps them mounted. Rendering every field of a large content type
+ * upfront is what makes the edit view slow: the cost of the first render should depend on
+ * the screen, not on the size of the model.
+ */ const LazyFormRow = ({ fields, mountImmediately = false, children })=>{
+    const scheduleMount = React__namespace.useContext(IdleMountContext);
+    const placeholderRef = React__namespace.useRef(null);
+    const [isVisible, setIsVisible] = React__namespace.useState(()=>mountImmediately || typeof IntersectionObserver === 'undefined');
+    // A field in error has to be mounted so the error is displayed and can receive the focus.
+    const hasError = strapiAdmin.useForm('LazyFormRow', (state)=>fields.some(({ name })=>name in state.errors));
+    // Once mounted for an error, the row stays mounted when the errors are cleared (every
+    // validation starts by clearing them), so its state (e.g. open blocks) is preserved.
+    React__namespace.useEffect(()=>{
+        if (hasError) {
+            setIsVisible(true);
+        }
+    }, [
+        hasError
+    ]);
+    const shouldMount = isVisible || hasError;
+    React__namespace.useEffect(()=>{
+        const placeholder = placeholderRef.current;
+        if (shouldMount || !placeholder) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries)=>{
+            if (entries.some((entry)=>entry.isIntersecting)) {
+                setIsVisible(true);
+            }
+        }, {
+            root: useHasBeenNearViewport.getScrollParent(placeholder),
+            rootMargin: useHasBeenNearViewport.NEAR_VIEWPORT_MARGIN
+        });
+        observer.observe(placeholder);
+        // Low priority: user input interrupts the render of a row mounted in the background.
+        const cancelIdleMount = scheduleMount?.(()=>React__namespace.startTransition(()=>{
+                setIsVisible(true);
+            }));
+        return ()=>{
+            observer.disconnect();
+            cancelIdleMount?.();
+        };
+    }, [
+        shouldMount,
+        scheduleMount
+    ]);
+    if (shouldMount) {
+        return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: children
+        });
+    }
+    const height = Math.max(...fields.map(({ type })=>ESTIMATED_HEIGHT[type] ?? DEFAULT_ESTIMATED_HEIGHT));
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ref: placeholderRef,
+        style: {
+            height
+        },
+        "aria-hidden": true
+    });
+};
 const ResponsiveGridRoot = styledComponents.styled(designSystem.Grid.Root)`
   container-type: inline-size;
 `;
@@ -55,6 +190,7 @@ const panelStyles = {
 };
 const FormLayout = /*#__PURE__*/ React__namespace.memo(({ layout, document, hasBackground = true })=>{
     const { formatMessage } = reactIntl.useIntl();
+    const scheduleMount = useIdleMountQueue();
     const modelUid = document.schema?.uid;
     const getLabel = (name, label)=>{
         return formatMessage({
@@ -62,61 +198,74 @@ const FormLayout = /*#__PURE__*/ React__namespace.memo(({ layout, document, hasB
             defaultMessage: label
         });
     };
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-        direction: "column",
-        alignItems: "stretch",
-        gap: 6,
-        children: layout.map((panel)=>{
-            if (panel.some((row)=>row.some((field)=>field.type === 'dynamiczone'))) {
-                const [row] = panel;
-                const [field] = row;
-                return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
-                    gap: 4,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
-                        col: 12,
-                        s: 12,
-                        xs: 12,
+    return /*#__PURE__*/ jsxRuntime.jsx(IdleMountContext.Provider, {
+        value: scheduleMount,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 6,
+            children: layout.map((panel)=>{
+                if (panel.some((row)=>row.some((field)=>field.type === 'dynamiczone'))) {
+                    const [row] = panel;
+                    const [field] = row;
+                    return /*#__PURE__*/ jsxRuntime.jsx(LazyFormRow, {
+                        fields: [
+                            field
+                        ],
+                        mountImmediately: hasMountSideEffects(field.attribute, document.components),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                            gap: 4,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                col: 12,
+                                s: 12,
+                                xs: 12,
+                                direction: "column",
+                                alignItems: "stretch",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
+                                    ...field,
+                                    label: getLabel(field.name, field.label),
+                                    document: document
+                                })
+                            })
+                        })
+                    }, field.name);
+                }
+                return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    ...hasBackground && panelStyles,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                         direction: "column",
                         alignItems: "stretch",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
-                            ...field,
-                            label: getLabel(field.name, field.label),
-                            document: document
-                        })
-                    })
-                }, field.name);
-            }
-            return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                ...hasBackground && panelStyles,
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                    direction: "column",
-                    alignItems: "stretch",
-                    gap: 6,
-                    children: panel.map((row)=>{
-                        return /*#__PURE__*/ jsxRuntime.jsx(ResponsiveGridRoot, {
-                            gap: {
-                                initial: 6,
-                                medium: 4
-                            },
-                            children: row.map(({ size, ...field })=>{
-                                return /*#__PURE__*/ jsxRuntime.jsx(ResponsiveGridItem, {
-                                    col: size,
-                                    s: 12,
-                                    xs: 12,
-                                    direction: "column",
-                                    alignItems: "stretch",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
-                                        ...field,
-                                        size: size,
-                                        label: getLabel(field.name, field.label),
-                                        document: document
+                        gap: 6,
+                        children: panel.map((row)=>{
+                            return /*#__PURE__*/ jsxRuntime.jsx(LazyFormRow, {
+                                fields: row,
+                                mountImmediately: row.some((field)=>hasMountSideEffects(field.attribute, document.components)),
+                                children: /*#__PURE__*/ jsxRuntime.jsx(ResponsiveGridRoot, {
+                                    gap: {
+                                        initial: 6,
+                                        medium: 4
+                                    },
+                                    children: row.map(({ size, ...field })=>{
+                                        return /*#__PURE__*/ jsxRuntime.jsx(ResponsiveGridItem, {
+                                            col: size,
+                                            s: 12,
+                                            xs: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
+                                                ...field,
+                                                size: size,
+                                                label: getLabel(field.name, field.label),
+                                                document: document
+                                            })
+                                        }, field.name);
                                     })
-                                }, field.name);
-                            })
-                        }, row.map((field)=>field.name).join('.'));
+                                })
+                            }, row.map((field)=>field.name).join('.'));
+                        })
                     })
-                })
-            }, panel.flatMap((row)=>row.map((field)=>field.name)).join('.'));
+                }, panel.flatMap((row)=>row.map((field)=>field.name)).join('.'));
+            })
         })
     });
 });
@@ -125,4 +274,5 @@ FormLayout.displayName = 'FormLayout';
 exports.FormLayout = FormLayout;
 exports.ResponsiveGridItem = ResponsiveGridItem;
 exports.ResponsiveGridRoot = ResponsiveGridRoot;
+exports.hasMountSideEffects = hasMountSideEffects;
 //# sourceMappingURL=FormLayout.js.map

package/dist/admin/pages/EditView/components/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, BoxProps, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\n\nimport { InputRenderer } from './InputRenderer';\n\nimport type { UseDocument } from '../../../hooks/useDocument';\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem =\n  /**\n   * TODO:\n   * JSDOM cannot handle container queries.\n   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n   * for failing to parse the stylesheet.\n   */\n  process.env.NODE_ENV !== 'test'\n    ? styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n        ${({ theme }) => theme.breakpoints.medium} {\n          ${({ col }) => col && `grid-column: span ${col};`}\n        }\n      `\n    : styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n      `;\n\nconst panelStyles = {\n  padding: {\n    initial: 4,\n    medium: 6,\n  },\n  borderColor: 'neutral150',\n  background: 'neutral0',\n  hasRadius: true,\n  shadow: 'tableShadow',\n} satisfies BoxProps;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n  document: ReturnType<UseDocument>;\n}\n\nconst FormLayout = React.memo(({ layout, document, hasBackground = true }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const modelUid = document.schema?.uid;\n\n  const getLabel = (name: string, label: string) => {\n    return formatMessage({\n      id: `content-manager.content-types.${modelUid}.${name}`,\n      defaultMessage: label,\n    });\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n      {layout.map((panel) => {\n        if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n          const [row] = panel;\n          const [field] = row;\n\n          return (\n            <Grid.Root key={field.name} gap={4}>\n              <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <InputRenderer\n                  {...field}\n                  label={getLabel(field.name, field.label)}\n                  document={document}\n                />\n              </Grid.Item>\n            </Grid.Root>\n          );\n        }\n\n        return (\n          <Box\n            key={panel.flatMap((row) => row.map((field) => field.name)).join('.')}\n            {...(hasBackground && panelStyles)}\n          >\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n              {panel.map((row) => {\n                return (\n                  <ResponsiveGridRoot\n                    key={row.map((field) => field.name).join('.')}\n                    gap={{ initial: 6, medium: 4 }}\n                  >\n                    {row.map(({ size, ...field }) => {\n                      return (\n                        <ResponsiveGridItem\n                          col={size}\n                          key={field.name}\n                          s={12}\n                          xs={12}\n                          direction=\"column\"\n                          alignItems=\"stretch\"\n                        >\n                          <InputRenderer\n                            {...field}\n                            size={size}\n                            label={getLabel(field.name, field.label)}\n                            document={document}\n                          />\n                        </ResponsiveGridItem>\n                      );\n                    })}\n                  </ResponsiveGridRoot>\n                );\n              })}\n            </Flex>\n          </Box>\n        );\n      })}\n    </Flex>\n  );\n});\n\nFormLayout.displayName = 'FormLayout';\n\nexport { FormLayout, FormLayoutProps };\n"],"names":["ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","process","env","NODE_ENV","Item","theme","breakpoints","medium","col","panelStyles","padding","initial","borderColor","background","hasRadius","shadow","FormLayout","React","memo","layout","document","hasBackground","formatMessage","useIntl","modelUid","schema","uid","getLabel","name","label","id","defaultMessage","_jsx","Flex","direction","alignItems","gap","map","panel","some","row","field","type","s","xs","InputRenderer","Box","size","join","flatMap","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAYaA,kBAAAA,GAAqBC,uBAAAA,CAAOC,iBAAAA,CAAKC,IAAI,CAAC;;AAEnD;MAEaC,kBAAAA;;;;;MAOXC,OAAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,SACrBN,uBAAAA,CAAOC,iBAAAA,CAAKM,IAAI,CAAkB;;QAEhC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;AACxC,UAAA,EAAE,CAAC,EAAEC,GAAG,EAAE,GAAKA,GAAAA,IAAO,CAAC,kBAAkB,EAAEA,GAAAA,CAAI,CAAC,CAAC;;AAErD,MAAA,CAAC,GACDX,uBAAAA,CAAOC,iBAAAA,CAAKM,IAAI,CAAkB;;AAElC,MAAA;AAEN,MAAMK,WAAAA,GAAc;IAClBC,OAAAA,EAAS;QACPC,OAAAA,EAAS,CAAA;QACTJ,MAAAA,EAAQ;AACV,KAAA;IACAK,WAAAA,EAAa,YAAA;IACbC,UAAAA,EAAY,UAAA;IACZC,SAAAA,EAAW,IAAA;IACXC,MAAAA,EAAQ;AACV,CAAA;AAOA,MAAMC,UAAAA,iBAAaC,gBAAAA,CAAMC,IAAI,CAAC,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAAA,GAAgB,IAAI,EAAmB,GAAA;IACxF,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,QAAAA,GAAWJ,QAAAA,CAASK,MAAM,EAAEC,GAAAA;IAElC,MAAMC,QAAAA,GAAW,CAACC,IAAAA,EAAcC,KAAAA,GAAAA;AAC9B,QAAA,OAAOP,aAAAA,CAAc;AACnBQ,YAAAA,EAAAA,EAAI,CAAC,8BAA8B,EAAEN,QAAAA,CAAS,CAAC,EAAEI,IAAAA,CAAAA,CAAM;YACvDG,cAAAA,EAAgBF;AAClB,SAAA,CAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEG,cAAA,CAACC,iBAAAA,EAAAA;QAAKC,SAAAA,EAAU,QAAA;QAASC,UAAAA,EAAW,SAAA;QAAUC,GAAAA,EAAK,CAAA;kBAChDjB,MAAAA,CAAOkB,GAAG,CAAC,CAACC,KAAAA,GAAAA;AACX,YAAA,IAAIA,KAAAA,CAAMC,IAAI,CAAC,CAACC,GAAAA,GAAQA,GAAAA,CAAID,IAAI,CAAC,CAACE,KAAAA,GAAUA,KAAAA,CAAMC,IAAI,KAAK,aAAA,CAAA,CAAA,EAAiB;gBAC1E,MAAM,CAACF,IAAI,GAAGF,KAAAA;gBACd,MAAM,CAACG,MAAM,GAAGD,GAAAA;gBAEhB,qBACER,cAAA,CAAClC,kBAAKC,IAAI,EAAA;oBAAkBqC,GAAAA,EAAK,CAAA;4CAC/BJ,cAAA,CAAClC,kBAAKM,IAAI,EAAA;wBAACI,GAAAA,EAAK,EAAA;wBAAImC,CAAAA,EAAG,EAAA;wBAAIC,EAAAA,EAAI,EAAA;wBAAIV,SAAAA,EAAU,QAAA;wBAASC,UAAAA,EAAW,SAAA;AAC/D,wBAAA,QAAA,gBAAAH,cAAA,CAACa,2BAAAA,EAAAA;AACE,4BAAA,GAAGJ,KAAK;AACTZ,4BAAAA,KAAAA,EAAOF,QAAAA,CAASc,KAAAA,CAAMb,IAAI,EAAEa,MAAMZ,KAAK,CAAA;4BACvCT,QAAAA,EAAUA;;;AALAqB,iBAAAA,EAAAA,KAAAA,CAAMb,IAAI,CAAA;AAU9B,YAAA;AAEA,YAAA,qBACEI,cAAA,CAACc,gBAAAA,EAAAA;AAEE,gBAAA,GAAIzB,iBAAiBZ,WAAW;AAEjC,gBAAA,QAAA,gBAAAuB,cAAA,CAACC,iBAAAA,EAAAA;oBAAKC,SAAAA,EAAU,QAAA;oBAASC,UAAAA,EAAW,SAAA;oBAAUC,GAAAA,EAAK,CAAA;8BAChDE,KAAAA,CAAMD,GAAG,CAAC,CAACG,GAAAA,GAAAA;AACV,wBAAA,qBACER,cAAA,CAACpC,kBAAAA,EAAAA;4BAECwC,GAAAA,EAAK;gCAAEzB,OAAAA,EAAS,CAAA;gCAAGJ,MAAAA,EAAQ;AAAE,6BAAA;AAE5BiC,4BAAAA,QAAAA,EAAAA,GAAAA,CAAIH,GAAG,CAAC,CAAC,EAAEU,IAAI,EAAE,GAAGN,KAAAA,EAAO,GAAA;AAC1B,gCAAA,qBACET,cAAA,CAAChC,kBAAAA,EAAAA;oCACCQ,GAAAA,EAAKuC,IAAAA;oCAELJ,CAAAA,EAAG,EAAA;oCACHC,EAAAA,EAAI,EAAA;oCACJV,SAAAA,EAAU,QAAA;oCACVC,UAAAA,EAAW,SAAA;AAEX,oCAAA,QAAA,gBAAAH,cAAA,CAACa,2BAAAA,EAAAA;AACE,wCAAA,GAAGJ,KAAK;wCACTM,IAAAA,EAAMA,IAAAA;AACNlB,wCAAAA,KAAAA,EAAOF,QAAAA,CAASc,KAAAA,CAAMb,IAAI,EAAEa,MAAMZ,KAAK,CAAA;wCACvCT,QAAAA,EAAUA;;AAVPqB,iCAAAA,EAAAA,KAAAA,CAAMb,IAAI,CAAA;AAcrB,4BAAA,CAAA;2BArBKY,GAAAA,CAAIH,GAAG,CAAC,CAACI,KAAAA,GAAUA,MAAMb,IAAI,CAAA,CAAEoB,IAAI,CAAC,GAAA,CAAA,CAAA;AAwB/C,oBAAA,CAAA;;AA/BGV,aAAAA,EAAAA,KAAAA,CAAMW,OAAO,CAAC,CAACT,GAAAA,GAAQA,GAAAA,CAAIH,GAAG,CAAC,CAACI,KAAAA,GAAUA,KAAAA,CAAMb,IAAI,CAAA,CAAA,CAAGoB,IAAI,CAAC,GAAA,CAAA,CAAA;AAmCvE,QAAA,CAAA;;AAGN,CAAA;AAEAhC,UAAAA,CAAWkC,WAAW,GAAG,YAAA;;;;;;"}
+{"version":3,"file":"FormLayout.js","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm } from '@strapi/admin/strapi-admin';\nimport { Box, BoxProps, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\nimport { NEAR_VIEWPORT_MARGIN, getScrollParent } from '../../../hooks/useHasBeenNearViewport';\n\nimport { InputRenderer } from './InputRenderer';\n\nimport type { UseDocument } from '../../../hooks/useDocument';\n\n/* -------------------------------------------------------------------------------------------------\n * LazyFormRow\n * -----------------------------------------------------------------------------------------------*/\n\ntype LayoutField = EditLayout['layout'][number][number][number];\n\n/**\n * Rough rendered heights, only used to size placeholders so the scrollbar stays sensible.\n */\nconst ESTIMATED_HEIGHT: Partial<Record<LayoutField['type'], number>> = {\n  richtext: 320,\n  blocks: 320,\n  json: 240,\n  component: 240,\n  dynamiczone: 160,\n  relation: 120,\n  media: 160,\n  text: 120,\n};\nconst DEFAULT_ESTIMATED_HEIGHT = 80;\n\n/* -------------------------------------------------------------------------------------------------\n * Idle mount queue\n * -----------------------------------------------------------------------------------------------*/\n\ntype ScheduleMount = (mount: () => void) => () => void;\n\ninterface IdleMountQueue {\n  schedule: ScheduleMount;\n  dispose: () => void;\n}\n\nconst requestIdle = (callback: () => void): number =>\n  typeof window.requestIdleCallback === 'function'\n    ? window.requestIdleCallback(callback, { timeout: 2000 })\n    : window.setTimeout(callback, 16);\n\nconst cancelIdle = (handle: number) =>\n  typeof window.cancelIdleCallback === 'function'\n    ? window.cancelIdleCallback(handle)\n    : window.clearTimeout(handle);\n\n/**\n * Mounts the rows that weren't needed for the first paint, one per idle period, in the order\n * they were scheduled (top to bottom). Rows are then already rendered when the user scrolls to\n * them, and the browser search finds every field.\n */\nconst createIdleMountQueue = (): IdleMountQueue => {\n  let queue: Array<() => void> = [];\n  let handle: number | null = null;\n\n  const flush = () => {\n    handle = null;\n    queue.shift()?.();\n\n    if (queue.length > 0) {\n      handle = requestIdle(flush);\n    }\n  };\n\n  return {\n    schedule: (mount) => {\n      queue.push(mount);\n\n      if (handle === null) {\n        handle = requestIdle(flush);\n      }\n\n      return () => {\n        queue = queue.filter((scheduled) => scheduled !== mount);\n      };\n    },\n    dispose: () => {\n      queue = [];\n\n      if (handle !== null) {\n        cancelIdle(handle);\n        handle = null;\n      }\n    },\n  };\n};\n\nconst IdleMountContext = React.createContext<ScheduleMount | null>(null);\n\nconst useIdleMountQueue = () => {\n  const [queue] = React.useState(createIdleMountQueue);\n\n  React.useEffect(() => queue.dispose, [queue]);\n\n  return queue.schedule;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LazyFormRow\n * -----------------------------------------------------------------------------------------------*/\n\ntype Components = ReturnType<UseDocument>['components'];\ntype Attribute = LayoutField['attribute'];\n\n/**\n * Some inputs set a value when they mount: a required UID fetches its default value, and custom\n * fields may set a default. Their rows are mounted with the page, as they always were, so that\n * saving right after the page loads doesn't miss those values. Non-repeatable components are\n * expanded by default, so the inputs they contain count too.\n */\nconst hasMountSideEffects = (attribute: Attribute, components: Components, depth = 0): boolean => {\n  if ((attribute.type === 'uid' && attribute.required) || 'customField' in attribute) {\n    return true;\n  }\n\n  if (attribute.type === 'component' && !attribute.repeatable && depth < 10) {\n    return Object.values(components[attribute.component]?.attributes ?? {}).some((nested) =>\n      hasMountSideEffects(nested as Attribute, components, depth + 1)\n    );\n  }\n\n  return false;\n};\n\ninterface LazyFormRowProps {\n  fields: Pick<LayoutField, 'name' | 'type'>[];\n  mountImmediately?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Mounts its children once they get close to the viewport, or in the background when the\n * browser is idle, then keeps them mounted. Rendering every field of a large content type\n * upfront is what makes the edit view slow: the cost of the first render should depend on\n * the screen, not on the size of the model.\n */\nconst LazyFormRow = ({ fields, mountImmediately = false, children }: LazyFormRowProps) => {\n  const scheduleMount = React.useContext(IdleMountContext);\n  const placeholderRef = React.useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = React.useState(\n    () => mountImmediately || typeof IntersectionObserver === 'undefined'\n  );\n\n  // A field in error has to be mounted so the error is displayed and can receive the focus.\n  const hasError = useForm('LazyFormRow', (state) =>\n    fields.some(({ name }) => name in state.errors)\n  );\n\n  // Once mounted for an error, the row stays mounted when the errors are cleared (every\n  // validation starts by clearing them), so its state (e.g. open blocks) is preserved.\n  React.useEffect(() => {\n    if (hasError) {\n      setIsVisible(true);\n    }\n  }, [hasError]);\n\n  const shouldMount = isVisible || hasError;\n\n  React.useEffect(() => {\n    const placeholder = placeholderRef.current;\n\n    if (shouldMount || !placeholder) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setIsVisible(true);\n        }\n      },\n      { root: getScrollParent(placeholder), rootMargin: NEAR_VIEWPORT_MARGIN }\n    );\n\n    observer.observe(placeholder);\n\n    // Low priority: user input interrupts the render of a row mounted in the background.\n    const cancelIdleMount = scheduleMount?.(() =>\n      React.startTransition(() => {\n        setIsVisible(true);\n      })\n    );\n\n    return () => {\n      observer.disconnect();\n      cancelIdleMount?.();\n    };\n  }, [shouldMount, scheduleMount]);\n\n  if (shouldMount) {\n    return <>{children}</>;\n  }\n\n  const height = Math.max(\n    ...fields.map(({ type }) => ESTIMATED_HEIGHT[type] ?? DEFAULT_ESTIMATED_HEIGHT)\n  );\n\n  return <div ref={placeholderRef} style={{ height }} aria-hidden />;\n};\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem =\n  /**\n   * TODO:\n   * JSDOM cannot handle container queries.\n   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n   * for failing to parse the stylesheet.\n   */\n  process.env.NODE_ENV !== 'test'\n    ? styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n        ${({ theme }) => theme.breakpoints.medium} {\n          ${({ col }) => col && `grid-column: span ${col};`}\n        }\n      `\n    : styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n      `;\n\nconst panelStyles = {\n  padding: {\n    initial: 4,\n    medium: 6,\n  },\n  borderColor: 'neutral150',\n  background: 'neutral0',\n  hasRadius: true,\n  shadow: 'tableShadow',\n} satisfies BoxProps;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n  document: ReturnType<UseDocument>;\n}\n\nconst FormLayout = React.memo(({ layout, document, hasBackground = true }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const scheduleMount = useIdleMountQueue();\n  const modelUid = document.schema?.uid;\n\n  const getLabel = (name: string, label: string) => {\n    return formatMessage({\n      id: `content-manager.content-types.${modelUid}.${name}`,\n      defaultMessage: label,\n    });\n  };\n\n  return (\n    <IdleMountContext.Provider value={scheduleMount}>\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n        {layout.map((panel) => {\n          if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n            const [row] = panel;\n            const [field] = row;\n\n            return (\n              <LazyFormRow\n                key={field.name}\n                fields={[field]}\n                mountImmediately={hasMountSideEffects(field.attribute, document.components)}\n              >\n                <Grid.Root gap={4}>\n                  <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                    <InputRenderer\n                      {...field}\n                      label={getLabel(field.name, field.label)}\n                      document={document}\n                    />\n                  </Grid.Item>\n                </Grid.Root>\n              </LazyFormRow>\n            );\n          }\n\n          return (\n            <Box\n              key={panel.flatMap((row) => row.map((field) => field.name)).join('.')}\n              {...(hasBackground && panelStyles)}\n            >\n              <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n                {panel.map((row) => {\n                  return (\n                    <LazyFormRow\n                      key={row.map((field) => field.name).join('.')}\n                      fields={row}\n                      mountImmediately={row.some((field) =>\n                        hasMountSideEffects(field.attribute, document.components)\n                      )}\n                    >\n                      <ResponsiveGridRoot gap={{ initial: 6, medium: 4 }}>\n                        {row.map(({ size, ...field }) => {\n                          return (\n                            <ResponsiveGridItem\n                              col={size}\n                              key={field.name}\n                              s={12}\n                              xs={12}\n                              direction=\"column\"\n                              alignItems=\"stretch\"\n                            >\n                              <InputRenderer\n                                {...field}\n                                size={size}\n                                label={getLabel(field.name, field.label)}\n                                document={document}\n                              />\n                            </ResponsiveGridItem>\n                          );\n                        })}\n                      </ResponsiveGridRoot>\n                    </LazyFormRow>\n                  );\n                })}\n              </Flex>\n            </Box>\n          );\n        })}\n      </Flex>\n    </IdleMountContext.Provider>\n  );\n});\n\nFormLayout.displayName = 'FormLayout';\n\nexport { FormLayout, FormLayoutProps, hasMountSideEffects };\n"],"names":["ESTIMATED_HEIGHT","richtext","blocks","json","component","dynamiczone","relation","media","text","DEFAULT_ESTIMATED_HEIGHT","requestIdle","callback","window","requestIdleCallback","timeout","setTimeout","cancelIdle","handle","cancelIdleCallback","clearTimeout","createIdleMountQueue","queue","flush","shift","length","schedule","mount","push","filter","scheduled","dispose","IdleMountContext","React","createContext","useIdleMountQueue","useState","useEffect","hasMountSideEffects","attribute","components","depth","type","required","repeatable","Object","values","attributes","some","nested","LazyFormRow","fields","mountImmediately","children","scheduleMount","useContext","placeholderRef","useRef","isVisible","setIsVisible","IntersectionObserver","hasError","useForm","state","name","errors","shouldMount","placeholder","current","observer","entries","entry","isIntersecting","root","getScrollParent","rootMargin","NEAR_VIEWPORT_MARGIN","observe","cancelIdleMount","startTransition","disconnect","_jsx","_Fragment","height","Math","max","map","div","ref","style","aria-hidden","ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","process","env","NODE_ENV","Item","theme","breakpoints","medium","col","panelStyles","padding","initial","borderColor","background","hasRadius","shadow","FormLayout","memo","layout","document","hasBackground","formatMessage","useIntl","modelUid","schema","uid","getLabel","label","id","defaultMessage","Provider","value","Flex","direction","alignItems","gap","panel","row","field","s","xs","InputRenderer","Box","size","join","flatMap","displayName"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormLayout.mjs

@@ -1,10 +1,145 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
+import { useForm } from '@strapi/admin/strapi-admin';
 import { Grid, Flex, Box } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
+import { NEAR_VIEWPORT_MARGIN, getScrollParent } from '../../../hooks/useHasBeenNearViewport.mjs';
 import { InputRenderer as MemoizedInputRenderer } from './InputRenderer.mjs';
 
+/**
+ * Rough rendered heights, only used to size placeholders so the scrollbar stays sensible.
+ */ const ESTIMATED_HEIGHT = {
+    richtext: 320,
+    blocks: 320,
+    json: 240,
+    component: 240,
+    dynamiczone: 160,
+    relation: 120,
+    media: 160,
+    text: 120
+};
+const DEFAULT_ESTIMATED_HEIGHT = 80;
+const requestIdle = (callback)=>typeof window.requestIdleCallback === 'function' ? window.requestIdleCallback(callback, {
+        timeout: 2000
+    }) : window.setTimeout(callback, 16);
+const cancelIdle = (handle)=>typeof window.cancelIdleCallback === 'function' ? window.cancelIdleCallback(handle) : window.clearTimeout(handle);
+/**
+ * Mounts the rows that weren't needed for the first paint, one per idle period, in the order
+ * they were scheduled (top to bottom). Rows are then already rendered when the user scrolls to
+ * them, and the browser search finds every field.
+ */ const createIdleMountQueue = ()=>{
+    let queue = [];
+    let handle = null;
+    const flush = ()=>{
+        handle = null;
+        queue.shift()?.();
+        if (queue.length > 0) {
+            handle = requestIdle(flush);
+        }
+    };
+    return {
+        schedule: (mount)=>{
+            queue.push(mount);
+            if (handle === null) {
+                handle = requestIdle(flush);
+            }
+            return ()=>{
+                queue = queue.filter((scheduled)=>scheduled !== mount);
+            };
+        },
+        dispose: ()=>{
+            queue = [];
+            if (handle !== null) {
+                cancelIdle(handle);
+                handle = null;
+            }
+        }
+    };
+};
+const IdleMountContext = /*#__PURE__*/ React.createContext(null);
+const useIdleMountQueue = ()=>{
+    const [queue] = React.useState(createIdleMountQueue);
+    React.useEffect(()=>queue.dispose, [
+        queue
+    ]);
+    return queue.schedule;
+};
+/**
+ * Some inputs set a value when they mount: a required UID fetches its default value, and custom
+ * fields may set a default. Their rows are mounted with the page, as they always were, so that
+ * saving right after the page loads doesn't miss those values. Non-repeatable components are
+ * expanded by default, so the inputs they contain count too.
+ */ const hasMountSideEffects = (attribute, components, depth = 0)=>{
+    if (attribute.type === 'uid' && attribute.required || 'customField' in attribute) {
+        return true;
+    }
+    if (attribute.type === 'component' && !attribute.repeatable && depth < 10) {
+        return Object.values(components[attribute.component]?.attributes ?? {}).some((nested)=>hasMountSideEffects(nested, components, depth + 1));
+    }
+    return false;
+};
+/**
+ * Mounts its children once they get close to the viewport, or in the background when the
+ * browser is idle, then keeps them mounted. Rendering every field of a large content type
+ * upfront is what makes the edit view slow: the cost of the first render should depend on
+ * the screen, not on the size of the model.
+ */ const LazyFormRow = ({ fields, mountImmediately = false, children })=>{
+    const scheduleMount = React.useContext(IdleMountContext);
+    const placeholderRef = React.useRef(null);
+    const [isVisible, setIsVisible] = React.useState(()=>mountImmediately || typeof IntersectionObserver === 'undefined');
+    // A field in error has to be mounted so the error is displayed and can receive the focus.
+    const hasError = useForm('LazyFormRow', (state)=>fields.some(({ name })=>name in state.errors));
+    // Once mounted for an error, the row stays mounted when the errors are cleared (every
+    // validation starts by clearing them), so its state (e.g. open blocks) is preserved.
+    React.useEffect(()=>{
+        if (hasError) {
+            setIsVisible(true);
+        }
+    }, [
+        hasError
+    ]);
+    const shouldMount = isVisible || hasError;
+    React.useEffect(()=>{
+        const placeholder = placeholderRef.current;
+        if (shouldMount || !placeholder) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries)=>{
+            if (entries.some((entry)=>entry.isIntersecting)) {
+                setIsVisible(true);
+            }
+        }, {
+            root: getScrollParent(placeholder),
+            rootMargin: NEAR_VIEWPORT_MARGIN
+        });
+        observer.observe(placeholder);
+        // Low priority: user input interrupts the render of a row mounted in the background.
+        const cancelIdleMount = scheduleMount?.(()=>React.startTransition(()=>{
+                setIsVisible(true);
+            }));
+        return ()=>{
+            observer.disconnect();
+            cancelIdleMount?.();
+        };
+    }, [
+        shouldMount,
+        scheduleMount
+    ]);
+    if (shouldMount) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
+    const height = Math.max(...fields.map(({ type })=>ESTIMATED_HEIGHT[type] ?? DEFAULT_ESTIMATED_HEIGHT));
+    return /*#__PURE__*/ jsx("div", {
+        ref: placeholderRef,
+        style: {
+            height
+        },
+        "aria-hidden": true
+    });
+};
 const ResponsiveGridRoot = styled(Grid.Root)`
   container-type: inline-size;
 `;
@@ -33,6 +168,7 @@ const panelStyles = {
 };
 const FormLayout = /*#__PURE__*/ React.memo(({ layout, document, hasBackground = true })=>{
     const { formatMessage } = useIntl();
+    const scheduleMount = useIdleMountQueue();
     const modelUid = document.schema?.uid;
     const getLabel = (name, label)=>{
         return formatMessage({
@@ -40,65 +176,78 @@ const FormLayout = /*#__PURE__*/ React.memo(({ layout, document, hasBackground =
             defaultMessage: label
         });
     };
-    return /*#__PURE__*/ jsx(Flex, {
-        direction: "column",
-        alignItems: "stretch",
-        gap: 6,
-        children: layout.map((panel)=>{
-            if (panel.some((row)=>row.some((field)=>field.type === 'dynamiczone'))) {
-                const [row] = panel;
-                const [field] = row;
-                return /*#__PURE__*/ jsx(Grid.Root, {
-                    gap: 4,
-                    children: /*#__PURE__*/ jsx(Grid.Item, {
-                        col: 12,
-                        s: 12,
-                        xs: 12,
+    return /*#__PURE__*/ jsx(IdleMountContext.Provider, {
+        value: scheduleMount,
+        children: /*#__PURE__*/ jsx(Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 6,
+            children: layout.map((panel)=>{
+                if (panel.some((row)=>row.some((field)=>field.type === 'dynamiczone'))) {
+                    const [row] = panel;
+                    const [field] = row;
+                    return /*#__PURE__*/ jsx(LazyFormRow, {
+                        fields: [
+                            field
+                        ],
+                        mountImmediately: hasMountSideEffects(field.attribute, document.components),
+                        children: /*#__PURE__*/ jsx(Grid.Root, {
+                            gap: 4,
+                            children: /*#__PURE__*/ jsx(Grid.Item, {
+                                col: 12,
+                                s: 12,
+                                xs: 12,
+                                direction: "column",
+                                alignItems: "stretch",
+                                children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                                    ...field,
+                                    label: getLabel(field.name, field.label),
+                                    document: document
+                                })
+                            })
+                        })
+                    }, field.name);
+                }
+                return /*#__PURE__*/ jsx(Box, {
+                    ...hasBackground && panelStyles,
+                    children: /*#__PURE__*/ jsx(Flex, {
                         direction: "column",
                         alignItems: "stretch",
-                        children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
-                            ...field,
-                            label: getLabel(field.name, field.label),
-                            document: document
-                        })
-                    })
-                }, field.name);
-            }
-            return /*#__PURE__*/ jsx(Box, {
-                ...hasBackground && panelStyles,
-                children: /*#__PURE__*/ jsx(Flex, {
-                    direction: "column",
-                    alignItems: "stretch",
-                    gap: 6,
-                    children: panel.map((row)=>{
-                        return /*#__PURE__*/ jsx(ResponsiveGridRoot, {
-                            gap: {
-                                initial: 6,
-                                medium: 4
-                            },
-                            children: row.map(({ size, ...field })=>{
-                                return /*#__PURE__*/ jsx(ResponsiveGridItem, {
-                                    col: size,
-                                    s: 12,
-                                    xs: 12,
-                                    direction: "column",
-                                    alignItems: "stretch",
-                                    children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
-                                        ...field,
-                                        size: size,
-                                        label: getLabel(field.name, field.label),
-                                        document: document
+                        gap: 6,
+                        children: panel.map((row)=>{
+                            return /*#__PURE__*/ jsx(LazyFormRow, {
+                                fields: row,
+                                mountImmediately: row.some((field)=>hasMountSideEffects(field.attribute, document.components)),
+                                children: /*#__PURE__*/ jsx(ResponsiveGridRoot, {
+                                    gap: {
+                                        initial: 6,
+                                        medium: 4
+                                    },
+                                    children: row.map(({ size, ...field })=>{
+                                        return /*#__PURE__*/ jsx(ResponsiveGridItem, {
+                                            col: size,
+                                            s: 12,
+                                            xs: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                                                ...field,
+                                                size: size,
+                                                label: getLabel(field.name, field.label),
+                                                document: document
+                                            })
+                                        }, field.name);
                                     })
-                                }, field.name);
-                            })
-                        }, row.map((field)=>field.name).join('.'));
+                                })
+                            }, row.map((field)=>field.name).join('.'));
+                        })
                     })
-                })
-            }, panel.flatMap((row)=>row.map((field)=>field.name)).join('.'));
+                }, panel.flatMap((row)=>row.map((field)=>field.name)).join('.'));
+            })
         })
     });
 });
 FormLayout.displayName = 'FormLayout';
 
-export { FormLayout, ResponsiveGridItem, ResponsiveGridRoot };
+export { FormLayout, ResponsiveGridItem, ResponsiveGridRoot, hasMountSideEffects };
 //# sourceMappingURL=FormLayout.mjs.map