@strapi/admin 5.0.0-beta.6 → 5.0.0-beta.8

package/dist/admin/{Permissions-aU1eesjP.mjs → Permissions-ujqtV7GK.mjs}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useMemo } from 'react';
-import { Flex, Box, BaseCheckbox, Typography, Button, ModalLayout, ModalHeader, Breadcrumbs, Crumb, ModalBody, ModalFooter, MultiSelectNested, Accordion, AccordionToggle, AccordionContent, Checkbox, Grid, GridItem, TabGroup, Tabs, Tab, TabPanels, TabPanel } from '@strapi/design-system';
+import { Flex, Box, BaseCheckbox, Typography, Button, ModalLayout, ModalHeader, Breadcrumbs, Crumb, ModalBody, ModalFooter, MultiSelectNested, Accordion, Checkbox, Grid, GridItem, TabGroup, Tabs, Tab, TabPanels, TabPanel } from '@strapi/design-system';
 import { produce } from 'immer';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
@@ -9,7 +9,7 @@ import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
 import set from 'lodash/set';
 import { useIntl } from 'react-intl';
-import { y as isObject$1 } from './index-7fPlAzj6.mjs';
+import { A as isObject$1 } from './index-69WUS0qJ.mjs';
 import { createContext } from '@radix-ui/react-context';
 import isEqual from 'lodash/isEqual';
 import isObject from 'lodash/isObject';
@@ -17,9 +17,9 @@ import transform from 'lodash/transform';
 import merge from 'lodash/merge';
 import groupBy from 'lodash/groupBy';
 import omit from 'lodash/omit';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import { CaretDown, Cog, ChevronUp, ChevronDown } from '@strapi/icons';
-import { q as capitalise } from './rbac-uVd0RAE5.mjs';
+import { q as capitalise } from './rbac-oJEkQdXG.mjs';
 import upperFirst from 'lodash/upperFirst';
 
 const [PermissionsDataManagerProvider, usePermissionsDataManagerContext] = createContext("PermissionsDataManager");
@@ -371,7 +371,7 @@ const CollapseLabel = styled(Flex)`
   padding-right: ${({ theme }) => theme.spaces[2]};
   overflow: hidden;
   flex: 1;
-  ${({ isCollapsable }) => isCollapsable && "cursor: pointer;"}
+  ${({ $isCollapsable }) => $isCollapsable && "cursor: pointer;"}
 `;
 
 const HiddenAction = styled.div`
@@ -421,7 +421,7 @@ const RowLabelWithCheckbox = ({
       {
         title: label,
         alignItems: "center",
-        isCollapsable,
+        $isCollapsable: isCollapsable,
         ...isCollapsable && {
           onClick,
           "aria-expanded": isActive,
@@ -530,8 +530,8 @@ const ActionRow$1 = ({
       Wrapper$1,
       {
         alignItems: "center",
-        isCollapsable,
-        isActive,
+        $isCollapsable: isCollapsable,
+        $isActive: isActive,
         background: isOdd ? "neutral100" : "neutral0",
         children: /* @__PURE__ */ jsxs(Flex, { children: [
           /* @__PURE__ */ jsxs(
@@ -674,7 +674,7 @@ const Wrapper$1 = styled(Flex)`
   height: ${rowHeight};
   flex: 1;
 
-  ${({ isCollapsable, theme }) => isCollapsable && `
+  ${({ $isCollapsable, theme }) => $isCollapsable && `
       ${CarretIcon} {
         display: block;
         color: ${theme.colors.neutral100};
@@ -683,7 +683,7 @@ const Wrapper$1 = styled(Flex)`
         ${activeStyle(theme)}
       }
   `}
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+  ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
 `;
 const CarretIcon = styled(CaretDown)`
   display: none;
@@ -723,7 +723,7 @@ const SubActionRow = ({
       const isVisible = index + 1 < childrenForm.length;
       const isArrayType = Array.isArray(subChildrenForm);
       const isActive = rowToOpen === value;
-      return /* @__PURE__ */ jsxs(LeftBorderTimeline, { isVisible, children: [
+      return /* @__PURE__ */ jsxs(LeftBorderTimeline, { $isVisible: isVisible, children: [
         /* @__PURE__ */ jsxs(Flex, { height: rowHeight, children: [
           /* @__PURE__ */ jsx(StyledBox$1, { children: /* @__PURE__ */ jsx(
             Svg,
@@ -733,7 +733,7 @@ const SubActionRow = ({
               viewBox: "0 0 20 23",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              color: "primary200",
+              $color: "primary200",
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
@@ -746,11 +746,11 @@ const SubActionRow = ({
             }
           ) }),
           /* @__PURE__ */ jsxs(Flex, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsx(RowStyle, { level: recursiveLevel, isActive, isCollapsable: isArrayType, children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(RowStyle, { $level: recursiveLevel, $isActive: isActive, $isCollapsable: isArrayType, children: /* @__PURE__ */ jsxs(
               CollapseLabel,
               {
                 alignItems: "center",
-                isCollapsable: isArrayType,
+                $isCollapsable: isArrayType,
                 ...isArrayType && {
                   onClick: () => handleClickToggleSubLevel(value),
                   "aria-expanded": isActive,
@@ -760,7 +760,7 @@ const SubActionRow = ({
                 },
                 title: label,
                 children: [
-                  /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: capitalise(label) }),
+                  /* @__PURE__ */ jsx(RowLabel, { ellipsis: true, children: capitalise(label) }),
                   required && /* @__PURE__ */ jsx(RequiredSign, {}),
                   /* @__PURE__ */ jsx(CarretIcon, { $isActive: isActive })
                 ]
@@ -872,13 +872,13 @@ const SubActionRow = ({
   ] });
 };
 const LeftBorderTimeline = styled(Box)`
-  border-left: ${({ isVisible, theme }) => isVisible ? `4px solid ${theme.colors.primary200}` : "4px solid transparent"};
+  border-left: ${({ $isVisible, theme }) => $isVisible ? `4px solid ${theme.colors.primary200}` : "4px solid transparent"};
 `;
 const RowStyle = styled(Flex)`
   padding-left: ${({ theme }) => theme.spaces[4]};
-  width: ${({ level }) => 145 - level * 36}px;
+  width: ${({ $level }) => 145 - $level * 36}px;
 
-  ${({ isCollapsable, theme }) => isCollapsable && `
+  ${({ $isCollapsable, theme }) => $isCollapsable && `
       ${CarretIcon} {
         display: block;
         color: ${theme.colors.neutral100};
@@ -887,8 +887,9 @@ const RowStyle = styled(Flex)`
         ${activeStyle(theme)}
       }
   `}
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+  ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
 `;
+const RowLabel = styled(Typography)``;
 const TopTimeline = styled.div`
   padding-top: ${({ theme }) => theme.spaces[2]};
   margin-top: ${({ theme }) => theme.spaces[2]};
@@ -914,7 +915,7 @@ const Svg = styled.svg`
   transform: translate(-0.5px, -1px);
 
   * {
-    fill: ${({ theme, color }) => theme.colors[color]};
+    fill: ${({ theme, $color }) => theme.colors[$color]};
   }
 `;
 const Header = ({ headers = [], label }) => {
@@ -939,7 +940,7 @@ const Header = ({ headers = [], label }) => {
   ] });
 };
 const activeStyle = (theme) => css`
-  ${Typography} {
+  ${RowLabel} {
     color: ${theme.colors.primary600};
     font-weight: ${theme.fontWeights.bold};
   }
@@ -959,13 +960,13 @@ const ConditionsButtonImpl = ({
   variant = "tertiary"
 }) => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(ButtonContainer, { hasConditions, className, children: /* @__PURE__ */ jsx(Button, { variant, startIcon: /* @__PURE__ */ jsx(Cog, {}), onClick, children: formatMessage({
+  return /* @__PURE__ */ jsx(ButtonContainer, { $hasConditions: hasConditions, className, children: /* @__PURE__ */ jsx(Button, { variant, startIcon: /* @__PURE__ */ jsx(Cog, {}), onClick, children: formatMessage({
     id: "global.settings",
     defaultMessage: "Settings"
   }) }) });
 };
 const ButtonContainer = styled(Box)`
-  ${({ hasConditions, disabled, theme }) => hasConditions && `
+  ${({ $hasConditions, theme }) => $hasConditions && `
     &:before {
       content: '';
       position: absolute;
@@ -974,7 +975,7 @@ const ButtonContainer = styled(Box)`
       width: 6px;
       height: 6px;
       border-radius: 2rem;
-      background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600};
+      background: ${theme.colors.primary600};
     }
   `}
 `;
@@ -1103,7 +1104,7 @@ const ActionRow = ({
       onChange(name, getNewStateFromChangedValues(arrayOfOptionsGroupedByCategory, val));
     }
   };
-  return /* @__PURE__ */ jsxs(Flex, { as: "li", background: isGrey ? "neutral100" : "neutral0", paddingBottom: 3, paddingTop: 3, children: [
+  return /* @__PURE__ */ jsxs(Flex, { tag: "li", background: isGrey ? "neutral100" : "neutral0", paddingBottom: 3, paddingTop: 3, children: [
     /* @__PURE__ */ jsxs(Flex, { paddingLeft: 6, style: { width: 180 }, children: [
       /* @__PURE__ */ jsxs(Typography, { variant: "sigma", textColor: "neutral600", children: [
         formatMessage({
@@ -1243,7 +1244,7 @@ const Collapse = ({
     return generateCheckboxesActions(availableActions, modifiedData, pathToData);
   }, [availableActions, modifiedData, pathToData]);
   const doesConditionButtonHasConditions = checkboxesActions.some((action) => action.hasConditions);
-  return /* @__PURE__ */ jsxs(BoxWrapper, { isActive, children: [
+  return /* @__PURE__ */ jsxs(BoxWrapper, { $isActive: isActive, children: [
     /* @__PURE__ */ jsxs(
       Wrapper,
       {
@@ -1284,7 +1285,7 @@ const Collapse = ({
                   hasConditions && /* @__PURE__ */ jsx(
                     Box,
                     {
-                      as: "span",
+                      tag: "span",
                       position: "absolute",
                       top: "-6px",
                       left: "37px",
@@ -1324,7 +1325,7 @@ const Collapse = ({
                 hasConditions && /* @__PURE__ */ jsx(
                   Box,
                   {
-                    as: "span",
+                    tag: "span",
                     position: "absolute",
                     top: "-6px",
                     left: "37px",
@@ -1441,9 +1442,9 @@ const BoxWrapper = styled.div`
   ${ConditionsButton} {
     display: none;
   }
-  ${({ isActive, theme }) => isActive && activeRowStyle(theme, isActive)}
+  ${({ $isActive, theme }) => $isActive && activeRowStyle(theme, $isActive)}
   &:hover {
-    ${({ theme, isActive }) => activeRowStyle(theme, isActive)}
+    ${({ theme, $isActive }) => activeRowStyle(theme, $isActive)}
   }
 `;
 const Cell = styled(Flex)`
@@ -1561,73 +1562,53 @@ const PluginsAndSettingsPermissions = ({
   layout,
   ...restProps
 }) => {
-  const [openedCategory, setOpenedCategory] = React.useState(null);
-  const handleOpenCategory = (categoryName) => {
-    setOpenedCategory(categoryName === openedCategory ? null : categoryName);
-  };
-  return /* @__PURE__ */ jsx(Box, { padding: 6, background: "neutral0", children: layout.map(({ category, categoryId, childrenForm }, index) => {
+  return /* @__PURE__ */ jsx(Box, { padding: 6, background: "neutral0", children: /* @__PURE__ */ jsx(Accordion.Root, { size: "M", children: layout.map(({ category, categoryId, childrenForm }, index) => {
     return /* @__PURE__ */ jsx(
       Row,
       {
         childrenForm,
-        isOpen: openedCategory === category,
-        isWhite: index % 2 === 1,
+        variant: index % 2 === 1 ? "primary" : "secondary",
         name: category,
-        onOpenCategory: handleOpenCategory,
         pathToData: [restProps.kind, categoryId],
         ...restProps
       },
       category
     );
-  }) });
+  }) }) });
 };
 const Row = ({
   childrenForm,
   kind,
   name,
-  isOpen = false,
   isFormDisabled = false,
-  isWhite,
-  onOpenCategory,
+  variant,
   pathToData
 }) => {
   const { formatMessage } = useIntl();
-  const handleClick = () => {
-    onOpenCategory(name);
-  };
   const categoryName = name.split("::").pop() ?? "";
-  return /* @__PURE__ */ jsxs(
-    Accordion,
-    {
-      expanded: isOpen,
-      onToggle: handleClick,
-      id: `accordion-${name}`,
-      variant: isWhite ? "primary" : "secondary",
-      children: [
-        /* @__PURE__ */ jsx(
-          AccordionToggle,
-          {
-            title: capitalise(categoryName),
-            description: `${formatMessage(
-              { id: "Settings.permissions.category", defaultMessage: categoryName },
-              { category: categoryName }
-            )} ${kind === "plugins" ? "plugin" : kind}`
-          }
-        ),
-        /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(Box, { padding: 6, children: childrenForm.map(({ actions, subCategoryName, subCategoryId }) => /* @__PURE__ */ jsx(
-          SubCategory,
-          {
-            actions,
-            categoryName,
-            isFormDisabled,
-            subCategoryName,
-            pathToData: [...pathToData, subCategoryId]
-          },
-          subCategoryName
-        )) }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Accordion.Item, { value: name, children: [
+    /* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(
+      Accordion.Trigger,
+      {
+        description: `${formatMessage(
+          { id: "Settings.permissions.category", defaultMessage: categoryName },
+          { category: categoryName }
+        )} ${kind === "plugins" ? "plugin" : kind}`,
+        children: capitalise(categoryName)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Box, { padding: 6, children: childrenForm.map(({ actions, subCategoryName, subCategoryId }) => /* @__PURE__ */ jsx(
+      SubCategory,
+      {
+        actions,
+        categoryName,
+        isFormDisabled,
+        subCategoryName,
+        pathToData: [...pathToData, subCategoryId]
+      },
+      subCategoryName
+    )) }) })
+  ] });
 };
 const SubCategory = ({
   actions = [],
@@ -1706,7 +1687,7 @@ const SubCategory = ({
       ] }),
       /* @__PURE__ */ jsxs(Flex, { paddingTop: 6, paddingBottom: 6, children: [
         /* @__PURE__ */ jsx(Grid, { gap: 2, style: { flex: 1 }, children: formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
-          return /* @__PURE__ */ jsx(GridItem, { col: 3, children: /* @__PURE__ */ jsx(CheckboxWrapper, { disabled: isFormDisabled, hasConditions, children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(GridItem, { col: 3, children: /* @__PURE__ */ jsx(CheckboxWrapper, { $disabled: isFormDisabled, $hasConditions: hasConditions, children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               name: checkboxName,
@@ -1752,7 +1733,7 @@ const Border = styled(Box)`
 const CheckboxWrapper = styled.div`
   position: relative;
   word-break: keep-all;
-  ${({ hasConditions, disabled, theme }) => hasConditions && `
+  ${({ $hasConditions, $disabled, theme }) => $hasConditions && `
     &:before {
       content: '';
       position: absolute;
@@ -1761,7 +1742,7 @@ const CheckboxWrapper = styled.div`
       width: 0.6rem;
       height: 0.6rem;
       border-radius: 2rem;
-      background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600};
+      background: ${$disabled ? theme.colors.neutral100 : theme.colors.primary600};
     }
   `}
 `;
@@ -2046,4 +2027,4 @@ const init = (layout, permissions) => {
 };
 
 export { Permissions as P };
-//# sourceMappingURL=Permissions-aU1eesjP.mjs.map
+//# sourceMappingURL=Permissions-ujqtV7GK.mjs.map