@strapi/admin 5.31.3 → 5.33.0

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","style","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
+{"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography\n                tag=\"h1\"\n                variant=\"alpha\"\n                {...props}\n                style={{\n                  wordBreak: 'break-word',\n                  overflowWrap: 'break-word',\n                  maxWidth: '100%',\n                }}\n              >\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","minWidth","style","wordBreak","overflowWrap","maxWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBMA,MAAAA,gBAAAA,iBAAmBC,iBAAMC,UAAU,CACvC,CACE,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGC,KAAAA,EAAO,EAC9FC,GAAAA,GAAAA;IAEA,MAAMC,gBAAAA,GAAmB,OAAON,QAAa,KAAA,QAAA;AAE7C,IAAA,IAAIE,MAAQ,EAAA;AACV,QAAA,qBACEK,cAACC,CAAAA,gBAAAA,EAAAA;YACCC,OAAQ,EAAA,MAAA;YACRC,WAAa,EAAA,CAAA;YACbC,YAAc,EAAA,CAAA;YACdC,UAAY,EAAA,CAAA;YACZC,aAAe,EAAA,CAAA;YACfC,QAAS,EAAA,OAAA;YACTC,GAAK,EAAA,CAAA;YACLC,UAAW,EAAA,UAAA;YACXC,MAAO,EAAA,aAAA;YACPd,KAAO,EAAA,CAAA,EAAGA,KAAM,CAAA,EAAE,CAAC;YACnBe,MAAQ,EAAA,CAAA;YACRC,SAAWC,EAAAA,2BAAAA;YACXC,2BAAyB,EAAA,IAAA;AAEzB,YAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;gBAAKC,UAAW,EAAA,QAAA;gBAASC,cAAe,EAAA,eAAA;gBAAgBC,IAAK,EAAA,MAAA;gBAAOvB,KAAM,EAAA,MAAA;;kCACzEmB,eAACC,CAAAA,iBAAAA,EAAAA;;AACE1B,4BAAAA,gBAAAA,kBAAoBU,cAACC,CAAAA,gBAAAA,EAAAA;gCAAIG,YAAc,EAAA,CAAA;AAAId,gCAAAA,QAAAA,EAAAA;;0CAC5CyB,eAACd,CAAAA,gBAAAA,EAAAA;;kDACCD,cAACoB,CAAAA,uBAAAA,EAAAA;wCAAWC,OAAQ,EAAA,MAAA;wCAAOC,GAAI,EAAA,IAAA;AAAM,wCAAA,GAAGzB,KAAK;AAC1CH,wCAAAA,QAAAA,EAAAA;;AAEFK,oCAAAA,gBAAAA,iBACCC,cAACoB,CAAAA,uBAAAA,EAAAA;wCAAWC,OAAQ,EAAA,IAAA;wCAAKE,SAAU,EAAA,YAAA;AAChC9B,wCAAAA,QAAAA,EAAAA;AAGHA,qCAAAA,CAAAA,GAAAA;;;AAGHD,4BAAAA,eAAAA,iBAAkBQ,cAACC,CAAAA,gBAAAA,EAAAA;gCAAIE,WAAa,EAAA,CAAA;AAAIX,gCAAAA,QAAAA,EAAAA;AAAyB,6BAAA,CAAA,GAAA;;;kCAEpEQ,cAACgB,CAAAA,iBAAAA,EAAAA;AAAMzB,wBAAAA,QAAAA,EAAAA,aAAAA,iBAAgBS,cAACC,CAAAA,gBAAAA,EAAAA;4BAAIE,WAAa,EAAA,CAAA;AAAIZ,4BAAAA,QAAAA,EAAAA;AAAuBiC,yBAAAA,CAAAA,GAAAA;;;;;AAI5E;AAEA,IAAA,qBACET,eAACd,CAAAA,gBAAAA,EAAAA;QACCH,GAAKA,EAAAA,GAAAA;QACLK,WAAasB,EAAAA,gCAAAA;QACbrB,YAAcqB,EAAAA,gCAAAA;QACdnB,aAAe,EAAA;YACboB,OAAS,EAAA,CAAA;YACTC,KAAO,EAAA;AACT,SAAA;QACAtB,UAAY,EAAA;YACVqB,OAAS,EAAA,CAAA;AACTC,YAAAA,KAAAA,EAAOrC,mBAAmB,CAAI,GAAA;AAChC,SAAA;QACAmB,UAAW,EAAA,YAAA;QACXmB,oBAAkB,EAAA,IAAA;;0BAElBb,eAACC,CAAAA,iBAAAA,EAAAA;gBAAKa,SAAU,EAAA,QAAA;gBAASZ,UAAW,EAAA,SAAA;gBAAUa,GAAK,EAAA,CAAA;;AAChDxC,oBAAAA,gBAAAA;kCACDyB,eAACC,CAAAA,iBAAAA,EAAAA;wBAAKE,cAAe,EAAA,eAAA;wBAAgBC,IAAK,EAAA,MAAA;wBAAOW,GAAK,EAAA,CAAA;;0CACpDf,eAACC,CAAAA,iBAAAA,EAAAA;gCAAKe,QAAU,EAAA,CAAA;;kDACd/B,cAACoB,CAAAA,uBAAAA,EAAAA;wCACCE,GAAI,EAAA,IAAA;wCACJD,OAAQ,EAAA,OAAA;AACP,wCAAA,GAAGxB,KAAK;wCACTmC,KAAO,EAAA;4CACLC,SAAW,EAAA,YAAA;4CACXC,YAAc,EAAA,YAAA;4CACdC,QAAU,EAAA;AACZ,yCAAA;AAECzC,wCAAAA,QAAAA,EAAAA;;AAEFF,oCAAAA,eAAAA,iBAAkBQ,cAACC,CAAAA,gBAAAA,EAAAA;wCAAIE,WAAa,EAAA,CAAA;AAAIX,wCAAAA,QAAAA,EAAAA;AAAyB,qCAAA,CAAA,GAAA;;;AAEnED,4BAAAA;;;;;AAGJQ,YAAAA,gBAAAA,iBACCC,cAACoB,CAAAA,uBAAAA,EAAAA;gBACCC,OAAQ,EAAA,SAAA;gBACRE,SAAU,EAAA,YAAA;gBACVD,GAAI,EAAA,GAAA;gBACJjB,UAAY,EAAA;oBAAEqB,OAAS,EAAA,CAAA;oBAAGC,KAAO,EAAA;AAAE,iBAAA;AAElClC,gBAAAA,QAAAA,EAAAA;AAGHA,aAAAA,CAAAA,GAAAA;;;AAIR,CAAA;AASF,MAAM2C,eAAe,CAACvC,KAAAA,GAAAA;IACpB,MAAMwC,mBAAAA,GAAsBjD,gBAAMkD,CAAAA,MAAM,CAAiB,IAAA,CAAA;AACzD,IAAA,MAAM,CAACC,UAAYC,EAAAA,aAAAA,CAAc,GAAGpD,gBAAAA,CAAMqD,QAAQ,CAAiB,IAAA,CAAA;AACnE,IAAA,MAAM,CAACC,SAAWC,EAAAA,YAAAA,CAAa,GAAGvD,gBAAAA,CAAMqD,QAAQ,CAAC,IAAA,CAAA;AACjD,IAAA,MAAMG,UAAaC,GAAAA,2BAAAA,EAAAA;IAEnB,MAAMC,YAAAA,GAAeC,sCAAmCJ,YAAc,EAAA;QACpEK,IAAM,EAAA,IAAA;QACNC,UAAY,EAAA,KAAA;QACZC,SAAW,EAAA;AACb,KAAA,CAAA;IAEAC,iBAAkB,CAAA;AAACL,QAAAA;KAAa,EAAE,IAAA;QAChC,IAAIA,YAAAA,CAAaM,OAAO,EAAE;AACxB,YAAA,MAAMC,OAAUP,GAAAA,YAAAA,CAAaM,OAAO,CAACE,qBAAqB,EAAA;AAC1Dd,YAAAA,aAAAA,CAAc,CAACe,QAAAA,GAAAA;;AAEb,gBAAA,IAAI,CAACA,QAAAA,IAAYA,QAASC,CAAAA,MAAM,KAAKH,OAAAA,CAAQG,MAAM,IAAID,QAAS3D,CAAAA,KAAK,KAAKyD,OAAAA,CAAQzD,KAAK,EAAE;oBACvF,OAAOyD,OAAAA;AACT;gBACA,OAAOE,QAAAA;AACT,aAAA,CAAA;AACF;AACF,KAAA,CAAA;AAEAnE,IAAAA,gBAAAA,CAAMqE,SAAS,CAAC,IAAA;QACd,IAAIX,YAAAA,CAAaM,OAAO,EAAE;YACxBZ,aAAcM,CAAAA,YAAAA,CAAaM,OAAO,CAACE,qBAAqB,EAAA,CAAA;AAC1D;KACC,EAAA;AAACR,QAAAA;AAAa,KAAA,CAAA;AAEjB,IAAA,IAAIF,eAAe,QAAU,EAAA;AAC3B,QAAA,qBAAO5C,cAACb,CAAAA,gBAAAA,EAAAA;AAAkB,YAAA,GAAGU;;AAC/B;AAEA,IAAA,qBACEkB,eAAC2C,CAAAA,KAAAA,EAAAA;QAAI5D,GAAKgD,EAAAA,YAAAA;;0BACR9C,cAAC0D,CAAAA,KAAAA,EAAAA;gBAAI1B,KAAO,EAAA;AAAEwB,oBAAAA,MAAAA,EAAQjB,UAAYiB,EAAAA;AAAO,iBAAA;AACtCd,gBAAAA,QAAAA,EAAAA,SAAAA,kBAAa1C,cAACb,CAAAA,gBAAAA,EAAAA;oBAAiBW,GAAKuC,EAAAA,mBAAAA;AAAsB,oBAAA,GAAGxC;;;AAG/D,YAAA,CAAC6C,2BAAa1C,cAACb,CAAAA,gBAAAA,EAAAA;AAAkB,gBAAA,GAAGU,KAAK;gBAAEF,MAAM,EAAA,IAAA;AAACC,gBAAAA,KAAAA,EAAO2C,UAAY3C,EAAAA;;;;AAG5E;AAEAwC,YAAAA,CAAauB,WAAW,GAAG,cAAA;AAE3B;;IAGA,MAAMR,iBAAoB,GAAA,CACxBS,OACAC,EAAAA,QAAAA,GAAAA;AAEA,IAAA,MAAMC,eAAeC,2BAAeF,CAAAA,QAAAA,CAAAA;AAEpCzE,IAAAA,gBAAAA,CAAM4E,eAAe,CAAC,IAAA;QACpB,MAAMC,SAAAA,GAAY,IAAIC,cAAeJ,CAAAA,YAAAA,CAAAA;QAErC,IAAIK,KAAAA,CAAMC,OAAO,CAACR,OAAU,CAAA,EAAA;YAC1BA,OAAQS,CAAAA,OAAO,CAAC,CAACC,MAAAA,GAAAA;gBACf,IAAIA,MAAAA,CAAOlB,OAAO,EAAE;oBAClBa,SAAUM,CAAAA,OAAO,CAACD,MAAAA,CAAOlB,OAAO,CAAA;AAClC;AACF,aAAA,CAAA;SACK,MAAA,IAAIQ,OAAQR,CAAAA,OAAO,EAAE;YAC1Ba,SAAUM,CAAAA,OAAO,CAACX,OAAAA,CAAQR,OAAO,CAAA;AACnC;QAEA,OAAO,IAAA;AACLa,YAAAA,SAAAA,CAAUO,UAAU,EAAA;AACtB,SAAA;KACC,EAAA;AAACZ,QAAAA,OAAAA;AAASE,QAAAA;AAAa,KAAA,CAAA;AAC5B,CAAA;;;;;"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs

@@ -98,6 +98,11 @@ const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, pri
                                         tag: "h1",
                                         variant: "alpha",
                                         ...props,
+                                        style: {
+                                            wordBreak: 'break-word',
+                                            overflowWrap: 'break-word',
+                                            maxWidth: '100%'
+                                        },
                                         children: title
                                     }),
                                     secondaryAction ? /*#__PURE__*/ jsx(Box, {

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","style","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
+{"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography\n                tag=\"h1\"\n                variant=\"alpha\"\n                {...props}\n                style={{\n                  wordBreak: 'break-word',\n                  overflowWrap: 'break-word',\n                  maxWidth: '100%',\n                }}\n              >\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","minWidth","style","wordBreak","overflowWrap","maxWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

package/dist/admin/admin/src/features/Notifications.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
-var theme = require('../constants/theme.js');
+var sonner = require('sonner');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -28,94 +28,51 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const NotificationsContext = /*#__PURE__*/ React__namespace.createContext({
     toggleNotification: ()=>{}
 });
-/**
+/* -------------------------------------------------------------------------------------------------
+ * Provider
+ * -----------------------------------------------------------------------------------------------*/ /**
  * @internal
- * @description DO NOT USE. This will be removed before stable release of v5.
+ * @description exposes the `NotificationsContext` to its children and renders notifications
  */ const NotificationsProvider = ({ children })=>{
-    const notificationIdRef = React__namespace.useRef(0);
-    const [notifications, setNotifications] = React__namespace.useState([]);
     const toggleNotification = React__namespace.useCallback(({ type, message, link, timeout, blockTransition, onClose, title })=>{
-        setNotifications((s)=>[
-                ...s,
-                {
-                    id: notificationIdRef.current++,
-                    type,
-                    message,
-                    link,
-                    timeout,
-                    blockTransition,
-                    onClose,
-                    title
-                }
-            ]);
-    }, []);
-    const clearNotification = React__namespace.useCallback((id)=>{
-        setNotifications((s)=>s.filter((n)=>n.id !== id));
+        sonner.toast.custom((id)=>{
+            return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                width: "50rem",
+                maxWidth: "100%",
+                children: /*#__PURE__*/ jsxRuntime.jsx(Notification, {
+                    type: type,
+                    message: message,
+                    title: title,
+                    link: link,
+                    clearNotification: ()=>{
+                        sonner.toast.dismiss(id);
+                        onClose?.();
+                    }
+                })
+            });
+        }, {
+            duration: blockTransition ? Infinity : timeout
+        });
     }, []);
     const value = React__namespace.useMemo(()=>({
             toggleNotification
         }), [
         toggleNotification
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs(NotificationsContext.Provider, {
-        value: value,
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                left: "50%",
-                transform: "translateX(-50%)",
-                position: "fixed",
-                direction: "column",
-                alignItems: "stretch",
-                gap: 4,
-                marginTop: 4,
-                top: theme.HEIGHT_TOP_NAVIGATION,
-                width: "100%",
-                maxWidth: `50rem`,
-                zIndex: "notification",
-                children: notifications.map((notification)=>{
-                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                        paddingLeft: 4,
-                        paddingRight: 4,
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Notification, {
-                            ...notification,
-                            clearNotification: clearNotification
-                        })
-                    }, notification.id);
-                })
+            /*#__PURE__*/ jsxRuntime.jsx(sonner.Toaster, {
+                position: "top-center"
             }),
-            children
+            /*#__PURE__*/ jsxRuntime.jsx(NotificationsContext.Provider, {
+                value: value,
+                children: children
+            })
         ]
     });
 };
-const Notification = ({ clearNotification, blockTransition = false, id, link, message, onClose, timeout = 2500, title, type })=>{
+const Notification = ({ clearNotification, link, message, onClose, title, type })=>{
     const { formatMessage } = reactIntl.useIntl();
-    /**
-   * Chances are `onClose` won't be classed as stabilised,
-   * so we use `useCallbackRef` to avoid make it stable.
-   */ const onCloseCallback = designSystem.useCallbackRef(onClose);
-    const handleClose = React__namespace.useCallback(()=>{
-        onCloseCallback();
-        clearNotification(id);
-    }, [
-        clearNotification,
-        id,
-        onCloseCallback
-    ]);
-    // eslint-disable-next-line consistent-return
-    React__namespace.useEffect(()=>{
-        if (!blockTransition) {
-            const timeoutReference = setTimeout(()=>{
-                handleClose();
-            }, timeout);
-            return ()=>{
-                clearTimeout(timeoutReference);
-            };
-        }
-    }, [
-        blockTransition,
-        handleClose,
-        timeout
-    ]);
     const getVariant = ()=>{
         switch(type){
             case 'info':
@@ -134,7 +91,10 @@ const Notification = ({ clearNotification, blockTransition = false, id, link, me
             isExternal: true,
             children: link.label
         }) : undefined,
-        onClose: handleClose,
+        onClose: ()=>{
+            onClose?.();
+            clearNotification();
+        },
         closeLabel: formatMessage({
             id: 'global.close',
             defaultMessage: 'Close'

package/dist/admin/admin/src/features/Notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.js","sources":["../../../../../admin/src/features/Notifications.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Alert, AlertVariant, Flex, useCallbackRef, Link, Box } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\ninterface NotificationLink {\n  label: string;\n  target?: string;\n  url: string;\n}\n\ninterface NotificationConfig {\n  blockTransition?: boolean;\n  link?: NotificationLink;\n  message?: string;\n  onClose?: () => void;\n  timeout?: number;\n  title?: string;\n  type?: 'info' | 'warning' | 'danger' | 'success';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsContextValue {\n  /**\n   * Toggles a notification, wrapped in `useCallback` for a stable identity.\n   */\n  toggleNotification: (config: NotificationConfig) => void;\n}\n\nconst NotificationsContext = React.createContext<NotificationsContextValue>({\n  toggleNotification: () => {},\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsProviderProps {\n  children: React.ReactNode;\n}\ninterface Notification extends NotificationConfig {\n  id: number;\n}\n\n/**\n * @internal\n * @description DO NOT USE. This will be removed before stable release of v5.\n */\nconst NotificationsProvider = ({ children }: NotificationsProviderProps) => {\n  const notificationIdRef = React.useRef(0);\n\n  const [notifications, setNotifications] = React.useState<Notification[]>([]);\n\n  const toggleNotification = React.useCallback(\n    ({ type, message, link, timeout, blockTransition, onClose, title }: NotificationConfig) => {\n      setNotifications((s) => [\n        ...s,\n        {\n          id: notificationIdRef.current++,\n          type,\n          message,\n          link,\n          timeout,\n          blockTransition,\n          onClose,\n          title,\n        },\n      ]);\n    },\n    []\n  );\n\n  const clearNotification = React.useCallback((id: number) => {\n    setNotifications((s) => s.filter((n) => n.id !== id));\n  }, []);\n\n  const value = React.useMemo(() => ({ toggleNotification }), [toggleNotification]);\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      <Flex\n        left=\"50%\"\n        transform=\"translateX(-50%)\"\n        position=\"fixed\"\n        direction=\"column\"\n        alignItems=\"stretch\"\n        gap={4}\n        marginTop={4}\n        top={HEIGHT_TOP_NAVIGATION}\n        width=\"100%\"\n        maxWidth={`50rem`}\n        zIndex=\"notification\"\n      >\n        {notifications.map((notification) => {\n          return (\n            <Box key={notification.id} paddingLeft={4} paddingRight={4}>\n              <Notification {...notification} clearNotification={clearNotification} />\n            </Box>\n          );\n        })}\n      </Flex>\n      {children}\n    </NotificationsContext.Provider>\n  );\n};\n\ninterface NotificationProps extends Notification {\n  clearNotification: (id: number) => void;\n}\n\nconst Notification = ({\n  clearNotification,\n  blockTransition = false,\n  id,\n  link,\n  message,\n  onClose,\n  timeout = 2500,\n  title,\n  type,\n}: NotificationProps) => {\n  const { formatMessage } = useIntl();\n  /**\n   * Chances are `onClose` won't be classed as stabilised,\n   * so we use `useCallbackRef` to avoid make it stable.\n   */\n  const onCloseCallback = useCallbackRef(onClose);\n\n  const handleClose = React.useCallback(() => {\n    onCloseCallback();\n\n    clearNotification(id);\n  }, [clearNotification, id, onCloseCallback]);\n\n  // eslint-disable-next-line consistent-return\n  React.useEffect(() => {\n    if (!blockTransition) {\n      const timeoutReference = setTimeout(() => {\n        handleClose();\n      }, timeout);\n\n      return () => {\n        clearTimeout(timeoutReference);\n      };\n    }\n  }, [blockTransition, handleClose, timeout]);\n\n  const getVariant = (): AlertVariant => {\n    switch (type) {\n      case 'info':\n        return 'default';\n      case 'danger':\n        return 'danger';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'success';\n    }\n  };\n\n  return (\n    <Alert\n      action={\n        link ? (\n          <Link href={link.url} isExternal>\n            {link.label}\n          </Link>\n        ) : undefined\n      }\n      onClose={handleClose}\n      closeLabel={formatMessage({\n        id: 'global.close',\n        defaultMessage: 'Close',\n      })}\n      title={title}\n      variant={getVariant()}\n    >\n      {message}\n    </Alert>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @preserve\n * @description Returns an object to interact with the notification\n * system. The callbacks are wrapped in `useCallback` for a stable\n * identity.\n *\n * @example\n * ```tsx\n * import { useNotification } from '@strapi/strapi/admin';\n *\n * const MyComponent = () => {\n *  const { toggleNotification } = useNotification();\n *\n *  return <button onClick={() => toggleNotification({ message: 'Hello world!' })}>Click me</button>;\n */\nconst useNotification = () => React.useContext(NotificationsContext);\n\nexport { NotificationsProvider, useNotification };\nexport type { NotificationConfig, NotificationsContextValue };\n"],"names":["NotificationsContext","React","createContext","toggleNotification","NotificationsProvider","children","notificationIdRef","useRef","notifications","setNotifications","useState","useCallback","type","message","link","timeout","blockTransition","onClose","title","s","id","current","clearNotification","filter","n","value","useMemo","_jsxs","Provider","_jsx","Flex","left","transform","position","direction","alignItems","gap","marginTop","top","HEIGHT_TOP_NAVIGATION","width","maxWidth","zIndex","map","notification","Box","paddingLeft","paddingRight","Notification","formatMessage","useIntl","onCloseCallback","useCallbackRef","handleClose","useEffect","timeoutReference","setTimeout","clearTimeout","getVariant","Alert","action","Link","href","url","isExternal","label","undefined","closeLabel","defaultMessage","variant","useNotification","useContext"],"mappings":"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"}
+{"version":3,"file":"Notifications.js","sources":["../../../../../admin/src/features/Notifications.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Alert, AlertVariant, Link, Box } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { Toaster, toast } from 'sonner';\n\ninterface NotificationLink {\n  label: string;\n  target?: string;\n  url: string;\n}\n\ninterface NotificationConfig {\n  blockTransition?: boolean;\n  link?: NotificationLink;\n  message?: string;\n  onClose?: () => void;\n  timeout?: number;\n  title?: string;\n  type?: 'info' | 'warning' | 'danger' | 'success';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsContextValue {\n  /**\n   * Toggles a notification, wrapped in `useCallback` for a stable identity.\n   */\n  toggleNotification: (config: NotificationConfig) => void;\n}\n\nconst NotificationsContext = React.createContext<NotificationsContextValue>({\n  toggleNotification: () => {},\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @internal\n * @description exposes the `NotificationsContext` to its children and renders notifications\n */\nconst NotificationsProvider = ({ children }: { children: React.ReactNode }) => {\n  const toggleNotification = React.useCallback(\n    ({ type, message, link, timeout, blockTransition, onClose, title }: NotificationConfig) => {\n      toast.custom(\n        (id) => {\n          return (\n            <Box width=\"50rem\" maxWidth=\"100%\">\n              <Notification\n                type={type}\n                message={message}\n                title={title}\n                link={link}\n                clearNotification={() => {\n                  toast.dismiss(id);\n                  onClose?.();\n                }}\n              />\n            </Box>\n          );\n        },\n        { duration: blockTransition ? Infinity : timeout }\n      );\n    },\n    []\n  );\n\n  const value = React.useMemo(() => ({ toggleNotification }), [toggleNotification]);\n\n  return (\n    <>\n      <Toaster position=\"top-center\" />\n      <NotificationsContext.Provider value={value}>{children}</NotificationsContext.Provider>\n    </>\n  );\n};\n\ninterface NotificationProps extends Omit<NotificationConfig, 'blockTransition' | 'timeout'> {\n  clearNotification: () => void;\n}\n\nconst Notification = ({\n  clearNotification,\n  link,\n  message,\n  onClose,\n  title,\n  type,\n}: NotificationProps) => {\n  const { formatMessage } = useIntl();\n\n  const getVariant = (): AlertVariant => {\n    switch (type) {\n      case 'info':\n        return 'default';\n      case 'danger':\n        return 'danger';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'success';\n    }\n  };\n\n  return (\n    <Alert\n      action={\n        link ? (\n          <Link href={link.url} isExternal>\n            {link.label}\n          </Link>\n        ) : undefined\n      }\n      onClose={() => {\n        onClose?.();\n        clearNotification();\n      }}\n      closeLabel={formatMessage({\n        id: 'global.close',\n        defaultMessage: 'Close',\n      })}\n      title={title}\n      variant={getVariant()}\n    >\n      {message}\n    </Alert>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @preserve\n * @description Returns an object to interact with the notification\n * system. The callbacks are wrapped in `useCallback` for a stable\n * identity.\n *\n * @example\n * ```tsx\n * import { useNotification } from '@strapi/strapi/admin';\n *\n * const MyComponent = () => {\n *  const { toggleNotification } = useNotification();\n *\n *  return <button onClick={() => toggleNotification({ message: 'Hello world!' })}>Click me</button>;\n */\nconst useNotification = () => React.useContext(NotificationsContext);\n\nexport { NotificationsProvider, useNotification };\nexport type { NotificationConfig, NotificationsContextValue };\n"],"names":["NotificationsContext","React","createContext","toggleNotification","NotificationsProvider","children","useCallback","type","message","link","timeout","blockTransition","onClose","title","toast","custom","id","_jsx","Box","width","maxWidth","Notification","clearNotification","dismiss","duration","Infinity","value","useMemo","_jsxs","_Fragment","Toaster","position","Provider","formatMessage","useIntl","getVariant","Alert","action","Link","href","url","isExternal","label","undefined","closeLabel","defaultMessage","variant","useNotification","useContext"],"mappings":"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"}

package/dist/admin/admin/src/features/Notifications.mjs

@@ -1,100 +1,57 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, Box, useCallbackRef, Alert, Link } from '@strapi/design-system';
+import { Box, Alert, Link } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
-import { HEIGHT_TOP_NAVIGATION } from '../constants/theme.mjs';
+import { toast, Toaster } from 'sonner';
 
 const NotificationsContext = /*#__PURE__*/ React.createContext({
     toggleNotification: ()=>{}
 });
-/**
+/* -------------------------------------------------------------------------------------------------
+ * Provider
+ * -----------------------------------------------------------------------------------------------*/ /**
  * @internal
- * @description DO NOT USE. This will be removed before stable release of v5.
+ * @description exposes the `NotificationsContext` to its children and renders notifications
  */ const NotificationsProvider = ({ children })=>{
-    const notificationIdRef = React.useRef(0);
-    const [notifications, setNotifications] = React.useState([]);
     const toggleNotification = React.useCallback(({ type, message, link, timeout, blockTransition, onClose, title })=>{
-        setNotifications((s)=>[
-                ...s,
-                {
-                    id: notificationIdRef.current++,
-                    type,
-                    message,
-                    link,
-                    timeout,
-                    blockTransition,
-                    onClose,
-                    title
-                }
-            ]);
-    }, []);
-    const clearNotification = React.useCallback((id)=>{
-        setNotifications((s)=>s.filter((n)=>n.id !== id));
+        toast.custom((id)=>{
+            return /*#__PURE__*/ jsx(Box, {
+                width: "50rem",
+                maxWidth: "100%",
+                children: /*#__PURE__*/ jsx(Notification, {
+                    type: type,
+                    message: message,
+                    title: title,
+                    link: link,
+                    clearNotification: ()=>{
+                        toast.dismiss(id);
+                        onClose?.();
+                    }
+                })
+            });
+        }, {
+            duration: blockTransition ? Infinity : timeout
+        });
     }, []);
     const value = React.useMemo(()=>({
             toggleNotification
         }), [
         toggleNotification
     ]);
-    return /*#__PURE__*/ jsxs(NotificationsContext.Provider, {
-        value: value,
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(Flex, {
-                left: "50%",
-                transform: "translateX(-50%)",
-                position: "fixed",
-                direction: "column",
-                alignItems: "stretch",
-                gap: 4,
-                marginTop: 4,
-                top: HEIGHT_TOP_NAVIGATION,
-                width: "100%",
-                maxWidth: `50rem`,
-                zIndex: "notification",
-                children: notifications.map((notification)=>{
-                    return /*#__PURE__*/ jsx(Box, {
-                        paddingLeft: 4,
-                        paddingRight: 4,
-                        children: /*#__PURE__*/ jsx(Notification, {
-                            ...notification,
-                            clearNotification: clearNotification
-                        })
-                    }, notification.id);
-                })
+            /*#__PURE__*/ jsx(Toaster, {
+                position: "top-center"
             }),
-            children
+            /*#__PURE__*/ jsx(NotificationsContext.Provider, {
+                value: value,
+                children: children
+            })
         ]
     });
 };
-const Notification = ({ clearNotification, blockTransition = false, id, link, message, onClose, timeout = 2500, title, type })=>{
+const Notification = ({ clearNotification, link, message, onClose, title, type })=>{
     const { formatMessage } = useIntl();
-    /**
-   * Chances are `onClose` won't be classed as stabilised,
-   * so we use `useCallbackRef` to avoid make it stable.
-   */ const onCloseCallback = useCallbackRef(onClose);
-    const handleClose = React.useCallback(()=>{
-        onCloseCallback();
-        clearNotification(id);
-    }, [
-        clearNotification,
-        id,
-        onCloseCallback
-    ]);
-    // eslint-disable-next-line consistent-return
-    React.useEffect(()=>{
-        if (!blockTransition) {
-            const timeoutReference = setTimeout(()=>{
-                handleClose();
-            }, timeout);
-            return ()=>{
-                clearTimeout(timeoutReference);
-            };
-        }
-    }, [
-        blockTransition,
-        handleClose,
-        timeout
-    ]);
     const getVariant = ()=>{
         switch(type){
             case 'info':
@@ -113,7 +70,10 @@ const Notification = ({ clearNotification, blockTransition = false, id, link, me
             isExternal: true,
             children: link.label
         }) : undefined,
-        onClose: handleClose,
+        onClose: ()=>{
+            onClose?.();
+            clearNotification();
+        },
         closeLabel: formatMessage({
             id: 'global.close',
             defaultMessage: 'Close'

package/dist/admin/admin/src/features/Notifications.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.mjs","sources":["../../../../../admin/src/features/Notifications.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Alert, AlertVariant, Flex, useCallbackRef, Link, Box } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\ninterface NotificationLink {\n  label: string;\n  target?: string;\n  url: string;\n}\n\ninterface NotificationConfig {\n  blockTransition?: boolean;\n  link?: NotificationLink;\n  message?: string;\n  onClose?: () => void;\n  timeout?: number;\n  title?: string;\n  type?: 'info' | 'warning' | 'danger' | 'success';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsContextValue {\n  /**\n   * Toggles a notification, wrapped in `useCallback` for a stable identity.\n   */\n  toggleNotification: (config: NotificationConfig) => void;\n}\n\nconst NotificationsContext = React.createContext<NotificationsContextValue>({\n  toggleNotification: () => {},\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsProviderProps {\n  children: React.ReactNode;\n}\ninterface Notification extends NotificationConfig {\n  id: number;\n}\n\n/**\n * @internal\n * @description DO NOT USE. This will be removed before stable release of v5.\n */\nconst NotificationsProvider = ({ children }: NotificationsProviderProps) => {\n  const notificationIdRef = React.useRef(0);\n\n  const [notifications, setNotifications] = React.useState<Notification[]>([]);\n\n  const toggleNotification = React.useCallback(\n    ({ type, message, link, timeout, blockTransition, onClose, title }: NotificationConfig) => {\n      setNotifications((s) => [\n        ...s,\n        {\n          id: notificationIdRef.current++,\n          type,\n          message,\n          link,\n          timeout,\n          blockTransition,\n          onClose,\n          title,\n        },\n      ]);\n    },\n    []\n  );\n\n  const clearNotification = React.useCallback((id: number) => {\n    setNotifications((s) => s.filter((n) => n.id !== id));\n  }, []);\n\n  const value = React.useMemo(() => ({ toggleNotification }), [toggleNotification]);\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      <Flex\n        left=\"50%\"\n        transform=\"translateX(-50%)\"\n        position=\"fixed\"\n        direction=\"column\"\n        alignItems=\"stretch\"\n        gap={4}\n        marginTop={4}\n        top={HEIGHT_TOP_NAVIGATION}\n        width=\"100%\"\n        maxWidth={`50rem`}\n        zIndex=\"notification\"\n      >\n        {notifications.map((notification) => {\n          return (\n            <Box key={notification.id} paddingLeft={4} paddingRight={4}>\n              <Notification {...notification} clearNotification={clearNotification} />\n            </Box>\n          );\n        })}\n      </Flex>\n      {children}\n    </NotificationsContext.Provider>\n  );\n};\n\ninterface NotificationProps extends Notification {\n  clearNotification: (id: number) => void;\n}\n\nconst Notification = ({\n  clearNotification,\n  blockTransition = false,\n  id,\n  link,\n  message,\n  onClose,\n  timeout = 2500,\n  title,\n  type,\n}: NotificationProps) => {\n  const { formatMessage } = useIntl();\n  /**\n   * Chances are `onClose` won't be classed as stabilised,\n   * so we use `useCallbackRef` to avoid make it stable.\n   */\n  const onCloseCallback = useCallbackRef(onClose);\n\n  const handleClose = React.useCallback(() => {\n    onCloseCallback();\n\n    clearNotification(id);\n  }, [clearNotification, id, onCloseCallback]);\n\n  // eslint-disable-next-line consistent-return\n  React.useEffect(() => {\n    if (!blockTransition) {\n      const timeoutReference = setTimeout(() => {\n        handleClose();\n      }, timeout);\n\n      return () => {\n        clearTimeout(timeoutReference);\n      };\n    }\n  }, [blockTransition, handleClose, timeout]);\n\n  const getVariant = (): AlertVariant => {\n    switch (type) {\n      case 'info':\n        return 'default';\n      case 'danger':\n        return 'danger';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'success';\n    }\n  };\n\n  return (\n    <Alert\n      action={\n        link ? (\n          <Link href={link.url} isExternal>\n            {link.label}\n          </Link>\n        ) : undefined\n      }\n      onClose={handleClose}\n      closeLabel={formatMessage({\n        id: 'global.close',\n        defaultMessage: 'Close',\n      })}\n      title={title}\n      variant={getVariant()}\n    >\n      {message}\n    </Alert>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @preserve\n * @description Returns an object to interact with the notification\n * system. The callbacks are wrapped in `useCallback` for a stable\n * identity.\n *\n * @example\n * ```tsx\n * import { useNotification } from '@strapi/strapi/admin';\n *\n * const MyComponent = () => {\n *  const { toggleNotification } = useNotification();\n *\n *  return <button onClick={() => toggleNotification({ message: 'Hello world!' })}>Click me</button>;\n */\nconst useNotification = () => React.useContext(NotificationsContext);\n\nexport { NotificationsProvider, useNotification };\nexport type { NotificationConfig, NotificationsContextValue };\n"],"names":["NotificationsContext","React","createContext","toggleNotification","NotificationsProvider","children","notificationIdRef","useRef","notifications","setNotifications","useState","useCallback","type","message","link","timeout","blockTransition","onClose","title","s","id","current","clearNotification","filter","n","value","useMemo","_jsxs","Provider","_jsx","Flex","left","transform","position","direction","alignItems","gap","marginTop","top","HEIGHT_TOP_NAVIGATION","width","maxWidth","zIndex","map","notification","Box","paddingLeft","paddingRight","Notification","formatMessage","useIntl","onCloseCallback","useCallbackRef","handleClose","useEffect","timeoutReference","setTimeout","clearTimeout","getVariant","Alert","action","Link","href","url","isExternal","label","undefined","closeLabel","defaultMessage","variant","useNotification","useContext"],"mappings":"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"}
+{"version":3,"file":"Notifications.mjs","sources":["../../../../../admin/src/features/Notifications.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Alert, AlertVariant, Link, Box } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { Toaster, toast } from 'sonner';\n\ninterface NotificationLink {\n  label: string;\n  target?: string;\n  url: string;\n}\n\ninterface NotificationConfig {\n  blockTransition?: boolean;\n  link?: NotificationLink;\n  message?: string;\n  onClose?: () => void;\n  timeout?: number;\n  title?: string;\n  type?: 'info' | 'warning' | 'danger' | 'success';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsContextValue {\n  /**\n   * Toggles a notification, wrapped in `useCallback` for a stable identity.\n   */\n  toggleNotification: (config: NotificationConfig) => void;\n}\n\nconst NotificationsContext = React.createContext<NotificationsContextValue>({\n  toggleNotification: () => {},\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @internal\n * @description exposes the `NotificationsContext` to its children and renders notifications\n */\nconst NotificationsProvider = ({ children }: { children: React.ReactNode }) => {\n  const toggleNotification = React.useCallback(\n    ({ type, message, link, timeout, blockTransition, onClose, title }: NotificationConfig) => {\n      toast.custom(\n        (id) => {\n          return (\n            <Box width=\"50rem\" maxWidth=\"100%\">\n              <Notification\n                type={type}\n                message={message}\n                title={title}\n                link={link}\n                clearNotification={() => {\n                  toast.dismiss(id);\n                  onClose?.();\n                }}\n              />\n            </Box>\n          );\n        },\n        { duration: blockTransition ? Infinity : timeout }\n      );\n    },\n    []\n  );\n\n  const value = React.useMemo(() => ({ toggleNotification }), [toggleNotification]);\n\n  return (\n    <>\n      <Toaster position=\"top-center\" />\n      <NotificationsContext.Provider value={value}>{children}</NotificationsContext.Provider>\n    </>\n  );\n};\n\ninterface NotificationProps extends Omit<NotificationConfig, 'blockTransition' | 'timeout'> {\n  clearNotification: () => void;\n}\n\nconst Notification = ({\n  clearNotification,\n  link,\n  message,\n  onClose,\n  title,\n  type,\n}: NotificationProps) => {\n  const { formatMessage } = useIntl();\n\n  const getVariant = (): AlertVariant => {\n    switch (type) {\n      case 'info':\n        return 'default';\n      case 'danger':\n        return 'danger';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'success';\n    }\n  };\n\n  return (\n    <Alert\n      action={\n        link ? (\n          <Link href={link.url} isExternal>\n            {link.label}\n          </Link>\n        ) : undefined\n      }\n      onClose={() => {\n        onClose?.();\n        clearNotification();\n      }}\n      closeLabel={formatMessage({\n        id: 'global.close',\n        defaultMessage: 'Close',\n      })}\n      title={title}\n      variant={getVariant()}\n    >\n      {message}\n    </Alert>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @preserve\n * @description Returns an object to interact with the notification\n * system. The callbacks are wrapped in `useCallback` for a stable\n * identity.\n *\n * @example\n * ```tsx\n * import { useNotification } from '@strapi/strapi/admin';\n *\n * const MyComponent = () => {\n *  const { toggleNotification } = useNotification();\n *\n *  return <button onClick={() => toggleNotification({ message: 'Hello world!' })}>Click me</button>;\n */\nconst useNotification = () => React.useContext(NotificationsContext);\n\nexport { NotificationsProvider, useNotification };\nexport type { NotificationConfig, NotificationsContextValue };\n"],"names":["NotificationsContext","React","createContext","toggleNotification","NotificationsProvider","children","useCallback","type","message","link","timeout","blockTransition","onClose","title","toast","custom","id","_jsx","Box","width","maxWidth","Notification","clearNotification","dismiss","duration","Infinity","value","useMemo","_jsxs","_Fragment","Toaster","position","Provider","formatMessage","useIntl","getVariant","Alert","action","Link","href","url","isExternal","label","undefined","closeLabel","defaultMessage","variant","useNotification","useContext"],"mappings":"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"}

package/dist/admin/admin/src/pages/ProfilePage.js

@@ -236,7 +236,7 @@ const ProfilePage = ()=>{
                             ]
                         })
                 }),
-                isDesktop && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                isDesktop && process.env.NODE_ENV === 'development' && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
                     children: /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Content, {
                         children: /*#__PURE__*/ jsxRuntime.jsx(GuidedTourSection, {})
                     })