@strapi/content-manager 0.0.0-next.8c98bb4ad3e89fc5a3f45b1925795444d17042d6 → 0.0.0-next.8f0cdd4f9e4697ffed86c783465297fe532713f8

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+require('react');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
@@ -9,105 +9,56 @@ var styledComponents = require('styled-components');
 var translations = require('../../../../../utils/translations.js');
 var BlocksEditor = require('./BlocksEditor.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const CollapseIconButton = styledComponents.styled(designSystem.IconButton)`
-  position: absolute;
-  bottom: 1.2rem;
-  right: 1.2rem;
-`;
-const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
-  // Background with 20% opacity
-  background: ${({ theme })=>`${theme.colors.neutral800}1F`};
-`;
-const EditorLayout = ({ children, error, disabled, onCollapse, ariaDescriptionId })=>{
+const EditorLayout = ({ children, error, disabled, onToggleExpand, ariaDescriptionId })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { isExpandedMode } = BlocksEditor.useBlocksEditorContext('editorLayout');
-    React__namespace.useEffect(()=>{
-        if (isExpandedMode) {
-            document.body.classList.add('lock-body-scroll');
-        }
-        return ()=>{
-            document.body.classList.remove('lock-body-scroll');
-        };
-    }, [
-        isExpandedMode
-    ]);
-    if (isExpandedMode) {
-        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Portal, {
-            role: "dialog",
-            "aria-modal": false,
-            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.FocusTrap, {
-                onEscape: onCollapse,
-                children: /*#__PURE__*/ jsxRuntime.jsx(ExpandWrapper, {
-                    position: "fixed",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 4,
-                    justifyContent: "center",
-                    onClick: onCollapse,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                        background: "neutral0",
-                        hasRadius: true,
-                        shadow: "popupShadow",
-                        overflow: "hidden",
-                        width: "90%",
-                        height: "90%",
-                        onClick: (e)=>e.stopPropagation(),
-                        "aria-describedby": ariaDescriptionId,
-                        position: "relative",
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            height: "100%",
-                            alignItems: "flex-start",
-                            direction: "column",
-                            children: [
-                                children,
-                                /*#__PURE__*/ jsxRuntime.jsx(CollapseIconButton, {
-                                    label: formatMessage({
-                                        id: translations.getTranslation('components.Blocks.collapse'),
-                                        defaultMessage: 'Collapse'
-                                    }),
-                                    onClick: onCollapse,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
-                                })
-                            ]
-                        })
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            isExpandedMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
+                open: isExpandedMode,
+                onOpenChange: onToggleExpand,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
+                    style: {
+                        maxWidth: 'unset',
+                        width: 'unset'
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        height: "90vh",
+                        width: "90vw",
+                        alignItems: "flex-start",
+                        direction: "column",
+                        children: [
+                            children,
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                position: "absolute",
+                                bottom: "1.2rem",
+                                right: "1.2rem",
+                                shadow: "filterShadow",
+                                label: formatMessage({
+                                    id: translations.getTranslation('components.Blocks.collapse'),
+                                    defaultMessage: 'Collapse'
+                                }),
+                                onClick: onToggleExpand,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
+                            })
+                        ]
                     })
                 })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(InputWrapper, {
+                direction: "column",
+                alignItems: "flex-start",
+                height: "512px",
+                $disabled: disabled,
+                $hasError: Boolean(error),
+                style: {
+                    overflow: 'hidden'
+                },
+                "aria-describedby": ariaDescriptionId,
+                position: "relative",
+                children: !isExpandedMode && children
             })
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsx(InputWrapper, {
-        direction: "column",
-        alignItems: "flex-start",
-        height: "512px",
-        $disabled: disabled,
-        $hasError: Boolean(error),
-        style: {
-            overflow: 'hidden'
-        },
-        "aria-describedby": ariaDescriptionId,
-        position: "relative",
-        children: children
+        ]
     });
 };
 const InputWrapper = styledComponents.styled(designSystem.Flex)`

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, FocusTrap, Portal, IconButton, FlexComponent } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\nconst CollapseIconButton = styled(IconButton)`\n  position: absolute;\n  bottom: 1.2rem;\n  right: 1.2rem;\n`;\n\nconst ExpandWrapper = styled<FlexComponent>(Flex)`\n  // Background with 20% opacity\n  background: ${({ theme }) => `${theme.colors.neutral800}1F`};\n`;\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  error?: string;\n  onCollapse: () => void;\n  disabled: boolean;\n  ariaDescriptionId: string;\n}\n\nconst EditorLayout = ({\n  children,\n  error,\n  disabled,\n  onCollapse,\n  ariaDescriptionId,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n  React.useEffect(() => {\n    if (isExpandedMode) {\n      document.body.classList.add('lock-body-scroll');\n    }\n\n    return () => {\n      document.body.classList.remove('lock-body-scroll');\n    };\n  }, [isExpandedMode]);\n\n  if (isExpandedMode) {\n    return (\n      <Portal role=\"dialog\" aria-modal={false}>\n        <FocusTrap onEscape={onCollapse}>\n          <ExpandWrapper\n            position=\"fixed\"\n            top={0}\n            left={0}\n            right={0}\n            bottom={0}\n            zIndex={4}\n            justifyContent=\"center\"\n            onClick={onCollapse}\n          >\n            <Box<'div'>\n              background=\"neutral0\"\n              hasRadius\n              shadow=\"popupShadow\"\n              overflow=\"hidden\"\n              width=\"90%\"\n              height=\"90%\"\n              onClick={(e) => e.stopPropagation()}\n              aria-describedby={ariaDescriptionId}\n              position=\"relative\"\n            >\n              <Flex height=\"100%\" alignItems=\"flex-start\" direction=\"column\">\n                {children}\n                <CollapseIconButton\n                  label={formatMessage({\n                    id: getTranslation('components.Blocks.collapse'),\n                    defaultMessage: 'Collapse',\n                  })}\n                  onClick={onCollapse}\n                >\n                  <Collapse />\n                </CollapseIconButton>\n              </Flex>\n            </Box>\n          </ExpandWrapper>\n        </FocusTrap>\n      </Portal>\n    );\n  }\n\n  return (\n    <InputWrapper\n      direction=\"column\"\n      alignItems=\"flex-start\"\n      height=\"512px\"\n      $disabled={disabled}\n      $hasError={Boolean(error)}\n      style={{ overflow: 'hidden' }}\n      aria-describedby={ariaDescriptionId}\n      position=\"relative\"\n    >\n      {children}\n    </InputWrapper>\n  );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n  border: 1px solid\n    ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme, $hasError = false }) => css`\n    outline: none;\n    box-shadow: 0;\n    transition-property: border-color, box-shadow, fill;\n    transition-duration: 0.2s;\n\n    &:focus-within {\n      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n    }\n  `}\n\n  ${({ theme, $disabled }) =>\n    $disabled\n      ? css`\n          color: ${theme.colors.neutral600};\n          background: ${theme.colors.neutral150};\n        `\n      : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["CollapseIconButton","styled","IconButton","ExpandWrapper","Flex","theme","colors","neutral800","EditorLayout","children","error","disabled","onCollapse","ariaDescriptionId","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","React","useEffect","document","body","classList","add","remove","_jsx","Portal","role","aria-modal","FocusTrap","onEscape","position","top","left","right","bottom","zIndex","justifyContent","onClick","Box","background","hasRadius","shadow","overflow","width","height","e","stopPropagation","aria-describedby","_jsxs","alignItems","direction","label","id","getTranslation","defaultMessage","Collapse","InputWrapper","$disabled","$hasError","Boolean","style","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150","undefined"],"mappings":"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"}
+{"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, IconButton, FlexComponent, Modal } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  error?: string;\n  onToggleExpand: () => void;\n  disabled: boolean;\n  ariaDescriptionId: string;\n}\n\nconst EditorLayout = ({\n  children,\n  error,\n  disabled,\n  onToggleExpand,\n  ariaDescriptionId,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n  return (\n    <>\n      {isExpandedMode && (\n        <Modal.Root open={isExpandedMode} onOpenChange={onToggleExpand}>\n          <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n            <Flex height=\"90vh\" width=\"90vw\" alignItems=\"flex-start\" direction=\"column\">\n              {children}\n              <IconButton\n                position=\"absolute\"\n                bottom=\"1.2rem\"\n                right=\"1.2rem\"\n                shadow=\"filterShadow\"\n                label={formatMessage({\n                  id: getTranslation('components.Blocks.collapse'),\n                  defaultMessage: 'Collapse',\n                })}\n                onClick={onToggleExpand}\n              >\n                <Collapse />\n              </IconButton>\n            </Flex>\n          </Modal.Content>\n        </Modal.Root>\n      )}\n      <InputWrapper\n        direction=\"column\"\n        alignItems=\"flex-start\"\n        height=\"512px\"\n        $disabled={disabled}\n        $hasError={Boolean(error)}\n        style={{ overflow: 'hidden' }}\n        aria-describedby={ariaDescriptionId}\n        position=\"relative\"\n      >\n        {!isExpandedMode && children}\n      </InputWrapper>\n    </>\n  );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n  border: 1px solid\n    ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme, $hasError = false }) => css`\n    outline: none;\n    box-shadow: 0;\n    transition-property: border-color, box-shadow, fill;\n    transition-duration: 0.2s;\n\n    &:focus-within {\n      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n    }\n  `}\n\n  ${({ theme, $disabled }) =>\n    $disabled\n      ? css`\n          color: ${theme.colors.neutral600};\n          background: ${theme.colors.neutral150};\n        `\n      : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["EditorLayout","children","error","disabled","onToggleExpand","ariaDescriptionId","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","_jsxs","_Fragment","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","Flex","height","alignItems","direction","IconButton","position","bottom","right","shadow","label","id","getTranslation","defaultMessage","onClick","Collapse","InputWrapper","$disabled","$hasError","Boolean","overflow","aria-describedby","styled","theme","colors","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150","undefined"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.mjs

@@ -1,92 +1,62 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { IconButton, Flex, Portal, FocusTrap, Box } from '@strapi/design-system';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Flex, Modal, IconButton } from '@strapi/design-system';
 import { Collapse } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled, css } from 'styled-components';
 import { getTranslation } from '../../../../../utils/translations.mjs';
 import { useBlocksEditorContext } from './BlocksEditor.mjs';
 
-const CollapseIconButton = styled(IconButton)`
-  position: absolute;
-  bottom: 1.2rem;
-  right: 1.2rem;
-`;
-const ExpandWrapper = styled(Flex)`
-  // Background with 20% opacity
-  background: ${({ theme })=>`${theme.colors.neutral800}1F`};
-`;
-const EditorLayout = ({ children, error, disabled, onCollapse, ariaDescriptionId })=>{
+const EditorLayout = ({ children, error, disabled, onToggleExpand, ariaDescriptionId })=>{
     const { formatMessage } = useIntl();
     const { isExpandedMode } = useBlocksEditorContext('editorLayout');
-    React.useEffect(()=>{
-        if (isExpandedMode) {
-            document.body.classList.add('lock-body-scroll');
-        }
-        return ()=>{
-            document.body.classList.remove('lock-body-scroll');
-        };
-    }, [
-        isExpandedMode
-    ]);
-    if (isExpandedMode) {
-        return /*#__PURE__*/ jsx(Portal, {
-            role: "dialog",
-            "aria-modal": false,
-            children: /*#__PURE__*/ jsx(FocusTrap, {
-                onEscape: onCollapse,
-                children: /*#__PURE__*/ jsx(ExpandWrapper, {
-                    position: "fixed",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 4,
-                    justifyContent: "center",
-                    onClick: onCollapse,
-                    children: /*#__PURE__*/ jsx(Box, {
-                        background: "neutral0",
-                        hasRadius: true,
-                        shadow: "popupShadow",
-                        overflow: "hidden",
-                        width: "90%",
-                        height: "90%",
-                        onClick: (e)=>e.stopPropagation(),
-                        "aria-describedby": ariaDescriptionId,
-                        position: "relative",
-                        children: /*#__PURE__*/ jsxs(Flex, {
-                            height: "100%",
-                            alignItems: "flex-start",
-                            direction: "column",
-                            children: [
-                                children,
-                                /*#__PURE__*/ jsx(CollapseIconButton, {
-                                    label: formatMessage({
-                                        id: getTranslation('components.Blocks.collapse'),
-                                        defaultMessage: 'Collapse'
-                                    }),
-                                    onClick: onCollapse,
-                                    children: /*#__PURE__*/ jsx(Collapse, {})
-                                })
-                            ]
-                        })
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            isExpandedMode && /*#__PURE__*/ jsx(Modal.Root, {
+                open: isExpandedMode,
+                onOpenChange: onToggleExpand,
+                children: /*#__PURE__*/ jsx(Modal.Content, {
+                    style: {
+                        maxWidth: 'unset',
+                        width: 'unset'
+                    },
+                    children: /*#__PURE__*/ jsxs(Flex, {
+                        height: "90vh",
+                        width: "90vw",
+                        alignItems: "flex-start",
+                        direction: "column",
+                        children: [
+                            children,
+                            /*#__PURE__*/ jsx(IconButton, {
+                                position: "absolute",
+                                bottom: "1.2rem",
+                                right: "1.2rem",
+                                shadow: "filterShadow",
+                                label: formatMessage({
+                                    id: getTranslation('components.Blocks.collapse'),
+                                    defaultMessage: 'Collapse'
+                                }),
+                                onClick: onToggleExpand,
+                                children: /*#__PURE__*/ jsx(Collapse, {})
+                            })
+                        ]
                     })
                 })
+            }),
+            /*#__PURE__*/ jsx(InputWrapper, {
+                direction: "column",
+                alignItems: "flex-start",
+                height: "512px",
+                $disabled: disabled,
+                $hasError: Boolean(error),
+                style: {
+                    overflow: 'hidden'
+                },
+                "aria-describedby": ariaDescriptionId,
+                position: "relative",
+                children: !isExpandedMode && children
             })
-        });
-    }
-    return /*#__PURE__*/ jsx(InputWrapper, {
-        direction: "column",
-        alignItems: "flex-start",
-        height: "512px",
-        $disabled: disabled,
-        $hasError: Boolean(error),
-        style: {
-            overflow: 'hidden'
-        },
-        "aria-describedby": ariaDescriptionId,
-        position: "relative",
-        children: children
+        ]
     });
 };
 const InputWrapper = styled(Flex)`

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, FocusTrap, Portal, IconButton, FlexComponent } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\nconst CollapseIconButton = styled(IconButton)`\n  position: absolute;\n  bottom: 1.2rem;\n  right: 1.2rem;\n`;\n\nconst ExpandWrapper = styled<FlexComponent>(Flex)`\n  // Background with 20% opacity\n  background: ${({ theme }) => `${theme.colors.neutral800}1F`};\n`;\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  error?: string;\n  onCollapse: () => void;\n  disabled: boolean;\n  ariaDescriptionId: string;\n}\n\nconst EditorLayout = ({\n  children,\n  error,\n  disabled,\n  onCollapse,\n  ariaDescriptionId,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n  React.useEffect(() => {\n    if (isExpandedMode) {\n      document.body.classList.add('lock-body-scroll');\n    }\n\n    return () => {\n      document.body.classList.remove('lock-body-scroll');\n    };\n  }, [isExpandedMode]);\n\n  if (isExpandedMode) {\n    return (\n      <Portal role=\"dialog\" aria-modal={false}>\n        <FocusTrap onEscape={onCollapse}>\n          <ExpandWrapper\n            position=\"fixed\"\n            top={0}\n            left={0}\n            right={0}\n            bottom={0}\n            zIndex={4}\n            justifyContent=\"center\"\n            onClick={onCollapse}\n          >\n            <Box<'div'>\n              background=\"neutral0\"\n              hasRadius\n              shadow=\"popupShadow\"\n              overflow=\"hidden\"\n              width=\"90%\"\n              height=\"90%\"\n              onClick={(e) => e.stopPropagation()}\n              aria-describedby={ariaDescriptionId}\n              position=\"relative\"\n            >\n              <Flex height=\"100%\" alignItems=\"flex-start\" direction=\"column\">\n                {children}\n                <CollapseIconButton\n                  label={formatMessage({\n                    id: getTranslation('components.Blocks.collapse'),\n                    defaultMessage: 'Collapse',\n                  })}\n                  onClick={onCollapse}\n                >\n                  <Collapse />\n                </CollapseIconButton>\n              </Flex>\n            </Box>\n          </ExpandWrapper>\n        </FocusTrap>\n      </Portal>\n    );\n  }\n\n  return (\n    <InputWrapper\n      direction=\"column\"\n      alignItems=\"flex-start\"\n      height=\"512px\"\n      $disabled={disabled}\n      $hasError={Boolean(error)}\n      style={{ overflow: 'hidden' }}\n      aria-describedby={ariaDescriptionId}\n      position=\"relative\"\n    >\n      {children}\n    </InputWrapper>\n  );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n  border: 1px solid\n    ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme, $hasError = false }) => css`\n    outline: none;\n    box-shadow: 0;\n    transition-property: border-color, box-shadow, fill;\n    transition-duration: 0.2s;\n\n    &:focus-within {\n      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n    }\n  `}\n\n  ${({ theme, $disabled }) =>\n    $disabled\n      ? css`\n          color: ${theme.colors.neutral600};\n          background: ${theme.colors.neutral150};\n        `\n      : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["CollapseIconButton","styled","IconButton","ExpandWrapper","Flex","theme","colors","neutral800","EditorLayout","children","error","disabled","onCollapse","ariaDescriptionId","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","React","useEffect","document","body","classList","add","remove","_jsx","Portal","role","aria-modal","FocusTrap","onEscape","position","top","left","right","bottom","zIndex","justifyContent","onClick","Box","background","hasRadius","shadow","overflow","width","height","e","stopPropagation","aria-describedby","_jsxs","alignItems","direction","label","id","getTranslation","defaultMessage","Collapse","InputWrapper","$disabled","$hasError","Boolean","style","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150","undefined"],"mappings":"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"}
+{"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, IconButton, FlexComponent, Modal } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  error?: string;\n  onToggleExpand: () => void;\n  disabled: boolean;\n  ariaDescriptionId: string;\n}\n\nconst EditorLayout = ({\n  children,\n  error,\n  disabled,\n  onToggleExpand,\n  ariaDescriptionId,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n  return (\n    <>\n      {isExpandedMode && (\n        <Modal.Root open={isExpandedMode} onOpenChange={onToggleExpand}>\n          <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n            <Flex height=\"90vh\" width=\"90vw\" alignItems=\"flex-start\" direction=\"column\">\n              {children}\n              <IconButton\n                position=\"absolute\"\n                bottom=\"1.2rem\"\n                right=\"1.2rem\"\n                shadow=\"filterShadow\"\n                label={formatMessage({\n                  id: getTranslation('components.Blocks.collapse'),\n                  defaultMessage: 'Collapse',\n                })}\n                onClick={onToggleExpand}\n              >\n                <Collapse />\n              </IconButton>\n            </Flex>\n          </Modal.Content>\n        </Modal.Root>\n      )}\n      <InputWrapper\n        direction=\"column\"\n        alignItems=\"flex-start\"\n        height=\"512px\"\n        $disabled={disabled}\n        $hasError={Boolean(error)}\n        style={{ overflow: 'hidden' }}\n        aria-describedby={ariaDescriptionId}\n        position=\"relative\"\n      >\n        {!isExpandedMode && children}\n      </InputWrapper>\n    </>\n  );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n  border: 1px solid\n    ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme, $hasError = false }) => css`\n    outline: none;\n    box-shadow: 0;\n    transition-property: border-color, box-shadow, fill;\n    transition-duration: 0.2s;\n\n    &:focus-within {\n      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n    }\n  `}\n\n  ${({ theme, $disabled }) =>\n    $disabled\n      ? css`\n          color: ${theme.colors.neutral600};\n          background: ${theme.colors.neutral150};\n        `\n      : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["EditorLayout","children","error","disabled","onToggleExpand","ariaDescriptionId","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","_jsxs","_Fragment","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","Flex","height","alignItems","direction","IconButton","position","bottom","right","shadow","label","id","getTranslation","defaultMessage","onClick","Collapse","InputWrapper","$disabled","$hasError","Boolean","overflow","aria-describedby","styled","theme","colors","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150","undefined"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Component/Input.js

@@ -6,7 +6,7 @@ var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
-var DocumentContext = require('../../../../../features/DocumentContext.js');
+var useDocumentContext = require('../../../../../hooks/useDocumentContext.js');
 var translations = require('../../../../../utils/translations.js');
 var data = require('../../../utils/data.js');
 var forms = require('../../../utils/forms.js');
@@ -37,7 +37,7 @@ const ComponentInput = ({ label, required, name, attribute, disabled, labelActio
     const { formatMessage } = reactIntl.useIntl();
     const field = strapiAdmin.useField(name);
     const showResetComponent = !attribute.repeatable && field.value && !disabled;
-    const components = DocumentContext.useDocumentContext('ComponentInput', (state)=>state.document.components);
+    const { currentDocument: { components } } = useDocumentContext.useDocumentContext('ComponentInput');
     const handleInitialisationClick = ()=>{
         const schema = components[attribute.component];
         const form = forms.createDefaultForm(schema, components);

package/dist/admin/pages/EditView/components/FormInputs/Component/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputProps, useField } from '@strapi/admin/strapi-admin';\nimport { Field, Flex, IconButton } from '@strapi/design-system';\nimport { Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../features/DocumentContext';\nimport { EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { type InputRendererProps } from '../../InputRenderer';\n\nimport { Initializer } from './Initializer';\nimport { NonRepeatableComponent } from './NonRepeatable';\nimport { RepeatableComponent } from './Repeatable';\n\ninterface ComponentInputProps\n  extends Omit<Extract<EditFieldLayout, { type: 'component' }>, 'size' | 'hint'>,\n    Pick<InputProps, 'hint'> {\n  labelAction?: React.ReactNode;\n  children: (props: InputRendererProps) => React.ReactNode;\n  /**\n   * We need layout to come from the props, and not via a hook, because Content History needs\n   * a way to modify the normal component layout to add hidden fields.\n   */\n  layout: EditFieldLayout[][];\n}\n\nconst ComponentInput = ({\n  label,\n  required,\n  name,\n  attribute,\n  disabled,\n  labelAction,\n  ...props\n}: ComponentInputProps) => {\n  const { formatMessage } = useIntl();\n  const field = useField(name);\n\n  const showResetComponent = !attribute.repeatable && field.value && !disabled;\n\n  const components = useDocumentContext('ComponentInput', (state) => state.document.components);\n\n  const handleInitialisationClick = () => {\n    const schema = components[attribute.component];\n    const form = createDefaultForm(schema, components);\n    const data = transformDocument(schema, components)(form);\n\n    field.onChange(name, data);\n  };\n\n  return (\n    <Field.Root error={field.error} required={required}>\n      <Flex justifyContent=\"space-between\">\n        <Field.Label action={labelAction}>\n          {label}\n          {attribute.repeatable && (\n            <>&nbsp;({Array.isArray(field.value) ? field.value.length : 0})</>\n          )}\n        </Field.Label>\n\n        {showResetComponent && (\n          <IconButton\n            label={formatMessage({\n              id: getTranslation('components.reset-entry'),\n              defaultMessage: 'Reset Entry',\n            })}\n            variant=\"ghost\"\n            onClick={() => {\n              field.onChange(name, null);\n            }}\n          >\n            <Trash />\n          </IconButton>\n        )}\n      </Flex>\n      {/**\n       * if the field isn't repeatable then we display a button to start the field\n       * TODO: should this just live in the `NonRepeatableComponent`?\n       */}\n      {!attribute.repeatable && !field.value && (\n        <Initializer disabled={disabled} name={name} onClick={handleInitialisationClick} />\n      )}\n      {!attribute.repeatable && field.value ? (\n        <NonRepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </NonRepeatableComponent>\n      ) : null}\n      {attribute.repeatable && (\n        <RepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </RepeatableComponent>\n      )}\n      <Field.Error />\n    </Field.Root>\n  );\n};\n\nconst MemoizedComponentInput = React.memo(ComponentInput);\n\nexport { MemoizedComponentInput as ComponentInput };\nexport type { ComponentInputProps };\n"],"names":["ComponentInput","label","required","name","attribute","disabled","labelAction","props","formatMessage","useIntl","field","useField","showResetComponent","repeatable","value","components","useDocumentContext","state","document","handleInitialisationClick","schema","component","form","createDefaultForm","data","transformDocument","onChange","_jsxs","Field","Root","error","Flex","justifyContent","Label","action","_Fragment","Array","isArray","length","_jsx","IconButton","id","getTranslation","defaultMessage","variant","onClick","Trash","Initializer","NonRepeatableComponent","children","RepeatableComponent","Error","MemoizedComponentInput","React","memo"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputProps, useField } from '@strapi/admin/strapi-admin';\nimport { Field, Flex, IconButton } from '@strapi/design-system';\nimport { Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { type InputRendererProps } from '../../InputRenderer';\n\nimport { Initializer } from './Initializer';\nimport { NonRepeatableComponent } from './NonRepeatable';\nimport { RepeatableComponent } from './Repeatable';\n\ninterface ComponentInputProps\n  extends Omit<Extract<EditFieldLayout, { type: 'component' }>, 'size' | 'hint'>,\n    Pick<InputProps, 'hint'> {\n  labelAction?: React.ReactNode;\n  children: (props: InputRendererProps) => React.ReactNode;\n  /**\n   * We need layout to come from the props, and not via a hook, because Content History needs\n   * a way to modify the normal component layout to add hidden fields.\n   */\n  layout: EditFieldLayout[][];\n}\n\nconst ComponentInput = ({\n  label,\n  required,\n  name,\n  attribute,\n  disabled,\n  labelAction,\n  ...props\n}: ComponentInputProps) => {\n  const { formatMessage } = useIntl();\n  const field = useField(name);\n\n  const showResetComponent = !attribute.repeatable && field.value && !disabled;\n\n  const {\n    currentDocument: { components },\n  } = useDocumentContext('ComponentInput');\n\n  const handleInitialisationClick = () => {\n    const schema = components[attribute.component];\n    const form = createDefaultForm(schema, components);\n    const data = transformDocument(schema, components)(form);\n\n    field.onChange(name, data);\n  };\n\n  return (\n    <Field.Root error={field.error} required={required}>\n      <Flex justifyContent=\"space-between\">\n        <Field.Label action={labelAction}>\n          {label}\n          {attribute.repeatable && (\n            <>&nbsp;({Array.isArray(field.value) ? field.value.length : 0})</>\n          )}\n        </Field.Label>\n\n        {showResetComponent && (\n          <IconButton\n            label={formatMessage({\n              id: getTranslation('components.reset-entry'),\n              defaultMessage: 'Reset Entry',\n            })}\n            variant=\"ghost\"\n            onClick={() => {\n              field.onChange(name, null);\n            }}\n          >\n            <Trash />\n          </IconButton>\n        )}\n      </Flex>\n      {/**\n       * if the field isn't repeatable then we display a button to start the field\n       * TODO: should this just live in the `NonRepeatableComponent`?\n       */}\n      {!attribute.repeatable && !field.value && (\n        <Initializer disabled={disabled} name={name} onClick={handleInitialisationClick} />\n      )}\n      {!attribute.repeatable && field.value ? (\n        <NonRepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </NonRepeatableComponent>\n      ) : null}\n      {attribute.repeatable && (\n        <RepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </RepeatableComponent>\n      )}\n      <Field.Error />\n    </Field.Root>\n  );\n};\n\nconst MemoizedComponentInput = React.memo(ComponentInput);\n\nexport { MemoizedComponentInput as ComponentInput };\nexport type { ComponentInputProps };\n"],"names":["ComponentInput","label","required","name","attribute","disabled","labelAction","props","formatMessage","useIntl","field","useField","showResetComponent","repeatable","value","currentDocument","components","useDocumentContext","handleInitialisationClick","schema","component","form","createDefaultForm","data","transformDocument","onChange","_jsxs","Field","Root","error","Flex","justifyContent","Label","action","_Fragment","Array","isArray","length","_jsx","IconButton","id","getTranslation","defaultMessage","variant","onClick","Trash","Initializer","NonRepeatableComponent","children","RepeatableComponent","Error","MemoizedComponentInput","React","memo"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Component/Input.mjs

@@ -4,7 +4,7 @@ import { useField } from '@strapi/admin/strapi-admin';
 import { Field, Flex, IconButton } from '@strapi/design-system';
 import { Trash } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useDocumentContext } from '../../../../../features/DocumentContext.mjs';
+import { useDocumentContext } from '../../../../../hooks/useDocumentContext.mjs';
 import { getTranslation } from '../../../../../utils/translations.mjs';
 import { transformDocument } from '../../../utils/data.mjs';
 import { createDefaultForm } from '../../../utils/forms.mjs';
@@ -16,7 +16,7 @@ const ComponentInput = ({ label, required, name, attribute, disabled, labelActio
     const { formatMessage } = useIntl();
     const field = useField(name);
     const showResetComponent = !attribute.repeatable && field.value && !disabled;
-    const components = useDocumentContext('ComponentInput', (state)=>state.document.components);
+    const { currentDocument: { components } } = useDocumentContext('ComponentInput');
     const handleInitialisationClick = ()=>{
         const schema = components[attribute.component];
         const form = createDefaultForm(schema, components);

package/dist/admin/pages/EditView/components/FormInputs/Component/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputProps, useField } from '@strapi/admin/strapi-admin';\nimport { Field, Flex, IconButton } from '@strapi/design-system';\nimport { Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../features/DocumentContext';\nimport { EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { type InputRendererProps } from '../../InputRenderer';\n\nimport { Initializer } from './Initializer';\nimport { NonRepeatableComponent } from './NonRepeatable';\nimport { RepeatableComponent } from './Repeatable';\n\ninterface ComponentInputProps\n  extends Omit<Extract<EditFieldLayout, { type: 'component' }>, 'size' | 'hint'>,\n    Pick<InputProps, 'hint'> {\n  labelAction?: React.ReactNode;\n  children: (props: InputRendererProps) => React.ReactNode;\n  /**\n   * We need layout to come from the props, and not via a hook, because Content History needs\n   * a way to modify the normal component layout to add hidden fields.\n   */\n  layout: EditFieldLayout[][];\n}\n\nconst ComponentInput = ({\n  label,\n  required,\n  name,\n  attribute,\n  disabled,\n  labelAction,\n  ...props\n}: ComponentInputProps) => {\n  const { formatMessage } = useIntl();\n  const field = useField(name);\n\n  const showResetComponent = !attribute.repeatable && field.value && !disabled;\n\n  const components = useDocumentContext('ComponentInput', (state) => state.document.components);\n\n  const handleInitialisationClick = () => {\n    const schema = components[attribute.component];\n    const form = createDefaultForm(schema, components);\n    const data = transformDocument(schema, components)(form);\n\n    field.onChange(name, data);\n  };\n\n  return (\n    <Field.Root error={field.error} required={required}>\n      <Flex justifyContent=\"space-between\">\n        <Field.Label action={labelAction}>\n          {label}\n          {attribute.repeatable && (\n            <>&nbsp;({Array.isArray(field.value) ? field.value.length : 0})</>\n          )}\n        </Field.Label>\n\n        {showResetComponent && (\n          <IconButton\n            label={formatMessage({\n              id: getTranslation('components.reset-entry'),\n              defaultMessage: 'Reset Entry',\n            })}\n            variant=\"ghost\"\n            onClick={() => {\n              field.onChange(name, null);\n            }}\n          >\n            <Trash />\n          </IconButton>\n        )}\n      </Flex>\n      {/**\n       * if the field isn't repeatable then we display a button to start the field\n       * TODO: should this just live in the `NonRepeatableComponent`?\n       */}\n      {!attribute.repeatable && !field.value && (\n        <Initializer disabled={disabled} name={name} onClick={handleInitialisationClick} />\n      )}\n      {!attribute.repeatable && field.value ? (\n        <NonRepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </NonRepeatableComponent>\n      ) : null}\n      {attribute.repeatable && (\n        <RepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </RepeatableComponent>\n      )}\n      <Field.Error />\n    </Field.Root>\n  );\n};\n\nconst MemoizedComponentInput = React.memo(ComponentInput);\n\nexport { MemoizedComponentInput as ComponentInput };\nexport type { ComponentInputProps };\n"],"names":["ComponentInput","label","required","name","attribute","disabled","labelAction","props","formatMessage","useIntl","field","useField","showResetComponent","repeatable","value","components","useDocumentContext","state","document","handleInitialisationClick","schema","component","form","createDefaultForm","data","transformDocument","onChange","_jsxs","Field","Root","error","Flex","justifyContent","Label","action","_Fragment","Array","isArray","length","_jsx","IconButton","id","getTranslation","defaultMessage","variant","onClick","Trash","Initializer","NonRepeatableComponent","children","RepeatableComponent","Error","MemoizedComponentInput","React","memo"],"mappings":"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"}
+{"version":3,"file":"Input.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputProps, useField } from '@strapi/admin/strapi-admin';\nimport { Field, Flex, IconButton } from '@strapi/design-system';\nimport { Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { type InputRendererProps } from '../../InputRenderer';\n\nimport { Initializer } from './Initializer';\nimport { NonRepeatableComponent } from './NonRepeatable';\nimport { RepeatableComponent } from './Repeatable';\n\ninterface ComponentInputProps\n  extends Omit<Extract<EditFieldLayout, { type: 'component' }>, 'size' | 'hint'>,\n    Pick<InputProps, 'hint'> {\n  labelAction?: React.ReactNode;\n  children: (props: InputRendererProps) => React.ReactNode;\n  /**\n   * We need layout to come from the props, and not via a hook, because Content History needs\n   * a way to modify the normal component layout to add hidden fields.\n   */\n  layout: EditFieldLayout[][];\n}\n\nconst ComponentInput = ({\n  label,\n  required,\n  name,\n  attribute,\n  disabled,\n  labelAction,\n  ...props\n}: ComponentInputProps) => {\n  const { formatMessage } = useIntl();\n  const field = useField(name);\n\n  const showResetComponent = !attribute.repeatable && field.value && !disabled;\n\n  const {\n    currentDocument: { components },\n  } = useDocumentContext('ComponentInput');\n\n  const handleInitialisationClick = () => {\n    const schema = components[attribute.component];\n    const form = createDefaultForm(schema, components);\n    const data = transformDocument(schema, components)(form);\n\n    field.onChange(name, data);\n  };\n\n  return (\n    <Field.Root error={field.error} required={required}>\n      <Flex justifyContent=\"space-between\">\n        <Field.Label action={labelAction}>\n          {label}\n          {attribute.repeatable && (\n            <>&nbsp;({Array.isArray(field.value) ? field.value.length : 0})</>\n          )}\n        </Field.Label>\n\n        {showResetComponent && (\n          <IconButton\n            label={formatMessage({\n              id: getTranslation('components.reset-entry'),\n              defaultMessage: 'Reset Entry',\n            })}\n            variant=\"ghost\"\n            onClick={() => {\n              field.onChange(name, null);\n            }}\n          >\n            <Trash />\n          </IconButton>\n        )}\n      </Flex>\n      {/**\n       * if the field isn't repeatable then we display a button to start the field\n       * TODO: should this just live in the `NonRepeatableComponent`?\n       */}\n      {!attribute.repeatable && !field.value && (\n        <Initializer disabled={disabled} name={name} onClick={handleInitialisationClick} />\n      )}\n      {!attribute.repeatable && field.value ? (\n        <NonRepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </NonRepeatableComponent>\n      ) : null}\n      {attribute.repeatable && (\n        <RepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </RepeatableComponent>\n      )}\n      <Field.Error />\n    </Field.Root>\n  );\n};\n\nconst MemoizedComponentInput = React.memo(ComponentInput);\n\nexport { MemoizedComponentInput as ComponentInput };\nexport type { ComponentInputProps };\n"],"names":["ComponentInput","label","required","name","attribute","disabled","labelAction","props","formatMessage","useIntl","field","useField","showResetComponent","repeatable","value","currentDocument","components","useDocumentContext","handleInitialisationClick","schema","component","form","createDefaultForm","data","transformDocument","onChange","_jsxs","Field","Root","error","Flex","justifyContent","Label","action","_Fragment","Array","isArray","length","_jsx","IconButton","id","getTranslation","defaultMessage","variant","onClick","Trash","Initializer","NonRepeatableComponent","children","RepeatableComponent","Error","MemoizedComponentInput","React","memo"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
-var DocumentContext = require('../../../../../features/DocumentContext.js');
+var useDocumentContext = require('../../../../../hooks/useDocumentContext.js');
 var FormLayout = require('../../FormLayout.js');
 var ComponentContext = require('../ComponentContext.js');
 
@@ -13,7 +13,8 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
     const { value } = strapiAdmin.useField(name);
     const level = ComponentContext.useComponent('NonRepeatableComponent', (state)=>state.level);
     const isNested = level > 0;
-    const currentDocument = DocumentContext.useDocumentContext('NonRepeatableComponent', (state)=>state.document);
+    const { currentDocument } = useDocumentContext.useDocumentContext('NonRepeatableComponent');
+    const rulesEngine = strapiAdmin.createRulesEngine();
     return /*#__PURE__*/ jsxRuntime.jsx(ComponentContext.ComponentProvider, {
         id: value?.id,
         uid: attribute.component,
@@ -32,9 +33,19 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
                 alignItems: "stretch",
                 gap: 6,
                 children: layout.map((row, index)=>{
+                    const visibleFields = row.filter(({ ...field })=>{
+                        const condition = field.attribute.conditions?.visible;
+                        if (condition) {
+                            return rulesEngine.evaluate(condition, value);
+                        }
+                        return true;
+                    });
+                    if (visibleFields.length === 0) {
+                        return null; // Skip rendering the entire grid row
+                    }
                     return /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridRoot, {
                         gap: 4,
-                        children: row.map(({ size, ...field })=>{
+                        children: visibleFields.map(({ size, ...field })=>{
                             /**
                    * Layouts are built from schemas so they don't understand the complete
                    * schema tree, for components we append the parent name to the field name

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NonRepeatable.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import { useField } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../features/DocumentContext';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport type { ComponentInputProps } from './Input';\n\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst NonRepeatableComponent = ({\n  attribute,\n  name,\n  children,\n  layout,\n}: NonRepeatableComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { value } = useField(name);\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\n  const isNested = level > 0;\n  const currentDocument = useDocumentContext('NonRepeatableComponent', (state) => state.document);\n\n  return (\n    <ComponentProvider id={value?.id} uid={attribute.component} level={level + 1} type=\"component\">\n      <Box\n        background={'neutral100'}\n        paddingLeft={6}\n        paddingRight={6}\n        paddingTop={6}\n        paddingBottom={6}\n        hasRadius={isNested}\n        borderColor={isNested ? 'neutral200' : undefined}\n      >\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n          {layout.map((row, index) => {\n            return (\n              <ResponsiveGridRoot gap={4} key={index}>\n                {row.map(({ size, ...field }) => {\n                  /**\n                   * Layouts are built from schemas so they don't understand the complete\n                   * schema tree, for components we append the parent name to the field name\n                   * because this is the structure for the data & permissions also understand\n                   * the nesting involved.\n                   */\n                  const completeFieldName = `${name}.${field.name}`;\n\n                  const translatedLabel = formatMessage({\n                    id: `content-manager.components.${attribute.component}.${field.name}`,\n                    defaultMessage: field.label,\n                  });\n\n                  return (\n                    <ResponsiveGridItem\n                      col={size}\n                      key={completeFieldName}\n                      s={12}\n                      xs={12}\n                      direction=\"column\"\n                      alignItems=\"stretch\"\n                    >\n                      {children({\n                        ...field,\n                        label: translatedLabel,\n                        name: completeFieldName,\n                        document: currentDocument,\n                      })}\n                    </ResponsiveGridItem>\n                  );\n                })}\n              </ResponsiveGridRoot>\n            );\n          })}\n        </Flex>\n      </Box>\n    </ComponentProvider>\n  );\n};\n\nexport { NonRepeatableComponent };\nexport type { NonRepeatableComponentProps };\n"],"names":["NonRepeatableComponent","attribute","name","children","layout","formatMessage","useIntl","value","useField","level","useComponent","state","isNested","currentDocument","useDocumentContext","document","_jsx","ComponentProvider","id","uid","component","type","Box","background","paddingLeft","paddingRight","paddingTop","paddingBottom","hasRadius","borderColor","undefined","Flex","direction","alignItems","gap","map","row","index","ResponsiveGridRoot","size","field","completeFieldName","translatedLabel","defaultMessage","label","ResponsiveGridItem","col","s","xs"],"mappings":";;;;;;;;;;AAYMA,MAAAA,sBAAAA,GAAyB,CAAC,EAC9BC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,MAAM,EACsB,GAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,oBAASN,CAAAA,IAAAA,CAAAA;AAC3B,IAAA,MAAMO,QAAQC,6BAAa,CAAA,wBAAA,EAA0B,CAACC,KAAAA,GAAUA,MAAMF,KAAK,CAAA;AAC3E,IAAA,MAAMG,WAAWH,KAAQ,GAAA,CAAA;AACzB,IAAA,MAAMI,kBAAkBC,kCAAmB,CAAA,wBAAA,EAA0B,CAACH,KAAAA,GAAUA,MAAMI,QAAQ,CAAA;AAE9F,IAAA,qBACEC,cAACC,CAAAA,kCAAAA,EAAAA;AAAkBC,QAAAA,EAAAA,EAAIX,KAAOW,EAAAA,EAAAA;AAAIC,QAAAA,GAAAA,EAAKlB,UAAUmB,SAAS;AAAEX,QAAAA,KAAAA,EAAOA,KAAQ,GAAA,CAAA;QAAGY,IAAK,EAAA,WAAA;AACjF,QAAA,QAAA,gBAAAL,cAACM,CAAAA,gBAAAA,EAAAA;YACCC,UAAY,EAAA,YAAA;YACZC,WAAa,EAAA,CAAA;YACbC,YAAc,EAAA,CAAA;YACdC,UAAY,EAAA,CAAA;YACZC,aAAe,EAAA,CAAA;YACfC,SAAWhB,EAAAA,QAAAA;AACXiB,YAAAA,WAAAA,EAAajB,WAAW,YAAekB,GAAAA,SAAAA;AAEvC,YAAA,QAAA,gBAAAd,cAACe,CAAAA,iBAAAA,EAAAA;gBAAKC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,SAAA;gBAAUC,GAAK,EAAA,CAAA;0BAChD9B,MAAO+B,CAAAA,GAAG,CAAC,CAACC,GAAKC,EAAAA,KAAAA,GAAAA;AAChB,oBAAA,qBACErB,cAACsB,CAAAA,6BAAAA,EAAAA;wBAAmBJ,GAAK,EAAA,CAAA;AACtBE,wBAAAA,QAAAA,EAAAA,GAAAA,CAAID,GAAG,CAAC,CAAC,EAAEI,IAAI,EAAE,GAAGC,KAAO,EAAA,GAAA;AAC1B;;;;;sBAMA,MAAMC,iBAAoB,GAAA,CAAC,EAAEvC,IAAAA,CAAK,CAAC,EAAEsC,KAAAA,CAAMtC,IAAI,CAAC,CAAC;AAEjD,4BAAA,MAAMwC,kBAAkBrC,aAAc,CAAA;gCACpCa,EAAI,EAAA,CAAC,2BAA2B,EAAEjB,SAAUmB,CAAAA,SAAS,CAAC,CAAC,EAAEoB,KAAAA,CAAMtC,IAAI,CAAC,CAAC;AACrEyC,gCAAAA,cAAAA,EAAgBH,MAAMI;AACxB,6BAAA,CAAA;AAEA,4BAAA,qBACE5B,cAAC6B,CAAAA,6BAAAA,EAAAA;gCACCC,GAAKP,EAAAA,IAAAA;gCAELQ,CAAG,EAAA,EAAA;gCACHC,EAAI,EAAA,EAAA;gCACJhB,SAAU,EAAA,QAAA;gCACVC,UAAW,EAAA,SAAA;0CAEV9B,QAAS,CAAA;AACR,oCAAA,GAAGqC,KAAK;oCACRI,KAAOF,EAAAA,eAAAA;oCACPxC,IAAMuC,EAAAA,iBAAAA;oCACN1B,QAAUF,EAAAA;AACZ,iCAAA;AAXK4B,6BAAAA,EAAAA,iBAAAA,CAAAA;AAcX,yBAAA;AAhC+BJ,qBAAAA,EAAAA,KAAAA,CAAAA;AAmCrC,iBAAA;;;;AAKV;;;;"}
+{"version":3,"file":"NonRepeatable.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import { useField, createRulesEngine } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport type { ComponentInputProps } from './Input';\n\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst NonRepeatableComponent = ({\n  attribute,\n  name,\n  children,\n  layout,\n}: NonRepeatableComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { value } = useField(name);\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\n  const isNested = level > 0;\n  const { currentDocument } = useDocumentContext('NonRepeatableComponent');\n  const rulesEngine = createRulesEngine();\n\n  return (\n    <ComponentProvider id={value?.id} uid={attribute.component} level={level + 1} type=\"component\">\n      <Box\n        background={'neutral100'}\n        paddingLeft={6}\n        paddingRight={6}\n        paddingTop={6}\n        paddingBottom={6}\n        hasRadius={isNested}\n        borderColor={isNested ? 'neutral200' : undefined}\n      >\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n          {layout.map((row, index) => {\n            const visibleFields = row.filter(({ ...field }) => {\n              const condition = field.attribute.conditions?.visible;\n              if (condition) {\n                return rulesEngine.evaluate(condition, value);\n              }\n\n              return true;\n            });\n\n            if (visibleFields.length === 0) {\n              return null; // Skip rendering the entire grid row\n            }\n            return (\n              <ResponsiveGridRoot gap={4} key={index}>\n                {visibleFields.map(({ size, ...field }) => {\n                  /**\n                   * Layouts are built from schemas so they don't understand the complete\n                   * schema tree, for components we append the parent name to the field name\n                   * because this is the structure for the data & permissions also understand\n                   * the nesting involved.\n                   */\n                  const completeFieldName = `${name}.${field.name}`;\n\n                  const translatedLabel = formatMessage({\n                    id: `content-manager.components.${attribute.component}.${field.name}`,\n                    defaultMessage: field.label,\n                  });\n\n                  return (\n                    <ResponsiveGridItem\n                      col={size}\n                      key={completeFieldName}\n                      s={12}\n                      xs={12}\n                      direction=\"column\"\n                      alignItems=\"stretch\"\n                    >\n                      {children({\n                        ...field,\n                        label: translatedLabel,\n                        name: completeFieldName,\n                        document: currentDocument,\n                      })}\n                    </ResponsiveGridItem>\n                  );\n                })}\n              </ResponsiveGridRoot>\n            );\n          })}\n        </Flex>\n      </Box>\n    </ComponentProvider>\n  );\n};\n\nexport { NonRepeatableComponent };\nexport type { NonRepeatableComponentProps };\n"],"names":["NonRepeatableComponent","attribute","name","children","layout","formatMessage","useIntl","value","useField","level","useComponent","state","isNested","currentDocument","useDocumentContext","rulesEngine","createRulesEngine","_jsx","ComponentProvider","id","uid","component","type","Box","background","paddingLeft","paddingRight","paddingTop","paddingBottom","hasRadius","borderColor","undefined","Flex","direction","alignItems","gap","map","row","index","visibleFields","filter","field","condition","conditions","visible","evaluate","length","ResponsiveGridRoot","size","completeFieldName","translatedLabel","defaultMessage","label","ResponsiveGridItem","col","s","xs","document"],"mappings":"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"}