@strapi/content-type-builder 5.12.1 → 5.12.3

package/dist/admin/components/AttributeOptions/EmptyAttributes.mjs

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Flex, Typography, LinkButton } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+import { EmptyDocuments } from '@strapi/icons/symbols';
+import * as qs from 'qs';
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
+import { getTrad } from '../../utils/getTrad.mjs';
+
+const EmptyCard = styled(Box)`
+  background: ${({ theme })=>`linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};
+  opacity: 0.33;
+`;
+const EmptyCardGrid = ()=>{
+    return /*#__PURE__*/ jsx(Flex, {
+        wrap: "wrap",
+        gap: 4,
+        children: [
+            ...Array(4)
+        ].map((_, idx)=>{
+            return /*#__PURE__*/ jsx(EmptyCard, {
+                height: "138px",
+                width: "375px",
+                hasRadius: true
+            }, `empty-card-${idx}`);
+        })
+    });
+};
+const EmptyAttributes = ()=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Box, {
+        position: "relative",
+        children: [
+            /*#__PURE__*/ jsx(EmptyCardGrid, {}),
+            /*#__PURE__*/ jsx(Box, {
+                position: "absolute",
+                top: 6,
+                width: "100%",
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    alignItems: "center",
+                    justifyContent: "center",
+                    direction: "column",
+                    children: [
+                        /*#__PURE__*/ jsx(EmptyDocuments, {
+                            width: "160px",
+                            height: "88px"
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            paddingTop: 6,
+                            paddingBottom: 4,
+                            children: /*#__PURE__*/ jsxs(Box, {
+                                textAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "delta",
+                                        tag: "p",
+                                        textColor: "neutral600",
+                                        children: formatMessage({
+                                            id: getTrad('modalForm.empty.heading'),
+                                            defaultMessage: 'Nothing in here yet.'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Box, {
+                                        paddingTop: 4,
+                                        children: /*#__PURE__*/ jsx(Typography, {
+                                            variant: "delta",
+                                            tag: "p",
+                                            textColor: "neutral600",
+                                            children: formatMessage({
+                                                id: getTrad('modalForm.empty.sub-heading'),
+                                                defaultMessage: 'Find what you are looking for through a wide range of extensions.'
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(LinkButton, {
+                            tag: Link,
+                            to: `/marketplace?${qs.stringify({
+                                categories: [
+                                    'Custom fields'
+                                ]
+                            })}`,
+                            variant: "secondary",
+                            startIcon: /*#__PURE__*/ jsx(Plus, {}),
+                            children: formatMessage({
+                                id: getTrad('modalForm.empty.button'),
+                                defaultMessage: 'Add custom fields'
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+export { EmptyAttributes, EmptyCardGrid };
+//# sourceMappingURL=EmptyAttributes.mjs.map

package/dist/admin/components/AttributeOptions/EmptyAttributes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyAttributes.mjs","sources":["../../../../admin/src/components/AttributeOptions/EmptyAttributes.tsx"],"sourcesContent":["import { Box, Flex, Typography, LinkButton } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport * as qs from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst EmptyCard = styled(Box)`\n  background: ${({ theme }) =>\n    `linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};\n  opacity: 0.33;\n`;\n\nexport const EmptyCardGrid = () => {\n  return (\n    <Flex wrap=\"wrap\" gap={4}>\n      {[...Array(4)].map((_, idx) => {\n        return (\n          <EmptyCard\n            // eslint-disable-next-line react/no-array-index-key\n            key={`empty-card-${idx}`}\n            height=\"138px\"\n            width=\"375px\"\n            hasRadius\n          />\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport const EmptyAttributes = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Box position=\"relative\">\n      <EmptyCardGrid />\n      <Box position=\"absolute\" top={6} width=\"100%\">\n        <Flex alignItems=\"center\" justifyContent=\"center\" direction=\"column\">\n          <EmptyDocuments width=\"160px\" height=\"88px\" />\n          <Box paddingTop={6} paddingBottom={4}>\n            <Box textAlign=\"center\">\n              <Typography variant=\"delta\" tag=\"p\" textColor=\"neutral600\">\n                {formatMessage({\n                  id: getTrad('modalForm.empty.heading'),\n                  defaultMessage: 'Nothing in here yet.',\n                })}\n              </Typography>\n              <Box paddingTop={4}>\n                <Typography variant=\"delta\" tag=\"p\" textColor=\"neutral600\">\n                  {formatMessage({\n                    id: getTrad('modalForm.empty.sub-heading'),\n                    defaultMessage:\n                      'Find what you are looking for through a wide range of extensions.',\n                  })}\n                </Typography>\n              </Box>\n            </Box>\n          </Box>\n          <LinkButton\n            tag={Link}\n            to={`/marketplace?${qs.stringify({ categories: ['Custom fields'] })}`}\n            variant=\"secondary\"\n            startIcon={<Plus />}\n          >\n            {formatMessage({\n              id: getTrad('modalForm.empty.button'),\n              defaultMessage: 'Add custom fields',\n            })}\n          </LinkButton>\n        </Flex>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["EmptyCard","styled","Box","theme","colors","neutral150","EmptyCardGrid","_jsx","Flex","wrap","gap","Array","map","_","idx","height","width","hasRadius","EmptyAttributes","formatMessage","useIntl","_jsxs","position","top","alignItems","justifyContent","direction","EmptyDocuments","paddingTop","paddingBottom","textAlign","Typography","variant","tag","textColor","id","getTrad","defaultMessage","LinkButton","Link","to","qs","stringify","categories","startIcon","Plus"],"mappings":";;;;;;;;;;AAUA,MAAMA,SAAAA,GAAYC,MAAOC,CAAAA,GAAAA,CAAI;AACf,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GACtB,CAAC,mDAAmD,EAAEA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC,MAAM,CAAC,CAAC;;AAE1F,CAAC;MAEYC,aAAgB,GAAA,IAAA;AAC3B,IAAA,qBACEC,GAACC,CAAAA,IAAAA,EAAAA;QAAKC,IAAK,EAAA,MAAA;QAAOC,GAAK,EAAA,CAAA;AACpB,QAAA,QAAA,EAAA;eAAIC,KAAM,CAAA,CAAA;SAAG,CAACC,GAAG,CAAC,CAACC,CAAGC,EAAAA,GAAAA,GAAAA;AACrB,YAAA,qBACEP,GAACP,CAAAA,SAAAA,EAAAA;gBAGCe,MAAO,EAAA,OAAA;gBACPC,KAAM,EAAA,OAAA;gBACNC,SAAS,EAAA;eAHJ,CAAC,WAAW,EAAEH,GAAAA,CAAI,CAAC,CAAA;AAM9B,SAAA;;AAGN;MAEaI,eAAkB,GAAA,IAAA;IAC7B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,IAACnB,CAAAA,GAAAA,EAAAA;QAAIoB,QAAS,EAAA,UAAA;;0BACZf,GAACD,CAAAA,aAAAA,EAAAA,EAAAA,CAAAA;0BACDC,GAACL,CAAAA,GAAAA,EAAAA;gBAAIoB,QAAS,EAAA,UAAA;gBAAWC,GAAK,EAAA,CAAA;gBAAGP,KAAM,EAAA,MAAA;AACrC,gBAAA,QAAA,gBAAAK,IAACb,CAAAA,IAAAA,EAAAA;oBAAKgB,UAAW,EAAA,QAAA;oBAASC,cAAe,EAAA,QAAA;oBAASC,SAAU,EAAA,QAAA;;sCAC1DnB,GAACoB,CAAAA,cAAAA,EAAAA;4BAAeX,KAAM,EAAA,OAAA;4BAAQD,MAAO,EAAA;;sCACrCR,GAACL,CAAAA,GAAAA,EAAAA;4BAAI0B,UAAY,EAAA,CAAA;4BAAGC,aAAe,EAAA,CAAA;AACjC,4BAAA,QAAA,gBAAAR,IAACnB,CAAAA,GAAAA,EAAAA;gCAAI4B,SAAU,EAAA,QAAA;;kDACbvB,GAACwB,CAAAA,UAAAA,EAAAA;wCAAWC,OAAQ,EAAA,OAAA;wCAAQC,GAAI,EAAA,GAAA;wCAAIC,SAAU,EAAA,YAAA;kDAC3Cf,aAAc,CAAA;AACbgB,4CAAAA,EAAAA,EAAIC,OAAQ,CAAA,yBAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;kDAEF9B,GAACL,CAAAA,GAAAA,EAAAA;wCAAI0B,UAAY,EAAA,CAAA;AACf,wCAAA,QAAA,gBAAArB,GAACwB,CAAAA,UAAAA,EAAAA;4CAAWC,OAAQ,EAAA,OAAA;4CAAQC,GAAI,EAAA,GAAA;4CAAIC,SAAU,EAAA,YAAA;sDAC3Cf,aAAc,CAAA;AACbgB,gDAAAA,EAAAA,EAAIC,OAAQ,CAAA,6BAAA,CAAA;gDACZC,cACE,EAAA;AACJ,6CAAA;;;;;;sCAKR9B,GAAC+B,CAAAA,UAAAA,EAAAA;4BACCL,GAAKM,EAAAA,IAAAA;AACLC,4BAAAA,EAAAA,EAAI,CAAC,aAAa,EAAEC,EAAAA,CAAGC,SAAS,CAAC;gCAAEC,UAAY,EAAA;AAAC,oCAAA;AAAgB;AAAC,6BAAA,CAAA,CAAG,CAAC;4BACrEX,OAAQ,EAAA,WAAA;AACRY,4BAAAA,SAAAA,gBAAWrC,GAACsC,CAAAA,IAAAA,EAAAA,EAAAA,CAAAA;sCAEX1B,aAAc,CAAA;AACbgB,gCAAAA,EAAAA,EAAIC,OAAQ,CAAA,wBAAA,CAAA;gCACZC,cAAgB,EAAA;AAClB,6BAAA;;;;;;;AAMZ;;;;"}

package/dist/admin/components/AttributeOptions/OptionBoxWrapper.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+
+const OptionBoxWrapper = styledComponents.styled(designSystem.Box)`
+  width: 100%;
+  height: 100%;
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  text-align: left;
+  &:hover {
+    cursor: pointer;
+    background: ${({ theme })=>theme.colors.primary100};
+    border: 1px solid ${({ theme })=>theme.colors.primary200};
+  }
+`;
+
+exports.OptionBoxWrapper = OptionBoxWrapper;
+//# sourceMappingURL=OptionBoxWrapper.js.map

package/dist/admin/components/AttributeOptions/OptionBoxWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionBoxWrapper.js","sources":["../../../../admin/src/components/AttributeOptions/OptionBoxWrapper.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const OptionBoxWrapper = styled(Box)`\n  width: 100%;\n  height: 100%;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  text-align: left;\n  &:hover {\n    cursor: pointer;\n    background: ${({ theme }) => theme.colors.primary100};\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n  }\n`;\n"],"names":["OptionBoxWrapper","styled","Box","theme","colors","neutral200","primary100","primary200"],"mappings":";;;;;AAGaA,MAAAA,gBAAAA,GAAmBC,uBAAOC,CAAAA,gBAAAA,CAAI;;;oBAGvB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;gBAI7C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;sBACnC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACG,UAAU,CAAC;;AAE/D;;;;"}

package/dist/admin/components/AttributeOptions/OptionBoxWrapper.mjs

@@ -0,0 +1,17 @@
+import { Box } from '@strapi/design-system';
+import { styled } from 'styled-components';
+
+const OptionBoxWrapper = styled(Box)`
+  width: 100%;
+  height: 100%;
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  text-align: left;
+  &:hover {
+    cursor: pointer;
+    background: ${({ theme })=>theme.colors.primary100};
+    border: 1px solid ${({ theme })=>theme.colors.primary200};
+  }
+`;
+
+export { OptionBoxWrapper };
+//# sourceMappingURL=OptionBoxWrapper.mjs.map

package/dist/admin/components/AttributeOptions/OptionBoxWrapper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionBoxWrapper.mjs","sources":["../../../../admin/src/components/AttributeOptions/OptionBoxWrapper.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const OptionBoxWrapper = styled(Box)`\n  width: 100%;\n  height: 100%;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  text-align: left;\n  &:hover {\n    cursor: pointer;\n    background: ${({ theme }) => theme.colors.primary100};\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n  }\n`;\n"],"names":["OptionBoxWrapper","styled","Box","theme","colors","neutral200","primary100","primary200"],"mappings":";;;AAGaA,MAAAA,gBAAAA,GAAmBC,MAAOC,CAAAA,GAAAA,CAAI;;;oBAGvB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;gBAI7C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;sBACnC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACG,UAAU,CAAC;;AAE/D;;;;"}

package/dist/admin/components/AutoReloadOverlayBlocker.js

@@ -0,0 +1,212 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactDom = require('react-dom');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const AutoReloadOverlayBlockerContext = /*#__PURE__*/ React__namespace.createContext({});
+const MAX_ELAPSED_TIME = 30 * 1000;
+const AutoReloadOverlayBlockerProvider = ({ children })=>{
+    const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const [config, setConfig] = React__namespace.useState({});
+    const [failed, setFailed] = React__namespace.useState(false);
+    const lockAppWithAutoreload = React__namespace.useCallback((config = {})=>{
+        setIsOpen(true);
+        setConfig(config);
+    }, []);
+    const unlockAppWithAutoreload = React__namespace.useCallback(()=>{
+        setIsOpen(false);
+        setConfig({});
+    }, []);
+    // eslint-disable-next-line consistent-return
+    React__namespace.useEffect(()=>{
+        if (isOpen) {
+            const timeout = setTimeout(()=>{
+                setFailed(true);
+            }, MAX_ELAPSED_TIME);
+            return ()=>{
+                clearTimeout(timeout);
+            };
+        }
+    }, [
+        isOpen
+    ]);
+    let displayedIcon = config?.icon || 'reload';
+    let description = {
+        id: config?.description || 'components.OverlayBlocker.description',
+        defaultMessage: "You're using a feature that needs the server to restart. The page will reload automatically."
+    };
+    let title = {
+        id: config?.title || 'components.OverlayBlocker.title',
+        defaultMessage: 'Waiting for restart'
+    };
+    if (failed) {
+        displayedIcon = 'time';
+        description = {
+            id: 'components.OverlayBlocker.description.serverError',
+            defaultMessage: 'The server should have restarted, please check your logs in the terminal.'
+        };
+        title = {
+            id: 'components.OverlayBlocker.title.serverError',
+            defaultMessage: 'The restart is taking longer than expected'
+        };
+    }
+    const autoReloadValue = React__namespace.useMemo(()=>({
+            lockAppWithAutoreload,
+            unlockAppWithAutoreload
+        }), [
+        lockAppWithAutoreload,
+        unlockAppWithAutoreload
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(AutoReloadOverlayBlockerContext.Provider, {
+        value: autoReloadValue,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Blocker, {
+                displayedIcon: displayedIcon,
+                isOpen: isOpen,
+                description: description,
+                title: title
+            }),
+            children
+        ]
+    });
+};
+const Blocker = ({ displayedIcon, description, title, isOpen })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    // eslint-disable-next-line no-undef
+    return isOpen && globalThis?.document?.body ? /*#__PURE__*/ reactDom.createPortal(/*#__PURE__*/ jsxRuntime.jsxs(Overlay, {
+        id: "autoReloadOverlayBlocker",
+        direction: "column",
+        alignItems: "center",
+        gap: 6,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "column",
+                alignItems: "center",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: "h1",
+                        variant: "alpha",
+                        children: formatMessage(title)
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: "h2",
+                        textColor: "neutral600",
+                        fontSize: 4,
+                        fontWeight: "regular",
+                        children: formatMessage(description)
+                    })
+                ]
+            }),
+            displayedIcon === 'reload' && /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+                padding: 6,
+                background: "primary100",
+                borderColor: "primary200",
+                children: /*#__PURE__*/ jsxRuntime.jsx(LoaderReload, {
+                    width: "4rem",
+                    height: "4rem"
+                })
+            }),
+            displayedIcon === 'time' && /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+                padding: 6,
+                background: "primary100",
+                borderColor: "primary200",
+                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Clock, {
+                    width: "4rem",
+                    height: "4rem"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                marginTop: 2,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Link, {
+                    href: "https://docs.strapi.io",
+                    isExternal: true,
+                    children: formatMessage({
+                        id: 'global.documentation',
+                        defaultMessage: 'Read the documentation'
+                    })
+                })
+            })
+        ]
+    }), // eslint-disable-next-line no-undef
+    globalThis.document.body) : null;
+};
+const rotation = styledComponents.keyframes`
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  `;
+const LoaderReload = styledComponents.styled(Icons.ArrowClockwise)`
+  animation: ${rotation} 1s infinite linear;
+`;
+const Overlay = styledComponents.styled(designSystem.Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  /* TODO: set this up in the theme for consistence z-index values */
+  z-index: 1140;
+  padding-top: 16rem;
+
+  & > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  &:before {
+    content: '';
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: ${({ theme })=>theme.colors.neutral0};
+    opacity: 0.9;
+  }
+`;
+const IconBox = styledComponents.styled(designSystem.Box)`
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    > path {
+      fill: ${({ theme })=>theme.colors.primary600} !important;
+    }
+  }
+`;
+/* -------------------------------------------------------------------------------------------------
+ * Hook
+ * -----------------------------------------------------------------------------------------------*/ const useAutoReloadOverlayBlocker = ()=>React__namespace.useContext(AutoReloadOverlayBlockerContext);
+
+exports.AutoReloadOverlayBlockerProvider = AutoReloadOverlayBlockerProvider;
+exports.useAutoReloadOverlayBlocker = useAutoReloadOverlayBlocker;
+//# sourceMappingURL=AutoReloadOverlayBlocker.js.map

package/dist/admin/components/AutoReloadOverlayBlocker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoReloadOverlayBlocker.js","sources":["../../../admin/src/components/AutoReloadOverlayBlocker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, Link } from '@strapi/design-system';\nimport { Clock, ArrowClockwise } from '@strapi/icons';\nimport { createPortal } from 'react-dom';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled, keyframes } from 'styled-components';\n\n/**\n * TODO: realistically a lot of this logic is isolated to the `core/admin` package.\n * However, we want to expose the `useAutoReloadOverlayBlocker` hook to the plugins.\n *\n * Therefore, in V5 we should move this logic back to the `core/admin` package & export\n * the hook from that package and re-export here. For now, let's keep it all together\n * because it's easier to diagnose and we're not using a million refs because we don't\n * understand what's going on.\n */\nexport interface AutoReloadOverlayBlockerConfig {\n  title?: string;\n  description?: string;\n  icon?: 'reload' | 'time';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface AutoReloadOverlayBlockerContextValue {\n  lockAppWithAutoreload?: (config?: AutoReloadOverlayBlockerConfig) => void;\n  unlockAppWithAutoreload?: () => void;\n}\n\nconst AutoReloadOverlayBlockerContext = React.createContext<AutoReloadOverlayBlockerContextValue>(\n  {}\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface AutoReloadOverlayBlockerProviderProps {\n  children: React.ReactNode;\n}\n\nconst MAX_ELAPSED_TIME = 30 * 1000;\n\nconst AutoReloadOverlayBlockerProvider = ({ children }: AutoReloadOverlayBlockerProviderProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [config, setConfig] = React.useState<AutoReloadOverlayBlockerConfig>({});\n  const [failed, setFailed] = React.useState(false);\n\n  const lockAppWithAutoreload = React.useCallback((config: AutoReloadOverlayBlockerConfig = {}) => {\n    setIsOpen(true);\n    setConfig(config);\n  }, []);\n\n  const unlockAppWithAutoreload = React.useCallback(() => {\n    setIsOpen(false);\n    setConfig({});\n  }, []);\n\n  // eslint-disable-next-line consistent-return\n  React.useEffect(() => {\n    if (isOpen) {\n      const timeout = setTimeout(() => {\n        setFailed(true);\n      }, MAX_ELAPSED_TIME);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }\n  }, [isOpen]);\n\n  let displayedIcon = config?.icon || 'reload';\n\n  let description = {\n    id: config?.description || 'components.OverlayBlocker.description',\n    defaultMessage:\n      \"You're using a feature that needs the server to restart. The page will reload automatically.\",\n  };\n\n  let title = {\n    id: config?.title || 'components.OverlayBlocker.title',\n    defaultMessage: 'Waiting for restart',\n  };\n\n  if (failed) {\n    displayedIcon = 'time';\n\n    description = {\n      id: 'components.OverlayBlocker.description.serverError',\n      defaultMessage: 'The server should have restarted, please check your logs in the terminal.',\n    };\n\n    title = {\n      id: 'components.OverlayBlocker.title.serverError',\n      defaultMessage: 'The restart is taking longer than expected',\n    };\n  }\n\n  const autoReloadValue = React.useMemo(\n    () => ({\n      lockAppWithAutoreload,\n      unlockAppWithAutoreload,\n    }),\n    [lockAppWithAutoreload, unlockAppWithAutoreload]\n  );\n\n  return (\n    <AutoReloadOverlayBlockerContext.Provider value={autoReloadValue}>\n      <Blocker\n        displayedIcon={displayedIcon}\n        isOpen={isOpen}\n        description={description}\n        title={title}\n      />\n      {children}\n    </AutoReloadOverlayBlockerContext.Provider>\n  );\n};\n\ninterface BlockerProps {\n  displayedIcon: string;\n  description: MessageDescriptor;\n  isOpen: boolean;\n  title: MessageDescriptor;\n}\n\nconst Blocker = ({ displayedIcon, description, title, isOpen }: BlockerProps) => {\n  const { formatMessage } = useIntl();\n\n  // eslint-disable-next-line no-undef\n  return isOpen && globalThis?.document?.body\n    ? createPortal(\n        <Overlay id=\"autoReloadOverlayBlocker\" direction=\"column\" alignItems=\"center\" gap={6}>\n          <Flex direction=\"column\" alignItems=\"center\" gap={2}>\n            <Typography tag=\"h1\" variant=\"alpha\">\n              {formatMessage(title)}\n            </Typography>\n            <Typography tag=\"h2\" textColor=\"neutral600\" fontSize={4} fontWeight=\"regular\">\n              {formatMessage(description)}\n            </Typography>\n          </Flex>\n          {displayedIcon === 'reload' && (\n            <IconBox padding={6} background=\"primary100\" borderColor=\"primary200\">\n              <LoaderReload width=\"4rem\" height=\"4rem\" />\n            </IconBox>\n          )}\n          {displayedIcon === 'time' && (\n            <IconBox padding={6} background=\"primary100\" borderColor=\"primary200\">\n              <Clock width=\"4rem\" height=\"4rem\" />\n            </IconBox>\n          )}\n          <Box marginTop={2}>\n            <Link href=\"https://docs.strapi.io\" isExternal>\n              {formatMessage({\n                id: 'global.documentation',\n                defaultMessage: 'Read the documentation',\n              })}\n            </Link>\n          </Box>\n        </Overlay>,\n        // eslint-disable-next-line no-undef\n        globalThis.document.body\n      )\n    : null;\n};\n\nconst rotation = keyframes`\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(359deg);\n    }\n  `;\n\nconst LoaderReload = styled(ArrowClockwise)`\n  animation: ${rotation} 1s infinite linear;\n`;\n\nconst Overlay = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  /* TODO: set this up in the theme for consistence z-index values */\n  z-index: 1140;\n  padding-top: 16rem;\n\n  & > * {\n    position: relative;\n    z-index: 1;\n  }\n\n  &:before {\n    content: '';\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: ${({ theme }) => theme.colors.neutral0};\n    opacity: 0.9;\n  }\n`;\n\nconst IconBox = styled(Box)`\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  svg {\n    > path {\n      fill: ${({ theme }) => theme.colors.primary600} !important;\n    }\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\nconst useAutoReloadOverlayBlocker = () => React.useContext(AutoReloadOverlayBlockerContext);\n\nexport { AutoReloadOverlayBlockerProvider, useAutoReloadOverlayBlocker };\n"],"names":["AutoReloadOverlayBlockerContext","React","createContext","MAX_ELAPSED_TIME","AutoReloadOverlayBlockerProvider","children","isOpen","setIsOpen","useState","config","setConfig","failed","setFailed","lockAppWithAutoreload","useCallback","unlockAppWithAutoreload","useEffect","timeout","setTimeout","clearTimeout","displayedIcon","icon","description","id","defaultMessage","title","autoReloadValue","useMemo","_jsxs","Provider","value","_jsx","Blocker","formatMessage","useIntl","globalThis","document","body","createPortal","Overlay","direction","alignItems","gap","Flex","Typography","tag","variant","textColor","fontSize","fontWeight","IconBox","padding","background","borderColor","LoaderReload","width","height","Clock","Box","marginTop","Link","href","isExternal","rotation","keyframes","styled","ArrowClockwise","theme","colors","neutral0","primary600","useAutoReloadOverlayBlocker","useContext"],"mappings":"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"}

package/dist/admin/components/AutoReloadOverlayBlocker.mjs

@@ -0,0 +1,190 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, Box, Typography, Link } from '@strapi/design-system';
+import { ArrowClockwise, Clock } from '@strapi/icons';
+import { createPortal } from 'react-dom';
+import { useIntl } from 'react-intl';
+import { keyframes, styled } from 'styled-components';
+
+const AutoReloadOverlayBlockerContext = /*#__PURE__*/ React.createContext({});
+const MAX_ELAPSED_TIME = 30 * 1000;
+const AutoReloadOverlayBlockerProvider = ({ children })=>{
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [config, setConfig] = React.useState({});
+    const [failed, setFailed] = React.useState(false);
+    const lockAppWithAutoreload = React.useCallback((config = {})=>{
+        setIsOpen(true);
+        setConfig(config);
+    }, []);
+    const unlockAppWithAutoreload = React.useCallback(()=>{
+        setIsOpen(false);
+        setConfig({});
+    }, []);
+    // eslint-disable-next-line consistent-return
+    React.useEffect(()=>{
+        if (isOpen) {
+            const timeout = setTimeout(()=>{
+                setFailed(true);
+            }, MAX_ELAPSED_TIME);
+            return ()=>{
+                clearTimeout(timeout);
+            };
+        }
+    }, [
+        isOpen
+    ]);
+    let displayedIcon = config?.icon || 'reload';
+    let description = {
+        id: config?.description || 'components.OverlayBlocker.description',
+        defaultMessage: "You're using a feature that needs the server to restart. The page will reload automatically."
+    };
+    let title = {
+        id: config?.title || 'components.OverlayBlocker.title',
+        defaultMessage: 'Waiting for restart'
+    };
+    if (failed) {
+        displayedIcon = 'time';
+        description = {
+            id: 'components.OverlayBlocker.description.serverError',
+            defaultMessage: 'The server should have restarted, please check your logs in the terminal.'
+        };
+        title = {
+            id: 'components.OverlayBlocker.title.serverError',
+            defaultMessage: 'The restart is taking longer than expected'
+        };
+    }
+    const autoReloadValue = React.useMemo(()=>({
+            lockAppWithAutoreload,
+            unlockAppWithAutoreload
+        }), [
+        lockAppWithAutoreload,
+        unlockAppWithAutoreload
+    ]);
+    return /*#__PURE__*/ jsxs(AutoReloadOverlayBlockerContext.Provider, {
+        value: autoReloadValue,
+        children: [
+            /*#__PURE__*/ jsx(Blocker, {
+                displayedIcon: displayedIcon,
+                isOpen: isOpen,
+                description: description,
+                title: title
+            }),
+            children
+        ]
+    });
+};
+const Blocker = ({ displayedIcon, description, title, isOpen })=>{
+    const { formatMessage } = useIntl();
+    // eslint-disable-next-line no-undef
+    return isOpen && globalThis?.document?.body ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Overlay, {
+        id: "autoReloadOverlayBlocker",
+        direction: "column",
+        alignItems: "center",
+        gap: 6,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                alignItems: "center",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        tag: "h1",
+                        variant: "alpha",
+                        children: formatMessage(title)
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        tag: "h2",
+                        textColor: "neutral600",
+                        fontSize: 4,
+                        fontWeight: "regular",
+                        children: formatMessage(description)
+                    })
+                ]
+            }),
+            displayedIcon === 'reload' && /*#__PURE__*/ jsx(IconBox, {
+                padding: 6,
+                background: "primary100",
+                borderColor: "primary200",
+                children: /*#__PURE__*/ jsx(LoaderReload, {
+                    width: "4rem",
+                    height: "4rem"
+                })
+            }),
+            displayedIcon === 'time' && /*#__PURE__*/ jsx(IconBox, {
+                padding: 6,
+                background: "primary100",
+                borderColor: "primary200",
+                children: /*#__PURE__*/ jsx(Clock, {
+                    width: "4rem",
+                    height: "4rem"
+                })
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                marginTop: 2,
+                children: /*#__PURE__*/ jsx(Link, {
+                    href: "https://docs.strapi.io",
+                    isExternal: true,
+                    children: formatMessage({
+                        id: 'global.documentation',
+                        defaultMessage: 'Read the documentation'
+                    })
+                })
+            })
+        ]
+    }), // eslint-disable-next-line no-undef
+    globalThis.document.body) : null;
+};
+const rotation = keyframes`
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  `;
+const LoaderReload = styled(ArrowClockwise)`
+  animation: ${rotation} 1s infinite linear;
+`;
+const Overlay = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  /* TODO: set this up in the theme for consistence z-index values */
+  z-index: 1140;
+  padding-top: 16rem;
+
+  & > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  &:before {
+    content: '';
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: ${({ theme })=>theme.colors.neutral0};
+    opacity: 0.9;
+  }
+`;
+const IconBox = styled(Box)`
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    > path {
+      fill: ${({ theme })=>theme.colors.primary600} !important;
+    }
+  }
+`;
+/* -------------------------------------------------------------------------------------------------
+ * Hook
+ * -----------------------------------------------------------------------------------------------*/ const useAutoReloadOverlayBlocker = ()=>React.useContext(AutoReloadOverlayBlockerContext);
+
+export { AutoReloadOverlayBlockerProvider, useAutoReloadOverlayBlocker };
+//# sourceMappingURL=AutoReloadOverlayBlocker.mjs.map

package/dist/admin/components/AutoReloadOverlayBlocker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoReloadOverlayBlocker.mjs","sources":["../../../admin/src/components/AutoReloadOverlayBlocker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, Link } from '@strapi/design-system';\nimport { Clock, ArrowClockwise } from '@strapi/icons';\nimport { createPortal } from 'react-dom';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled, keyframes } from 'styled-components';\n\n/**\n * TODO: realistically a lot of this logic is isolated to the `core/admin` package.\n * However, we want to expose the `useAutoReloadOverlayBlocker` hook to the plugins.\n *\n * Therefore, in V5 we should move this logic back to the `core/admin` package & export\n * the hook from that package and re-export here. For now, let's keep it all together\n * because it's easier to diagnose and we're not using a million refs because we don't\n * understand what's going on.\n */\nexport interface AutoReloadOverlayBlockerConfig {\n  title?: string;\n  description?: string;\n  icon?: 'reload' | 'time';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface AutoReloadOverlayBlockerContextValue {\n  lockAppWithAutoreload?: (config?: AutoReloadOverlayBlockerConfig) => void;\n  unlockAppWithAutoreload?: () => void;\n}\n\nconst AutoReloadOverlayBlockerContext = React.createContext<AutoReloadOverlayBlockerContextValue>(\n  {}\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface AutoReloadOverlayBlockerProviderProps {\n  children: React.ReactNode;\n}\n\nconst MAX_ELAPSED_TIME = 30 * 1000;\n\nconst AutoReloadOverlayBlockerProvider = ({ children }: AutoReloadOverlayBlockerProviderProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [config, setConfig] = React.useState<AutoReloadOverlayBlockerConfig>({});\n  const [failed, setFailed] = React.useState(false);\n\n  const lockAppWithAutoreload = React.useCallback((config: AutoReloadOverlayBlockerConfig = {}) => {\n    setIsOpen(true);\n    setConfig(config);\n  }, []);\n\n  const unlockAppWithAutoreload = React.useCallback(() => {\n    setIsOpen(false);\n    setConfig({});\n  }, []);\n\n  // eslint-disable-next-line consistent-return\n  React.useEffect(() => {\n    if (isOpen) {\n      const timeout = setTimeout(() => {\n        setFailed(true);\n      }, MAX_ELAPSED_TIME);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }\n  }, [isOpen]);\n\n  let displayedIcon = config?.icon || 'reload';\n\n  let description = {\n    id: config?.description || 'components.OverlayBlocker.description',\n    defaultMessage:\n      \"You're using a feature that needs the server to restart. The page will reload automatically.\",\n  };\n\n  let title = {\n    id: config?.title || 'components.OverlayBlocker.title',\n    defaultMessage: 'Waiting for restart',\n  };\n\n  if (failed) {\n    displayedIcon = 'time';\n\n    description = {\n      id: 'components.OverlayBlocker.description.serverError',\n      defaultMessage: 'The server should have restarted, please check your logs in the terminal.',\n    };\n\n    title = {\n      id: 'components.OverlayBlocker.title.serverError',\n      defaultMessage: 'The restart is taking longer than expected',\n    };\n  }\n\n  const autoReloadValue = React.useMemo(\n    () => ({\n      lockAppWithAutoreload,\n      unlockAppWithAutoreload,\n    }),\n    [lockAppWithAutoreload, unlockAppWithAutoreload]\n  );\n\n  return (\n    <AutoReloadOverlayBlockerContext.Provider value={autoReloadValue}>\n      <Blocker\n        displayedIcon={displayedIcon}\n        isOpen={isOpen}\n        description={description}\n        title={title}\n      />\n      {children}\n    </AutoReloadOverlayBlockerContext.Provider>\n  );\n};\n\ninterface BlockerProps {\n  displayedIcon: string;\n  description: MessageDescriptor;\n  isOpen: boolean;\n  title: MessageDescriptor;\n}\n\nconst Blocker = ({ displayedIcon, description, title, isOpen }: BlockerProps) => {\n  const { formatMessage } = useIntl();\n\n  // eslint-disable-next-line no-undef\n  return isOpen && globalThis?.document?.body\n    ? createPortal(\n        <Overlay id=\"autoReloadOverlayBlocker\" direction=\"column\" alignItems=\"center\" gap={6}>\n          <Flex direction=\"column\" alignItems=\"center\" gap={2}>\n            <Typography tag=\"h1\" variant=\"alpha\">\n              {formatMessage(title)}\n            </Typography>\n            <Typography tag=\"h2\" textColor=\"neutral600\" fontSize={4} fontWeight=\"regular\">\n              {formatMessage(description)}\n            </Typography>\n          </Flex>\n          {displayedIcon === 'reload' && (\n            <IconBox padding={6} background=\"primary100\" borderColor=\"primary200\">\n              <LoaderReload width=\"4rem\" height=\"4rem\" />\n            </IconBox>\n          )}\n          {displayedIcon === 'time' && (\n            <IconBox padding={6} background=\"primary100\" borderColor=\"primary200\">\n              <Clock width=\"4rem\" height=\"4rem\" />\n            </IconBox>\n          )}\n          <Box marginTop={2}>\n            <Link href=\"https://docs.strapi.io\" isExternal>\n              {formatMessage({\n                id: 'global.documentation',\n                defaultMessage: 'Read the documentation',\n              })}\n            </Link>\n          </Box>\n        </Overlay>,\n        // eslint-disable-next-line no-undef\n        globalThis.document.body\n      )\n    : null;\n};\n\nconst rotation = keyframes`\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(359deg);\n    }\n  `;\n\nconst LoaderReload = styled(ArrowClockwise)`\n  animation: ${rotation} 1s infinite linear;\n`;\n\nconst Overlay = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  /* TODO: set this up in the theme for consistence z-index values */\n  z-index: 1140;\n  padding-top: 16rem;\n\n  & > * {\n    position: relative;\n    z-index: 1;\n  }\n\n  &:before {\n    content: '';\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: ${({ theme }) => theme.colors.neutral0};\n    opacity: 0.9;\n  }\n`;\n\nconst IconBox = styled(Box)`\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  svg {\n    > path {\n      fill: ${({ theme }) => theme.colors.primary600} !important;\n    }\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\nconst useAutoReloadOverlayBlocker = () => React.useContext(AutoReloadOverlayBlockerContext);\n\nexport { AutoReloadOverlayBlockerProvider, useAutoReloadOverlayBlocker };\n"],"names":["AutoReloadOverlayBlockerContext","React","createContext","MAX_ELAPSED_TIME","AutoReloadOverlayBlockerProvider","children","isOpen","setIsOpen","useState","config","setConfig","failed","setFailed","lockAppWithAutoreload","useCallback","unlockAppWithAutoreload","useEffect","timeout","setTimeout","clearTimeout","displayedIcon","icon","description","id","defaultMessage","title","autoReloadValue","useMemo","_jsxs","Provider","value","_jsx","Blocker","formatMessage","useIntl","globalThis","document","body","createPortal","Overlay","direction","alignItems","gap","Flex","Typography","tag","variant","textColor","fontSize","fontWeight","IconBox","padding","background","borderColor","LoaderReload","width","height","Clock","Box","marginTop","Link","href","isExternal","rotation","keyframes","styled","ArrowClockwise","theme","colors","neutral0","primary600","useAutoReloadOverlayBlocker","useContext"],"mappings":"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"}