@strapi/admin 5.26.0 → 5.28.0

package/dist/admin/admin/src/pages/Home/components/AddWidgetModal.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styled = require('styled-components');
+var HomePage = require('../HomePage.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);
+
+// Hide scrollbars in widget previews
+const WidgetWrapper = styled(designSystem.Box)`
+  * {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  *::-webkit-scrollbar {
+    display: none;
+  }
+`;
+// Interactive widget preview container
+const WidgetPreviewContainer = styled(designSystem.Box)`
+  &:hover {
+    background-color: ${({ theme })=>theme.colors.primary100};
+    border-color: ${({ theme })=>theme.colors.primary200};
+  }
+
+  &:focus-visible {
+    background-color: ${({ theme })=>theme.colors.primary100};
+    border-color: ${({ theme })=>theme.colors.primary200};
+    outline-offset: 0;
+  }
+`;
+const WidgetPreview = ({ widget, onSelect })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const Icon = widget.icon || icons.PuzzlePiece;
+    const handleKeyDown = (event)=>{
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onSelect();
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(WidgetPreviewContainer, {
+        padding: 4,
+        background: "neutral0",
+        borderColor: "neutral200",
+        hasRadius: true,
+        shadow: "tableShadow",
+        onClick: onSelect,
+        onKeyDown: handleKeyDown,
+        width: '100%',
+        cursor: "pointer",
+        tabIndex: 0,
+        role: "button",
+        "aria-label": formatMessage({
+            id: 'HomePage.addWidget.selectWidget',
+            defaultMessage: 'Select {widgetName} widget'
+        }, {
+            widgetName: formatMessage(widget.title)
+        }),
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            direction: "column",
+            alignItems: "center",
+            gap: 3,
+            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",
+                            children: formatMessage(widget.title)
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(WidgetWrapper, {
+                    width: '100%',
+                    style: {
+                        pointerEvents: 'none'
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsx(HomePage.WidgetComponent, {
+                        component: widget.component,
+                        columnWidth: 4
+                    })
+                })
+            ]
+        })
+    });
+};
+const AddWidgetModal = ({ isOpen, onClose, onAddWidget, currentWidgets, availableWidgets })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const currentWidgetUids = React__namespace.useMemo(()=>new Set(currentWidgets.map((widget)=>widget.uid)), [
+        currentWidgets
+    ]);
+    const handleWidgetSelect = (widget)=>{
+        if (!currentWidgetUids.has(widget.uid)) {
+            onAddWidget(widget);
+            onClose();
+        }
+    };
+    const addableWidgets = availableWidgets.filter((widget)=>!currentWidgetUids.has(widget.uid));
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
+        open: isOpen,
+        onOpenChange: onClose,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Content, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Title, {
+                        children: formatMessage({
+                            id: 'HomePage.addWidget.title',
+                            defaultMessage: 'Add Widget'
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        children: addableWidgets.length === 0 ? /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            direction: "column",
+                            alignItems: "center",
+                            gap: 4,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(icons.PuzzlePiece, {
+                                    width: "4rem",
+                                    height: "4rem",
+                                    fill: "neutral300"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    textColor: "neutral500",
+                                    textAlign: "center",
+                                    children: formatMessage({
+                                        id: 'HomePage.addWidget.noWidgetsAvailable',
+                                        defaultMessage: 'No widgets available to add'
+                                    })
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            direction: "column",
+                            gap: 3,
+                            justifyContent: "center",
+                            children: addableWidgets.map((widget)=>/*#__PURE__*/ jsxRuntime.jsx(WidgetPreview, {
+                                    widget: widget,
+                                    onSelect: ()=>handleWidgetSelect(widget)
+                                }, widget.uid))
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Footer, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                        onClick: onClose,
+                        variant: "tertiary",
+                        children: formatMessage({
+                            id: 'app.components.Button.cancel',
+                            defaultMessage: 'Cancel'
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.AddWidgetModal = AddWidgetModal;
+//# sourceMappingURL=AddWidgetModal.js.map

package/dist/admin/admin/src/pages/Home/components/AddWidgetModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddWidgetModal.js","sources":["../../../../../../../admin/src/pages/Home/components/AddWidgetModal.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Flex, Modal, Typography } from '@strapi/design-system';\nimport { PuzzlePiece } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { WidgetComponent } from '../HomePage';\n\nimport type { WidgetWithUID } from '../../../core/apis/Widgets';\n\n// Hide scrollbars in widget previews\nconst WidgetWrapper = styled(Box)`\n  * {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  *::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\n// Interactive widget preview container\nconst WidgetPreviewContainer = styled(Box)`\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.primary100};\n    border-color: ${({ theme }) => theme.colors.primary200};\n  }\n\n  &:focus-visible {\n    background-color: ${({ theme }) => theme.colors.primary100};\n    border-color: ${({ theme }) => theme.colors.primary200};\n    outline-offset: 0;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * AddWidgetModal\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AddWidgetModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onAddWidget: (widget: WidgetWithUID) => void;\n  currentWidgets: WidgetWithUID[];\n  availableWidgets: WidgetWithUID[];\n}\n\ninterface WidgetPreviewProps {\n  widget: WidgetWithUID;\n  onSelect: () => void;\n}\n\nconst WidgetPreview = ({ widget, onSelect }: WidgetPreviewProps) => {\n  const { formatMessage } = useIntl();\n  const Icon = widget.icon || PuzzlePiece;\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      onSelect();\n    }\n  };\n\n  return (\n    <WidgetPreviewContainer\n      padding={4}\n      background=\"neutral0\"\n      borderColor=\"neutral200\"\n      hasRadius\n      shadow=\"tableShadow\"\n      onClick={onSelect}\n      onKeyDown={handleKeyDown}\n      width={'100%'}\n      cursor=\"pointer\"\n      tabIndex={0}\n      role=\"button\"\n      aria-label={formatMessage(\n        {\n          id: 'HomePage.addWidget.selectWidget',\n          defaultMessage: 'Select {widgetName} widget',\n        },\n        { widgetName: formatMessage(widget.title) }\n      )}\n    >\n      <Flex direction=\"column\" alignItems=\"center\" gap={3}>\n        <Flex gap={2} marginRight=\"auto\">\n          <Icon fill=\"neutral500\" aria-hidden />\n          <Typography textColor=\"neutral500\" variant=\"sigma\" tag=\"h2\">\n            {formatMessage(widget.title)}\n          </Typography>\n        </Flex>\n        <WidgetWrapper\n          width={'100%'}\n          style={{\n            pointerEvents: 'none',\n          }}\n        >\n          <WidgetComponent component={widget.component} columnWidth={4} />\n        </WidgetWrapper>\n      </Flex>\n    </WidgetPreviewContainer>\n  );\n};\n\nexport const AddWidgetModal = ({\n  isOpen,\n  onClose,\n  onAddWidget,\n  currentWidgets,\n  availableWidgets,\n}: AddWidgetModalProps) => {\n  const { formatMessage } = useIntl();\n\n  const currentWidgetUids = React.useMemo(\n    () => new Set(currentWidgets.map((widget) => widget.uid)),\n    [currentWidgets]\n  );\n\n  const handleWidgetSelect = (widget: WidgetWithUID) => {\n    if (!currentWidgetUids.has(widget.uid)) {\n      onAddWidget(widget);\n      onClose();\n    }\n  };\n\n  const addableWidgets = availableWidgets.filter((widget) => !currentWidgetUids.has(widget.uid));\n\n  return (\n    <Modal.Root open={isOpen} onOpenChange={onClose}>\n      <Modal.Content>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: 'HomePage.addWidget.title',\n              defaultMessage: 'Add Widget',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Modal.Body>\n          <Box>\n            {addableWidgets.length === 0 ? (\n              <Flex direction=\"column\" alignItems=\"center\" gap={4}>\n                <PuzzlePiece width=\"4rem\" height=\"4rem\" fill=\"neutral300\" />\n                <Typography textColor=\"neutral500\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'HomePage.addWidget.noWidgetsAvailable',\n                    defaultMessage: 'No widgets available to add',\n                  })}\n                </Typography>\n              </Flex>\n            ) : (\n              <Flex direction=\"column\" gap={3} justifyContent=\"center\">\n                {addableWidgets.map((widget) => (\n                  <WidgetPreview\n                    key={widget.uid}\n                    widget={widget}\n                    onSelect={() => handleWidgetSelect(widget)}\n                  />\n                ))}\n              </Flex>\n            )}\n          </Box>\n        </Modal.Body>\n        <Modal.Footer>\n          <Button onClick={onClose} variant=\"tertiary\">\n            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n          </Button>\n        </Modal.Footer>\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n"],"names":["WidgetWrapper","styled","Box","WidgetPreviewContainer","theme","colors","primary100","primary200","WidgetPreview","widget","onSelect","formatMessage","useIntl","Icon","icon","PuzzlePiece","handleKeyDown","event","key","preventDefault","_jsx","padding","background","borderColor","hasRadius","shadow","onClick","onKeyDown","width","cursor","tabIndex","role","aria-label","id","defaultMessage","widgetName","title","_jsxs","Flex","direction","alignItems","gap","marginRight","fill","aria-hidden","Typography","textColor","variant","tag","style","pointerEvents","WidgetComponent","component","columnWidth","AddWidgetModal","isOpen","onClose","onAddWidget","currentWidgets","availableWidgets","currentWidgetUids","React","useMemo","Set","map","uid","handleWidgetSelect","has","addableWidgets","filter","Modal","Root","open","onOpenChange","Content","Header","Title","Body","length","height","textAlign","justifyContent","Footer","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;AACA,MAAMA,aAAAA,GAAgBC,MAAOC,CAAAA,gBAAAA,CAAI;;;;;;;;;AASjC,CAAC;AAED;AACA,MAAMC,sBAAAA,GAAyBF,MAAOC,CAAAA,gBAAAA,CAAI;;sBAEpB,EAAE,CAAC,EAAEE,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;kBAC7C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;sBAIrC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;kBAC7C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;;;AAG3D,CAAC;AAmBD,MAAMC,gBAAgB,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAsB,GAAA;IAC7D,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,IAAAA,GAAOJ,MAAOK,CAAAA,IAAI,IAAIC,iBAAAA;AAE5B,IAAA,MAAMC,gBAAgB,CAACC,KAAAA,GAAAA;AACrB,QAAA,IAAIA,MAAMC,GAAG,KAAK,WAAWD,KAAMC,CAAAA,GAAG,KAAK,GAAK,EAAA;AAC9CD,YAAAA,KAAAA,CAAME,cAAc,EAAA;AACpBT,YAAAA,QAAAA,EAAAA;AACF;AACF,KAAA;AAEA,IAAA,qBACEU,cAACjB,CAAAA,sBAAAA,EAAAA;QACCkB,OAAS,EAAA,CAAA;QACTC,UAAW,EAAA,UAAA;QACXC,WAAY,EAAA,YAAA;QACZC,SAAS,EAAA,IAAA;QACTC,MAAO,EAAA,aAAA;QACPC,OAAShB,EAAAA,QAAAA;QACTiB,SAAWX,EAAAA,aAAAA;QACXY,KAAO,EAAA,MAAA;QACPC,MAAO,EAAA,SAAA;QACPC,QAAU,EAAA,CAAA;QACVC,IAAK,EAAA,QAAA;AACLC,QAAAA,YAAAA,EAAYrB,aACV,CAAA;YACEsB,EAAI,EAAA,iCAAA;YACJC,cAAgB,EAAA;SAElB,EAAA;YAAEC,UAAYxB,EAAAA,aAAAA,CAAcF,OAAO2B,KAAK;AAAE,SAAA,CAAA;AAG5C,QAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;YAAKC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,QAAA;YAASC,GAAK,EAAA,CAAA;;8BAChDJ,eAACC,CAAAA,iBAAAA,EAAAA;oBAAKG,GAAK,EAAA,CAAA;oBAAGC,WAAY,EAAA,MAAA;;sCACxBtB,cAACP,CAAAA,IAAAA,EAAAA;4BAAK8B,IAAK,EAAA,YAAA;4BAAaC,aAAW,EAAA;;sCACnCxB,cAACyB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;4BAAaC,OAAQ,EAAA,OAAA;4BAAQC,GAAI,EAAA,IAAA;AACpDrC,4BAAAA,QAAAA,EAAAA,aAAAA,CAAcF,OAAO2B,KAAK;;;;8BAG/BhB,cAACpB,CAAAA,aAAAA,EAAAA;oBACC4B,KAAO,EAAA,MAAA;oBACPqB,KAAO,EAAA;wBACLC,aAAe,EAAA;AACjB,qBAAA;AAEA,oBAAA,QAAA,gBAAA9B,cAAC+B,CAAAA,wBAAAA,EAAAA;AAAgBC,wBAAAA,SAAAA,EAAW3C,OAAO2C,SAAS;wBAAEC,WAAa,EAAA;;;;;;AAKrE,CAAA;AAEaC,MAAAA,cAAAA,GAAiB,CAAC,EAC7BC,MAAM,EACNC,OAAO,EACPC,WAAW,EACXC,cAAc,EACdC,gBAAgB,EACI,GAAA;IACpB,MAAM,EAAEhD,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMgD,iBAAoBC,GAAAA,gBAAAA,CAAMC,OAAO,CACrC,IAAM,IAAIC,GAAAA,CAAIL,cAAeM,CAAAA,GAAG,CAAC,CAACvD,MAAWA,GAAAA,MAAAA,CAAOwD,GAAG,CACvD,CAAA,EAAA;AAACP,QAAAA;AAAe,KAAA,CAAA;AAGlB,IAAA,MAAMQ,qBAAqB,CAACzD,MAAAA,GAAAA;AAC1B,QAAA,IAAI,CAACmD,iBAAkBO,CAAAA,GAAG,CAAC1D,MAAAA,CAAOwD,GAAG,CAAG,EAAA;YACtCR,WAAYhD,CAAAA,MAAAA,CAAAA;AACZ+C,YAAAA,OAAAA,EAAAA;AACF;AACF,KAAA;IAEA,MAAMY,cAAAA,GAAiBT,gBAAiBU,CAAAA,MAAM,CAAC,CAAC5D,MAAW,GAAA,CAACmD,iBAAkBO,CAAAA,GAAG,CAAC1D,MAAAA,CAAOwD,GAAG,CAAA,CAAA;IAE5F,qBACE7C,cAAA,CAACkD,mBAAMC,IAAI,EAAA;QAACC,IAAMjB,EAAAA,MAAAA;QAAQkB,YAAcjB,EAAAA,OAAAA;gCACtCnB,eAAA,CAACiC,mBAAMI,OAAO,EAAA;;AACZ,8BAAAtD,cAAA,CAACkD,mBAAMK,MAAM,EAAA;4CACXvD,cAAA,CAACkD,mBAAMM,KAAK,EAAA;kCACTjE,aAAc,CAAA;4BACbsB,EAAI,EAAA,0BAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;AAGJ,8BAAAd,cAAA,CAACkD,mBAAMO,IAAI,EAAA;AACT,oBAAA,QAAA,gBAAAzD,cAAClB,CAAAA,gBAAAA,EAAAA;kCACEkE,cAAeU,CAAAA,MAAM,KAAK,CAAA,iBACzBzC,eAACC,CAAAA,iBAAAA,EAAAA;4BAAKC,SAAU,EAAA,QAAA;4BAASC,UAAW,EAAA,QAAA;4BAASC,GAAK,EAAA,CAAA;;8CAChDrB,cAACL,CAAAA,iBAAAA,EAAAA;oCAAYa,KAAM,EAAA,MAAA;oCAAOmD,MAAO,EAAA,MAAA;oCAAOpC,IAAK,EAAA;;8CAC7CvB,cAACyB,CAAAA,uBAAAA,EAAAA;oCAAWC,SAAU,EAAA,YAAA;oCAAakC,SAAU,EAAA,QAAA;8CAC1CrE,aAAc,CAAA;wCACbsB,EAAI,EAAA,uCAAA;wCACJC,cAAgB,EAAA;AAClB,qCAAA;;;2CAIJd,cAACkB,CAAAA,iBAAAA,EAAAA;4BAAKC,SAAU,EAAA,QAAA;4BAASE,GAAK,EAAA,CAAA;4BAAGwC,cAAe,EAAA,QAAA;AAC7Cb,4BAAAA,QAAAA,EAAAA,cAAAA,CAAeJ,GAAG,CAAC,CAACvD,MAAAA,iBACnBW,cAACZ,CAAAA,aAAAA,EAAAA;oCAECC,MAAQA,EAAAA,MAAAA;AACRC,oCAAAA,QAAAA,EAAU,IAAMwD,kBAAmBzD,CAAAA,MAAAA;AAF9BA,iCAAAA,EAAAA,MAAAA,CAAOwD,GAAG,CAAA;;;;AAS3B,8BAAA7C,cAAA,CAACkD,mBAAMY,MAAM,EAAA;AACX,oBAAA,QAAA,gBAAA9D,cAAC+D,CAAAA,mBAAAA,EAAAA;wBAAOzD,OAAS8B,EAAAA,OAAAA;wBAAST,OAAQ,EAAA,UAAA;kCAC/BpC,aAAc,CAAA;4BAAEsB,EAAI,EAAA,8BAAA;4BAAgCC,cAAgB,EAAA;AAAS,yBAAA;;;;;;AAM1F;;;;"}

package/dist/admin/admin/src/pages/Home/components/AddWidgetModal.mjs

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box, Modal, Flex, Typography, Button } from '@strapi/design-system';
+import { PuzzlePiece } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { WidgetComponent } from '../HomePage.mjs';
+
+// Hide scrollbars in widget previews
+const WidgetWrapper = styled(Box)`
+  * {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  *::-webkit-scrollbar {
+    display: none;
+  }
+`;
+// Interactive widget preview container
+const WidgetPreviewContainer = styled(Box)`
+  &:hover {
+    background-color: ${({ theme })=>theme.colors.primary100};
+    border-color: ${({ theme })=>theme.colors.primary200};
+  }
+
+  &:focus-visible {
+    background-color: ${({ theme })=>theme.colors.primary100};
+    border-color: ${({ theme })=>theme.colors.primary200};
+    outline-offset: 0;
+  }
+`;
+const WidgetPreview = ({ widget, onSelect })=>{
+    const { formatMessage } = useIntl();
+    const Icon = widget.icon || PuzzlePiece;
+    const handleKeyDown = (event)=>{
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onSelect();
+        }
+    };
+    return /*#__PURE__*/ jsx(WidgetPreviewContainer, {
+        padding: 4,
+        background: "neutral0",
+        borderColor: "neutral200",
+        hasRadius: true,
+        shadow: "tableShadow",
+        onClick: onSelect,
+        onKeyDown: handleKeyDown,
+        width: '100%',
+        cursor: "pointer",
+        tabIndex: 0,
+        role: "button",
+        "aria-label": formatMessage({
+            id: 'HomePage.addWidget.selectWidget',
+            defaultMessage: 'Select {widgetName} widget'
+        }, {
+            widgetName: formatMessage(widget.title)
+        }),
+        children: /*#__PURE__*/ jsxs(Flex, {
+            direction: "column",
+            alignItems: "center",
+            gap: 3,
+            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",
+                            children: formatMessage(widget.title)
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(WidgetWrapper, {
+                    width: '100%',
+                    style: {
+                        pointerEvents: 'none'
+                    },
+                    children: /*#__PURE__*/ jsx(WidgetComponent, {
+                        component: widget.component,
+                        columnWidth: 4
+                    })
+                })
+            ]
+        })
+    });
+};
+const AddWidgetModal = ({ isOpen, onClose, onAddWidget, currentWidgets, availableWidgets })=>{
+    const { formatMessage } = useIntl();
+    const currentWidgetUids = React.useMemo(()=>new Set(currentWidgets.map((widget)=>widget.uid)), [
+        currentWidgets
+    ]);
+    const handleWidgetSelect = (widget)=>{
+        if (!currentWidgetUids.has(widget.uid)) {
+            onAddWidget(widget);
+            onClose();
+        }
+    };
+    const addableWidgets = availableWidgets.filter((widget)=>!currentWidgetUids.has(widget.uid));
+    return /*#__PURE__*/ jsx(Modal.Root, {
+        open: isOpen,
+        onOpenChange: onClose,
+        children: /*#__PURE__*/ jsxs(Modal.Content, {
+            children: [
+                /*#__PURE__*/ jsx(Modal.Header, {
+                    children: /*#__PURE__*/ jsx(Modal.Title, {
+                        children: formatMessage({
+                            id: 'HomePage.addWidget.title',
+                            defaultMessage: 'Add Widget'
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(Modal.Body, {
+                    children: /*#__PURE__*/ jsx(Box, {
+                        children: addableWidgets.length === 0 ? /*#__PURE__*/ jsxs(Flex, {
+                            direction: "column",
+                            alignItems: "center",
+                            gap: 4,
+                            children: [
+                                /*#__PURE__*/ jsx(PuzzlePiece, {
+                                    width: "4rem",
+                                    height: "4rem",
+                                    fill: "neutral300"
+                                }),
+                                /*#__PURE__*/ jsx(Typography, {
+                                    textColor: "neutral500",
+                                    textAlign: "center",
+                                    children: formatMessage({
+                                        id: 'HomePage.addWidget.noWidgetsAvailable',
+                                        defaultMessage: 'No widgets available to add'
+                                    })
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsx(Flex, {
+                            direction: "column",
+                            gap: 3,
+                            justifyContent: "center",
+                            children: addableWidgets.map((widget)=>/*#__PURE__*/ jsx(WidgetPreview, {
+                                    widget: widget,
+                                    onSelect: ()=>handleWidgetSelect(widget)
+                                }, widget.uid))
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(Modal.Footer, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        onClick: onClose,
+                        variant: "tertiary",
+                        children: formatMessage({
+                            id: 'app.components.Button.cancel',
+                            defaultMessage: 'Cancel'
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { AddWidgetModal };
+//# sourceMappingURL=AddWidgetModal.mjs.map

package/dist/admin/admin/src/pages/Home/components/AddWidgetModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddWidgetModal.mjs","sources":["../../../../../../../admin/src/pages/Home/components/AddWidgetModal.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Flex, Modal, Typography } from '@strapi/design-system';\nimport { PuzzlePiece } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { WidgetComponent } from '../HomePage';\n\nimport type { WidgetWithUID } from '../../../core/apis/Widgets';\n\n// Hide scrollbars in widget previews\nconst WidgetWrapper = styled(Box)`\n  * {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  *::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\n// Interactive widget preview container\nconst WidgetPreviewContainer = styled(Box)`\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.primary100};\n    border-color: ${({ theme }) => theme.colors.primary200};\n  }\n\n  &:focus-visible {\n    background-color: ${({ theme }) => theme.colors.primary100};\n    border-color: ${({ theme }) => theme.colors.primary200};\n    outline-offset: 0;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * AddWidgetModal\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AddWidgetModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onAddWidget: (widget: WidgetWithUID) => void;\n  currentWidgets: WidgetWithUID[];\n  availableWidgets: WidgetWithUID[];\n}\n\ninterface WidgetPreviewProps {\n  widget: WidgetWithUID;\n  onSelect: () => void;\n}\n\nconst WidgetPreview = ({ widget, onSelect }: WidgetPreviewProps) => {\n  const { formatMessage } = useIntl();\n  const Icon = widget.icon || PuzzlePiece;\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      onSelect();\n    }\n  };\n\n  return (\n    <WidgetPreviewContainer\n      padding={4}\n      background=\"neutral0\"\n      borderColor=\"neutral200\"\n      hasRadius\n      shadow=\"tableShadow\"\n      onClick={onSelect}\n      onKeyDown={handleKeyDown}\n      width={'100%'}\n      cursor=\"pointer\"\n      tabIndex={0}\n      role=\"button\"\n      aria-label={formatMessage(\n        {\n          id: 'HomePage.addWidget.selectWidget',\n          defaultMessage: 'Select {widgetName} widget',\n        },\n        { widgetName: formatMessage(widget.title) }\n      )}\n    >\n      <Flex direction=\"column\" alignItems=\"center\" gap={3}>\n        <Flex gap={2} marginRight=\"auto\">\n          <Icon fill=\"neutral500\" aria-hidden />\n          <Typography textColor=\"neutral500\" variant=\"sigma\" tag=\"h2\">\n            {formatMessage(widget.title)}\n          </Typography>\n        </Flex>\n        <WidgetWrapper\n          width={'100%'}\n          style={{\n            pointerEvents: 'none',\n          }}\n        >\n          <WidgetComponent component={widget.component} columnWidth={4} />\n        </WidgetWrapper>\n      </Flex>\n    </WidgetPreviewContainer>\n  );\n};\n\nexport const AddWidgetModal = ({\n  isOpen,\n  onClose,\n  onAddWidget,\n  currentWidgets,\n  availableWidgets,\n}: AddWidgetModalProps) => {\n  const { formatMessage } = useIntl();\n\n  const currentWidgetUids = React.useMemo(\n    () => new Set(currentWidgets.map((widget) => widget.uid)),\n    [currentWidgets]\n  );\n\n  const handleWidgetSelect = (widget: WidgetWithUID) => {\n    if (!currentWidgetUids.has(widget.uid)) {\n      onAddWidget(widget);\n      onClose();\n    }\n  };\n\n  const addableWidgets = availableWidgets.filter((widget) => !currentWidgetUids.has(widget.uid));\n\n  return (\n    <Modal.Root open={isOpen} onOpenChange={onClose}>\n      <Modal.Content>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: 'HomePage.addWidget.title',\n              defaultMessage: 'Add Widget',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Modal.Body>\n          <Box>\n            {addableWidgets.length === 0 ? (\n              <Flex direction=\"column\" alignItems=\"center\" gap={4}>\n                <PuzzlePiece width=\"4rem\" height=\"4rem\" fill=\"neutral300\" />\n                <Typography textColor=\"neutral500\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'HomePage.addWidget.noWidgetsAvailable',\n                    defaultMessage: 'No widgets available to add',\n                  })}\n                </Typography>\n              </Flex>\n            ) : (\n              <Flex direction=\"column\" gap={3} justifyContent=\"center\">\n                {addableWidgets.map((widget) => (\n                  <WidgetPreview\n                    key={widget.uid}\n                    widget={widget}\n                    onSelect={() => handleWidgetSelect(widget)}\n                  />\n                ))}\n              </Flex>\n            )}\n          </Box>\n        </Modal.Body>\n        <Modal.Footer>\n          <Button onClick={onClose} variant=\"tertiary\">\n            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n          </Button>\n        </Modal.Footer>\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n"],"names":["WidgetWrapper","styled","Box","WidgetPreviewContainer","theme","colors","primary100","primary200","WidgetPreview","widget","onSelect","formatMessage","useIntl","Icon","icon","PuzzlePiece","handleKeyDown","event","key","preventDefault","_jsx","padding","background","borderColor","hasRadius","shadow","onClick","onKeyDown","width","cursor","tabIndex","role","aria-label","id","defaultMessage","widgetName","title","_jsxs","Flex","direction","alignItems","gap","marginRight","fill","aria-hidden","Typography","textColor","variant","tag","style","pointerEvents","WidgetComponent","component","columnWidth","AddWidgetModal","isOpen","onClose","onAddWidget","currentWidgets","availableWidgets","currentWidgetUids","React","useMemo","Set","map","uid","handleWidgetSelect","has","addableWidgets","filter","Modal","Root","open","onOpenChange","Content","Header","Title","Body","length","height","textAlign","justifyContent","Footer","Button"],"mappings":"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"}

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

@@ -17,6 +17,7 @@ var Auth = require('../features/Auth.js');
 var Notifications = require('../features/Notifications.js');
 var Tracking = require('../features/Tracking.js');
 var useAPIErrorHandler = require('../hooks/useAPIErrorHandler.js');
+var useMediaQuery = require('../hooks/useMediaQuery.js');
 var reducer = require('../reducer.js');
 var auth = require('../services/auth.js');
 var baseQuery = require('../utils/baseQuery.js');
@@ -79,6 +80,7 @@ const PROFILE_VALIDTION_SCHEMA = yup__namespace.object().shape({
     });
 };
 const ProfilePage = ()=>{
+    const isDesktop = useMediaQuery.useIsDesktop();
     const localeNames = hooks.useTypedSelector((state)=>state.admin_app.language.localeNames);
     const { formatMessage } = reactIntl.useIntl();
     const { trackUsage } = Tracking.useTracking();
@@ -184,62 +186,63 @@ const ProfilePage = ()=>{
         confirmPassword: '',
         password: ''
     };
-    return /*#__PURE__*/ jsxRuntime.jsxs(PageHelpers.Page.Main, {
-        "aria-busy": isSubmittingForm,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(PageHelpers.Page.Title, {
-                children: formatMessage({
-                    id: 'Settings.profile.form.section.head.title',
-                    defaultMessage: 'User profile'
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(Form.Form, {
-                method: "PUT",
-                onSubmit: handleSubmit,
-                initialValues: initialData,
-                validationSchema: PROFILE_VALIDTION_SCHEMA,
-                children: ({ isSubmitting, modified })=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Header, {
-                                title: users.getDisplayName(user),
-                                primaryAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {}),
-                                    loading: isSubmitting,
-                                    type: "submit",
-                                    disabled: !modified,
-                                    children: formatMessage({
-                                        id: 'global.save',
-                                        defaultMessage: 'Save'
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(PageHelpers.Page.Main, {
+            "aria-busy": isSubmittingForm,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(PageHelpers.Page.Title, {
+                    children: formatMessage({
+                        id: 'Settings.profile.form.section.head.title',
+                        defaultMessage: 'User profile'
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(Form.Form, {
+                    method: "PUT",
+                    onSubmit: handleSubmit,
+                    initialValues: initialData,
+                    validationSchema: PROFILE_VALIDTION_SCHEMA,
+                    children: ({ isSubmitting, modified })=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Header, {
+                                    title: users.getDisplayName(user),
+                                    primaryAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {}),
+                                        loading: isSubmitting,
+                                        type: "submit",
+                                        disabled: !modified,
+                                        children: formatMessage({
+                                            id: 'global.save',
+                                            defaultMessage: 'Save'
+                                        })
                                     })
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                paddingBottom: 6,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Content, {
-                                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                        direction: "column",
-                                        alignItems: "stretch",
-                                        gap: 6,
-                                        children: [
-                                            /*#__PURE__*/ jsxRuntime.jsx(UserInfoSection, {}),
-                                            !hasLockedRole && /*#__PURE__*/ jsxRuntime.jsx(PasswordSection, {}),
-                                            /*#__PURE__*/ jsxRuntime.jsx(PreferencesSection, {
-                                                localeNames: localeNames
-                                            })
-                                        ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    paddingBottom: 6,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Content, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            gap: 6,
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(UserInfoSection, {}),
+                                                !hasLockedRole && /*#__PURE__*/ jsxRuntime.jsx(PasswordSection, {}),
+                                                /*#__PURE__*/ jsxRuntime.jsx(PreferencesSection, {
+                                                    localeNames: localeNames
+                                                })
+                                            ]
+                                        })
                                     })
                                 })
-                            })
-                        ]
+                            ]
+                        })
+                }),
+                isDesktop && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Content, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(GuidedTourSection, {})
                     })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                paddingBottom: 10,
-                children: /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Content, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(GuidedTourSection, {})
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 /* -------------------------------------------------------------------------------------------------