@strapi/admin 5.27.0 → 5.29.0

package/dist/admin/admin/src/pages/Home/HomePage.mjs

@@ -1,95 +1,41 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Main, Flex, Box, Grid, Typography } from '@strapi/design-system';
-import { PuzzlePiece } from '@strapi/icons';
+import { Main, Button, Flex, Box, Grid } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
+import { DragLayer, isWidgetDragItem } from '../../components/DragLayer.mjs';
+import { GapDropZoneManager } from '../../components/GapDropZone.mjs';
 import { GuidedTourHomepageOverview } from '../../components/GuidedTour/Overview.mjs';
 import { Layouts } from '../../components/Layouts/Layout.mjs';
 import { Page } from '../../components/PageHelpers.mjs';
+import { WidgetResizeHandle } from '../../components/ResizeIndicator.mjs';
 import { Widget } from '../../components/WidgetHelpers.mjs';
+import { WidgetRoot } from '../../components/WidgetRoot.mjs';
 import '../../services/admin.mjs';
 import { useEnterprise } from '../../hooks/useEnterprise.mjs';
 import '../../../../ee/admin/src/services/ai.mjs';
 import { useAuth } from '../../features/Auth.mjs';
 import { useStrapiApp } from '../../features/StrapiApp.mjs';
-import { useTracking } from '../../features/Tracking.mjs';
+import { useWidgets } from '../../features/Widgets.mjs';
+import { useGetHomepageLayoutQuery } from '../../services/homepage.mjs';
+import { applyHomepageLayout, createDefaultWidgetWidths, getWidgetWidth, isLastWidgetInRow, canResizeBetweenWidgets, WIDGET_DATA_ATTRIBUTES, getWidgetElement } from '../../utils/widgetLayout.mjs';
+import { AddWidgetModal } from './components/AddWidgetModal.mjs';
 import { FreeTrialEndedModal } from './components/FreeTrialEndedModal.mjs';
 import { FreeTrialWelcomeModal } from './components/FreeTrialWelcomeModal.mjs';
 
-const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid })=>{
-    const { trackUsage } = useTracking();
-    const { formatMessage } = useIntl();
-    const id = React.useId();
-    const Icon = icon;
-    const handleClickOnLink = ()=>{
-        trackUsage('didOpenHomeWidgetLink', {
-            widgetUID: uid
-        });
-    };
-    return /*#__PURE__*/ jsxs(Flex, {
-        width: "100%",
-        hasRadius: true,
-        direction: "column",
-        alignItems: "flex-start",
-        background: "neutral0",
-        borderColor: "neutral150",
-        shadow: "tableShadow",
-        tag: "section",
-        gap: 4,
-        padding: 6,
-        "aria-labelledby": id,
-        children: [
-            /*#__PURE__*/ jsxs(Flex, {
-                direction: "row",
-                gap: 2,
-                justifyContent: "space-between",
-                width: "100%",
-                tag: "header",
-                children: [
-                    /*#__PURE__*/ jsxs(Flex, {
-                        gap: 2,
-                        children: [
-                            /*#__PURE__*/ jsx(Icon, {
-                                fill: "neutral500",
-                                "aria-hidden": true
-                            }),
-                            /*#__PURE__*/ jsx(Typography, {
-                                textColor: "neutral500",
-                                variant: "sigma",
-                                tag: "h2",
-                                id: id,
-                                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__*/ jsx(Box, {
-                width: "100%",
-                height: "261px",
-                overflow: "auto",
-                tag: "main",
-                children: children
-            })
-        ]
-    });
-};
+// Styled wrapper for the drag preview
+const DragPreviewWrapper = styled.div`
+  max-width: ${(props)=>props.$maxWidth};
+  overflow: hidden;
+  opacity: 0.9;
+  border: 2px solid ${({ theme })=>theme.colors.primary500};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  pointer-events: none;
+`;
 /* -------------------------------------------------------------------------------------------------
  * UnstableHomePageCe
- * -----------------------------------------------------------------------------------------------*/ const WidgetComponent = ({ component })=>{
+ * -----------------------------------------------------------------------------------------------*/ const WidgetComponent = ({ component, columnWidth })=>{
     const [loadedComponent, setLoadedComponent] = React.useState(null);
     React.useEffect(()=>{
         const loadComponent = async ()=>{
@@ -104,7 +50,11 @@ const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid })=>{
     if (!Component) {
         return /*#__PURE__*/ jsx(Widget.Loading, {});
     }
-    return /*#__PURE__*/ jsx(Component, {});
+    return /*#__PURE__*/ jsx(Component, {
+        ...{
+            columnWidth
+        }
+    });
 };
 /* -------------------------------------------------------------------------------------------------
  * HomePageCE
@@ -114,8 +64,16 @@ const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid })=>{
     const displayName = user?.firstname ?? user?.username ?? user?.email;
     const getAllWidgets = useStrapiApp('UnstableHomepageCe', (state)=>state.widgets.getAll);
     const checkUserHasPermissions = useAuth('WidgetRoot', (state)=>state.checkUserHasPermissions);
+    const { data: homepageLayout, isLoading: _isLoadingLayout } = useGetHomepageLayoutQuery();
     const [filteredWidgets, setFilteredWidgets] = React.useState([]);
+    const [allAvailableWidgets, setAllAvailableWidgets] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
+    const [isAddWidgetModalOpen, setIsAddWidgetModalOpen] = React.useState(false);
+    // Use custom hook for widget management
+    const { findWidget, deleteWidget, addWidget, moveWidget, columnWidths, setColumnWidths, handleWidgetResize, saveLayout, isDraggingWidget, draggedWidgetId, handleDragStart, handleDragEnd } = useWidgets({
+        filteredWidgets,
+        setFilteredWidgets
+    });
     React.useEffect(()=>{
         const checkWidgetsPermissions = async ()=>{
             const allWidgets = getAllWidgets();
@@ -124,7 +82,8 @@ const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid })=>{
                 const matchingPermissions = await checkUserHasPermissions(widget.permissions);
                 return matchingPermissions.length >= widget.permissions.length;
             }));
-            setFilteredWidgets(allWidgets.filter((_, i)=>authorizedWidgets[i]));
+            const authorizedWidgetsList = allWidgets.filter((_, i)=>authorizedWidgets[i]);
+            setAllAvailableWidgets(authorizedWidgetsList);
             setLoading(false);
         };
         checkWidgetsPermissions();
@@ -132,6 +91,42 @@ const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid })=>{
         checkUserHasPermissions,
         getAllWidgets
     ]);
+    React.useEffect(()=>{
+        if (allAvailableWidgets.length === 0) return;
+        // If user has customized the homepage layout, apply it
+        if (homepageLayout && homepageLayout.widgets) {
+            const { filteredWidgets, widths: homepageWidths } = applyHomepageLayout(allAvailableWidgets, homepageLayout);
+            setFilteredWidgets(filteredWidgets);
+            setColumnWidths(homepageWidths);
+        } else {
+            // Set default layout when no custom layout exists
+            setFilteredWidgets(allAvailableWidgets);
+            setColumnWidths(createDefaultWidgetWidths(allAvailableWidgets));
+        }
+    }, [
+        homepageLayout,
+        allAvailableWidgets,
+        setColumnWidths
+    ]);
+    const widgetLayout = React.useMemo(()=>{
+        return filteredWidgets.map((widget, index)=>{
+            const rightWidgetId = filteredWidgets[index + 1]?.uid;
+            const widgetWidth = getWidgetWidth(columnWidths, widget.uid);
+            const rightWidgetWidth = getWidgetWidth(columnWidths, rightWidgetId);
+            return {
+                widget,
+                index,
+                isLastInRow: isLastWidgetInRow(index, filteredWidgets, columnWidths),
+                rightWidgetId,
+                widgetWidth,
+                rightWidgetWidth,
+                canResize: rightWidgetId && canResizeBetweenWidgets(widget.uid, rightWidgetId, columnWidths, filteredWidgets)
+            };
+        });
+    }, [
+        filteredWidgets,
+        columnWidths
+    ]);
     return /*#__PURE__*/ jsx(Layouts.Root, {
         children: /*#__PURE__*/ jsxs(Main, {
             children: [
@@ -151,15 +146,33 @@ const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid })=>{
                     subtitle: formatMessage({
                         id: 'HomePage.header.subtitle',
                         defaultMessage: 'Welcome to your administration panel'
+                    }),
+                    primaryAction: /*#__PURE__*/ jsx(Button, {
+                        variant: "tertiary",
+                        size: "S",
+                        startIcon: /*#__PURE__*/ jsx(Plus, {}),
+                        onClick: ()=>setIsAddWidgetModalOpen(true),
+                        children: formatMessage({
+                            id: 'HomePage.addWidget.button',
+                            defaultMessage: 'Add Widget'
+                        })
                     })
                 }),
                 /*#__PURE__*/ jsx(FreeTrialWelcomeModal, {}),
                 /*#__PURE__*/ jsx(FreeTrialEndedModal, {}),
+                /*#__PURE__*/ jsx(AddWidgetModal, {
+                    isOpen: isAddWidgetModalOpen,
+                    onClose: ()=>setIsAddWidgetModalOpen(false),
+                    onAddWidget: addWidget,
+                    currentWidgets: filteredWidgets,
+                    availableWidgets: allAvailableWidgets
+                }),
                 /*#__PURE__*/ jsx(Layouts.Content, {
                     children: /*#__PURE__*/ jsxs(Flex, {
                         direction: "column",
                         alignItems: "stretch",
                         gap: 8,
+                        paddingBottom: 10,
                         children: [
                             /*#__PURE__*/ jsx(GuidedTourHomepageOverview, {}),
                             loading ? /*#__PURE__*/ jsx(Box, {
@@ -169,24 +182,80 @@ const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid })=>{
                                 right: 0,
                                 bottom: 0,
                                 children: /*#__PURE__*/ jsx(Page.Loading, {})
-                            }) : /*#__PURE__*/ jsx(Grid.Root, {
-                                gap: 5,
-                                children: filteredWidgets.map((widget)=>/*#__PURE__*/ jsx(Grid.Item, {
-                                        col: 6,
-                                        s: 12,
-                                        children: /*#__PURE__*/ jsx(WidgetRoot, {
-                                            title: widget.title,
-                                            icon: widget.icon,
-                                            link: widget.link,
-                                            uid: widget.uid,
-                                            children: /*#__PURE__*/ jsx(WidgetComponent, {
-                                                component: widget.component
-                                            })
-                                        })
-                                    }, widget.uid))
+                            }) : /*#__PURE__*/ jsxs(Box, {
+                                position: "relative",
+                                [WIDGET_DATA_ATTRIBUTES.GRID_CONTAINER]: true,
+                                children: [
+                                    /*#__PURE__*/ jsx(Grid.Root, {
+                                        gap: 5,
+                                        children: widgetLayout.map(({ widget, isLastInRow, rightWidgetId, widgetWidth, rightWidgetWidth, canResize })=>/*#__PURE__*/ jsxs(React.Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Grid.Item, {
+                                                        col: widgetWidth,
+                                                        s: 12,
+                                                        children: /*#__PURE__*/ jsx(WidgetRoot, {
+                                                            uid: widget.uid,
+                                                            title: widget.title,
+                                                            icon: widget.icon,
+                                                            link: widget.link,
+                                                            findWidget: findWidget,
+                                                            deleteWidget: deleteWidget,
+                                                            onDragStart: handleDragStart,
+                                                            onDragEnd: handleDragEnd,
+                                                            component: widget.component,
+                                                            children: /*#__PURE__*/ jsx(WidgetComponent, {
+                                                                component: widget.component,
+                                                                columnWidth: widgetWidth
+                                                            })
+                                                        })
+                                                    }),
+                                                    !isLastInRow && canResize && rightWidgetId && /*#__PURE__*/ jsx(WidgetResizeHandle, {
+                                                        leftWidgetId: widget.uid,
+                                                        rightWidgetId: rightWidgetId,
+                                                        leftWidgetWidth: widgetWidth,
+                                                        rightWidgetWidth: rightWidgetWidth,
+                                                        onResize: handleWidgetResize,
+                                                        saveLayout: saveLayout,
+                                                        filteredWidgets: filteredWidgets
+                                                    }, `resize-${widget.uid}`)
+                                                ]
+                                            }, widget.uid))
+                                    }),
+                                    isDraggingWidget && /*#__PURE__*/ jsx(GapDropZoneManager, {
+                                        filteredWidgets: filteredWidgets,
+                                        columnWidths: columnWidths,
+                                        draggedWidgetId: draggedWidgetId,
+                                        moveWidget: moveWidget
+                                    })
+                                ]
                             })
                         ]
                     })
+                }),
+                /*#__PURE__*/ jsx(DragLayer, {
+                    renderItem: ({ type, item })=>{
+                        if (!isWidgetDragItem(item)) {
+                            return null;
+                        }
+                        const widgetElement = getWidgetElement(item.id);
+                        const maxWidth = `${widgetElement?.clientWidth}px`;
+                        return /*#__PURE__*/ jsx(DragPreviewWrapper, {
+                            $maxWidth: maxWidth,
+                            children: /*#__PURE__*/ jsx(WidgetRoot, {
+                                uid: item.id,
+                                title: item.title || {
+                                    id: `${item.id}`,
+                                    defaultMessage: item.id
+                                },
+                                icon: item.icon,
+                                link: item.link,
+                                children: /*#__PURE__*/ jsx(WidgetComponent, {
+                                    component: item.component,
+                                    columnWidth: 4
+                                })
+                            })
+                        });
+                    }
                 })
             ]
         })
@@ -204,5 +273,5 @@ const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid })=>{
     return /*#__PURE__*/ jsx(Page, {});
 };
 
-export { HomePage, HomePageCE, WidgetRoot };
+export { HomePage, HomePageCE, WidgetComponent };
 //# sourceMappingURL=HomePage.mjs.map

package/dist/admin/admin/src/pages/Home/HomePage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HomePage.mjs","sources":["../../../../../../admin/src/pages/Home/HomePage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Grid, Typography, Main } from '@strapi/design-system';\nimport { PuzzlePiece } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { Link as ReactRouterLink } from 'react-router-dom';\n\nimport { GuidedTourHomepageOverview } from '../../components/GuidedTour/Overview';\nimport { Layouts } from '../../components/Layouts/Layout';\nimport { Page } from '../../components/PageHelpers';\nimport { Widget } from '../../components/WidgetHelpers';\nimport { useEnterprise } from '../../ee';\nimport { useAuth } from '../../features/Auth';\nimport { useStrapiApp } from '../../features/StrapiApp';\nimport { useTracking } from '../../features/Tracking';\n\nimport { FreeTrialEndedModal } from './components/FreeTrialEndedModal';\nimport { FreeTrialWelcomeModal } from './components/FreeTrialWelcomeModal';\n\nimport type { WidgetWithUID } from '../../core/apis/Widgets';\nimport type { WidgetType } from '@strapi/admin/strapi-admin';\n\n/* -------------------------------------------------------------------------------------------------\n * WidgetRoot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface WidgetRootProps\n  extends Pick<WidgetType, 'title' | 'icon' | 'permissions' | 'link' | 'uid'> {\n  children: React.ReactNode;\n}\n\nexport const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid }: WidgetRootProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage } = useIntl();\n  const id = React.useId();\n  const Icon = icon;\n\n  const handleClickOnLink = () => {\n    trackUsage('didOpenHomeWidgetLink', { widgetUID: uid });\n  };\n\n  return (\n    <Flex\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      aria-labelledby={id}\n    >\n      <Flex direction=\"row\" gap={2} justifyContent=\"space-between\" width=\"100%\" tag=\"header\">\n        <Flex gap={2}>\n          <Icon fill=\"neutral500\" aria-hidden />\n          <Typography textColor=\"neutral500\" variant=\"sigma\" tag=\"h2\" id={id}>\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      </Flex>\n      <Box width=\"100%\" height=\"261px\" overflow=\"auto\" tag=\"main\">\n        {children}\n      </Box>\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * UnstableHomePageCe\n * -----------------------------------------------------------------------------------------------*/\n\nconst WidgetComponent = ({ component }: { component: () => Promise<React.ComponentType> }) => {\n  const [loadedComponent, setLoadedComponent] = React.useState<React.ComponentType | null>(null);\n\n  React.useEffect(() => {\n    const loadComponent = async () => {\n      const resolvedComponent = await component();\n\n      setLoadedComponent(() => resolvedComponent);\n    };\n\n    loadComponent();\n  }, [component]);\n\n  const Component = loadedComponent;\n\n  if (!Component) {\n    return <Widget.Loading />;\n  }\n\n  return <Component />;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HomePageCE\n * -----------------------------------------------------------------------------------------------*/\n\nconst HomePageCE = () => {\n  const { formatMessage } = useIntl();\n  const user = useAuth('HomePageCE', (state) => state.user);\n  const displayName = user?.firstname ?? user?.username ?? user?.email;\n  const getAllWidgets = useStrapiApp('UnstableHomepageCe', (state) => state.widgets.getAll);\n  const checkUserHasPermissions = useAuth('WidgetRoot', (state) => state.checkUserHasPermissions);\n  const [filteredWidgets, setFilteredWidgets] = React.useState<WidgetWithUID[]>([]);\n  const [loading, setLoading] = React.useState(true);\n\n  React.useEffect(() => {\n    const checkWidgetsPermissions = async () => {\n      const allWidgets = getAllWidgets();\n      const authorizedWidgets = await Promise.all(\n        allWidgets.map(async (widget) => {\n          if (!widget.permissions || widget.permissions.length === 0) return true;\n          const matchingPermissions = await checkUserHasPermissions(widget.permissions);\n          return matchingPermissions.length >= widget.permissions.length;\n        })\n      );\n      setFilteredWidgets(allWidgets.filter((_, i) => authorizedWidgets[i]));\n      setLoading(false);\n    };\n\n    checkWidgetsPermissions();\n  }, [checkUserHasPermissions, getAllWidgets]);\n\n  return (\n    <Layouts.Root>\n      <Main>\n        <Page.Title>\n          {formatMessage({ id: 'HomePage.head.title', defaultMessage: 'Homepage' })}\n        </Page.Title>\n        <Layouts.Header\n          title={formatMessage(\n            { id: 'HomePage.header.title', defaultMessage: 'Hello {name}' },\n            { name: displayName }\n          )}\n          subtitle={formatMessage({\n            id: 'HomePage.header.subtitle',\n            defaultMessage: 'Welcome to your administration panel',\n          })}\n        />\n        <FreeTrialWelcomeModal />\n        <FreeTrialEndedModal />\n        <Layouts.Content>\n          <Flex direction=\"column\" alignItems=\"stretch\" gap={8}>\n            <GuidedTourHomepageOverview />\n            {loading ? (\n              <Box position=\"absolute\" top={0} left={0} right={0} bottom={0}>\n                <Page.Loading />\n              </Box>\n            ) : (\n              <Grid.Root gap={5}>\n                {filteredWidgets.map((widget) => (\n                  <Grid.Item col={6} s={12} key={widget.uid}>\n                    <WidgetRoot\n                      title={widget.title}\n                      icon={widget.icon}\n                      link={widget.link}\n                      uid={widget.uid}\n                    >\n                      <WidgetComponent component={widget.component} />\n                    </WidgetRoot>\n                  </Grid.Item>\n                ))}\n              </Grid.Root>\n            )}\n          </Flex>\n        </Layouts.Content>\n      </Main>\n    </Layouts.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HomePage\n * -----------------------------------------------------------------------------------------------*/\n\nconst HomePage = () => {\n  const Page = useEnterprise(\n    HomePageCE,\n    // eslint-disable-next-line import/no-cycle\n    async () => (await import('../../../../ee/admin/src/pages/HomePage')).HomePageEE\n  );\n\n  // block rendering until the EE component is fully loaded\n  if (!Page) {\n    return null;\n  }\n\n  return <Page />;\n};\n\nexport { HomePage, HomePageCE };\n"],"names":["WidgetRoot","title","icon","PuzzlePiece","children","link","uid","trackUsage","useTracking","formatMessage","useIntl","id","React","useId","Icon","handleClickOnLink","widgetUID","_jsxs","Flex","width","hasRadius","direction","alignItems","background","borderColor","shadow","tag","gap","padding","aria-labelledby","justifyContent","_jsx","fill","aria-hidden","Typography","textColor","variant","ReactRouterLink","style","textDecoration","textAlign","to","href","onClick","label","Box","height","overflow","WidgetComponent","component","loadedComponent","setLoadedComponent","useState","useEffect","loadComponent","resolvedComponent","Component","Widget","Loading","HomePageCE","user","useAuth","state","displayName","firstname","username","email","getAllWidgets","useStrapiApp","widgets","getAll","checkUserHasPermissions","filteredWidgets","setFilteredWidgets","loading","setLoading","checkWidgetsPermissions","allWidgets","authorizedWidgets","Promise","all","map","widget","permissions","length","matchingPermissions","filter","_","i","Layouts","Root","Main","Page","Title","defaultMessage","Header","name","subtitle","FreeTrialWelcomeModal","FreeTrialEndedModal","Content","GuidedTourHomepageOverview","position","top","left","right","bottom","Grid","Item","col","s","HomePage","useEnterprise","HomePageEE"],"mappings":"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"}
+{"version":3,"file":"HomePage.mjs","sources":["../../../../../../admin/src/pages/Home/HomePage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Flex, Grid, Main } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { DragLayer, isWidgetDragItem } from '../../components/DragLayer';\nimport { GapDropZoneManager } from '../../components/GapDropZone';\nimport { GuidedTourHomepageOverview } from '../../components/GuidedTour/Overview';\nimport { Layouts } from '../../components/Layouts/Layout';\nimport { Page } from '../../components/PageHelpers';\nimport { WidgetResizeHandle } from '../../components/ResizeIndicator';\nimport { Widget } from '../../components/WidgetHelpers';\nimport { WidgetRoot } from '../../components/WidgetRoot';\nimport { useEnterprise } from '../../ee';\nimport { useAuth } from '../../features/Auth';\nimport { useStrapiApp } from '../../features/StrapiApp';\nimport { useWidgets } from '../../features/Widgets';\nimport { useGetHomepageLayoutQuery } from '../../services/homepage';\nimport { getWidgetElement, WIDGET_DATA_ATTRIBUTES } from '../../utils/widgetLayout';\nimport {\n  applyHomepageLayout,\n  createDefaultWidgetWidths,\n  isLastWidgetInRow,\n  canResizeBetweenWidgets,\n  getWidgetWidth,\n} from '../../utils/widgetLayout';\n\nimport { AddWidgetModal } from './components/AddWidgetModal';\nimport { FreeTrialEndedModal } from './components/FreeTrialEndedModal';\nimport { FreeTrialWelcomeModal } from './components/FreeTrialWelcomeModal';\n\nimport type { WidgetWithUID } from '../../core/apis/Widgets';\n\n// Styled wrapper for the drag preview\nconst DragPreviewWrapper = styled.div<{ $maxWidth: string }>`\n  max-width: ${(props) => props.$maxWidth};\n  overflow: hidden;\n  opacity: 0.9;\n  border: 2px solid ${({ theme }) => theme.colors.primary500};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  pointer-events: none;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * UnstableHomePageCe\n * -----------------------------------------------------------------------------------------------*/\n\nexport const WidgetComponent = ({\n  component,\n  columnWidth,\n}: {\n  component: () => Promise<React.ComponentType>;\n  columnWidth: number;\n}) => {\n  const [loadedComponent, setLoadedComponent] = React.useState<React.ComponentType<{\n    columnWidth?: number;\n  }> | null>(null);\n\n  React.useEffect(() => {\n    const loadComponent = async () => {\n      const resolvedComponent = await component();\n\n      setLoadedComponent(() => resolvedComponent);\n    };\n\n    loadComponent();\n  }, [component]);\n\n  const Component = loadedComponent;\n\n  if (!Component) {\n    return <Widget.Loading />;\n  }\n\n  return <Component {...({ columnWidth } as Record<string, unknown>)} />;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HomePageCE\n * -----------------------------------------------------------------------------------------------*/\n\nconst HomePageCE = () => {\n  const { formatMessage } = useIntl();\n  const user = useAuth('HomePageCE', (state) => state.user);\n  const displayName = user?.firstname ?? user?.username ?? user?.email;\n  const getAllWidgets = useStrapiApp('UnstableHomepageCe', (state) => state.widgets.getAll);\n  const checkUserHasPermissions = useAuth('WidgetRoot', (state) => state.checkUserHasPermissions);\n  const { data: homepageLayout, isLoading: _isLoadingLayout } = useGetHomepageLayoutQuery();\n  const [filteredWidgets, setFilteredWidgets] = React.useState<WidgetWithUID[]>([]);\n  const [allAvailableWidgets, setAllAvailableWidgets] = React.useState<WidgetWithUID[]>([]);\n  const [loading, setLoading] = React.useState(true);\n  const [isAddWidgetModalOpen, setIsAddWidgetModalOpen] = React.useState(false);\n\n  // Use custom hook for widget management\n  const {\n    findWidget,\n    deleteWidget,\n    addWidget,\n    moveWidget,\n    columnWidths,\n    setColumnWidths,\n    handleWidgetResize,\n    saveLayout,\n    isDraggingWidget,\n    draggedWidgetId,\n    handleDragStart,\n    handleDragEnd,\n  } = useWidgets({\n    filteredWidgets,\n    setFilteredWidgets,\n  });\n\n  React.useEffect(() => {\n    const checkWidgetsPermissions = async () => {\n      const allWidgets = getAllWidgets();\n      const authorizedWidgets = await Promise.all(\n        allWidgets.map(async (widget) => {\n          if (!widget.permissions || widget.permissions.length === 0) return true;\n          const matchingPermissions = await checkUserHasPermissions(widget.permissions);\n          return matchingPermissions.length >= widget.permissions.length;\n        })\n      );\n      const authorizedWidgetsList = allWidgets.filter((_, i) => authorizedWidgets[i]);\n\n      setAllAvailableWidgets(authorizedWidgetsList);\n      setLoading(false);\n    };\n\n    checkWidgetsPermissions();\n  }, [checkUserHasPermissions, getAllWidgets]);\n\n  React.useEffect(() => {\n    if (allAvailableWidgets.length === 0) return;\n\n    // If user has customized the homepage layout, apply it\n    if (homepageLayout && homepageLayout.widgets) {\n      const { filteredWidgets, widths: homepageWidths } = applyHomepageLayout(\n        allAvailableWidgets,\n        homepageLayout\n      );\n\n      setFilteredWidgets(filteredWidgets);\n      setColumnWidths(homepageWidths);\n    } else {\n      // Set default layout when no custom layout exists\n      setFilteredWidgets(allAvailableWidgets);\n      setColumnWidths(createDefaultWidgetWidths(allAvailableWidgets));\n    }\n  }, [homepageLayout, allAvailableWidgets, setColumnWidths]);\n\n  const widgetLayout = React.useMemo(() => {\n    return filteredWidgets.map((widget, index) => {\n      const rightWidgetId = filteredWidgets[index + 1]?.uid;\n      const widgetWidth = getWidgetWidth(columnWidths, widget.uid);\n      const rightWidgetWidth = getWidgetWidth(columnWidths, rightWidgetId);\n\n      return {\n        widget,\n        index,\n        isLastInRow: isLastWidgetInRow(index, filteredWidgets, columnWidths),\n        rightWidgetId,\n        widgetWidth,\n        rightWidgetWidth,\n        canResize:\n          rightWidgetId &&\n          canResizeBetweenWidgets(widget.uid, rightWidgetId, columnWidths, filteredWidgets),\n      };\n    });\n  }, [filteredWidgets, columnWidths]);\n\n  return (\n    <Layouts.Root>\n      <Main>\n        <Page.Title>\n          {formatMessage({ id: 'HomePage.head.title', defaultMessage: 'Homepage' })}\n        </Page.Title>\n        <Layouts.Header\n          title={formatMessage(\n            { id: 'HomePage.header.title', defaultMessage: 'Hello {name}' },\n            { name: displayName }\n          )}\n          subtitle={formatMessage({\n            id: 'HomePage.header.subtitle',\n            defaultMessage: 'Welcome to your administration panel',\n          })}\n          primaryAction={\n            <Button\n              variant=\"tertiary\"\n              size=\"S\"\n              startIcon={<Plus />}\n              onClick={() => setIsAddWidgetModalOpen(true)}\n            >\n              {formatMessage({\n                id: 'HomePage.addWidget.button',\n                defaultMessage: 'Add Widget',\n              })}\n            </Button>\n          }\n        />\n        <FreeTrialWelcomeModal />\n        <FreeTrialEndedModal />\n        <AddWidgetModal\n          isOpen={isAddWidgetModalOpen}\n          onClose={() => setIsAddWidgetModalOpen(false)}\n          onAddWidget={addWidget}\n          currentWidgets={filteredWidgets}\n          availableWidgets={allAvailableWidgets}\n        />\n        <Layouts.Content>\n          <Flex direction=\"column\" alignItems=\"stretch\" gap={8} paddingBottom={10}>\n            <GuidedTourHomepageOverview />\n            {loading ? (\n              <Box position=\"absolute\" top={0} left={0} right={0} bottom={0}>\n                <Page.Loading />\n              </Box>\n            ) : (\n              <Box position=\"relative\" {...{ [WIDGET_DATA_ATTRIBUTES.GRID_CONTAINER]: true }}>\n                <Grid.Root gap={5}>\n                  {widgetLayout.map(\n                    ({\n                      widget,\n                      isLastInRow,\n                      rightWidgetId,\n                      widgetWidth,\n                      rightWidgetWidth,\n                      canResize,\n                    }) => (\n                      <React.Fragment key={widget.uid}>\n                        <Grid.Item col={widgetWidth} s={12}>\n                          <WidgetRoot\n                            uid={widget.uid}\n                            title={widget.title}\n                            icon={widget.icon}\n                            link={widget.link}\n                            findWidget={findWidget}\n                            deleteWidget={deleteWidget}\n                            onDragStart={handleDragStart}\n                            onDragEnd={handleDragEnd}\n                            component={widget.component}\n                          >\n                            <WidgetComponent\n                              component={widget.component}\n                              columnWidth={widgetWidth}\n                            />\n                          </WidgetRoot>\n                        </Grid.Item>\n\n                        {!isLastInRow && canResize && rightWidgetId && (\n                          <WidgetResizeHandle\n                            key={`resize-${widget.uid}`}\n                            leftWidgetId={widget.uid}\n                            rightWidgetId={rightWidgetId}\n                            leftWidgetWidth={widgetWidth}\n                            rightWidgetWidth={rightWidgetWidth}\n                            onResize={handleWidgetResize}\n                            saveLayout={saveLayout}\n                            filteredWidgets={filteredWidgets}\n                          />\n                        )}\n                      </React.Fragment>\n                    )\n                  )}\n                </Grid.Root>\n\n                {isDraggingWidget && (\n                  <GapDropZoneManager\n                    filteredWidgets={filteredWidgets}\n                    columnWidths={columnWidths}\n                    draggedWidgetId={draggedWidgetId}\n                    moveWidget={moveWidget}\n                  />\n                )}\n              </Box>\n            )}\n          </Flex>\n        </Layouts.Content>\n\n        {/* Add the DragLayer to handle custom drag previews */}\n        <DragLayer\n          renderItem={({ type, item }) => {\n            if (!isWidgetDragItem(item)) {\n              return null;\n            }\n\n            const widgetElement = getWidgetElement(item.id);\n            const maxWidth = `${widgetElement?.clientWidth}px`;\n\n            return (\n              <DragPreviewWrapper $maxWidth={maxWidth}>\n                <WidgetRoot\n                  uid={item.id as WidgetWithUID['uid']}\n                  title={item.title || { id: `${item.id}`, defaultMessage: item.id }}\n                  icon={item.icon}\n                  link={item.link}\n                >\n                  <WidgetComponent component={item.component} columnWidth={4} />\n                </WidgetRoot>\n              </DragPreviewWrapper>\n            );\n          }}\n        />\n      </Main>\n    </Layouts.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HomePage\n * -----------------------------------------------------------------------------------------------*/\n\nconst HomePage = () => {\n  const Page = useEnterprise(\n    HomePageCE,\n    // eslint-disable-next-line import/no-cycle\n    async () => (await import('../../../../ee/admin/src/pages/HomePage')).HomePageEE\n  );\n\n  // block rendering until the EE component is fully loaded\n  if (!Page) {\n    return null;\n  }\n\n  return <Page />;\n};\n\nexport { HomePage, HomePageCE };\n"],"names":["DragPreviewWrapper","styled","div","props","$maxWidth","theme","colors","primary500","borderRadius","WidgetComponent","component","columnWidth","loadedComponent","setLoadedComponent","React","useState","useEffect","loadComponent","resolvedComponent","Component","_jsx","Widget","Loading","HomePageCE","formatMessage","useIntl","user","useAuth","state","displayName","firstname","username","email","getAllWidgets","useStrapiApp","widgets","getAll","checkUserHasPermissions","data","homepageLayout","isLoading","_isLoadingLayout","useGetHomepageLayoutQuery","filteredWidgets","setFilteredWidgets","allAvailableWidgets","setAllAvailableWidgets","loading","setLoading","isAddWidgetModalOpen","setIsAddWidgetModalOpen","findWidget","deleteWidget","addWidget","moveWidget","columnWidths","setColumnWidths","handleWidgetResize","saveLayout","isDraggingWidget","draggedWidgetId","handleDragStart","handleDragEnd","useWidgets","checkWidgetsPermissions","allWidgets","authorizedWidgets","Promise","all","map","widget","permissions","length","matchingPermissions","authorizedWidgetsList","filter","_","i","widths","homepageWidths","applyHomepageLayout","createDefaultWidgetWidths","widgetLayout","useMemo","index","rightWidgetId","uid","widgetWidth","getWidgetWidth","rightWidgetWidth","isLastInRow","isLastWidgetInRow","canResize","canResizeBetweenWidgets","Layouts","Root","_jsxs","Main","Page","Title","id","defaultMessage","Header","title","name","subtitle","primaryAction","Button","variant","size","startIcon","Plus","onClick","FreeTrialWelcomeModal","FreeTrialEndedModal","AddWidgetModal","isOpen","onClose","onAddWidget","currentWidgets","availableWidgets","Content","Flex","direction","alignItems","gap","paddingBottom","GuidedTourHomepageOverview","Box","position","top","left","right","bottom","WIDGET_DATA_ATTRIBUTES","GRID_CONTAINER","Grid","Fragment","Item","col","s","WidgetRoot","icon","link","onDragStart","onDragEnd","WidgetResizeHandle","leftWidgetId","leftWidgetWidth","onResize","GapDropZoneManager","DragLayer","renderItem","type","item","isWidgetDragItem","widgetElement","getWidgetElement","maxWidth","clientWidth","HomePage","useEnterprise","HomePageEE"],"mappings":"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"}

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":"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"}