@strapi/admin 5.50.0 → 5.50.1

package/dist/admin/admin/src/components/ConfirmDialog.js

@@ -5,7 +5,7 @@ var React = require('react');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -123,7 +123,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
         ]
     });
 };
-const StyledWarning = styled.styled(icons.WarningCircle)`
+const StyledWarning = styledComponents.styled(icons.WarningCircle)`
   width: 24px;
   height: 24px;
 

package/dist/admin/admin/src/components/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sources":["../../../../../admin/src/components/ConfirmDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, ButtonProps, Dialog } from '@strapi/design-system';\nimport { WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfirmDialog\n * -----------------------------------------------------------------------------------------------*/\ninterface ConfirmDialogProps extends Pick<ButtonProps, 'variant'>, Pick<Dialog.BodyProps, 'icon'> {\n  onConfirm?: (e?: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  onCancel?: (e?: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  children?: React.ReactNode;\n  endAction?: React.ReactNode;\n  startAction?: React.ReactNode;\n  title?: React.ReactNode;\n}\n\n/**\n * @beta\n * @public\n * @description A simple confirm dialog that out of the box can be used to confirm an action.\n * The component can additionally be customised if required e.g. the footer actions can be\n * completely replaced, but cannot be removed. Passing a string as the children prop will render\n * the string as the body of the dialog. If you need more control over the body, you can pass a\n * custom component as the children prop.\n * @example\n * ```tsx\n * import { Dialog } from '@strapi/design-system';\n *\n * const DeleteAction = ({ id }) => {\n *  const [isOpen, setIsOpen] = React.useState(false);\n *\n *  const [delete] = useDeleteMutation()\n *  const handleConfirm = async () => {\n *    await delete(id)\n *    setIsOpen(false)\n *  }\n *\n *  return (\n *    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>\n *      <Dialog.Trigger>\n *        <Button>Delete</Button>\n *      </Dialog.Trigger>\n *      <ConfirmDialog onConfirm={handleConfirm} />\n *    </Dialog.Root>\n *  )\n * }\n * ```\n */\nconst ConfirmDialog = ({\n  children,\n  icon = <StyledWarning />,\n  onConfirm,\n  onCancel,\n  variant = 'danger-light',\n  startAction,\n  endAction,\n  title,\n}: ConfirmDialogProps) => {\n  const { formatMessage } = useIntl();\n  const [isConfirming, setIsConfirming] = React.useState(false);\n\n  const content =\n    children ||\n    formatMessage({\n      id: 'app.confirm.body',\n      defaultMessage: 'Are you sure?',\n    });\n\n  const handleConfirm = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!onConfirm) {\n      return;\n    }\n\n    try {\n      setIsConfirming(true);\n      await onConfirm(e);\n    } finally {\n      setIsConfirming(false);\n    }\n  };\n\n  return (\n    <Dialog.Content>\n      <Dialog.Header>\n        {title ||\n          formatMessage({\n            id: 'app.components.ConfirmDialog.title',\n            defaultMessage: 'Confirmation',\n          })}\n      </Dialog.Header>\n      <Dialog.Body icon={icon}>{content}</Dialog.Body>\n      <Dialog.Footer>\n        {startAction || (\n          <Dialog.Cancel>\n            <Button\n              fullWidth\n              variant=\"tertiary\"\n              onClick={(e) => {\n                e.stopPropagation();\n                if (onCancel) {\n                  onCancel(e);\n                }\n              }}\n            >\n              {formatMessage({\n                id: 'app.components.Button.cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n          </Dialog.Cancel>\n        )}\n        {endAction || (\n          <Dialog.Action>\n            <Button fullWidth onClick={handleConfirm} variant={variant} loading={isConfirming}>\n              {formatMessage({\n                id: 'app.components.Button.confirm',\n                defaultMessage: 'Confirm',\n              })}\n            </Button>\n          </Dialog.Action>\n        )}\n      </Dialog.Footer>\n    </Dialog.Content>\n  );\n};\n\nconst StyledWarning = styled(WarningCircle)`\n  width: 24px;\n  height: 24px;\n\n  path {\n    fill: ${({ theme }) => theme.colors.danger600};\n  }\n`;\n\nexport { ConfirmDialog };\nexport type { ConfirmDialogProps };\n"],"names":["ConfirmDialog","children","icon","_jsx","StyledWarning","onConfirm","onCancel","variant","startAction","endAction","title","formatMessage","useIntl","isConfirming","setIsConfirming","React","useState","content","id","defaultMessage","handleConfirm","e","_jsxs","Dialog","Content","Header","Body","Footer","Cancel","Button","fullWidth","onClick","stopPropagation","Action","loading","styled","WarningCircle","theme","colors","danger600"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgCA,MAAMA,gBAAgB,CAAC,EACrBC,QAAQ,EACRC,IAAAA,iBAAOC,cAAA,CAACC,aAAAA,EAAAA,EAAAA,CAAgB,EACxBC,SAAS,EACTC,QAAQ,EACRC,UAAU,cAAc,EACxBC,WAAW,EACXC,SAAS,EACTC,KAAK,EACc,GAAA;IACnB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAEvD,MAAMC,OAAAA,GACJhB,YACAU,aAAAA,CAAc;QACZO,EAAAA,EAAI,kBAAA;QACJC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEF,IAAA,MAAMC,gBAAgB,OAAOC,CAAAA,GAAAA;AAC3B,QAAA,IAAI,CAAChB,SAAAA,EAAW;AACd,YAAA;AACF,QAAA;QAEA,IAAI;YACFS,eAAAA,CAAgB,IAAA,CAAA;AAChB,YAAA,MAAMT,SAAAA,CAAUgB,CAAAA,CAAAA;QAClB,CAAA,QAAU;YACRP,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;IAEA,qBACEQ,eAAA,CAACC,oBAAOC,OAAO,EAAA;;AACb,0BAAArB,cAAA,CAACoB,oBAAOE,MAAM,EAAA;AACXf,gBAAAA,QAAAA,EAAAA,KAAAA,IACCC,aAAAA,CAAc;oBACZO,EAAAA,EAAI,oCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA;;AAEJ,0BAAAhB,cAAA,CAACoB,oBAAOG,IAAI,EAAA;gBAACxB,IAAAA,EAAMA,IAAAA;AAAOe,gBAAAA,QAAAA,EAAAA;;AAC1B,0BAAAK,eAAA,CAACC,oBAAOI,MAAM,EAAA;;oBACXnB,WAAAA,kBACCL,cAAA,CAACoB,oBAAOK,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAAzB,cAAA,CAAC0B,mBAAAA,EAAAA;4BACCC,SAAS,EAAA,IAAA;4BACTvB,OAAAA,EAAQ,UAAA;AACRwB,4BAAAA,OAAAA,EAAS,CAACV,CAAAA,GAAAA;AACRA,gCAAAA,CAAAA,CAAEW,eAAe,EAAA;AACjB,gCAAA,IAAI1B,QAAAA,EAAU;oCACZA,QAAAA,CAASe,CAAAA,CAAAA;AACX,gCAAA;AACF,4BAAA,CAAA;sCAECV,aAAAA,CAAc;gCACbO,EAAAA,EAAI,8BAAA;gCACJC,cAAAA,EAAgB;AAClB,6BAAA;;;oBAILV,SAAAA,kBACCN,cAAA,CAACoB,oBAAOU,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAA9B,cAAA,CAAC0B,mBAAAA,EAAAA;4BAAOC,SAAS,EAAA,IAAA;4BAACC,OAAAA,EAASX,aAAAA;4BAAeb,OAAAA,EAASA,OAAAA;4BAAS2B,OAAAA,EAASrB,YAAAA;sCAClEF,aAAAA,CAAc;gCACbO,EAAAA,EAAI,+BAAA;gCACJC,cAAAA,EAAgB;AAClB,6BAAA;;;;;;;AAOd;AAEA,MAAMf,aAAAA,GAAgB+B,aAAAA,CAAOC,mBAAAA,CAAc;;;;;UAKjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,SAAS,CAAC;;AAElD,CAAC;;;;"}
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../../../admin/src/components/ConfirmDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, ButtonProps, Dialog } from '@strapi/design-system';\nimport { WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfirmDialog\n * -----------------------------------------------------------------------------------------------*/\ninterface ConfirmDialogProps extends Pick<ButtonProps, 'variant'>, Pick<Dialog.BodyProps, 'icon'> {\n  onConfirm?: (e?: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  onCancel?: (e?: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  children?: React.ReactNode;\n  endAction?: React.ReactNode;\n  startAction?: React.ReactNode;\n  title?: React.ReactNode;\n}\n\n/**\n * @beta\n * @public\n * @description A simple confirm dialog that out of the box can be used to confirm an action.\n * The component can additionally be customised if required e.g. the footer actions can be\n * completely replaced, but cannot be removed. Passing a string as the children prop will render\n * the string as the body of the dialog. If you need more control over the body, you can pass a\n * custom component as the children prop.\n * @example\n * ```tsx\n * import { Dialog } from '@strapi/design-system';\n *\n * const DeleteAction = ({ id }) => {\n *  const [isOpen, setIsOpen] = React.useState(false);\n *\n *  const [delete] = useDeleteMutation()\n *  const handleConfirm = async () => {\n *    await delete(id)\n *    setIsOpen(false)\n *  }\n *\n *  return (\n *    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>\n *      <Dialog.Trigger>\n *        <Button>Delete</Button>\n *      </Dialog.Trigger>\n *      <ConfirmDialog onConfirm={handleConfirm} />\n *    </Dialog.Root>\n *  )\n * }\n * ```\n */\nconst ConfirmDialog = ({\n  children,\n  icon = <StyledWarning />,\n  onConfirm,\n  onCancel,\n  variant = 'danger-light',\n  startAction,\n  endAction,\n  title,\n}: ConfirmDialogProps) => {\n  const { formatMessage } = useIntl();\n  const [isConfirming, setIsConfirming] = React.useState(false);\n\n  const content =\n    children ||\n    formatMessage({\n      id: 'app.confirm.body',\n      defaultMessage: 'Are you sure?',\n    });\n\n  const handleConfirm = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!onConfirm) {\n      return;\n    }\n\n    try {\n      setIsConfirming(true);\n      await onConfirm(e);\n    } finally {\n      setIsConfirming(false);\n    }\n  };\n\n  return (\n    <Dialog.Content>\n      <Dialog.Header>\n        {title ||\n          formatMessage({\n            id: 'app.components.ConfirmDialog.title',\n            defaultMessage: 'Confirmation',\n          })}\n      </Dialog.Header>\n      <Dialog.Body icon={icon}>{content}</Dialog.Body>\n      <Dialog.Footer>\n        {startAction || (\n          <Dialog.Cancel>\n            <Button\n              fullWidth\n              variant=\"tertiary\"\n              onClick={(e) => {\n                e.stopPropagation();\n                if (onCancel) {\n                  onCancel(e);\n                }\n              }}\n            >\n              {formatMessage({\n                id: 'app.components.Button.cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n          </Dialog.Cancel>\n        )}\n        {endAction || (\n          <Dialog.Action>\n            <Button fullWidth onClick={handleConfirm} variant={variant} loading={isConfirming}>\n              {formatMessage({\n                id: 'app.components.Button.confirm',\n                defaultMessage: 'Confirm',\n              })}\n            </Button>\n          </Dialog.Action>\n        )}\n      </Dialog.Footer>\n    </Dialog.Content>\n  );\n};\n\nconst StyledWarning = styled(WarningCircle)`\n  width: 24px;\n  height: 24px;\n\n  path {\n    fill: ${({ theme }) => theme.colors.danger600};\n  }\n`;\n\nexport { ConfirmDialog };\nexport type { ConfirmDialogProps };\n"],"names":["ConfirmDialog","children","icon","_jsx","StyledWarning","onConfirm","onCancel","variant","startAction","endAction","title","formatMessage","useIntl","isConfirming","setIsConfirming","React","useState","content","id","defaultMessage","handleConfirm","e","_jsxs","Dialog","Content","Header","Body","Footer","Cancel","Button","fullWidth","onClick","stopPropagation","Action","loading","styled","WarningCircle","theme","colors","danger600"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgCA,MAAMA,gBAAgB,CAAC,EACrBC,QAAQ,EACRC,IAAAA,iBAAOC,cAAA,CAACC,aAAAA,EAAAA,EAAAA,CAAgB,EACxBC,SAAS,EACTC,QAAQ,EACRC,UAAU,cAAc,EACxBC,WAAW,EACXC,SAAS,EACTC,KAAK,EACc,GAAA;IACnB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAEvD,MAAMC,OAAAA,GACJhB,YACAU,aAAAA,CAAc;QACZO,EAAAA,EAAI,kBAAA;QACJC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEF,IAAA,MAAMC,gBAAgB,OAAOC,CAAAA,GAAAA;AAC3B,QAAA,IAAI,CAAChB,SAAAA,EAAW;AACd,YAAA;AACF,QAAA;QAEA,IAAI;YACFS,eAAAA,CAAgB,IAAA,CAAA;AAChB,YAAA,MAAMT,SAAAA,CAAUgB,CAAAA,CAAAA;QAClB,CAAA,QAAU;YACRP,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;IAEA,qBACEQ,eAAA,CAACC,oBAAOC,OAAO,EAAA;;AACb,0BAAArB,cAAA,CAACoB,oBAAOE,MAAM,EAAA;AACXf,gBAAAA,QAAAA,EAAAA,KAAAA,IACCC,aAAAA,CAAc;oBACZO,EAAAA,EAAI,oCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA;;AAEJ,0BAAAhB,cAAA,CAACoB,oBAAOG,IAAI,EAAA;gBAACxB,IAAAA,EAAMA,IAAAA;AAAOe,gBAAAA,QAAAA,EAAAA;;AAC1B,0BAAAK,eAAA,CAACC,oBAAOI,MAAM,EAAA;;oBACXnB,WAAAA,kBACCL,cAAA,CAACoB,oBAAOK,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAAzB,cAAA,CAAC0B,mBAAAA,EAAAA;4BACCC,SAAS,EAAA,IAAA;4BACTvB,OAAAA,EAAQ,UAAA;AACRwB,4BAAAA,OAAAA,EAAS,CAACV,CAAAA,GAAAA;AACRA,gCAAAA,CAAAA,CAAEW,eAAe,EAAA;AACjB,gCAAA,IAAI1B,QAAAA,EAAU;oCACZA,QAAAA,CAASe,CAAAA,CAAAA;AACX,gCAAA;AACF,4BAAA,CAAA;sCAECV,aAAAA,CAAc;gCACbO,EAAAA,EAAI,8BAAA;gCACJC,cAAAA,EAAgB;AAClB,6BAAA;;;oBAILV,SAAAA,kBACCN,cAAA,CAACoB,oBAAOU,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAA9B,cAAA,CAAC0B,mBAAAA,EAAAA;4BAAOC,SAAS,EAAA,IAAA;4BAACC,OAAAA,EAASX,aAAAA;4BAAeb,OAAAA,EAASA,OAAAA;4BAAS2B,OAAAA,EAASrB,YAAAA;sCAClEF,aAAAA,CAAc;gCACbO,EAAAA,EAAI,+BAAA;gCACJC,cAAAA,EAAgB;AAClB,6BAAA;;;;;;;AAOd;AAEA,MAAMf,aAAAA,GAAgB+B,uBAAAA,CAAOC,mBAAAA,CAAc;;;;;UAKjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,SAAS,CAAC;;AAElD,CAAC;;;;"}

package/dist/admin/admin/src/components/ContentBox.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 
 const ContentBox = ({ title, subtitle, icon, iconBackground, endAction, titleEllipsis = false })=>{
     if (title && title.length > 70 && titleEllipsis) {
@@ -44,7 +44,7 @@ const ContentBox = ({ title, subtitle, icon, iconBackground, endAction, titleEll
         ]
     });
 };
-const IconWrapper = styled.styled(designSystem.Flex)`
+const IconWrapper = styledComponents.styled(designSystem.Flex)`
   margin-right: ${({ theme })=>theme.spaces[6]};
 
   svg {
@@ -52,7 +52,7 @@ const IconWrapper = styled.styled(designSystem.Flex)`
     height: 3.2rem;
   }
 `;
-const TypographyWordBreak = styled.styled(designSystem.Typography)`
+const TypographyWordBreak = styledComponents.styled(designSystem.Typography)`
   color: ${({ theme })=>theme.colors.neutral800};
   word-break: break-all;
 `;

package/dist/admin/admin/src/components/ContentBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentBox.js","sources":["../../../../../admin/src/components/ContentBox.tsx"],"sourcesContent":["import {\n  Flex,\n  FlexComponent,\n  FlexProps,\n  Typography,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface ContentBoxProps {\n  title?: string;\n  subtitle?: string;\n  icon?: FlexProps['children'];\n  iconBackground?: FlexProps['background'];\n  endAction?: FlexProps['children'];\n  titleEllipsis?: boolean;\n}\n\nconst ContentBox = ({\n  title,\n  subtitle,\n  icon,\n  iconBackground,\n  endAction,\n  titleEllipsis = false,\n}: ContentBoxProps) => {\n  if (title && title.length > 70 && titleEllipsis) {\n    title = `${title.substring(0, 70)}...`;\n  }\n\n  return (\n    <Flex shadow=\"tableShadow\" hasRadius padding={6} background=\"neutral0\">\n      <IconWrapper background={iconBackground} hasRadius padding={3}>\n        {icon}\n      </IconWrapper>\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={endAction ? 0 : 1}>\n        <Flex>\n          <TypographyWordBreak fontWeight=\"semiBold\" variant=\"pi\">\n            {title}\n          </TypographyWordBreak>\n          {endAction}\n        </Flex>\n        <Typography textColor=\"neutral600\">{subtitle}</Typography>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst IconWrapper = styled<FlexComponent>(Flex)`\n  margin-right: ${({ theme }) => theme.spaces[6]};\n\n  svg {\n    width: 3.2rem;\n    height: 3.2rem;\n  }\n`;\n\nconst TypographyWordBreak = styled<TypographyComponent>(Typography)`\n  color: ${({ theme }) => theme.colors.neutral800};\n  word-break: break-all;\n`;\n\nexport { ContentBox };\nexport type { ContentBoxProps };\n"],"names":["ContentBox","title","subtitle","icon","iconBackground","endAction","titleEllipsis","length","substring","_jsxs","Flex","shadow","hasRadius","padding","background","_jsx","IconWrapper","direction","alignItems","gap","TypographyWordBreak","fontWeight","variant","Typography","textColor","styled","theme","spaces","colors","neutral800"],"mappings":";;;;;;AAkBA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,SAAS,EACTC,aAAAA,GAAgB,KAAK,EACL,GAAA;AAChB,IAAA,IAAIL,KAAAA,IAASA,KAAAA,CAAMM,MAAM,GAAG,MAAMD,aAAAA,EAAe;AAC/CL,QAAAA,KAAAA,GAAQ,GAAGA,KAAAA,CAAMO,SAAS,CAAC,CAAA,EAAG,EAAA,CAAA,CAAI,GAAG,CAAC;AACxC,IAAA;AAEA,IAAA,qBACEC,eAAA,CAACC,iBAAAA,EAAAA;QAAKC,MAAAA,EAAO,aAAA;QAAcC,SAAS,EAAA,IAAA;QAACC,OAAAA,EAAS,CAAA;QAAGC,UAAAA,EAAW,UAAA;;0BAC1DC,cAAA,CAACC,WAAAA,EAAAA;gBAAYF,UAAAA,EAAYV,cAAAA;gBAAgBQ,SAAS,EAAA,IAAA;gBAACC,OAAAA,EAAS,CAAA;AACzDV,gBAAAA,QAAAA,EAAAA;;0BAEHM,eAAA,CAACC,iBAAAA,EAAAA;gBAAKO,SAAAA,EAAU,QAAA;gBAASC,UAAAA,EAAW,SAAA;AAAUC,gBAAAA,GAAAA,EAAKd,YAAY,CAAA,GAAI,CAAA;;kCACjEI,eAAA,CAACC,iBAAAA,EAAAA;;0CACCK,cAAA,CAACK,mBAAAA,EAAAA;gCAAoBC,UAAAA,EAAW,UAAA;gCAAWC,OAAAA,EAAQ,IAAA;AAChDrB,gCAAAA,QAAAA,EAAAA;;AAEFI,4BAAAA;;;kCAEHU,cAAA,CAACQ,uBAAAA,EAAAA;wBAAWC,SAAAA,EAAU,YAAA;AAActB,wBAAAA,QAAAA,EAAAA;;;;;;AAI5C;AAEA,MAAMc,WAAAA,GAAcS,aAAAA,CAAsBf,iBAAAA,CAAK;gBAC/B,EAAE,CAAC,EAAEgB,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;AAMjD,CAAC;AAED,MAAMP,mBAAAA,GAAsBK,aAAAA,CAA4BF,uBAAAA,CAAW;SAC1D,EAAE,CAAC,EAAEG,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACC,UAAU,CAAC;;AAElD,CAAC;;;;"}
+{"version":3,"file":"ContentBox.js","sources":["../../../../../admin/src/components/ContentBox.tsx"],"sourcesContent":["import {\n  Flex,\n  FlexComponent,\n  FlexProps,\n  Typography,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface ContentBoxProps {\n  title?: string;\n  subtitle?: string;\n  icon?: FlexProps['children'];\n  iconBackground?: FlexProps['background'];\n  endAction?: FlexProps['children'];\n  titleEllipsis?: boolean;\n}\n\nconst ContentBox = ({\n  title,\n  subtitle,\n  icon,\n  iconBackground,\n  endAction,\n  titleEllipsis = false,\n}: ContentBoxProps) => {\n  if (title && title.length > 70 && titleEllipsis) {\n    title = `${title.substring(0, 70)}...`;\n  }\n\n  return (\n    <Flex shadow=\"tableShadow\" hasRadius padding={6} background=\"neutral0\">\n      <IconWrapper background={iconBackground} hasRadius padding={3}>\n        {icon}\n      </IconWrapper>\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={endAction ? 0 : 1}>\n        <Flex>\n          <TypographyWordBreak fontWeight=\"semiBold\" variant=\"pi\">\n            {title}\n          </TypographyWordBreak>\n          {endAction}\n        </Flex>\n        <Typography textColor=\"neutral600\">{subtitle}</Typography>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst IconWrapper = styled<FlexComponent>(Flex)`\n  margin-right: ${({ theme }) => theme.spaces[6]};\n\n  svg {\n    width: 3.2rem;\n    height: 3.2rem;\n  }\n`;\n\nconst TypographyWordBreak = styled<TypographyComponent>(Typography)`\n  color: ${({ theme }) => theme.colors.neutral800};\n  word-break: break-all;\n`;\n\nexport { ContentBox };\nexport type { ContentBoxProps };\n"],"names":["ContentBox","title","subtitle","icon","iconBackground","endAction","titleEllipsis","length","substring","_jsxs","Flex","shadow","hasRadius","padding","background","_jsx","IconWrapper","direction","alignItems","gap","TypographyWordBreak","fontWeight","variant","Typography","textColor","styled","theme","spaces","colors","neutral800"],"mappings":";;;;;;AAkBA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,SAAS,EACTC,aAAAA,GAAgB,KAAK,EACL,GAAA;AAChB,IAAA,IAAIL,KAAAA,IAASA,KAAAA,CAAMM,MAAM,GAAG,MAAMD,aAAAA,EAAe;AAC/CL,QAAAA,KAAAA,GAAQ,GAAGA,KAAAA,CAAMO,SAAS,CAAC,CAAA,EAAG,EAAA,CAAA,CAAI,GAAG,CAAC;AACxC,IAAA;AAEA,IAAA,qBACEC,eAAA,CAACC,iBAAAA,EAAAA;QAAKC,MAAAA,EAAO,aAAA;QAAcC,SAAS,EAAA,IAAA;QAACC,OAAAA,EAAS,CAAA;QAAGC,UAAAA,EAAW,UAAA;;0BAC1DC,cAAA,CAACC,WAAAA,EAAAA;gBAAYF,UAAAA,EAAYV,cAAAA;gBAAgBQ,SAAS,EAAA,IAAA;gBAACC,OAAAA,EAAS,CAAA;AACzDV,gBAAAA,QAAAA,EAAAA;;0BAEHM,eAAA,CAACC,iBAAAA,EAAAA;gBAAKO,SAAAA,EAAU,QAAA;gBAASC,UAAAA,EAAW,SAAA;AAAUC,gBAAAA,GAAAA,EAAKd,YAAY,CAAA,GAAI,CAAA;;kCACjEI,eAAA,CAACC,iBAAAA,EAAAA;;0CACCK,cAAA,CAACK,mBAAAA,EAAAA;gCAAoBC,UAAAA,EAAW,UAAA;gCAAWC,OAAAA,EAAQ,IAAA;AAChDrB,gCAAAA,QAAAA,EAAAA;;AAEFI,4BAAAA;;;kCAEHU,cAAA,CAACQ,uBAAAA,EAAAA;wBAAWC,SAAAA,EAAU,YAAA;AAActB,wBAAAA,QAAAA,EAAAA;;;;;;AAI5C;AAEA,MAAMc,WAAAA,GAAcS,uBAAAA,CAAsBf,iBAAAA,CAAK;gBAC/B,EAAE,CAAC,EAAEgB,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;AAMjD,CAAC;AAED,MAAMP,mBAAAA,GAAsBK,uBAAAA,CAA4BF,uBAAAA,CAAW;SAC1D,EAAE,CAAC,EAAEG,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACC,UAAU,CAAC;;AAElD,CAAC;;;;"}

package/dist/admin/admin/src/components/DescriptionComponentRenderer.js

@@ -93,7 +93,7 @@ var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
         children: [
             descriptions.map((description)=>{
                 const key = getCompId(description);
-                return /*#__PURE__*/ jsxRuntime.jsx(Description, {
+                return /*#__PURE__*/ jsxRuntime.jsx(MemoizedDescription, {
                     id: key,
                     description: description,
                     props: props,
@@ -109,7 +109,7 @@ var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
  * this means they can use react hooks in them. It also means we need to render them
  * within a component, however because they return an object of data we can't add that
  * to the react tree, instead we push it back out to the parent.
- */ const Description = /*#__PURE__*/ React__namespace.memo(({ description, id, props, update })=>{
+ */ const Description = ({ description, id, props, update })=>{
     const comp = description(props);
     useShallowCompareEffect(()=>{
         update(id, comp);
@@ -118,16 +118,16 @@ var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
         };
     }, comp);
     return null;
-}, (prev, next)=>isEqual__default.default(prev.props, next.props));
-/* -------------------------------------------------------------------------------------------------
- * Helpers
- * -----------------------------------------------------------------------------------------------*/ const ids = new WeakMap();
+};
+const MemoizedDescription = /*#__PURE__*/ React__namespace.memo(Description, (prev, next)=>isEqual__default.default(prev.props, next.props));
+const ids = new WeakMap();
 let counter = 0;
 function getCompId(comp) {
-    const cachedId = ids.get(comp);
+    const cachedComponent = comp;
+    const cachedId = ids.get(cachedComponent);
     if (cachedId) return cachedId;
     const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;
-    ids.set(comp, id);
+    ids.set(cachedComponent, id);
     return id;
 }
 const useShallowCompareMemoize = (value)=>{

package/dist/admin/admin/src/components/DescriptionComponentRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionComponentRenderer.js","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = any, Description = any> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <Description key={key} id={key} description={description} props={props} update={update} />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = React.memo(\n  ({ description, id, props, update }: DescriptionProps<any, any>) => {\n    const comp = description(props);\n\n    useShallowCompareEffect(() => {\n      update(id, comp);\n\n      return () => {\n        update(id, null);\n      };\n    }, comp);\n\n    return null;\n  },\n  (prev, next) => isEqual(prev.props, next.props)\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\nconst ids = new WeakMap<DescriptionComponent<any, any>, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedId = ids.get(comp);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || (comp as any).displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(comp, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","Description","memo","comp","useShallowCompareEffect","prev","next","isEqual","WeakMap","counter","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}
+{"version":3,"file":"DescriptionComponentRenderer.js","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n  displayName?: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = unknown, Description = unknown> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <MemoizedDescription\n            key={key}\n            id={key}\n            description={description}\n            props={props}\n            update={update}\n          />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = <Props, Description>({\n  description,\n  id,\n  props,\n  update,\n}: DescriptionProps<Props, Description>) => {\n  const comp = description(props);\n\n  useShallowCompareEffect(() => {\n    update(id, comp);\n\n    return () => {\n      update(id, null);\n    };\n  }, comp);\n\n  return null;\n};\n\nconst MemoizedDescription = React.memo(Description, (prev, next) =>\n  isEqual(prev.props, next.props)\n) as typeof Description;\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\ntype CachedDescriptionComponent = DescriptionComponent<unknown, unknown>;\n\nconst ids = new WeakMap<CachedDescriptionComponent, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedComponent = comp as CachedDescriptionComponent;\n  const cachedId = ids.get(cachedComponent);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(cachedComponent, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","MemoizedDescription","Description","comp","useShallowCompareEffect","memo","prev","next","isEqual","WeakMap","counter","cachedComponent","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}

package/dist/admin/admin/src/components/DescriptionComponentRenderer.mjs

@@ -68,7 +68,7 @@ import { cancelIdleCallback as _cancelIdleCallback, requestIdleCallback as _requ
         children: [
             descriptions.map((description)=>{
                 const key = getCompId(description);
-                return /*#__PURE__*/ jsx(Description, {
+                return /*#__PURE__*/ jsx(MemoizedDescription, {
                     id: key,
                     description: description,
                     props: props,
@@ -84,7 +84,7 @@ import { cancelIdleCallback as _cancelIdleCallback, requestIdleCallback as _requ
  * this means they can use react hooks in them. It also means we need to render them
  * within a component, however because they return an object of data we can't add that
  * to the react tree, instead we push it back out to the parent.
- */ const Description = /*#__PURE__*/ React.memo(({ description, id, props, update })=>{
+ */ const Description = ({ description, id, props, update })=>{
     const comp = description(props);
     useShallowCompareEffect(()=>{
         update(id, comp);
@@ -93,16 +93,16 @@ import { cancelIdleCallback as _cancelIdleCallback, requestIdleCallback as _requ
         };
     }, comp);
     return null;
-}, (prev, next)=>isEqual(prev.props, next.props));
-/* -------------------------------------------------------------------------------------------------
- * Helpers
- * -----------------------------------------------------------------------------------------------*/ const ids = new WeakMap();
+};
+const MemoizedDescription = /*#__PURE__*/ React.memo(Description, (prev, next)=>isEqual(prev.props, next.props));
+const ids = new WeakMap();
 let counter = 0;
 function getCompId(comp) {
-    const cachedId = ids.get(comp);
+    const cachedComponent = comp;
+    const cachedId = ids.get(cachedComponent);
     if (cachedId) return cachedId;
     const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;
-    ids.set(comp, id);
+    ids.set(cachedComponent, id);
     return id;
 }
 const useShallowCompareMemoize = (value)=>{

package/dist/admin/admin/src/components/DescriptionComponentRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionComponentRenderer.mjs","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = any, Description = any> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <Description key={key} id={key} description={description} props={props} update={update} />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = React.memo(\n  ({ description, id, props, update }: DescriptionProps<any, any>) => {\n    const comp = description(props);\n\n    useShallowCompareEffect(() => {\n      update(id, comp);\n\n      return () => {\n        update(id, null);\n      };\n    }, comp);\n\n    return null;\n  },\n  (prev, next) => isEqual(prev.props, next.props)\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\nconst ids = new WeakMap<DescriptionComponent<any, any>, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedId = ids.get(comp);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || (comp as any).displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(comp, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","Description","memo","comp","useShallowCompareEffect","prev","next","isEqual","WeakMap","counter","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":";;;;;;;AA6BA;;;;;;;;;;IAWA,MAAMA,+BAA+B,CAAqB,EACxDC,QAAQ,EACRC,KAAK,EACLC,YAAY,EAC0C,GAAA;AACtD,IAAA,MAAMC,SAAAA,GAAYC,KAAAA,CAAMC,MAAM,CAA0D,EAAC,CAAA;IACzF,MAAM,CAACC,IAAAA,EAAMC,WAAAA,CAAY,GAAGC,cAAAA,EAAAA;IAE5B,MAAMC,aAAAA,GAAgBL,KAAAA,CAAMC,MAAM,CAAgB,IAAA,CAAA;IAClD,MAAMK,aAAAA,GAAgBN,KAAAA,CAAMO,WAAW,CAAC,IAAA;QACtC,IAAIF,aAAAA,CAAcG,OAAO,EAAE;AACzBC,YAAAA,mBAAAA,CAAmBJ,cAAcG,OAAO,CAAA;AAC1C,QAAA;QAEAH,aAAAA,CAAcG,OAAO,GAAGE,oBAAAA,CAAoB,IAAA;AAC1CL,YAAAA,aAAAA,CAAcG,OAAO,GAAG,IAAA;AAExBL,YAAAA,WAAAA,EAAAA;AACF,QAAA,CAAA,CAAA;IACF,CAAA,EAAG;AAACA,QAAAA;AAAY,KAAA,CAAA;AAEhB;;AAEC,MACD,MAAMQ,sBAAAA,GAAyBC,oBAAAA,CAAqBN,aAAAA,EAAe,EAAA,EAAI;QAAEO,QAAAA,EAAU;AAAK,KAAA,CAAA;AAExF,IAAA,MAAMC,MAAAA,GAASd,KAAAA,CAAMO,WAAW,CAC9B,CAACQ,EAAAA,EAAIC,WAAAA,GAAAA;AACH,QAAA,IAAIA,gBAAgB,IAAA,EAAM;YACxB,OAAOjB,SAAAA,CAAUS,OAAO,CAACO,EAAAA,CAAG;QAC9B,CAAA,MAAO;AACL,YAAA,MAAMP,OAAAA,GAAUT,SAAAA,CAAUS,OAAO,CAACO,EAAAA,CAAG;YACrChB,SAAAA,CAAUS,OAAO,CAACO,EAAAA,CAAG,GAAG;AAAE,gBAAA,GAAGP,OAAO;gBAAES,KAAAA,EAAO;AAAE,oBAAA,GAAGD,WAAW;AAAED,oBAAAA;AAAG;AAAE,aAAA;AACtE,QAAA;AAEAJ,QAAAA,sBAAAA,EAAAA;IACF,CAAA,EACA;AAACA,QAAAA;AAAuB,KAAA,CAAA;IAG1B,MAAMO,GAAAA,GAAMlB,KAAAA,CAAMmB,OAAO,CACvB,IAAMrB,YAAAA,CAAasB,GAAG,CAAC,CAACJ,WAAAA,GAAgBK,SAAAA,CAAUL,WAAAA,CAAAA,CAAAA,EAClD;AAAClB,QAAAA;AAAa,KAAA,CAAA;IAGhB,MAAMwB,MAAAA,GAAStB,MAAMmB,OAAO,CAC1B,IACED,GAAAA,CACGE,GAAG,CAAC,CAACL,EAAAA,GAAOhB,SAAAA,CAAUS,OAAO,CAACO,EAAAA,CAAG,EAAEE,KAAAA,CAAAA,CACnCM,MAAM,CAAC,CAACC,KAAAA,GAAUA,KAAAA,KAAU,IAAA,IAAQA,KAAAA,KAAUC,SAAAA,CAAAA;;;;AAKlD;AAED,IAAA;AAACP,QAAAA,GAAAA;AAAKhB,QAAAA;AAAK,KAAA,CAAA;IAGb,qBACEwB,IAAA,CAAAC,QAAA,EAAA;;YACG7B,YAAAA,CAAasB,GAAG,CAAC,CAACJ,WAAAA,GAAAA;AACjB,gBAAA,MAAMY,MAAMP,SAAAA,CAAUL,WAAAA,CAAAA;AACtB,gBAAA,qBACEa,GAAA,CAACC,WAAAA,EAAAA;oBAAsBf,EAAAA,EAAIa,GAAAA;oBAAKZ,WAAAA,EAAaA,WAAAA;oBAAanB,KAAAA,EAAOA,KAAAA;oBAAOiB,MAAAA,EAAQA;AAA9Dc,iBAAAA,EAAAA,GAAAA,CAAAA;AAEtB,YAAA,CAAA,CAAA;YACChC,QAAAA,CAAS0B,MAAAA;;;AAGhB;AAaA;;;;;AAKC,IACD,MAAMQ,WAAAA,iBAAc9B,KAAAA,CAAM+B,IAAI,CAC5B,CAAC,EAAEf,WAAW,EAAED,EAAE,EAAElB,KAAK,EAAEiB,MAAM,EAA8B,GAAA;AAC7D,IAAA,MAAMkB,OAAOhB,WAAAA,CAAYnB,KAAAA,CAAAA;IAEzBoC,uBAAAA,CAAwB,IAAA;AACtBnB,QAAAA,MAAAA,CAAOC,EAAAA,EAAIiB,IAAAA,CAAAA;QAEX,OAAO,IAAA;AACLlB,YAAAA,MAAAA,CAAOC,EAAAA,EAAI,IAAA,CAAA;AACb,QAAA,CAAA;IACF,CAAA,EAAGiB,IAAAA,CAAAA;IAEH,OAAO,IAAA;AACT,CAAA,EACA,CAACE,MAAMC,IAAAA,GAASC,OAAAA,CAAQF,KAAKrC,KAAK,EAAEsC,KAAKtC,KAAK,CAAA,CAAA;AAGhD;;qGAIA,MAAMqB,MAAM,IAAImB,OAAAA,EAAAA;AAEhB,IAAIC,OAAAA,GAAU,CAAA;AAEd,SAASjB,UAAgBW,IAAgC,EAAA;IACvD,MAAMO,QAAAA,GAAWrB,GAAAA,CAAIsB,GAAG,CAACR,IAAAA,CAAAA;AAEzB,IAAA,IAAIO,UAAU,OAAOA,QAAAA;AAErB,IAAA,MAAMxB,EAAAA,GAAK,CAAA,EAAGiB,IAAAA,CAAKS,IAAI,IAAKT,IAAAA,CAAaU,WAAW,IAAI,aAAA,CAAc,CAAC,EAAEJ,OAAAA,EAAAA,CAAAA,CAAW;IAEpFpB,GAAAA,CAAIyB,GAAG,CAACX,IAAAA,EAAMjB,EAAAA,CAAAA;IAEd,OAAOA,EAAAA;AACT;AAEA,MAAM6B,2BAA2B,CAAK3B,KAAAA,GAAAA;IACpC,MAAM4B,GAAAA,GAAM7C,KAAAA,CAAMC,MAAM,CAAgBwB,SAAAA,CAAAA;AAExC,IAAA,IAAI,CAACW,OAAAA,CAAQnB,KAAAA,EAAO4B,GAAAA,CAAIrC,OAAO,CAAA,EAAG;AAChCqC,QAAAA,GAAAA,CAAIrC,OAAO,GAAGS,KAAAA;AAChB,IAAA;IAEA,OAAO;AAAC4B,QAAAA,GAAAA,CAAIrC;AAAQ,KAAA;AACtB,CAAA;AAEA,MAAMyB,uBAAAA,GAA0B,CAACa,QAAAA,EAAgCC,YAAAA,GAAAA;;IAE/D/C,KAAAA,CAAMgD,SAAS,CAACF,QAAAA,EAAUF,wBAAAA,CAAyBG,YAAAA,CAAAA,CAAAA;AACrD,CAAA;;;;"}
+{"version":3,"file":"DescriptionComponentRenderer.mjs","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n  displayName?: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = unknown, Description = unknown> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <MemoizedDescription\n            key={key}\n            id={key}\n            description={description}\n            props={props}\n            update={update}\n          />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = <Props, Description>({\n  description,\n  id,\n  props,\n  update,\n}: DescriptionProps<Props, Description>) => {\n  const comp = description(props);\n\n  useShallowCompareEffect(() => {\n    update(id, comp);\n\n    return () => {\n      update(id, null);\n    };\n  }, comp);\n\n  return null;\n};\n\nconst MemoizedDescription = React.memo(Description, (prev, next) =>\n  isEqual(prev.props, next.props)\n) as typeof Description;\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\ntype CachedDescriptionComponent = DescriptionComponent<unknown, unknown>;\n\nconst ids = new WeakMap<CachedDescriptionComponent, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedComponent = comp as CachedDescriptionComponent;\n  const cachedId = ids.get(cachedComponent);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(cachedComponent, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","MemoizedDescription","Description","comp","useShallowCompareEffect","memo","prev","next","isEqual","WeakMap","counter","cachedComponent","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}

package/dist/admin/admin/src/components/ErrorElement.js

@@ -5,7 +5,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../constants/theme.js');
 var useClipboard = require('../hooks/useClipboard.js');
 var retryDynamicImport = require('../utils/retryDynamicImport.js');
@@ -207,7 +207,7 @@ ${error.stack}
     }
     throw error;
 };
-const StyledAlert = styled.styled(designSystem.Alert)`
+const StyledAlert = styledComponents.styled(designSystem.Alert)`
   & > div:first-child {
     display: none;
   }
@@ -216,11 +216,11 @@ const StyledAlert = styled.styled(designSystem.Alert)`
     display: none;
   }
 `;
-const ErrorType = styled.styled(designSystem.Typography)`
+const ErrorType = styledComponents.styled(designSystem.Typography)`
   word-break: break-all;
   color: ${({ theme })=>theme.colors.danger600};
 `;
-const ChunkErrorType = styled.styled(designSystem.Typography)`
+const ChunkErrorType = styledComponents.styled(designSystem.Typography)`
   word-break: break-all;
   color: ${({ theme })=>theme.colors.warning600};
 `;

package/dist/admin/admin/src/components/ErrorElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorElement.js","sources":["../../../../../admin/src/components/ErrorElement.tsx"],"sourcesContent":["import {\n  Alert,\n  Button,\n  Flex,\n  Main,\n  Typography,\n  Link,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { Clock, Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useClipboard } from '../hooks/useClipboard';\nimport { isChunkLoadError } from '../utils/retryDynamicImport';\n\n/**\n * @description this stops the app from going white, and instead shows the error message.\n * But it could be improved for sure.\n */\nconst ErrorElement = () => {\n  const error = useRouteError();\n  const { formatMessage } = useIntl();\n  const { copy } = useClipboard();\n\n  if (error instanceof Error) {\n    console.error(error);\n\n    const handleCopy = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n      `);\n    };\n\n    if (isChunkLoadError(error)) {\n      return (\n        <Main height=\"100%\">\n          <Flex\n            alignItems=\"center\"\n            height=\"100%\"\n            justifyContent=\"center\"\n            paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n            paddingRight={RESPONSIVE_DEFAULT_SPACING}\n          >\n            <Flex\n              gap={7}\n              padding={{\n                initial: 6,\n                small: 7,\n                medium: 8,\n              }}\n              direction=\"column\"\n              width=\"100%\"\n              maxWidth=\"512px\"\n              shadow=\"tableShadow\"\n              borderColor=\"neutral150\"\n              background=\"neutral0\"\n              hasRadius\n            >\n              <Flex direction=\"column\" gap={2}>\n                <Clock width=\"32px\" height=\"32px\" fill=\"primary600\" />\n                <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'app.error.chunk.title',\n                    defaultMessage: \"This screen couldn't be loaded\",\n                  })}\n                </Typography>\n                <Typography variant=\"omega\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'app.error.chunk.message',\n                    defaultMessage:\n                      'The admin could not load a screen. This often happens when the server is starting or the connection was interrupted. Reload the page to try again. If you recently deployed, you may need a full refresh to load the latest version.',\n                  })}\n                </Typography>\n              </Flex>\n              <Flex gap={4} direction=\"column\" width=\"100%\">\n                <Button onClick={() => window.location.reload()} fullWidth>\n                  {formatMessage({\n                    id: 'app.error.chunk.reload',\n                    defaultMessage: 'Reload the page',\n                  })}\n                </Button>\n                <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"warning\">\n                  <ChunkErrorType>{error.message}</ChunkErrorType>\n                </StyledAlert>\n                <Button onClick={handleCopy} variant=\"tertiary\" startIcon={<Duplicate />}>\n                  {formatMessage({\n                    id: 'app.error.copy',\n                    defaultMessage: 'Copy to clipboard',\n                  })}\n                </Button>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Main>\n      );\n    }\n\n    return (\n      <Main height=\"100%\">\n        <Flex\n          alignItems=\"center\"\n          height=\"100%\"\n          justifyContent=\"center\"\n          paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n          paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        >\n          <Flex\n            gap={7}\n            padding={{\n              initial: 6,\n              small: 7,\n              medium: 8,\n            }}\n            direction=\"column\"\n            width=\"100%\"\n            maxWidth=\"512px\"\n            shadow=\"tableShadow\"\n            borderColor=\"neutral150\"\n            background=\"neutral0\"\n            hasRadius\n          >\n            <Flex direction=\"column\" gap={2}>\n              <WarningCircle width=\"32px\" height=\"32px\" fill=\"danger600\" />\n              <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                {formatMessage({\n                  id: 'app.error',\n                  defaultMessage: 'Something went wrong',\n                })}\n              </Typography>\n              <Typography variant=\"omega\" textAlign=\"center\">\n                {formatMessage(\n                  {\n                    id: 'app.error.message',\n                    defaultMessage: `It seems like there is a bug in your instance, but we've got you covered. Please notify your technical team so they can investigate the source of the problem and report the issue to us by opening a bug report on {link}.`,\n                  },\n                  {\n                    link: (\n                      <Link\n                        isExternal\n                        // hack to get rid of the current endIcon, which should be removable by using `null`.\n                        endIcon\n                        href=\"https://github.com/strapi/strapi/issues/new?assignees=&labels=&projects=&template=BUG_REPORT.md\"\n                      >{`Strapi's GitHub`}</Link>\n                    ),\n                  }\n                )}\n              </Typography>\n            </Flex>\n            {/* the Alert component needs to make its close button optional as well as the icon. */}\n            <Flex gap={4} direction=\"column\" width=\"100%\">\n              <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"danger\">\n                <ErrorType>{error.message}</ErrorType>\n              </StyledAlert>\n              <Button onClick={handleCopy} variant=\"tertiary\" startIcon={<Duplicate />}>\n                {formatMessage({\n                  id: 'app.error.copy',\n                  defaultMessage: 'Copy to clipboard',\n                })}\n              </Button>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Main>\n    );\n  }\n\n  throw error;\n};\n\nconst StyledAlert = styled(Alert)`\n  & > div:first-child {\n    display: none;\n  }\n\n  & > button {\n    display: none;\n  }\n`;\n\nconst ErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.danger600};\n`;\n\nconst ChunkErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.warning600};\n`;\n\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleCopy","stack","isChunkLoadError","_jsx","Main","height","Flex","alignItems","justifyContent","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsxs","gap","padding","initial","small","medium","direction","width","maxWidth","shadow","borderColor","background","hasRadius","Clock","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","Button","onClick","window","location","reload","fullWidth","StyledAlert","onClose","closeLabel","ChunkErrorType","message","startIcon","Duplicate","WarningCircle","link","Link","isExternal","endIcon","href","ErrorType","styled","Alert","theme","colors","danger600","warning600"],"mappings":"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"}
+{"version":3,"file":"ErrorElement.js","sources":["../../../../../admin/src/components/ErrorElement.tsx"],"sourcesContent":["import {\n  Alert,\n  Button,\n  Flex,\n  Main,\n  Typography,\n  Link,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { Clock, Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useClipboard } from '../hooks/useClipboard';\nimport { isChunkLoadError } from '../utils/retryDynamicImport';\n\n/**\n * @description this stops the app from going white, and instead shows the error message.\n * But it could be improved for sure.\n */\nconst ErrorElement = () => {\n  const error = useRouteError();\n  const { formatMessage } = useIntl();\n  const { copy } = useClipboard();\n\n  if (error instanceof Error) {\n    console.error(error);\n\n    const handleCopy = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n      `);\n    };\n\n    if (isChunkLoadError(error)) {\n      return (\n        <Main height=\"100%\">\n          <Flex\n            alignItems=\"center\"\n            height=\"100%\"\n            justifyContent=\"center\"\n            paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n            paddingRight={RESPONSIVE_DEFAULT_SPACING}\n          >\n            <Flex\n              gap={7}\n              padding={{\n                initial: 6,\n                small: 7,\n                medium: 8,\n              }}\n              direction=\"column\"\n              width=\"100%\"\n              maxWidth=\"512px\"\n              shadow=\"tableShadow\"\n              borderColor=\"neutral150\"\n              background=\"neutral0\"\n              hasRadius\n            >\n              <Flex direction=\"column\" gap={2}>\n                <Clock width=\"32px\" height=\"32px\" fill=\"primary600\" />\n                <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'app.error.chunk.title',\n                    defaultMessage: \"This screen couldn't be loaded\",\n                  })}\n                </Typography>\n                <Typography variant=\"omega\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'app.error.chunk.message',\n                    defaultMessage:\n                      'The admin could not load a screen. This often happens when the server is starting or the connection was interrupted. Reload the page to try again. If you recently deployed, you may need a full refresh to load the latest version.',\n                  })}\n                </Typography>\n              </Flex>\n              <Flex gap={4} direction=\"column\" width=\"100%\">\n                <Button onClick={() => window.location.reload()} fullWidth>\n                  {formatMessage({\n                    id: 'app.error.chunk.reload',\n                    defaultMessage: 'Reload the page',\n                  })}\n                </Button>\n                <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"warning\">\n                  <ChunkErrorType>{error.message}</ChunkErrorType>\n                </StyledAlert>\n                <Button onClick={handleCopy} variant=\"tertiary\" startIcon={<Duplicate />}>\n                  {formatMessage({\n                    id: 'app.error.copy',\n                    defaultMessage: 'Copy to clipboard',\n                  })}\n                </Button>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Main>\n      );\n    }\n\n    return (\n      <Main height=\"100%\">\n        <Flex\n          alignItems=\"center\"\n          height=\"100%\"\n          justifyContent=\"center\"\n          paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n          paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        >\n          <Flex\n            gap={7}\n            padding={{\n              initial: 6,\n              small: 7,\n              medium: 8,\n            }}\n            direction=\"column\"\n            width=\"100%\"\n            maxWidth=\"512px\"\n            shadow=\"tableShadow\"\n            borderColor=\"neutral150\"\n            background=\"neutral0\"\n            hasRadius\n          >\n            <Flex direction=\"column\" gap={2}>\n              <WarningCircle width=\"32px\" height=\"32px\" fill=\"danger600\" />\n              <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                {formatMessage({\n                  id: 'app.error',\n                  defaultMessage: 'Something went wrong',\n                })}\n              </Typography>\n              <Typography variant=\"omega\" textAlign=\"center\">\n                {formatMessage(\n                  {\n                    id: 'app.error.message',\n                    defaultMessage: `It seems like there is a bug in your instance, but we've got you covered. Please notify your technical team so they can investigate the source of the problem and report the issue to us by opening a bug report on {link}.`,\n                  },\n                  {\n                    link: (\n                      <Link\n                        isExternal\n                        // hack to get rid of the current endIcon, which should be removable by using `null`.\n                        endIcon\n                        href=\"https://github.com/strapi/strapi/issues/new?assignees=&labels=&projects=&template=BUG_REPORT.md\"\n                      >{`Strapi's GitHub`}</Link>\n                    ),\n                  }\n                )}\n              </Typography>\n            </Flex>\n            {/* the Alert component needs to make its close button optional as well as the icon. */}\n            <Flex gap={4} direction=\"column\" width=\"100%\">\n              <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"danger\">\n                <ErrorType>{error.message}</ErrorType>\n              </StyledAlert>\n              <Button onClick={handleCopy} variant=\"tertiary\" startIcon={<Duplicate />}>\n                {formatMessage({\n                  id: 'app.error.copy',\n                  defaultMessage: 'Copy to clipboard',\n                })}\n              </Button>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Main>\n    );\n  }\n\n  throw error;\n};\n\nconst StyledAlert = styled(Alert)`\n  & > div:first-child {\n    display: none;\n  }\n\n  & > button {\n    display: none;\n  }\n`;\n\nconst ErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.danger600};\n`;\n\nconst ChunkErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.warning600};\n`;\n\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleCopy","stack","isChunkLoadError","_jsx","Main","height","Flex","alignItems","justifyContent","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsxs","gap","padding","initial","small","medium","direction","width","maxWidth","shadow","borderColor","background","hasRadius","Clock","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","Button","onClick","window","location","reload","fullWidth","StyledAlert","onClose","closeLabel","ChunkErrorType","message","startIcon","Duplicate","WarningCircle","link","Link","isExternal","endIcon","href","ErrorType","styled","Alert","theme","colors","danger600","warning600"],"mappings":"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"}

package/dist/admin/admin/src/components/Form.js

@@ -36,6 +36,12 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 
+const isArrayLikeOptions = (options)=>{
+    return typeof options === 'object' && options !== null && 'length' in options;
+};
+const isMultipleSelectTarget = (target)=>{
+    return 'multiple' in target && target.multiple === true && 'options' in target && isArrayLikeOptions(target.options);
+};
 /**
  * @internal
  * @description We use this just to warn people that they're using the useForm
@@ -241,12 +247,22 @@ const [FormProvider, useForm] = Context.createContext('Form', {
             });
             return;
         }
-        const target = eventOrPath.target || eventOrPath.currentTarget;
-        const { type, name, id, value, options, multiple } = target;
-        const field = name || id;
-        if (!field && process.env.NODE_ENV !== 'production') {
+        const { target: eventTarget, currentTarget } = eventOrPath;
+        const target = eventTarget ?? currentTarget;
+        if (target === undefined) {
+            return;
+        }
+        const { type, name, id, value } = target;
+        let field = name;
+        if (field === undefined || field === '') {
+            field = id;
+        }
+        if ((field === undefined || field === '') && process.env.NODE_ENV !== 'production') {
             console.warn(`\`onChange\` was called with an event, but you forgot to pass a \`name\` or \`id'\` attribute to your input. The field to update cannot be determined`);
         }
+        if (field === undefined || field === '') {
+            return;
+        }
         /**
        * Because we handle any field from this function, we run through a series
        * of checks to understand how to use the value.
@@ -258,9 +274,9 @@ const [FormProvider, useForm] = Context.createContext('Form', {
         } else if (/checkbox/.test(type)) {
             // Get & invert the current value of the checkbox.
             val = !objects.getIn(state.values, field);
-        } else if (options && multiple) {
+        } else if (isMultipleSelectTarget(target)) {
             // This will handle native select elements incl. ones with mulitple options.
-            val = Array.from(options).filter((el)=>el.selected).map((el)=>el.value);
+            val = Array.from(target.options).filter((el)=>el.selected).map((el)=>el.value);
         } else {
             // NOTE: reset value to null so it failes required checks.
             // The API only considers a required field invalid if the value is null|undefined, to differentiate from min 1
@@ -270,15 +286,13 @@ const [FormProvider, useForm] = Context.createContext('Form', {
                 val = value;
             }
         }
-        if (field) {
-            dispatch({
-                type: 'SET_FIELD_VALUE',
-                payload: {
-                    field,
-                    value: val
-                }
-            });
-        }
+        dispatch({
+            type: 'SET_FIELD_VALUE',
+            payload: {
+                field,
+                value: val
+            }
+        });
     });
     const addFieldRow = React__namespace.useCallback((field, value, addAtIndex)=>{
         dispatch({
@@ -386,15 +400,16 @@ const [FormProvider, useForm] = Context.createContext('Form', {
     }
     return errors;
 };
+const setDraftValues = (draft, values)=>{
+    draft.values = values;
+};
 const reducer = (state, action)=>immer.produce(state, (draft)=>{
         switch(action.type){
             case 'SET_INITIAL_VALUES':
-                // @ts-expect-error – TODO: figure out why this fails ts.
-                draft.values = action.payload;
+                setDraftValues(draft, action.payload);
                 break;
             case 'SET_VALUES':
-                // @ts-expect-error – TODO: figure out why this fails ts.
-                draft.values = action.payload;
+                setDraftValues(draft, action.payload);
                 break;
             case 'SUBMIT_ATTEMPT':
                 draft.isSubmitting = true;
@@ -406,7 +421,7 @@ const reducer = (state, action)=>immer.produce(state, (draft)=>{
                 draft.isSubmitting = false;
                 break;
             case 'SET_FIELD_VALUE':
-                draft.values = objects.setIn(state.values, action.payload.field, action.payload.value);
+                setDraftValues(draft, objects.setIn(state.values, action.payload.field, action.payload.value));
                 break;
             case 'ADD_FIELD_ROW':
                 {
@@ -422,7 +437,7 @@ const reducer = (state, action)=>immer.produce(state, (draft)=>{
                     // Collect all existing keys to ensure uniqueness.
                     // Keys may be out of order after drag-and-drop moves, so we can't rely
                     // on fractional indexing alone to avoid collisions.
-                    const existingKeys = new Set(currentField.map((item)=>item.__temp_key__).filter(Boolean));
+                    const existingKeys = new Set(currentField.map((item)=>item.__temp_key__).filter((key)=>key !== undefined && key !== ''));
                     // Generate a unique key, retrying if there's a collision
                     let key;
                     let lowerBound = existingKeys.size > 0 ? Array.from(existingKeys).sort().pop() : null;
@@ -434,10 +449,10 @@ const reducer = (state, action)=>immer.produce(state, (draft)=>{
                             lowerBound = key;
                         }
                     }while (existingKeys.has(key))
-                    draft.values = objects.setIn(state.values, action.payload.field, currentField.toSpliced(position, 0, {
+                    setDraftValues(draft, objects.setIn(state.values, action.payload.field, currentField.toSpliced(position, 0, {
                         ...action.payload.value,
                         __temp_key__: key
-                    }));
+                    })));
                     break;
                 }
             case 'MOVE_FIELD_ROW':
@@ -453,7 +468,7 @@ const reducer = (state, action)=>immer.produce(state, (draft)=>{
                     // The array order determines display order, so fractional key ordering isn't needed.
                     currentField.splice(fromIndex, 1);
                     currentField.splice(toIndex, 0, currentRow);
-                    draft.values = objects.setIn(state.values, field, currentField);
+                    setDraftValues(draft, objects.setIn(state.values, field, currentField));
                     break;
                 }
             case 'REMOVE_FIELD_ROW':
@@ -471,7 +486,7 @@ const reducer = (state, action)=>immer.produce(state, (draft)=>{
          * filter out empty values from the array, the setIn function only deletes the value
          * when we pass undefined as opposed to "removing" it from said array.
          */ const newValue = objects.setIn(currentField, position.toString(), undefined).filter((val)=>val);
-                    draft.values = objects.setIn(state.values, action.payload.field, newValue.length > 0 ? newValue : []);
+                    setDraftValues(draft, objects.setIn(state.values, action.payload.field, newValue.length > 0 ? newValue : []));
                     break;
                 }
             case 'SET_ERRORS':
@@ -484,8 +499,7 @@ const reducer = (state, action)=>immer.produce(state, (draft)=>{
                 draft.isSubmitting = action.payload;
                 break;
             case 'RESET_FORM':
-                // @ts-expect-error – TODO: figure out why this fails ts.
-                draft.values = action.payload.values;
+                setDraftValues(draft, action.payload.values);
                 // @ts-expect-error – TODO: figure out why this fails ts.
                 draft.errors = action.payload.errors;
                 draft.isSubmitting = action.payload.isSubmitting;