@strapi/admin 5.26.0 → 5.28.0

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

@@ -0,0 +1,216 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactDnd = require('react-dnd');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var styled = require('styled-components');
+var Tracking = require('../features/Tracking.js');
+var widgetLayout = require('../utils/widgetLayout.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const WidgetActions = styled(designSystem.Flex)`
+  display: flex;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: none;
+  }
+`;
+const DragIconButton = styled(designSystem.IconButton)`
+  display: none;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: flex;
+  }
+`;
+const WidgetContainer = styled(designSystem.Flex)`
+  @media (hover: hover) and (pointer: fine) {
+    &:hover ${WidgetActions} {
+      display: flex;
+    }
+  }
+
+  &:focus-within ${WidgetActions} {
+    display: flex;
+  }
+
+  &:focus-within ${DragIconButton} {
+    pointer-events: none;
+
+    ${({ theme })=>theme.breakpoints.medium} {
+      pointer-events: auto;
+    }
+  }
+`;
+const WidgetRoot = ({ title, icon = icons.PuzzlePiece, children, link, uid, findWidget, deleteWidget, onDragStart, onDragEnd, component })=>{
+    const { trackUsage } = Tracking.useTracking();
+    const { formatMessage } = reactIntl.useIntl();
+    const Icon = icon;
+    const handleClickOnLink = ()=>{
+        trackUsage('didOpenHomeWidgetLink', {
+            widgetUID: uid
+        });
+    };
+    const handleDeleteWidget = ()=>{
+        deleteWidget?.(uid);
+    };
+    const [, drag, preview] = reactDnd.useDrag(()=>({
+            type: 'widget',
+            item: ()=>{
+                onDragStart?.(uid);
+                return {
+                    id: uid,
+                    originalIndex: findWidget?.(uid)?.index ?? 0,
+                    title,
+                    icon,
+                    link,
+                    component
+                };
+            },
+            collect: (monitor)=>({
+                    isDragging: monitor.isDragging()
+                }),
+            end: ()=>{
+                onDragEnd?.();
+            }
+        }), [
+        uid,
+        findWidget,
+        onDragStart,
+        onDragEnd,
+        title,
+        icon,
+        link,
+        component
+    ]);
+    // Suppress default drag preview
+    React__namespace.useEffect(()=>{
+        preview(reactDndHtml5Backend.getEmptyImage(), {
+            captureDraggingState: true
+        });
+    }, [
+        preview
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(WidgetContainer, {
+        width: "100%",
+        hasRadius: true,
+        direction: "column",
+        alignItems: "flex-start",
+        background: 'neutral0',
+        borderColor: 'neutral150',
+        shadow: "tableShadow",
+        tag: "section",
+        gap: 4,
+        padding: 6,
+        position: "relative",
+        "aria-labelledby": uid,
+        tabIndex: 0,
+        [widgetLayout.WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid,
+        style: {
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "row",
+                gap: 2,
+                width: "100%",
+                tag: "header",
+                alignItems: "center",
+                minHeight: "2.25rem",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        gap: 2,
+                        marginRight: "auto",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+                                fill: "neutral500",
+                                "aria-hidden": true
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                textColor: "neutral500",
+                                variant: "sigma",
+                                tag: "h2",
+                                id: uid,
+                                children: formatMessage(title)
+                            })
+                        ]
+                    }),
+                    link && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: reactRouterDom.Link,
+                        variant: "omega",
+                        textColor: "primary600",
+                        style: {
+                            textDecoration: 'none'
+                        },
+                        textAlign: "right",
+                        to: link.href,
+                        onClick: handleClickOnLink,
+                        children: formatMessage(link.label)
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(WidgetActions, {
+                        gap: 2,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                variant: "danger-light",
+                                size: "XS",
+                                onClick: handleDeleteWidget,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.delete',
+                                    defaultMessage: 'Delete'
+                                }),
+                                cursor: "pointer",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(DragIconButton, {
+                                variant: "tertiary",
+                                size: "XS",
+                                ref: drag,
+                                tabIndex: -1,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.drag',
+                                    defaultMessage: 'Drag to move'
+                                }),
+                                cursor: "grab",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Drag, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.ScrollArea, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    width: "100%",
+                    height: "261px",
+                    overflow: "auto",
+                    tag: "main",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+
+exports.WidgetRoot = WidgetRoot;
+//# sourceMappingURL=WidgetRoot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetRoot.js","sources":["../../../../../admin/src/components/WidgetRoot.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, ScrollArea, IconButton } from '@strapi/design-system';\nimport { PuzzlePiece, Trash, Drag } from '@strapi/icons';\nimport { useDrag } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { Link as ReactRouterLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { useTracking } from '../features/Tracking';\nimport { WIDGET_DATA_ATTRIBUTES } from '../utils/widgetLayout';\n\nimport type { FindWidgetFunction, WidgetIdFunction, DragEndFunction } from '../features/Widgets';\nimport type { WidgetType } from '@strapi/admin/strapi-admin';\n\nexport interface BaseWidgetProps\n  extends Pick<WidgetType, 'title' | 'icon' | 'permissions' | 'link' | 'uid'> {\n  findWidget?: FindWidgetFunction;\n  deleteWidget?: WidgetIdFunction;\n  onDragStart?: WidgetIdFunction;\n  onDragEnd?: DragEndFunction;\n}\n\nexport interface WidgetRootProps extends BaseWidgetProps {\n  children: React.ReactNode;\n  component?: () => Promise<React.ComponentType>;\n}\n\nconst WidgetActions = styled(Flex)`\n  display: flex;\n\n  @media (hover: hover) and (pointer: fine) {\n    display: none;\n  }\n`;\n\nconst DragIconButton = styled(IconButton)`\n  display: none;\n\n  @media (hover: hover) and (pointer: fine) {\n    display: flex;\n  }\n`;\n\nconst WidgetContainer = styled(Flex)`\n  @media (hover: hover) and (pointer: fine) {\n    &:hover ${WidgetActions} {\n      display: flex;\n    }\n  }\n\n  &:focus-within ${WidgetActions} {\n    display: flex;\n  }\n\n  &:focus-within ${DragIconButton} {\n    pointer-events: none;\n\n    ${({ theme }) => theme.breakpoints.medium} {\n      pointer-events: auto;\n    }\n  }\n`;\n\nexport const WidgetRoot = ({\n  title,\n  icon = PuzzlePiece,\n  children,\n  link,\n  uid,\n  findWidget,\n  deleteWidget,\n  onDragStart,\n  onDragEnd,\n  component,\n}: WidgetRootProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage } = useIntl();\n  const Icon = icon;\n\n  const handleClickOnLink = () => {\n    trackUsage('didOpenHomeWidgetLink', { widgetUID: uid });\n  };\n\n  const handleDeleteWidget = () => {\n    deleteWidget?.(uid);\n  };\n\n  const [, drag, preview] = useDrag(\n    () => ({\n      type: 'widget',\n      item: () => {\n        onDragStart?.(uid);\n        return {\n          id: uid,\n          originalIndex: findWidget?.(uid)?.index ?? 0,\n          title,\n          icon,\n          link,\n          component,\n        };\n      },\n      collect: (monitor) => ({\n        isDragging: monitor.isDragging(),\n      }),\n      end: () => {\n        onDragEnd?.();\n      },\n    }),\n    [uid, findWidget, onDragStart, onDragEnd, title, icon, link, component]\n  );\n\n  // Suppress default drag preview\n  React.useEffect(() => {\n    preview(getEmptyImage(), { captureDraggingState: true });\n  }, [preview]);\n\n  return (\n    <WidgetContainer\n      width=\"100%\"\n      hasRadius\n      direction=\"column\"\n      alignItems=\"flex-start\"\n      background={'neutral0'}\n      borderColor={'neutral150'}\n      shadow=\"tableShadow\"\n      tag=\"section\"\n      gap={4}\n      padding={6}\n      position=\"relative\"\n      aria-labelledby={uid}\n      tabIndex={0}\n      {...{ [WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid }}\n      style={{\n        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n      }}\n    >\n      <Flex\n        direction=\"row\"\n        gap={2}\n        width=\"100%\"\n        tag=\"header\"\n        alignItems=\"center\"\n        minHeight=\"2.25rem\"\n      >\n        <Flex gap={2} marginRight=\"auto\">\n          <Icon fill=\"neutral500\" aria-hidden />\n          <Typography textColor=\"neutral500\" variant=\"sigma\" tag=\"h2\" id={uid}>\n            {formatMessage(title)}\n          </Typography>\n        </Flex>\n        {link && (\n          <Typography\n            tag={ReactRouterLink}\n            variant=\"omega\"\n            textColor=\"primary600\"\n            style={{ textDecoration: 'none' }}\n            textAlign=\"right\"\n            to={link.href}\n            onClick={handleClickOnLink}\n          >\n            {formatMessage(link.label)}\n          </Typography>\n        )}\n        <WidgetActions gap={2}>\n          <IconButton\n            variant=\"danger-light\"\n            size=\"XS\"\n            onClick={handleDeleteWidget}\n            label={formatMessage({\n              id: 'HomePage.widget.delete',\n              defaultMessage: 'Delete',\n            })}\n            cursor=\"pointer\"\n          >\n            <Trash />\n          </IconButton>\n          <DragIconButton\n            variant=\"tertiary\"\n            size=\"XS\"\n            ref={drag}\n            tabIndex={-1}\n            label={formatMessage({\n              id: 'HomePage.widget.drag',\n              defaultMessage: 'Drag to move',\n            })}\n            cursor=\"grab\"\n          >\n            <Drag />\n          </DragIconButton>\n        </WidgetActions>\n      </Flex>\n      <ScrollArea>\n        <Box width=\"100%\" height=\"261px\" overflow=\"auto\" tag=\"main\">\n          {children}\n        </Box>\n      </ScrollArea>\n    </WidgetContainer>\n  );\n};\n"],"names":["WidgetActions","styled","Flex","DragIconButton","IconButton","WidgetContainer","theme","breakpoints","medium","WidgetRoot","title","icon","PuzzlePiece","children","link","uid","findWidget","deleteWidget","onDragStart","onDragEnd","component","trackUsage","useTracking","formatMessage","useIntl","Icon","handleClickOnLink","widgetUID","handleDeleteWidget","drag","preview","useDrag","type","item","id","originalIndex","index","collect","monitor","isDragging","end","React","useEffect","getEmptyImage","captureDraggingState","_jsxs","width","hasRadius","direction","alignItems","background","borderColor","shadow","tag","gap","padding","position","aria-labelledby","tabIndex","WIDGET_DATA_ATTRIBUTES","WIDGET_ID","style","transition","minHeight","marginRight","_jsx","fill","aria-hidden","Typography","textColor","variant","ReactRouterLink","textDecoration","textAlign","to","href","onClick","label","size","defaultMessage","cursor","Trash","ref","Drag","ScrollArea","Box","height","overflow"],"mappings":"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"}

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

@@ -0,0 +1,195 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, IconButton, Typography, ScrollArea, Box } from '@strapi/design-system';
+import { Trash, Drag, PuzzlePiece } from '@strapi/icons';
+import { useDrag } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { useTracking } from '../features/Tracking.mjs';
+import { WIDGET_DATA_ATTRIBUTES } from '../utils/widgetLayout.mjs';
+
+const WidgetActions = styled(Flex)`
+  display: flex;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: none;
+  }
+`;
+const DragIconButton = styled(IconButton)`
+  display: none;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: flex;
+  }
+`;
+const WidgetContainer = styled(Flex)`
+  @media (hover: hover) and (pointer: fine) {
+    &:hover ${WidgetActions} {
+      display: flex;
+    }
+  }
+
+  &:focus-within ${WidgetActions} {
+    display: flex;
+  }
+
+  &:focus-within ${DragIconButton} {
+    pointer-events: none;
+
+    ${({ theme })=>theme.breakpoints.medium} {
+      pointer-events: auto;
+    }
+  }
+`;
+const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid, findWidget, deleteWidget, onDragStart, onDragEnd, component })=>{
+    const { trackUsage } = useTracking();
+    const { formatMessage } = useIntl();
+    const Icon = icon;
+    const handleClickOnLink = ()=>{
+        trackUsage('didOpenHomeWidgetLink', {
+            widgetUID: uid
+        });
+    };
+    const handleDeleteWidget = ()=>{
+        deleteWidget?.(uid);
+    };
+    const [, drag, preview] = useDrag(()=>({
+            type: 'widget',
+            item: ()=>{
+                onDragStart?.(uid);
+                return {
+                    id: uid,
+                    originalIndex: findWidget?.(uid)?.index ?? 0,
+                    title,
+                    icon,
+                    link,
+                    component
+                };
+            },
+            collect: (monitor)=>({
+                    isDragging: monitor.isDragging()
+                }),
+            end: ()=>{
+                onDragEnd?.();
+            }
+        }), [
+        uid,
+        findWidget,
+        onDragStart,
+        onDragEnd,
+        title,
+        icon,
+        link,
+        component
+    ]);
+    // Suppress default drag preview
+    React.useEffect(()=>{
+        preview(getEmptyImage(), {
+            captureDraggingState: true
+        });
+    }, [
+        preview
+    ]);
+    return /*#__PURE__*/ jsxs(WidgetContainer, {
+        width: "100%",
+        hasRadius: true,
+        direction: "column",
+        alignItems: "flex-start",
+        background: 'neutral0',
+        borderColor: 'neutral150',
+        shadow: "tableShadow",
+        tag: "section",
+        gap: 4,
+        padding: 6,
+        position: "relative",
+        "aria-labelledby": uid,
+        tabIndex: 0,
+        [WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid,
+        style: {
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                direction: "row",
+                gap: 2,
+                width: "100%",
+                tag: "header",
+                alignItems: "center",
+                minHeight: "2.25rem",
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        gap: 2,
+                        marginRight: "auto",
+                        children: [
+                            /*#__PURE__*/ jsx(Icon, {
+                                fill: "neutral500",
+                                "aria-hidden": true
+                            }),
+                            /*#__PURE__*/ jsx(Typography, {
+                                textColor: "neutral500",
+                                variant: "sigma",
+                                tag: "h2",
+                                id: uid,
+                                children: formatMessage(title)
+                            })
+                        ]
+                    }),
+                    link && /*#__PURE__*/ jsx(Typography, {
+                        tag: Link,
+                        variant: "omega",
+                        textColor: "primary600",
+                        style: {
+                            textDecoration: 'none'
+                        },
+                        textAlign: "right",
+                        to: link.href,
+                        onClick: handleClickOnLink,
+                        children: formatMessage(link.label)
+                    }),
+                    /*#__PURE__*/ jsxs(WidgetActions, {
+                        gap: 2,
+                        children: [
+                            /*#__PURE__*/ jsx(IconButton, {
+                                variant: "danger-light",
+                                size: "XS",
+                                onClick: handleDeleteWidget,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.delete',
+                                    defaultMessage: 'Delete'
+                                }),
+                                cursor: "pointer",
+                                children: /*#__PURE__*/ jsx(Trash, {})
+                            }),
+                            /*#__PURE__*/ jsx(DragIconButton, {
+                                variant: "tertiary",
+                                size: "XS",
+                                ref: drag,
+                                tabIndex: -1,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.drag',
+                                    defaultMessage: 'Drag to move'
+                                }),
+                                cursor: "grab",
+                                children: /*#__PURE__*/ jsx(Drag, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ScrollArea, {
+                children: /*#__PURE__*/ jsx(Box, {
+                    width: "100%",
+                    height: "261px",
+                    overflow: "auto",
+                    tag: "main",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+
+export { WidgetRoot };
+//# sourceMappingURL=WidgetRoot.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetRoot.mjs","sources":["../../../../../admin/src/components/WidgetRoot.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, ScrollArea, IconButton } from '@strapi/design-system';\nimport { PuzzlePiece, Trash, Drag } from '@strapi/icons';\nimport { useDrag } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { Link as ReactRouterLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { useTracking } from '../features/Tracking';\nimport { WIDGET_DATA_ATTRIBUTES } from '../utils/widgetLayout';\n\nimport type { FindWidgetFunction, WidgetIdFunction, DragEndFunction } from '../features/Widgets';\nimport type { WidgetType } from '@strapi/admin/strapi-admin';\n\nexport interface BaseWidgetProps\n  extends Pick<WidgetType, 'title' | 'icon' | 'permissions' | 'link' | 'uid'> {\n  findWidget?: FindWidgetFunction;\n  deleteWidget?: WidgetIdFunction;\n  onDragStart?: WidgetIdFunction;\n  onDragEnd?: DragEndFunction;\n}\n\nexport interface WidgetRootProps extends BaseWidgetProps {\n  children: React.ReactNode;\n  component?: () => Promise<React.ComponentType>;\n}\n\nconst WidgetActions = styled(Flex)`\n  display: flex;\n\n  @media (hover: hover) and (pointer: fine) {\n    display: none;\n  }\n`;\n\nconst DragIconButton = styled(IconButton)`\n  display: none;\n\n  @media (hover: hover) and (pointer: fine) {\n    display: flex;\n  }\n`;\n\nconst WidgetContainer = styled(Flex)`\n  @media (hover: hover) and (pointer: fine) {\n    &:hover ${WidgetActions} {\n      display: flex;\n    }\n  }\n\n  &:focus-within ${WidgetActions} {\n    display: flex;\n  }\n\n  &:focus-within ${DragIconButton} {\n    pointer-events: none;\n\n    ${({ theme }) => theme.breakpoints.medium} {\n      pointer-events: auto;\n    }\n  }\n`;\n\nexport const WidgetRoot = ({\n  title,\n  icon = PuzzlePiece,\n  children,\n  link,\n  uid,\n  findWidget,\n  deleteWidget,\n  onDragStart,\n  onDragEnd,\n  component,\n}: WidgetRootProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage } = useIntl();\n  const Icon = icon;\n\n  const handleClickOnLink = () => {\n    trackUsage('didOpenHomeWidgetLink', { widgetUID: uid });\n  };\n\n  const handleDeleteWidget = () => {\n    deleteWidget?.(uid);\n  };\n\n  const [, drag, preview] = useDrag(\n    () => ({\n      type: 'widget',\n      item: () => {\n        onDragStart?.(uid);\n        return {\n          id: uid,\n          originalIndex: findWidget?.(uid)?.index ?? 0,\n          title,\n          icon,\n          link,\n          component,\n        };\n      },\n      collect: (monitor) => ({\n        isDragging: monitor.isDragging(),\n      }),\n      end: () => {\n        onDragEnd?.();\n      },\n    }),\n    [uid, findWidget, onDragStart, onDragEnd, title, icon, link, component]\n  );\n\n  // Suppress default drag preview\n  React.useEffect(() => {\n    preview(getEmptyImage(), { captureDraggingState: true });\n  }, [preview]);\n\n  return (\n    <WidgetContainer\n      width=\"100%\"\n      hasRadius\n      direction=\"column\"\n      alignItems=\"flex-start\"\n      background={'neutral0'}\n      borderColor={'neutral150'}\n      shadow=\"tableShadow\"\n      tag=\"section\"\n      gap={4}\n      padding={6}\n      position=\"relative\"\n      aria-labelledby={uid}\n      tabIndex={0}\n      {...{ [WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid }}\n      style={{\n        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n      }}\n    >\n      <Flex\n        direction=\"row\"\n        gap={2}\n        width=\"100%\"\n        tag=\"header\"\n        alignItems=\"center\"\n        minHeight=\"2.25rem\"\n      >\n        <Flex gap={2} marginRight=\"auto\">\n          <Icon fill=\"neutral500\" aria-hidden />\n          <Typography textColor=\"neutral500\" variant=\"sigma\" tag=\"h2\" id={uid}>\n            {formatMessage(title)}\n          </Typography>\n        </Flex>\n        {link && (\n          <Typography\n            tag={ReactRouterLink}\n            variant=\"omega\"\n            textColor=\"primary600\"\n            style={{ textDecoration: 'none' }}\n            textAlign=\"right\"\n            to={link.href}\n            onClick={handleClickOnLink}\n          >\n            {formatMessage(link.label)}\n          </Typography>\n        )}\n        <WidgetActions gap={2}>\n          <IconButton\n            variant=\"danger-light\"\n            size=\"XS\"\n            onClick={handleDeleteWidget}\n            label={formatMessage({\n              id: 'HomePage.widget.delete',\n              defaultMessage: 'Delete',\n            })}\n            cursor=\"pointer\"\n          >\n            <Trash />\n          </IconButton>\n          <DragIconButton\n            variant=\"tertiary\"\n            size=\"XS\"\n            ref={drag}\n            tabIndex={-1}\n            label={formatMessage({\n              id: 'HomePage.widget.drag',\n              defaultMessage: 'Drag to move',\n            })}\n            cursor=\"grab\"\n          >\n            <Drag />\n          </DragIconButton>\n        </WidgetActions>\n      </Flex>\n      <ScrollArea>\n        <Box width=\"100%\" height=\"261px\" overflow=\"auto\" tag=\"main\">\n          {children}\n        </Box>\n      </ScrollArea>\n    </WidgetContainer>\n  );\n};\n"],"names":["WidgetActions","styled","Flex","DragIconButton","IconButton","WidgetContainer","theme","breakpoints","medium","WidgetRoot","title","icon","PuzzlePiece","children","link","uid","findWidget","deleteWidget","onDragStart","onDragEnd","component","trackUsage","useTracking","formatMessage","useIntl","Icon","handleClickOnLink","widgetUID","handleDeleteWidget","drag","preview","useDrag","type","item","id","originalIndex","index","collect","monitor","isDragging","end","React","useEffect","getEmptyImage","captureDraggingState","_jsxs","width","hasRadius","direction","alignItems","background","borderColor","shadow","tag","gap","padding","position","aria-labelledby","tabIndex","WIDGET_DATA_ATTRIBUTES","WIDGET_ID","style","transition","minHeight","marginRight","_jsx","fill","aria-hidden","Typography","textColor","variant","ReactRouterLink","textDecoration","textAlign","to","href","onClick","label","size","defaultMessage","cursor","Trash","ref","Drag","ScrollArea","Box","height","overflow"],"mappings":"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"}

package/dist/admin/admin/src/constants/theme.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const RESPONSIVE_DEFAULT_SPACING = {
+    initial: 4,
+    medium: 6,
+    large: 10
+};
+const HEIGHT_TOP_NAVIGATION = '5.6rem';
+
+exports.HEIGHT_TOP_NAVIGATION = HEIGHT_TOP_NAVIGATION;
+exports.RESPONSIVE_DEFAULT_SPACING = RESPONSIVE_DEFAULT_SPACING;
+//# sourceMappingURL=theme.js.map

package/dist/admin/admin/src/constants/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../../admin/src/constants/theme.ts"],"sourcesContent":["const RESPONSIVE_DEFAULT_SPACING = {\n  initial: 4,\n  medium: 6,\n  large: 10,\n};\n\nconst HEIGHT_TOP_NAVIGATION = '5.6rem';\n\nexport { RESPONSIVE_DEFAULT_SPACING, HEIGHT_TOP_NAVIGATION };\n"],"names":["RESPONSIVE_DEFAULT_SPACING","initial","medium","large","HEIGHT_TOP_NAVIGATION"],"mappings":";;AAAA,MAAMA,0BAA6B,GAAA;IACjCC,OAAS,EAAA,CAAA;IACTC,MAAQ,EAAA,CAAA;IACRC,KAAO,EAAA;AACT;AAEA,MAAMC,qBAAwB,GAAA;;;;;"}

package/dist/admin/admin/src/constants/theme.mjs

@@ -0,0 +1,9 @@
+const RESPONSIVE_DEFAULT_SPACING = {
+    initial: 4,
+    medium: 6,
+    large: 10
+};
+const HEIGHT_TOP_NAVIGATION = '5.6rem';
+
+export { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING };
+//# sourceMappingURL=theme.mjs.map

package/dist/admin/admin/src/constants/theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.mjs","sources":["../../../../../admin/src/constants/theme.ts"],"sourcesContent":["const RESPONSIVE_DEFAULT_SPACING = {\n  initial: 4,\n  medium: 6,\n  large: 10,\n};\n\nconst HEIGHT_TOP_NAVIGATION = '5.6rem';\n\nexport { RESPONSIVE_DEFAULT_SPACING, HEIGHT_TOP_NAVIGATION };\n"],"names":["RESPONSIVE_DEFAULT_SPACING","initial","medium","large","HEIGHT_TOP_NAVIGATION"],"mappings":"AAAA,MAAMA,0BAA6B,GAAA;IACjCC,OAAS,EAAA,CAAA;IACTC,MAAQ,EAAA,CAAA;IACRC,KAAO,EAAA;AACT;AAEA,MAAMC,qBAAwB,GAAA;;;;"}

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

@@ -4,6 +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');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -61,18 +62,24 @@ const NotificationsContext = /*#__PURE__*/ React__namespace.createContext({
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                 left: "50%",
-                marginLeft: "-250px",
+                transform: "translateX(-50%)",
                 position: "fixed",
                 direction: "column",
                 alignItems: "stretch",
-                gap: 2,
-                top: `4.6rem`,
-                width: `50rem`,
+                gap: 4,
+                marginTop: 4,
+                top: theme.HEIGHT_TOP_NAVIGATION,
+                width: "100%",
+                maxWidth: `50rem`,
                 zIndex: "notification",
                 children: notifications.map((notification)=>{
-                    return /*#__PURE__*/ jsxRuntime.jsx(Notification, {
-                        ...notification,
-                        clearNotification: clearNotification
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        paddingLeft: 4,
+                        paddingRight: 4,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Notification, {
+                            ...notification,
+                            clearNotification: clearNotification
+                        })
                     }, notification.id);
                 })
             }),

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 } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\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        marginLeft=\"-250px\"\n        position=\"fixed\"\n        direction=\"column\"\n        alignItems=\"stretch\"\n        gap={2}\n        top={`4.6rem`}\n        width={`50rem`}\n        zIndex=\"notification\"\n      >\n        {notifications.map((notification) => {\n          return (\n            <Notification\n              key={notification.id}\n              {...notification}\n              clearNotification={clearNotification}\n            />\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","marginLeft","position","direction","alignItems","gap","top","width","zIndex","map","notification","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, 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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"}

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

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, useCallbackRef, Alert, Link } from '@strapi/design-system';
+import { Flex, Box, useCallbackRef, Alert, Link } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+import { HEIGHT_TOP_NAVIGATION } from '../constants/theme.mjs';
 
 const NotificationsContext = /*#__PURE__*/ React.createContext({
     toggleNotification: ()=>{}
@@ -40,18 +41,24 @@ const NotificationsContext = /*#__PURE__*/ React.createContext({
         children: [
             /*#__PURE__*/ jsx(Flex, {
                 left: "50%",
-                marginLeft: "-250px",
+                transform: "translateX(-50%)",
                 position: "fixed",
                 direction: "column",
                 alignItems: "stretch",
-                gap: 2,
-                top: `4.6rem`,
-                width: `50rem`,
+                gap: 4,
+                marginTop: 4,
+                top: HEIGHT_TOP_NAVIGATION,
+                width: "100%",
+                maxWidth: `50rem`,
                 zIndex: "notification",
                 children: notifications.map((notification)=>{
-                    return /*#__PURE__*/ jsx(Notification, {
-                        ...notification,
-                        clearNotification: clearNotification
+                    return /*#__PURE__*/ jsx(Box, {
+                        paddingLeft: 4,
+                        paddingRight: 4,
+                        children: /*#__PURE__*/ jsx(Notification, {
+                            ...notification,
+                            clearNotification: clearNotification
+                        })
                     }, notification.id);
                 })
             }),