@strapi/admin 5.49.0 → 5.50.0

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

@@ -8,6 +8,7 @@ var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
 var theme = require('../constants/theme.js');
 var useClipboard = require('../hooks/useClipboard.js');
+var retryDynamicImport = require('../utils/retryDynamicImport.js');
 
 /**
  * @description this stops the app from going white, and instead shows the error message.
@@ -18,13 +19,103 @@ var useClipboard = require('../hooks/useClipboard.js');
     const { copy } = useClipboard.useClipboard();
     if (error instanceof Error) {
         console.error(error);
-        const handleClick = async ()=>{
+        const handleCopy = async ()=>{
             await copy(`
 \`\`\`
 ${error.stack}
 \`\`\`
       `);
         };
+        if (retryDynamicImport.isChunkLoadError(error)) {
+            return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Main, {
+                height: "100%",
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    alignItems: "center",
+                    height: "100%",
+                    justifyContent: "center",
+                    paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+                    paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        gap: 7,
+                        padding: {
+                            initial: 6,
+                            small: 7,
+                            medium: 8
+                        },
+                        direction: "column",
+                        width: "100%",
+                        maxWidth: "512px",
+                        shadow: "tableShadow",
+                        borderColor: "neutral150",
+                        background: "neutral0",
+                        hasRadius: true,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                direction: "column",
+                                gap: 2,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(icons.Clock, {
+                                        width: "32px",
+                                        height: "32px",
+                                        fill: "primary600"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        fontSize: 4,
+                                        fontWeight: "bold",
+                                        textAlign: "center",
+                                        children: formatMessage({
+                                            id: 'app.error.chunk.title',
+                                            defaultMessage: "This screen couldn't be loaded"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "omega",
+                                        textAlign: "center",
+                                        children: formatMessage({
+                                            id: 'app.error.chunk.message',
+                                            defaultMessage: '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.'
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                gap: 4,
+                                direction: "column",
+                                width: "100%",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                        onClick: ()=>window.location.reload(),
+                                        fullWidth: true,
+                                        children: formatMessage({
+                                            id: 'app.error.chunk.reload',
+                                            defaultMessage: 'Reload the page'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(StyledAlert, {
+                                        onClose: ()=>{},
+                                        width: "100%",
+                                        closeLabel: "",
+                                        variant: "warning",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(ChunkErrorType, {
+                                            children: error.message
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                        onClick: handleCopy,
+                                        variant: "tertiary",
+                                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Duplicate, {}),
+                                        children: formatMessage({
+                                            id: 'app.error.copy',
+                                            defaultMessage: 'Copy to clipboard'
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            });
+        }
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Main, {
             height: "100%",
             children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
@@ -99,7 +190,7 @@ ${error.stack}
                                     })
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                                    onClick: handleClick,
+                                    onClick: handleCopy,
                                     variant: "tertiary",
                                     startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Duplicate, {}),
                                     children: formatMessage({
@@ -129,6 +220,10 @@ const ErrorType = styled.styled(designSystem.Typography)`
   word-break: break-all;
   color: ${({ theme })=>theme.colors.danger600};
 `;
+const ChunkErrorType = styled.styled(designSystem.Typography)`
+  word-break: break-all;
+  color: ${({ theme })=>theme.colors.warning600};
+`;
 
 exports.ErrorElement = ErrorElement;
 //# sourceMappingURL=ErrorElement.js.map

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 { 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';\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 handleClick = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\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={handleClick} 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\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleClick","stack","_jsx","Main","height","Flex","alignItems","justifyContent","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsxs","gap","padding","initial","small","medium","direction","width","maxWidth","shadow","borderColor","background","hasRadius","WarningCircle","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","link","Link","isExternal","endIcon","href","StyledAlert","onClose","closeLabel","ErrorType","message","Button","onClick","startIcon","Duplicate","styled","Alert","theme","colors","danger600"],"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/ErrorElement.mjs

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Alert, Typography, Main, Flex, Link, Button } from '@strapi/design-system';
-import { WarningCircle, Duplicate } from '@strapi/icons';
+import { Alert, Typography, Main, Flex, Button, Link } from '@strapi/design-system';
+import { Clock, Duplicate, WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useRouteError } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme.mjs';
 import { useClipboard } from '../hooks/useClipboard.mjs';
+import { isChunkLoadError } from '../utils/retryDynamicImport.mjs';
 
 /**
  * @description this stops the app from going white, and instead shows the error message.
@@ -16,13 +17,103 @@ import { useClipboard } from '../hooks/useClipboard.mjs';
     const { copy } = useClipboard();
     if (error instanceof Error) {
         console.error(error);
-        const handleClick = async ()=>{
+        const handleCopy = async ()=>{
             await copy(`
 \`\`\`
 ${error.stack}
 \`\`\`
       `);
         };
+        if (isChunkLoadError(error)) {
+            return /*#__PURE__*/ jsx(Main, {
+                height: "100%",
+                children: /*#__PURE__*/ jsx(Flex, {
+                    alignItems: "center",
+                    height: "100%",
+                    justifyContent: "center",
+                    paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+                    paddingRight: RESPONSIVE_DEFAULT_SPACING,
+                    children: /*#__PURE__*/ jsxs(Flex, {
+                        gap: 7,
+                        padding: {
+                            initial: 6,
+                            small: 7,
+                            medium: 8
+                        },
+                        direction: "column",
+                        width: "100%",
+                        maxWidth: "512px",
+                        shadow: "tableShadow",
+                        borderColor: "neutral150",
+                        background: "neutral0",
+                        hasRadius: true,
+                        children: [
+                            /*#__PURE__*/ jsxs(Flex, {
+                                direction: "column",
+                                gap: 2,
+                                children: [
+                                    /*#__PURE__*/ jsx(Clock, {
+                                        width: "32px",
+                                        height: "32px",
+                                        fill: "primary600"
+                                    }),
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        fontSize: 4,
+                                        fontWeight: "bold",
+                                        textAlign: "center",
+                                        children: formatMessage({
+                                            id: 'app.error.chunk.title',
+                                            defaultMessage: "This screen couldn't be loaded"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "omega",
+                                        textAlign: "center",
+                                        children: formatMessage({
+                                            id: 'app.error.chunk.message',
+                                            defaultMessage: '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.'
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(Flex, {
+                                gap: 4,
+                                direction: "column",
+                                width: "100%",
+                                children: [
+                                    /*#__PURE__*/ jsx(Button, {
+                                        onClick: ()=>window.location.reload(),
+                                        fullWidth: true,
+                                        children: formatMessage({
+                                            id: 'app.error.chunk.reload',
+                                            defaultMessage: 'Reload the page'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(StyledAlert, {
+                                        onClose: ()=>{},
+                                        width: "100%",
+                                        closeLabel: "",
+                                        variant: "warning",
+                                        children: /*#__PURE__*/ jsx(ChunkErrorType, {
+                                            children: error.message
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        onClick: handleCopy,
+                                        variant: "tertiary",
+                                        startIcon: /*#__PURE__*/ jsx(Duplicate, {}),
+                                        children: formatMessage({
+                                            id: 'app.error.copy',
+                                            defaultMessage: 'Copy to clipboard'
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            });
+        }
         return /*#__PURE__*/ jsx(Main, {
             height: "100%",
             children: /*#__PURE__*/ jsx(Flex, {
@@ -97,7 +188,7 @@ ${error.stack}
                                     })
                                 }),
                                 /*#__PURE__*/ jsx(Button, {
-                                    onClick: handleClick,
+                                    onClick: handleCopy,
                                     variant: "tertiary",
                                     startIcon: /*#__PURE__*/ jsx(Duplicate, {}),
                                     children: formatMessage({
@@ -127,6 +218,10 @@ const ErrorType = styled(Typography)`
   word-break: break-all;
   color: ${({ theme })=>theme.colors.danger600};
 `;
+const ChunkErrorType = styled(Typography)`
+  word-break: break-all;
+  color: ${({ theme })=>theme.colors.warning600};
+`;
 
 export { ErrorElement };
 //# sourceMappingURL=ErrorElement.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorElement.mjs","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 { 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';\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 handleClick = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\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={handleClick} 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\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleClick","stack","_jsx","Main","height","Flex","alignItems","justifyContent","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsxs","gap","padding","initial","small","medium","direction","width","maxWidth","shadow","borderColor","background","hasRadius","WarningCircle","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","link","Link","isExternal","endIcon","href","StyledAlert","onClose","closeLabel","ErrorType","message","Button","onClick","startIcon","Duplicate","styled","Alert","theme","colors","danger600"],"mappings":"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"}
+{"version":3,"file":"ErrorElement.mjs","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/FormInputs/Boolean.js

@@ -7,7 +7,7 @@ var reactIntl = require('react-intl');
 var useFocusInputField = require('../../hooks/useFocusInputField.js');
 var Form = require('../Form.js');
 
-const BooleanInput = /*#__PURE__*/ React.forwardRef(({ name, required, label, hint, labelAction, ...props }, ref)=>{
+const BooleanInput = /*#__PURE__*/ React.forwardRef(({ name, required, label, hint, labelAction, disabled, ...props }, ref)=>{
     const { formatMessage } = reactIntl.useIntl();
     const field = Form.useField(name);
     const fieldRef = useFocusInputField.useFocusInputField(name);
@@ -15,7 +15,7 @@ const BooleanInput = /*#__PURE__*/ React.forwardRef(({ name, required, label, hi
     const handleClear = ()=>{
         field.onChange(name, null);
     };
-    const showClearButton = !required && field.value !== null;
+    const showClearButton = !required && field.value !== null && !disabled;
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
         error: field.error,
         name: name,
@@ -54,6 +54,7 @@ const BooleanInput = /*#__PURE__*/ React.forwardRef(({ name, required, label, hi
                 }),
                 onChange: field.onChange,
                 name: name,
+                disabled: disabled,
                 ...props
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {}),

package/dist/admin/admin/src/components/FormInputs/Boolean.js.map

@@ -1 +1 @@
-{"version":3,"file":"Boolean.js","sources":["../../../../../../admin/src/components/FormInputs/Boolean.tsx"],"sourcesContent":["import { forwardRef, memo } from 'react';\n\nimport { Toggle, useComposedRefs, Field, Flex, TextButton } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst BooleanInput = forwardRef<HTMLInputElement, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const { formatMessage } = useIntl();\n    const field = useField<boolean | null>(name);\n    const fieldRef = useFocusInputField<HTMLInputElement>(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    const handleClear = () => {\n      field.onChange(name, null);\n    };\n\n    const showClearButton = !required && field.value !== null;\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required} maxWidth=\"320px\">\n        <Flex justifyContent=\"space-between\" alignItems=\"flex-end\" gap={2}>\n          <Field.Label action={labelAction}>{label}</Field.Label>\n          {showClearButton && (\n            <TextButton onClick={handleClear}>\n              {formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n            </TextButton>\n          )}\n        </Flex>\n        <Toggle\n          ref={composedRefs}\n          checked={field.value === null ? null : field.value || false}\n          offLabel={formatMessage({\n            id: 'app.components.ToggleCheckbox.off-label',\n            defaultMessage: 'False',\n          })}\n          onLabel={formatMessage({\n            id: 'app.components.ToggleCheckbox.on-label',\n            defaultMessage: 'True',\n          })}\n          onChange={field.onChange}\n          name={name}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedBooleanInput = memo(BooleanInput);\n\nexport { MemoizedBooleanInput as BooleanInput };\n"],"names":["BooleanInput","forwardRef","name","required","label","hint","labelAction","props","ref","formatMessage","useIntl","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","handleClear","onChange","showClearButton","value","_jsxs","Field","Root","error","maxWidth","Flex","justifyContent","alignItems","gap","_jsx","Label","action","TextButton","onClick","id","defaultMessage","Toggle","checked","offLabel","onLabel","Hint","Error","MemoizedBooleanInput","memo"],"mappings":";;;;;;;;;AAUA,MAAMA,6BAAeC,gBAAAA,CACnB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;IACvD,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQC,aAAAA,CAAyBV,IAAAA,CAAAA;AACvC,IAAA,MAAMW,WAAWC,qCAAAA,CAAqCZ,IAAAA,CAAAA;IAEtD,MAAMa,YAAAA,GAAeC,6BAAgBR,GAAAA,EAAKK,QAAAA,CAAAA;AAE1C,IAAA,MAAMI,WAAAA,GAAc,IAAA;QAClBN,KAAAA,CAAMO,QAAQ,CAAChB,IAAAA,EAAM,IAAA,CAAA;AACvB,IAAA,CAAA;AAEA,IAAA,MAAMiB,eAAAA,GAAkB,CAAChB,QAAAA,IAAYQ,KAAAA,CAAMS,KAAK,KAAK,IAAA;IAErD,qBACEC,eAAA,CAACC,mBAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOb,MAAMa,KAAK;QAAEtB,IAAAA,EAAMA,IAAAA;QAAMG,IAAAA,EAAMA,IAAAA;QAAMF,QAAAA,EAAUA,QAAAA;QAAUsB,QAAAA,EAAS,OAAA;;0BACnFJ,eAAA,CAACK,iBAAAA,EAAAA;gBAAKC,cAAAA,EAAe,eAAA;gBAAgBC,UAAAA,EAAW,UAAA;gBAAWC,GAAAA,EAAK,CAAA;;AAC9D,kCAAAC,cAAA,CAACR,mBAAMS,KAAK,EAAA;wBAACC,MAAAA,EAAQ1B,WAAAA;AAAcF,wBAAAA,QAAAA,EAAAA;;AAClCe,oBAAAA,eAAAA,kBACCW,cAAA,CAACG,uBAAAA,EAAAA;wBAAWC,OAAAA,EAASjB,WAAAA;kCAClBR,aAAAA,CAAc;4BAAE0B,EAAAA,EAAI,YAAA;4BAAcC,cAAAA,EAAgB;AAAQ,yBAAA;;;;0BAIjEN,cAAA,CAACO,mBAAAA,EAAAA;gBACC7B,GAAAA,EAAKO,YAAAA;AACLuB,gBAAAA,OAAAA,EAAS3B,MAAMS,KAAK,KAAK,OAAO,IAAA,GAAOT,KAAAA,CAAMS,KAAK,IAAI,KAAA;AACtDmB,gBAAAA,QAAAA,EAAU9B,aAAAA,CAAc;oBACtB0B,EAAAA,EAAI,yCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;AACAI,gBAAAA,OAAAA,EAAS/B,aAAAA,CAAc;oBACrB0B,EAAAA,EAAI,wCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;AACAlB,gBAAAA,QAAAA,EAAUP,MAAMO,QAAQ;gBACxBhB,IAAAA,EAAMA,IAAAA;AACL,gBAAA,GAAGK;;AAEN,0BAAAuB,cAAA,CAACR,mBAAMmB,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAX,cAAA,CAACR,mBAAMoB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGF,MAAMC,qCAAuBC,UAAAA,CAAK5C,YAAAA;;;;"}
+{"version":3,"file":"Boolean.js","sources":["../../../../../../admin/src/components/FormInputs/Boolean.tsx"],"sourcesContent":["import { forwardRef, memo } from 'react';\n\nimport { Toggle, useComposedRefs, Field, Flex, TextButton } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst BooleanInput = forwardRef<HTMLInputElement, InputProps>(\n  ({ name, required, label, hint, labelAction, disabled, ...props }, ref) => {\n    const { formatMessage } = useIntl();\n    const field = useField<boolean | null>(name);\n    const fieldRef = useFocusInputField<HTMLInputElement>(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    const handleClear = () => {\n      field.onChange(name, null);\n    };\n\n    const showClearButton = !required && field.value !== null && !disabled;\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required} maxWidth=\"320px\">\n        <Flex justifyContent=\"space-between\" alignItems=\"flex-end\" gap={2}>\n          <Field.Label action={labelAction}>{label}</Field.Label>\n          {showClearButton && (\n            <TextButton onClick={handleClear}>\n              {formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n            </TextButton>\n          )}\n        </Flex>\n        <Toggle\n          ref={composedRefs}\n          checked={field.value === null ? null : field.value || false}\n          offLabel={formatMessage({\n            id: 'app.components.ToggleCheckbox.off-label',\n            defaultMessage: 'False',\n          })}\n          onLabel={formatMessage({\n            id: 'app.components.ToggleCheckbox.on-label',\n            defaultMessage: 'True',\n          })}\n          onChange={field.onChange}\n          name={name}\n          disabled={disabled}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedBooleanInput = memo(BooleanInput);\n\nexport { MemoizedBooleanInput as BooleanInput };\n"],"names":["BooleanInput","forwardRef","name","required","label","hint","labelAction","disabled","props","ref","formatMessage","useIntl","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","handleClear","onChange","showClearButton","value","_jsxs","Field","Root","error","maxWidth","Flex","justifyContent","alignItems","gap","_jsx","Label","action","TextButton","onClick","id","defaultMessage","Toggle","checked","offLabel","onLabel","Hint","Error","MemoizedBooleanInput","memo"],"mappings":";;;;;;;;;AAUA,MAAMA,6BAAeC,gBAAAA,CACnB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAEC,QAAQ,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;IACjE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQC,aAAAA,CAAyBX,IAAAA,CAAAA;AACvC,IAAA,MAAMY,WAAWC,qCAAAA,CAAqCb,IAAAA,CAAAA;IAEtD,MAAMc,YAAAA,GAAeC,6BAAgBR,GAAAA,EAAKK,QAAAA,CAAAA;AAE1C,IAAA,MAAMI,WAAAA,GAAc,IAAA;QAClBN,KAAAA,CAAMO,QAAQ,CAACjB,IAAAA,EAAM,IAAA,CAAA;AACvB,IAAA,CAAA;AAEA,IAAA,MAAMkB,kBAAkB,CAACjB,QAAAA,IAAYS,MAAMS,KAAK,KAAK,QAAQ,CAACd,QAAAA;IAE9D,qBACEe,eAAA,CAACC,mBAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOb,MAAMa,KAAK;QAAEvB,IAAAA,EAAMA,IAAAA;QAAMG,IAAAA,EAAMA,IAAAA;QAAMF,QAAAA,EAAUA,QAAAA;QAAUuB,QAAAA,EAAS,OAAA;;0BACnFJ,eAAA,CAACK,iBAAAA,EAAAA;gBAAKC,cAAAA,EAAe,eAAA;gBAAgBC,UAAAA,EAAW,UAAA;gBAAWC,GAAAA,EAAK,CAAA;;AAC9D,kCAAAC,cAAA,CAACR,mBAAMS,KAAK,EAAA;wBAACC,MAAAA,EAAQ3B,WAAAA;AAAcF,wBAAAA,QAAAA,EAAAA;;AAClCgB,oBAAAA,eAAAA,kBACCW,cAAA,CAACG,uBAAAA,EAAAA;wBAAWC,OAAAA,EAASjB,WAAAA;kCAClBR,aAAAA,CAAc;4BAAE0B,EAAAA,EAAI,YAAA;4BAAcC,cAAAA,EAAgB;AAAQ,yBAAA;;;;0BAIjEN,cAAA,CAACO,mBAAAA,EAAAA;gBACC7B,GAAAA,EAAKO,YAAAA;AACLuB,gBAAAA,OAAAA,EAAS3B,MAAMS,KAAK,KAAK,OAAO,IAAA,GAAOT,KAAAA,CAAMS,KAAK,IAAI,KAAA;AACtDmB,gBAAAA,QAAAA,EAAU9B,aAAAA,CAAc;oBACtB0B,EAAAA,EAAI,yCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;AACAI,gBAAAA,OAAAA,EAAS/B,aAAAA,CAAc;oBACrB0B,EAAAA,EAAI,wCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;AACAlB,gBAAAA,QAAAA,EAAUP,MAAMO,QAAQ;gBACxBjB,IAAAA,EAAMA,IAAAA;gBACNK,QAAAA,EAAUA,QAAAA;AACT,gBAAA,GAAGC;;AAEN,0BAAAuB,cAAA,CAACR,mBAAMmB,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAX,cAAA,CAACR,mBAAMoB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGF,MAAMC,qCAAuBC,UAAAA,CAAK7C,YAAAA;;;;"}

package/dist/admin/admin/src/components/FormInputs/Boolean.mjs

@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl';
 import { useFocusInputField } from '../../hooks/useFocusInputField.mjs';
 import { useField } from '../Form.mjs';
 
-const BooleanInput = /*#__PURE__*/ forwardRef(({ name, required, label, hint, labelAction, ...props }, ref)=>{
+const BooleanInput = /*#__PURE__*/ forwardRef(({ name, required, label, hint, labelAction, disabled, ...props }, ref)=>{
     const { formatMessage } = useIntl();
     const field = useField(name);
     const fieldRef = useFocusInputField(name);
@@ -13,7 +13,7 @@ const BooleanInput = /*#__PURE__*/ forwardRef(({ name, required, label, hint, la
     const handleClear = ()=>{
         field.onChange(name, null);
     };
-    const showClearButton = !required && field.value !== null;
+    const showClearButton = !required && field.value !== null && !disabled;
     return /*#__PURE__*/ jsxs(Field.Root, {
         error: field.error,
         name: name,
@@ -52,6 +52,7 @@ const BooleanInput = /*#__PURE__*/ forwardRef(({ name, required, label, hint, la
                 }),
                 onChange: field.onChange,
                 name: name,
+                disabled: disabled,
                 ...props
             }),
             /*#__PURE__*/ jsx(Field.Hint, {}),

package/dist/admin/admin/src/components/FormInputs/Boolean.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Boolean.mjs","sources":["../../../../../../admin/src/components/FormInputs/Boolean.tsx"],"sourcesContent":["import { forwardRef, memo } from 'react';\n\nimport { Toggle, useComposedRefs, Field, Flex, TextButton } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst BooleanInput = forwardRef<HTMLInputElement, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const { formatMessage } = useIntl();\n    const field = useField<boolean | null>(name);\n    const fieldRef = useFocusInputField<HTMLInputElement>(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    const handleClear = () => {\n      field.onChange(name, null);\n    };\n\n    const showClearButton = !required && field.value !== null;\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required} maxWidth=\"320px\">\n        <Flex justifyContent=\"space-between\" alignItems=\"flex-end\" gap={2}>\n          <Field.Label action={labelAction}>{label}</Field.Label>\n          {showClearButton && (\n            <TextButton onClick={handleClear}>\n              {formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n            </TextButton>\n          )}\n        </Flex>\n        <Toggle\n          ref={composedRefs}\n          checked={field.value === null ? null : field.value || false}\n          offLabel={formatMessage({\n            id: 'app.components.ToggleCheckbox.off-label',\n            defaultMessage: 'False',\n          })}\n          onLabel={formatMessage({\n            id: 'app.components.ToggleCheckbox.on-label',\n            defaultMessage: 'True',\n          })}\n          onChange={field.onChange}\n          name={name}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedBooleanInput = memo(BooleanInput);\n\nexport { MemoizedBooleanInput as BooleanInput };\n"],"names":["BooleanInput","forwardRef","name","required","label","hint","labelAction","props","ref","formatMessage","useIntl","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","handleClear","onChange","showClearButton","value","_jsxs","Field","Root","error","maxWidth","Flex","justifyContent","alignItems","gap","_jsx","Label","action","TextButton","onClick","id","defaultMessage","Toggle","checked","offLabel","onLabel","Hint","Error","MemoizedBooleanInput","memo"],"mappings":";;;;;;;AAUA,MAAMA,6BAAeC,UAAAA,CACnB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;IACvD,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQC,QAAAA,CAAyBV,IAAAA,CAAAA;AACvC,IAAA,MAAMW,WAAWC,kBAAAA,CAAqCZ,IAAAA,CAAAA;IAEtD,MAAMa,YAAAA,GAAeC,gBAAgBR,GAAAA,EAAKK,QAAAA,CAAAA;AAE1C,IAAA,MAAMI,WAAAA,GAAc,IAAA;QAClBN,KAAAA,CAAMO,QAAQ,CAAChB,IAAAA,EAAM,IAAA,CAAA;AACvB,IAAA,CAAA;AAEA,IAAA,MAAMiB,eAAAA,GAAkB,CAAChB,QAAAA,IAAYQ,KAAAA,CAAMS,KAAK,KAAK,IAAA;IAErD,qBACEC,IAAA,CAACC,MAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOb,MAAMa,KAAK;QAAEtB,IAAAA,EAAMA,IAAAA;QAAMG,IAAAA,EAAMA,IAAAA;QAAMF,QAAAA,EAAUA,QAAAA;QAAUsB,QAAAA,EAAS,OAAA;;0BACnFJ,IAAA,CAACK,IAAAA,EAAAA;gBAAKC,cAAAA,EAAe,eAAA;gBAAgBC,UAAAA,EAAW,UAAA;gBAAWC,GAAAA,EAAK,CAAA;;AAC9D,kCAAAC,GAAA,CAACR,MAAMS,KAAK,EAAA;wBAACC,MAAAA,EAAQ1B,WAAAA;AAAcF,wBAAAA,QAAAA,EAAAA;;AAClCe,oBAAAA,eAAAA,kBACCW,GAAA,CAACG,UAAAA,EAAAA;wBAAWC,OAAAA,EAASjB,WAAAA;kCAClBR,aAAAA,CAAc;4BAAE0B,EAAAA,EAAI,YAAA;4BAAcC,cAAAA,EAAgB;AAAQ,yBAAA;;;;0BAIjEN,GAAA,CAACO,MAAAA,EAAAA;gBACC7B,GAAAA,EAAKO,YAAAA;AACLuB,gBAAAA,OAAAA,EAAS3B,MAAMS,KAAK,KAAK,OAAO,IAAA,GAAOT,KAAAA,CAAMS,KAAK,IAAI,KAAA;AACtDmB,gBAAAA,QAAAA,EAAU9B,aAAAA,CAAc;oBACtB0B,EAAAA,EAAI,yCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;AACAI,gBAAAA,OAAAA,EAAS/B,aAAAA,CAAc;oBACrB0B,EAAAA,EAAI,wCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;AACAlB,gBAAAA,QAAAA,EAAUP,MAAMO,QAAQ;gBACxBhB,IAAAA,EAAMA,IAAAA;AACL,gBAAA,GAAGK;;AAEN,0BAAAuB,GAAA,CAACR,MAAMmB,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAX,GAAA,CAACR,MAAMoB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGF,MAAMC,qCAAuBC,IAAAA,CAAK5C,YAAAA;;;;"}
+{"version":3,"file":"Boolean.mjs","sources":["../../../../../../admin/src/components/FormInputs/Boolean.tsx"],"sourcesContent":["import { forwardRef, memo } from 'react';\n\nimport { Toggle, useComposedRefs, Field, Flex, TextButton } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst BooleanInput = forwardRef<HTMLInputElement, InputProps>(\n  ({ name, required, label, hint, labelAction, disabled, ...props }, ref) => {\n    const { formatMessage } = useIntl();\n    const field = useField<boolean | null>(name);\n    const fieldRef = useFocusInputField<HTMLInputElement>(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    const handleClear = () => {\n      field.onChange(name, null);\n    };\n\n    const showClearButton = !required && field.value !== null && !disabled;\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required} maxWidth=\"320px\">\n        <Flex justifyContent=\"space-between\" alignItems=\"flex-end\" gap={2}>\n          <Field.Label action={labelAction}>{label}</Field.Label>\n          {showClearButton && (\n            <TextButton onClick={handleClear}>\n              {formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n            </TextButton>\n          )}\n        </Flex>\n        <Toggle\n          ref={composedRefs}\n          checked={field.value === null ? null : field.value || false}\n          offLabel={formatMessage({\n            id: 'app.components.ToggleCheckbox.off-label',\n            defaultMessage: 'False',\n          })}\n          onLabel={formatMessage({\n            id: 'app.components.ToggleCheckbox.on-label',\n            defaultMessage: 'True',\n          })}\n          onChange={field.onChange}\n          name={name}\n          disabled={disabled}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedBooleanInput = memo(BooleanInput);\n\nexport { MemoizedBooleanInput as BooleanInput };\n"],"names":["BooleanInput","forwardRef","name","required","label","hint","labelAction","disabled","props","ref","formatMessage","useIntl","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","handleClear","onChange","showClearButton","value","_jsxs","Field","Root","error","maxWidth","Flex","justifyContent","alignItems","gap","_jsx","Label","action","TextButton","onClick","id","defaultMessage","Toggle","checked","offLabel","onLabel","Hint","Error","MemoizedBooleanInput","memo"],"mappings":";;;;;;;AAUA,MAAMA,6BAAeC,UAAAA,CACnB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAEC,QAAQ,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;IACjE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQC,QAAAA,CAAyBX,IAAAA,CAAAA;AACvC,IAAA,MAAMY,WAAWC,kBAAAA,CAAqCb,IAAAA,CAAAA;IAEtD,MAAMc,YAAAA,GAAeC,gBAAgBR,GAAAA,EAAKK,QAAAA,CAAAA;AAE1C,IAAA,MAAMI,WAAAA,GAAc,IAAA;QAClBN,KAAAA,CAAMO,QAAQ,CAACjB,IAAAA,EAAM,IAAA,CAAA;AACvB,IAAA,CAAA;AAEA,IAAA,MAAMkB,kBAAkB,CAACjB,QAAAA,IAAYS,MAAMS,KAAK,KAAK,QAAQ,CAACd,QAAAA;IAE9D,qBACEe,IAAA,CAACC,MAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOb,MAAMa,KAAK;QAAEvB,IAAAA,EAAMA,IAAAA;QAAMG,IAAAA,EAAMA,IAAAA;QAAMF,QAAAA,EAAUA,QAAAA;QAAUuB,QAAAA,EAAS,OAAA;;0BACnFJ,IAAA,CAACK,IAAAA,EAAAA;gBAAKC,cAAAA,EAAe,eAAA;gBAAgBC,UAAAA,EAAW,UAAA;gBAAWC,GAAAA,EAAK,CAAA;;AAC9D,kCAAAC,GAAA,CAACR,MAAMS,KAAK,EAAA;wBAACC,MAAAA,EAAQ3B,WAAAA;AAAcF,wBAAAA,QAAAA,EAAAA;;AAClCgB,oBAAAA,eAAAA,kBACCW,GAAA,CAACG,UAAAA,EAAAA;wBAAWC,OAAAA,EAASjB,WAAAA;kCAClBR,aAAAA,CAAc;4BAAE0B,EAAAA,EAAI,YAAA;4BAAcC,cAAAA,EAAgB;AAAQ,yBAAA;;;;0BAIjEN,GAAA,CAACO,MAAAA,EAAAA;gBACC7B,GAAAA,EAAKO,YAAAA;AACLuB,gBAAAA,OAAAA,EAAS3B,MAAMS,KAAK,KAAK,OAAO,IAAA,GAAOT,KAAAA,CAAMS,KAAK,IAAI,KAAA;AACtDmB,gBAAAA,QAAAA,EAAU9B,aAAAA,CAAc;oBACtB0B,EAAAA,EAAI,yCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;AACAI,gBAAAA,OAAAA,EAAS/B,aAAAA,CAAc;oBACrB0B,EAAAA,EAAI,wCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;AACAlB,gBAAAA,QAAAA,EAAUP,MAAMO,QAAQ;gBACxBjB,IAAAA,EAAMA,IAAAA;gBACNK,QAAAA,EAAUA,QAAAA;AACT,gBAAA,GAAGC;;AAEN,0BAAAuB,GAAA,CAACR,MAAMmB,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAX,GAAA,CAACR,MAAMoB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGF,MAAMC,qCAAuBC,IAAAA,CAAK7C,YAAAA;;;;"}

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

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactRouterDom = require('react-router-dom');
+var PageHelpers = require('./PageHelpers.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return 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__*/_interopNamespace(React);
+
+const NestedLoading = ()=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "50vh",
+        padding: 8,
+        "aria-busy": true,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+            children: "Loading content."
+        })
+    });
+/**
+ * Renders child routes with a visible loading state while lazy chunks load.
+ * Suspense fallbacks are suppressed during React Router transitions, so we also
+ * check `useNavigation().state` to replace stale outlet content while navigating.
+ */ const LazyOutlet = ({ nested = false, suspenseOnly = false })=>{
+    const navigation = reactRouterDom.useNavigation();
+    const isNavigating = !suspenseOnly && navigation.state === 'loading';
+    const fallback = nested ? /*#__PURE__*/ jsxRuntime.jsx(NestedLoading, {}) : /*#__PURE__*/ jsxRuntime.jsx(PageHelpers.Page.Loading, {});
+    if (isNavigating) {
+        return fallback;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(React__namespace.Suspense, {
+        fallback: fallback,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+    });
+};
+
+exports.LazyOutlet = LazyOutlet;
+//# sourceMappingURL=LazyOutlet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LazyOutlet.js","sources":["../../../../../admin/src/components/LazyOutlet.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Loader } from '@strapi/design-system';\nimport { Outlet, useNavigation } from 'react-router-dom';\n\nimport { Page } from './PageHelpers';\n\ninterface LazyOutletProps {\n  /**\n   * Compact loader for nested layout content columns (e.g. Settings, Content Manager)\n   * where the parent shell should stay visible.\n   */\n  nested?: boolean;\n  /**\n   * Parent outlets only use Suspense so nested layouts can own navigation loading UX\n   * (side nav stays visible while a child chunk loads).\n   */\n  suspenseOnly?: boolean;\n}\n\nconst NestedLoading = () => (\n  <Flex alignItems=\"center\" justifyContent=\"center\" minHeight=\"50vh\" padding={8} aria-busy>\n    <Loader>Loading content.</Loader>\n  </Flex>\n);\n\n/**\n * Renders child routes with a visible loading state while lazy chunks load.\n * Suspense fallbacks are suppressed during React Router transitions, so we also\n * check `useNavigation().state` to replace stale outlet content while navigating.\n */\nconst LazyOutlet = ({ nested = false, suspenseOnly = false }: LazyOutletProps) => {\n  const navigation = useNavigation();\n  const isNavigating = !suspenseOnly && navigation.state === 'loading';\n  const fallback = nested ? <NestedLoading /> : <Page.Loading />;\n\n  if (isNavigating) {\n    return fallback;\n  }\n\n  return (\n    <React.Suspense fallback={fallback}>\n      <Outlet />\n    </React.Suspense>\n  );\n};\n\nexport { LazyOutlet };\nexport type { LazyOutletProps };\n"],"names":["NestedLoading","_jsx","Flex","alignItems","justifyContent","minHeight","padding","aria-busy","Loader","LazyOutlet","nested","suspenseOnly","navigation","useNavigation","isNavigating","state","fallback","Page","Loading","React","Suspense","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,aAAAA,GAAgB,kBACpBC,cAAA,CAACC,iBAAAA,EAAAA;QAAKC,UAAAA,EAAW,QAAA;QAASC,cAAAA,EAAe,QAAA;QAASC,SAAAA,EAAU,MAAA;QAAOC,OAAAA,EAAS,CAAA;QAAGC,WAAS,EAAA,IAAA;AACtF,QAAA,QAAA,gBAAAN,cAAA,CAACO,mBAAAA,EAAAA;AAAO,YAAA,QAAA,EAAA;;;AAIZ;;;;IAKA,MAAMC,aAAa,CAAC,EAAEC,SAAS,KAAK,EAAEC,YAAAA,GAAe,KAAK,EAAmB,GAAA;AAC3E,IAAA,MAAMC,UAAAA,GAAaC,4BAAAA,EAAAA;AACnB,IAAA,MAAMC,YAAAA,GAAe,CAACH,YAAAA,IAAgBC,UAAAA,CAAWG,KAAK,KAAK,SAAA;AAC3D,IAAA,MAAMC,WAAWN,MAAAA,iBAAST,cAAA,CAACD,aAAAA,EAAAA,EAAAA,CAAAA,iBAAmBC,cAAA,CAACgB,iBAAKC,OAAO,EAAA,EAAA,CAAA;AAE3D,IAAA,IAAIJ,YAAAA,EAAc;QAChB,OAAOE,QAAAA;AACT,IAAA;IAEA,qBACEf,cAAA,CAACkB,iBAAMC,QAAQ,EAAA;QAACJ,QAAAA,EAAUA,QAAAA;AACxB,QAAA,QAAA,gBAAAf,cAAA,CAACoB,qBAAAA,EAAAA,EAAAA;;AAGP;;;;"}

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

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, Loader } from '@strapi/design-system';
+import { useNavigation, Outlet } from 'react-router-dom';
+import { Page } from './PageHelpers.mjs';
+
+const NestedLoading = ()=>/*#__PURE__*/ jsx(Flex, {
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "50vh",
+        padding: 8,
+        "aria-busy": true,
+        children: /*#__PURE__*/ jsx(Loader, {
+            children: "Loading content."
+        })
+    });
+/**
+ * Renders child routes with a visible loading state while lazy chunks load.
+ * Suspense fallbacks are suppressed during React Router transitions, so we also
+ * check `useNavigation().state` to replace stale outlet content while navigating.
+ */ const LazyOutlet = ({ nested = false, suspenseOnly = false })=>{
+    const navigation = useNavigation();
+    const isNavigating = !suspenseOnly && navigation.state === 'loading';
+    const fallback = nested ? /*#__PURE__*/ jsx(NestedLoading, {}) : /*#__PURE__*/ jsx(Page.Loading, {});
+    if (isNavigating) {
+        return fallback;
+    }
+    return /*#__PURE__*/ jsx(React.Suspense, {
+        fallback: fallback,
+        children: /*#__PURE__*/ jsx(Outlet, {})
+    });
+};
+
+export { LazyOutlet };
+//# sourceMappingURL=LazyOutlet.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LazyOutlet.mjs","sources":["../../../../../admin/src/components/LazyOutlet.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Loader } from '@strapi/design-system';\nimport { Outlet, useNavigation } from 'react-router-dom';\n\nimport { Page } from './PageHelpers';\n\ninterface LazyOutletProps {\n  /**\n   * Compact loader for nested layout content columns (e.g. Settings, Content Manager)\n   * where the parent shell should stay visible.\n   */\n  nested?: boolean;\n  /**\n   * Parent outlets only use Suspense so nested layouts can own navigation loading UX\n   * (side nav stays visible while a child chunk loads).\n   */\n  suspenseOnly?: boolean;\n}\n\nconst NestedLoading = () => (\n  <Flex alignItems=\"center\" justifyContent=\"center\" minHeight=\"50vh\" padding={8} aria-busy>\n    <Loader>Loading content.</Loader>\n  </Flex>\n);\n\n/**\n * Renders child routes with a visible loading state while lazy chunks load.\n * Suspense fallbacks are suppressed during React Router transitions, so we also\n * check `useNavigation().state` to replace stale outlet content while navigating.\n */\nconst LazyOutlet = ({ nested = false, suspenseOnly = false }: LazyOutletProps) => {\n  const navigation = useNavigation();\n  const isNavigating = !suspenseOnly && navigation.state === 'loading';\n  const fallback = nested ? <NestedLoading /> : <Page.Loading />;\n\n  if (isNavigating) {\n    return fallback;\n  }\n\n  return (\n    <React.Suspense fallback={fallback}>\n      <Outlet />\n    </React.Suspense>\n  );\n};\n\nexport { LazyOutlet };\nexport type { LazyOutletProps };\n"],"names":["NestedLoading","_jsx","Flex","alignItems","justifyContent","minHeight","padding","aria-busy","Loader","LazyOutlet","nested","suspenseOnly","navigation","useNavigation","isNavigating","state","fallback","Page","Loading","React","Suspense","Outlet"],"mappings":";;;;;;AAoBA,MAAMA,aAAAA,GAAgB,kBACpBC,GAAA,CAACC,IAAAA,EAAAA;QAAKC,UAAAA,EAAW,QAAA;QAASC,cAAAA,EAAe,QAAA;QAASC,SAAAA,EAAU,MAAA;QAAOC,OAAAA,EAAS,CAAA;QAAGC,WAAS,EAAA,IAAA;AACtF,QAAA,QAAA,gBAAAN,GAAA,CAACO,MAAAA,EAAAA;AAAO,YAAA,QAAA,EAAA;;;AAIZ;;;;IAKA,MAAMC,aAAa,CAAC,EAAEC,SAAS,KAAK,EAAEC,YAAAA,GAAe,KAAK,EAAmB,GAAA;AAC3E,IAAA,MAAMC,UAAAA,GAAaC,aAAAA,EAAAA;AACnB,IAAA,MAAMC,YAAAA,GAAe,CAACH,YAAAA,IAAgBC,UAAAA,CAAWG,KAAK,KAAK,SAAA;AAC3D,IAAA,MAAMC,WAAWN,MAAAA,iBAAST,GAAA,CAACD,aAAAA,EAAAA,EAAAA,CAAAA,iBAAmBC,GAAA,CAACgB,KAAKC,OAAO,EAAA,EAAA,CAAA;AAE3D,IAAA,IAAIJ,YAAAA,EAAc;QAChB,OAAOE,QAAAA;AACT,IAAA;IAEA,qBACEf,GAAA,CAACkB,MAAMC,QAAQ,EAAA;QAACJ,QAAAA,EAAUA,QAAAA;AACxB,QAAA,QAAA,gBAAAf,GAAA,CAACoB,MAAAA,EAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/MainNav/NavUser.js

@@ -56,6 +56,9 @@ const NavUser = ({ initials, showDisplayName = false, children, ...props })=>{
         const redirection = '/me';
         navigate(redirection);
     };
+    const handleSessions = ()=>{
+        navigate('/me/sessions');
+    };
     const handleLogout = ()=>{
         const redirection = '/auth/login';
         logout();
@@ -125,6 +128,13 @@ const NavUser = ({ initials, showDisplayName = false, children, ...props })=>{
                                 defaultMessage: 'Profile settings'
                             })
                         }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                            onSelect: handleSessions,
+                            children: formatMessage({
+                                id: 'global.sessions.active-devices',
+                                defaultMessage: 'Active devices'
+                            })
+                        }),
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
                             variant: "danger",
                             onSelect: handleLogout,