@strapi/admin 5.48.1 → 5.50.0

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

@@ -4,7 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ContextSelector = require('use-context-selector');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -21,8 +22,8 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var ContextSelector__namespace = /*#__PURE__*/_interopNamespaceDefault(ContextSelector);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ContextSelector__namespace = /*#__PURE__*/_interopNamespace(ContextSelector);
 
 /**
  * @experimental

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

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../../../admin/src/components/Context.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as ContextSelector from 'use-context-selector';\n\n/**\n * @experimental\n * @description Create a context provider and a hook to consume the context.\n *\n * @warning this may be removed to the design-system instead of becoming stable.\n */\nfunction createContext<ContextValueType extends object | null>(\n  rootComponentName: string,\n  defaultContext?: ContextValueType\n) {\n  const Context = ContextSelector.createContext<ContextValueType | undefined>(defaultContext);\n\n  const Provider = (props: ContextValueType & { children: React.ReactNode }) => {\n    const { children, ...context } = props;\n    // Only re-memoize when prop values change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n  };\n\n  function useContext<Selected, ShouldThrow extends boolean = true>(\n    consumerName: string,\n    selector: (value: ContextValueType) => Selected,\n    shouldThrowOnMissingContext?: ShouldThrow\n  ) {\n    return ContextSelector.useContextSelector(Context, (ctx) => {\n      // The context is available, return the selected value\n      if (ctx) return selector(ctx);\n\n      // The context is not available, either return undefined or throw an error\n      if (shouldThrowOnMissingContext) {\n        throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n      }\n\n      return undefined;\n    }) as ShouldThrow extends true ? Selected : Selected | undefined;\n  }\n\n  Provider.displayName = rootComponentName + 'Provider';\n\n  return [Provider, useContext] as const;\n}\n\nexport { createContext };\n"],"names":["createContext","rootComponentName","defaultContext","Context","ContextSelector","Provider","props","children","context","value","React","useMemo","Object","values","_jsx","useContext","consumerName","selector","shouldThrowOnMissingContext","useContextSelector","ctx","Error","undefined","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;AAKC,IACD,SAASA,aAAAA,CACPC,iBAAyB,EACzBC,cAAiC,EAAA;IAEjC,MAAMC,OAAAA,GAAUC,0BAAAA,CAAgBJ,aAAa,CAA+BE,cAAAA,CAAAA;AAE5E,IAAA,MAAMG,WAAW,CAACC,KAAAA,GAAAA;AAChB,QAAA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,SAAS,GAAGF,KAAAA;;;QAGjC,MAAMG,KAAAA,GAAQC,iBAAMC,OAAO,CAAC,IAAMH,OAAAA,EAASI,MAAAA,CAAOC,MAAM,CAACL,OAAAA,CAAAA,CAAAA;QAEzD,qBAAOM,cAAA,CAACX,QAAQE,QAAQ,EAAA;YAACI,KAAAA,EAAOA,KAAAA;AAAQF,YAAAA,QAAAA,EAAAA;;AAC1C,IAAA,CAAA;AAEA,IAAA,SAASQ,UAAAA,CACPC,YAAoB,EACpBC,QAA+C,EAC/CC,2BAAyC,EAAA;AAEzC,QAAA,OAAOd,0BAAAA,CAAgBe,kBAAkB,CAAChB,OAAAA,EAAS,CAACiB,GAAAA,GAAAA;;YAElD,IAAIA,GAAAA,EAAK,OAAOH,QAAAA,CAASG,GAAAA,CAAAA;;AAGzB,YAAA,IAAIF,2BAAAA,EAA6B;gBAC/B,MAAM,IAAIG,KAAAA,CAAM,CAAC,EAAE,EAAEL,aAAa,yBAAyB,EAAEf,iBAAAA,CAAkB,EAAE,CAAC,CAAA;AACpF,YAAA;YAEA,OAAOqB,SAAAA;AACT,QAAA,CAAA,CAAA;AACF,IAAA;IAEAjB,QAAAA,CAASkB,WAAW,GAAGtB,iBAAAA,GAAoB,UAAA;IAE3C,OAAO;AAACI,QAAAA,QAAAA;AAAUU,QAAAA;AAAW,KAAA;AAC/B;;;;"}
+{"version":3,"file":"Context.js","sources":["../../../../../admin/src/components/Context.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as ContextSelector from 'use-context-selector';\n\n/**\n * @experimental\n * @description Create a context provider and a hook to consume the context.\n *\n * @warning this may be removed to the design-system instead of becoming stable.\n */\nfunction createContext<ContextValueType extends object | null>(\n  rootComponentName: string,\n  defaultContext?: ContextValueType\n) {\n  const Context = ContextSelector.createContext<ContextValueType | undefined>(defaultContext);\n\n  const Provider = (props: ContextValueType & { children: React.ReactNode }) => {\n    const { children, ...context } = props;\n    // Only re-memoize when prop values change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n  };\n\n  function useContext<Selected, ShouldThrow extends boolean = true>(\n    consumerName: string,\n    selector: (value: ContextValueType) => Selected,\n    shouldThrowOnMissingContext?: ShouldThrow\n  ) {\n    return ContextSelector.useContextSelector(Context, (ctx) => {\n      // The context is available, return the selected value\n      if (ctx) return selector(ctx);\n\n      // The context is not available, either return undefined or throw an error\n      if (shouldThrowOnMissingContext) {\n        throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n      }\n\n      return undefined;\n    }) as ShouldThrow extends true ? Selected : Selected | undefined;\n  }\n\n  Provider.displayName = rootComponentName + 'Provider';\n\n  return [Provider, useContext] as const;\n}\n\nexport { createContext };\n"],"names":["createContext","rootComponentName","defaultContext","Context","ContextSelector","Provider","props","children","context","value","React","useMemo","Object","values","_jsx","useContext","consumerName","selector","shouldThrowOnMissingContext","useContextSelector","ctx","Error","undefined","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;AAKC,IACD,SAASA,aAAAA,CACPC,iBAAyB,EACzBC,cAAiC,EAAA;IAEjC,MAAMC,OAAAA,GAAUC,0BAAAA,CAAgBJ,aAAa,CAA+BE,cAAAA,CAAAA;AAE5E,IAAA,MAAMG,WAAW,CAACC,KAAAA,GAAAA;AAChB,QAAA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,SAAS,GAAGF,KAAAA;;;QAGjC,MAAMG,KAAAA,GAAQC,iBAAMC,OAAO,CAAC,IAAMH,OAAAA,EAASI,MAAAA,CAAOC,MAAM,CAACL,OAAAA,CAAAA,CAAAA;QAEzD,qBAAOM,cAAA,CAACX,QAAQE,QAAQ,EAAA;YAACI,KAAAA,EAAOA,KAAAA;AAAQF,YAAAA,QAAAA,EAAAA;;AAC1C,IAAA,CAAA;AAEA,IAAA,SAASQ,UAAAA,CACPC,YAAoB,EACpBC,QAA+C,EAC/CC,2BAAyC,EAAA;AAEzC,QAAA,OAAOd,0BAAAA,CAAgBe,kBAAkB,CAAChB,OAAAA,EAAS,CAACiB,GAAAA,GAAAA;;YAElD,IAAIA,GAAAA,EAAK,OAAOH,QAAAA,CAASG,GAAAA,CAAAA;;AAGzB,YAAA,IAAIF,2BAAAA,EAA6B;gBAC/B,MAAM,IAAIG,KAAAA,CAAM,CAAC,EAAE,EAAEL,aAAa,yBAAyB,EAAEf,iBAAAA,CAAkB,EAAE,CAAC,CAAA;AACpF,YAAA;YAEA,OAAOqB,SAAAA;AACT,QAAA,CAAA,CAAA;AACF,IAAA;IAEAjB,QAAAA,CAASkB,WAAW,GAAGtB,iBAAAA,GAAoB,UAAA;IAE3C,OAAO;AAACI,QAAAA,QAAAA;AAAUU,QAAAA;AAAW,KAAA;AAC/B;;;;"}

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

@@ -7,7 +7,10 @@ var useForceUpdate = require('../hooks/useForceUpdate.js');
 var useThrottledCallback = require('../hooks/useThrottledCallback.js');
 var shims = require('../utils/shims.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -24,7 +27,8 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 
 /**
  * @internal
@@ -114,7 +118,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
         };
     }, comp);
     return null;
-}, (prev, next)=>isEqual(prev.props, next.props));
+}, (prev, next)=>isEqual__default.default(prev.props, next.props));
 /* -------------------------------------------------------------------------------------------------
  * Helpers
  * -----------------------------------------------------------------------------------------------*/ const ids = new WeakMap();
@@ -128,7 +132,7 @@ function getCompId(comp) {
 }
 const useShallowCompareMemoize = (value)=>{
     const ref = React__namespace.useRef(undefined);
-    if (!isEqual(value, ref.current)) {
+    if (!isEqual__default.default(value, ref.current)) {
         ref.current = value;
     }
     return [

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

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

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":";;;;;;;;;;;;AAkBA;;;AAGC,UACKA,YAAAA,GAAe,IAAA;AACnB,IAAA,MAAMC,KAAAA,GAAQC,4BAAAA,EAAAA;IACd,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,IAAI,EAAE,GAAGC,yBAAAA,EAAAA;AAEjB,IAAA,IAAIL,iBAAiBM,KAAAA,EAAO;AAC1BC,QAAAA,OAAAA,CAAQP,KAAK,CAACA,KAAAA,CAAAA;AAEd,QAAA,MAAMQ,UAAAA,GAAa,UAAA;AACjB,YAAA,MAAMJ,KAAK;;AAEjB,EAAEJ,KAAAA,CAAMS,KAAK;;MAEP,CAAC,CAAA;AACH,QAAA,CAAA;AAEA,QAAA,IAAIC,oCAAiBV,KAAAA,CAAAA,EAAQ;AAC3B,YAAA,qBACEW,cAAA,CAACC,iBAAAA,EAAAA;gBAAKC,MAAAA,EAAO,MAAA;AACX,gBAAA,QAAA,gBAAAF,cAAA,CAACG,iBAAAA,EAAAA;oBACCC,UAAAA,EAAW,QAAA;oBACXF,MAAAA,EAAO,MAAA;oBACPG,cAAAA,EAAe,QAAA;oBACfC,WAAAA,EAAaC,gCAAAA;oBACbC,YAAAA,EAAcD,gCAAAA;AAEd,oBAAA,QAAA,gBAAAE,eAAA,CAACN,iBAAAA,EAAAA;wBACCO,GAAAA,EAAK,CAAA;wBACLC,OAAAA,EAAS;4BACPC,OAAAA,EAAS,CAAA;4BACTC,KAAAA,EAAO,CAAA;4BACPC,MAAAA,EAAQ;AACV,yBAAA;wBACAC,SAAAA,EAAU,QAAA;wBACVC,KAAAA,EAAM,MAAA;wBACNC,QAAAA,EAAS,OAAA;wBACTC,MAAAA,EAAO,aAAA;wBACPC,WAAAA,EAAY,YAAA;wBACZC,UAAAA,EAAW,UAAA;wBACXC,SAAS,EAAA,IAAA;;0CAETZ,eAAA,CAACN,iBAAAA,EAAAA;gCAAKY,SAAAA,EAAU,QAAA;gCAASL,GAAAA,EAAK,CAAA;;kDAC5BV,cAAA,CAACsB,WAAAA,EAAAA;wCAAMN,KAAAA,EAAM,MAAA;wCAAOd,MAAAA,EAAO,MAAA;wCAAOqB,IAAAA,EAAK;;kDACvCvB,cAAA,CAACwB,uBAAAA,EAAAA;wCAAWC,QAAAA,EAAU,CAAA;wCAAGC,UAAAA,EAAW,MAAA;wCAAOC,SAAAA,EAAU,QAAA;kDAClDpC,aAAAA,CAAc;4CACbqC,EAAAA,EAAI,uBAAA;4CACJC,cAAAA,EAAgB;AAClB,yCAAA;;kDAEF7B,cAAA,CAACwB,uBAAAA,EAAAA;wCAAWM,OAAAA,EAAQ,OAAA;wCAAQH,SAAAA,EAAU,QAAA;kDACnCpC,aAAAA,CAAc;4CACbqC,EAAAA,EAAI,yBAAA;4CACJC,cAAAA,EACE;AACJ,yCAAA;;;;0CAGJpB,eAAA,CAACN,iBAAAA,EAAAA;gCAAKO,GAAAA,EAAK,CAAA;gCAAGK,SAAAA,EAAU,QAAA;gCAASC,KAAAA,EAAM,MAAA;;kDACrChB,cAAA,CAAC+B,mBAAAA,EAAAA;AAAOC,wCAAAA,OAAAA,EAAS,IAAMC,MAAAA,CAAOC,QAAQ,CAACC,MAAM,EAAA;wCAAIC,SAAS,EAAA,IAAA;kDACvD7C,aAAAA,CAAc;4CACbqC,EAAAA,EAAI,wBAAA;4CACJC,cAAAA,EAAgB;AAClB,yCAAA;;kDAEF7B,cAAA,CAACqC,WAAAA,EAAAA;AAAYC,wCAAAA,OAAAA,EAAS,IAAA,CAAO,CAAA;wCAAGtB,KAAAA,EAAM,MAAA;wCAAOuB,UAAAA,EAAW,EAAA;wCAAGT,OAAAA,EAAQ,SAAA;AACjE,wCAAA,QAAA,gBAAA9B,cAAA,CAACwC,cAAAA,EAAAA;AAAgBnD,4CAAAA,QAAAA,EAAAA,KAAAA,CAAMoD;;;kDAEzBzC,cAAA,CAAC+B,mBAAAA,EAAAA;wCAAOC,OAAAA,EAASnC,UAAAA;wCAAYiC,OAAAA,EAAQ,UAAA;AAAWY,wCAAAA,SAAAA,gBAAW1C,cAAA,CAAC2C,eAAAA,EAAAA,EAAAA,CAAAA;kDACzDpD,aAAAA,CAAc;4CACbqC,EAAAA,EAAI,gBAAA;4CACJC,cAAAA,EAAgB;AAClB,yCAAA;;;;;;;;AAOd,QAAA;AAEA,QAAA,qBACE7B,cAAA,CAACC,iBAAAA,EAAAA;YAAKC,MAAAA,EAAO,MAAA;AACX,YAAA,QAAA,gBAAAF,cAAA,CAACG,iBAAAA,EAAAA;gBACCC,UAAAA,EAAW,QAAA;gBACXF,MAAAA,EAAO,MAAA;gBACPG,cAAAA,EAAe,QAAA;gBACfC,WAAAA,EAAaC,gCAAAA;gBACbC,YAAAA,EAAcD,gCAAAA;AAEd,gBAAA,QAAA,gBAAAE,eAAA,CAACN,iBAAAA,EAAAA;oBACCO,GAAAA,EAAK,CAAA;oBACLC,OAAAA,EAAS;wBACPC,OAAAA,EAAS,CAAA;wBACTC,KAAAA,EAAO,CAAA;wBACPC,MAAAA,EAAQ;AACV,qBAAA;oBACAC,SAAAA,EAAU,QAAA;oBACVC,KAAAA,EAAM,MAAA;oBACNC,QAAAA,EAAS,OAAA;oBACTC,MAAAA,EAAO,aAAA;oBACPC,WAAAA,EAAY,YAAA;oBACZC,UAAAA,EAAW,UAAA;oBACXC,SAAS,EAAA,IAAA;;sCAETZ,eAAA,CAACN,iBAAAA,EAAAA;4BAAKY,SAAAA,EAAU,QAAA;4BAASL,GAAAA,EAAK,CAAA;;8CAC5BV,cAAA,CAAC4C,mBAAAA,EAAAA;oCAAc5B,KAAAA,EAAM,MAAA;oCAAOd,MAAAA,EAAO,MAAA;oCAAOqB,IAAAA,EAAK;;8CAC/CvB,cAAA,CAACwB,uBAAAA,EAAAA;oCAAWC,QAAAA,EAAU,CAAA;oCAAGC,UAAAA,EAAW,MAAA;oCAAOC,SAAAA,EAAU,QAAA;8CAClDpC,aAAAA,CAAc;wCACbqC,EAAAA,EAAI,WAAA;wCACJC,cAAAA,EAAgB;AAClB,qCAAA;;8CAEF7B,cAAA,CAACwB,uBAAAA,EAAAA;oCAAWM,OAAAA,EAAQ,OAAA;oCAAQH,SAAAA,EAAU,QAAA;8CACnCpC,aAAAA,CACC;wCACEqC,EAAAA,EAAI,mBAAA;wCACJC,cAAAA,EAAgB,CAAC,2NAA2N;qCAC9O,EACA;AACEgB,wCAAAA,IAAAA,gBACE7C,cAAA,CAAC8C,iBAAAA,EAAAA;4CACCC,UAAU,EAAA,IAAA;;4CAEVC,OAAO,EAAA,IAAA;4CACPC,IAAAA,EAAK,iGAAA;AACL,4CAAA,QAAA,EAAA,CAAC,eAAe;;AAEtB,qCAAA;;;;sCAKNxC,eAAA,CAACN,iBAAAA,EAAAA;4BAAKO,GAAAA,EAAK,CAAA;4BAAGK,SAAAA,EAAU,QAAA;4BAASC,KAAAA,EAAM,MAAA;;8CACrChB,cAAA,CAACqC,WAAAA,EAAAA;AAAYC,oCAAAA,OAAAA,EAAS,IAAA,CAAO,CAAA;oCAAGtB,KAAAA,EAAM,MAAA;oCAAOuB,UAAAA,EAAW,EAAA;oCAAGT,OAAAA,EAAQ,QAAA;AACjE,oCAAA,QAAA,gBAAA9B,cAAA,CAACkD,SAAAA,EAAAA;AAAW7D,wCAAAA,QAAAA,EAAAA,KAAAA,CAAMoD;;;8CAEpBzC,cAAA,CAAC+B,mBAAAA,EAAAA;oCAAOC,OAAAA,EAASnC,UAAAA;oCAAYiC,OAAAA,EAAQ,UAAA;AAAWY,oCAAAA,SAAAA,gBAAW1C,cAAA,CAAC2C,eAAAA,EAAAA,EAAAA,CAAAA;8CACzDpD,aAAAA,CAAc;wCACbqC,EAAAA,EAAI,gBAAA;wCACJC,cAAAA,EAAgB;AAClB,qCAAA;;;;;;;;AAOd,IAAA;IAEA,MAAMxC,KAAAA;AACR;AAEA,MAAMgD,WAAAA,GAAcc,aAAAA,CAAOC,kBAAAA,CAAM;;;;;;;;AAQjC,CAAC;AAED,MAAMF,SAAAA,GAAYC,aAAAA,CAA4B3B,uBAAAA,CAAW;;SAEhD,EAAE,CAAC,EAAE6B,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,SAAS,CAAC;AACjD,CAAC;AAED,MAAMf,cAAAA,GAAiBW,aAAAA,CAA4B3B,uBAAAA,CAAW;;SAErD,EAAE,CAAC,EAAE6B,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACE,UAAU,CAAC;AAClD,CAAC;;;;"}

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/Filters.js

@@ -12,7 +12,8 @@ var Context = require('./Context.js');
 var Form = require('./Form.js');
 var Renderer = require('./FormInputs/Renderer.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -29,7 +30,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const [FiltersProvider, useFilters] = Context.createContext('Filters');
 const getFilterDetails = (filterEntry, options)=>{