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

package/dist/admin/{Permissions-NlSnXUKO.js → Permissions-kWoGUyLH.js}

@@ -10,7 +10,7 @@ const has = require('lodash/has');
 const isEmpty = require('lodash/isEmpty');
 const set = require('lodash/set');
 const reactIntl = require('react-intl');
-const index = require('./index-FJLgZ-Wg.js');
+const index = require('./index-UrJZyInv.js');
 const reactContext = require('@radix-ui/react-context');
 const isEqual = require('lodash/isEqual');
 const isObject = require('lodash/isObject');
@@ -18,9 +18,9 @@ const transform = require('lodash/transform');
 const merge = require('lodash/merge');
 const groupBy = require('lodash/groupBy');
 const omit = require('lodash/omit');
-const styled = require('styled-components');
+const styledComponents = require('styled-components');
 const icons = require('@strapi/icons');
-const rbac = require('./rbac-xgYdpUSq.js');
+const rbac = require('./rbac-5b9ylhpa.js');
 const upperFirst = require('lodash/upperFirst');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
@@ -55,7 +55,6 @@ const transform__default = /*#__PURE__*/_interopDefault(transform);
 const merge__default = /*#__PURE__*/_interopDefault(merge);
 const groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 const omit__default = /*#__PURE__*/_interopDefault(omit);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
 const upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
 const [PermissionsDataManagerProvider, usePermissionsDataManagerContext] = reactContext.createContext("PermissionsDataManager");
@@ -403,14 +402,14 @@ const getCheckboxState = (dataObj) => {
   return { hasAllActionsSelected, hasSomeActionsSelected };
 };
 
-const CollapseLabel = styled__default.default(designSystem.Flex)`
+const CollapseLabel = styledComponents.styled(designSystem.Flex)`
   padding-right: ${({ theme }) => theme.spaces[2]};
   overflow: hidden;
   flex: 1;
-  ${({ isCollapsable }) => isCollapsable && "cursor: pointer;"}
+  ${({ $isCollapsable }) => $isCollapsable && "cursor: pointer;"}
 `;
 
-const HiddenAction = styled__default.default.div`
+const HiddenAction = styledComponents.styled.div`
   width: ${cellWidth};
 `;
 
@@ -457,7 +456,7 @@ const RowLabelWithCheckbox = ({
       {
         title: label,
         alignItems: "center",
-        isCollapsable,
+        $isCollapsable: isCollapsable,
         ...isCollapsable && {
           onClick,
           "aria-expanded": isActive,
@@ -566,8 +565,8 @@ const ActionRow$1 = ({
       Wrapper$1,
       {
         alignItems: "center",
-        isCollapsable,
-        isActive,
+        $isCollapsable: isCollapsable,
+        $isActive: isActive,
         background: isOdd ? "neutral100" : "neutral0",
         children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -706,11 +705,11 @@ const getRowLabelCheckboxState = (propertyActions, modifiedData, pathToContentTy
   }, {});
   return getCheckboxState(data);
 };
-const Wrapper$1 = styled__default.default(designSystem.Flex)`
+const Wrapper$1 = styledComponents.styled(designSystem.Flex)`
   height: ${rowHeight};
   flex: 1;
 
-  ${({ isCollapsable, theme }) => isCollapsable && `
+  ${({ $isCollapsable, theme }) => $isCollapsable && `
       ${CarretIcon} {
         display: block;
         color: ${theme.colors.neutral100};
@@ -719,9 +718,9 @@ const Wrapper$1 = styled__default.default(designSystem.Flex)`
         ${activeStyle(theme)}
       }
   `}
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+  ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
 `;
-const CarretIcon = styled__default.default(icons.CaretDown)`
+const CarretIcon = styledComponents.styled(icons.CaretDown)`
   display: none;
   width: 1rem;
   transform: rotate(${({ $isActive }) => $isActive ? "180" : "0"}deg);
@@ -759,7 +758,7 @@ const SubActionRow = ({
       const isVisible = index + 1 < childrenForm.length;
       const isArrayType = Array.isArray(subChildrenForm);
       const isActive = rowToOpen === value;
-      return /* @__PURE__ */ jsxRuntime.jsxs(LeftBorderTimeline, { isVisible, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(LeftBorderTimeline, { $isVisible: isVisible, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { height: rowHeight, children: [
           /* @__PURE__ */ jsxRuntime.jsx(StyledBox$1, { children: /* @__PURE__ */ jsxRuntime.jsx(
             Svg,
@@ -769,7 +768,7 @@ const SubActionRow = ({
               viewBox: "0 0 20 23",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              color: "primary200",
+              $color: "primary200",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "path",
                 {
@@ -782,11 +781,11 @@ const SubActionRow = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RowStyle, { level: recursiveLevel, isActive, isCollapsable: isArrayType, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(RowStyle, { $level: recursiveLevel, $isActive: isActive, $isCollapsable: isArrayType, children: /* @__PURE__ */ jsxRuntime.jsxs(
               CollapseLabel,
               {
                 alignItems: "center",
-                isCollapsable: isArrayType,
+                $isCollapsable: isArrayType,
                 ...isArrayType && {
                   onClick: () => handleClickToggleSubLevel(value),
                   "aria-expanded": isActive,
@@ -796,7 +795,7 @@ const SubActionRow = ({
                 },
                 title: label,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, children: rbac.capitalise(label) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { ellipsis: true, children: rbac.capitalise(label) }),
                   required && /* @__PURE__ */ jsxRuntime.jsx(RequiredSign, {}),
                   /* @__PURE__ */ jsxRuntime.jsx(CarretIcon, { $isActive: isActive })
                 ]
@@ -907,14 +906,14 @@ const SubActionRow = ({
     })
   ] });
 };
-const LeftBorderTimeline = styled__default.default(designSystem.Box)`
-  border-left: ${({ isVisible, theme }) => isVisible ? `4px solid ${theme.colors.primary200}` : "4px solid transparent"};
+const LeftBorderTimeline = styledComponents.styled(designSystem.Box)`
+  border-left: ${({ $isVisible, theme }) => $isVisible ? `4px solid ${theme.colors.primary200}` : "4px solid transparent"};
 `;
-const RowStyle = styled__default.default(designSystem.Flex)`
+const RowStyle = styledComponents.styled(designSystem.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};
@@ -923,9 +922,10 @@ const RowStyle = styled__default.default(designSystem.Flex)`
         ${activeStyle(theme)}
       }
   `}
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+  ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
 `;
-const TopTimeline = styled__default.default.div`
+const RowLabel = styledComponents.styled(designSystem.Typography)``;
+const TopTimeline = styledComponents.styled.div`
   padding-top: ${({ theme }) => theme.spaces[2]};
   margin-top: ${({ theme }) => theme.spaces[2]};
   width: 0.4rem;
@@ -933,7 +933,7 @@ const TopTimeline = styled__default.default.div`
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 `;
-const StyledBox$1 = styled__default.default(designSystem.Box)`
+const StyledBox$1 = styledComponents.styled(designSystem.Box)`
   transform: translate(-4px, -12px);
 
   &:before {
@@ -944,13 +944,13 @@ const StyledBox$1 = styled__default.default(designSystem.Box)`
     display: block;
   }
 `;
-const Svg = styled__default.default.svg`
+const Svg = styledComponents.styled.svg`
   position: relative;
   flex-shrink: 0;
   transform: translate(-0.5px, -1px);
 
   * {
-    fill: ${({ theme, color }) => theme.colors[color]};
+    fill: ${({ theme, $color }) => theme.colors[$color]};
   }
 `;
 const Header = ({ headers = [], label }) => {
@@ -974,8 +974,8 @@ const Header = ({ headers = [], label }) => {
     })
   ] });
 };
-const activeStyle = (theme) => styled.css`
-  ${designSystem.Typography} {
+const activeStyle = (theme) => styledComponents.css`
+  ${RowLabel} {
     color: ${theme.colors.primary600};
     font-weight: ${theme.fontWeights.bold};
   }
@@ -995,13 +995,13 @@ const ConditionsButtonImpl = ({
   variant = "tertiary"
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonContainer, { hasConditions, className, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant, startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cog, {}), onClick, children: formatMessage({
+  return /* @__PURE__ */ jsxRuntime.jsx(ButtonContainer, { $hasConditions: hasConditions, className, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant, startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cog, {}), onClick, children: formatMessage({
     id: "global.settings",
     defaultMessage: "Settings"
   }) }) });
 };
-const ButtonContainer = styled__default.default(designSystem.Box)`
-  ${({ hasConditions, disabled, theme }) => hasConditions && `
+const ButtonContainer = styledComponents.styled(designSystem.Box)`
+  ${({ $hasConditions, theme }) => $hasConditions && `
     &:before {
       content: '';
       position: absolute;
@@ -1010,11 +1010,11 @@ const ButtonContainer = styled__default.default(designSystem.Box)`
       width: 6px;
       height: 6px;
       border-radius: 2rem;
-      background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600};
+      background: ${theme.colors.primary600};
     }
   `}
 `;
-const ConditionsButton = styled__default.default(ConditionsButtonImpl)``;
+const ConditionsButton = styledComponents.styled(ConditionsButtonImpl)``;
 
 const ConditionsModal = ({
   actions = [],
@@ -1139,7 +1139,7 @@ const ActionRow = ({
       onChange(name, getNewStateFromChangedValues(arrayOfOptionsGroupedByCategory, val));
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "li", background: isGrey ? "neutral100" : "neutral0", paddingBottom: 3, paddingTop: 3, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "li", background: isGrey ? "neutral100" : "neutral0", paddingBottom: 3, paddingTop: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingLeft: 6, style: { width: 180 }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: [
         formatMessage({
@@ -1279,7 +1279,7 @@ const Collapse = ({
     return generateCheckboxesActions(availableActions, modifiedData, pathToData);
   }, [availableActions, modifiedData, pathToData]);
   const doesConditionButtonHasConditions = checkboxesActions.some((action) => action.hasConditions);
-  return /* @__PURE__ */ jsxRuntime.jsxs(BoxWrapper, { isActive, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(BoxWrapper, { $isActive: isActive, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Wrapper,
       {
@@ -1320,7 +1320,7 @@ const Collapse = ({
                   hasConditions && /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.Box,
                     {
-                      as: "span",
+                      tag: "span",
                       position: "absolute",
                       top: "-6px",
                       left: "37px",
@@ -1360,7 +1360,7 @@ const Collapse = ({
                 hasConditions && /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.Box,
                   {
-                    as: "span",
+                    tag: "span",
                     position: "absolute",
                     top: "-6px",
                     left: "37px",
@@ -1467,26 +1467,26 @@ const activeRowStyle = (theme, isActive) => `
     ${() => activeRowStyle(theme, isActive)}
   }
 `;
-const Wrapper = styled__default.default(designSystem.Flex)`
+const Wrapper = styledComponents.styled(designSystem.Flex)`
   border: 1px solid transparent;
 `;
-const BoxWrapper = styled__default.default.div`
+const BoxWrapper = styledComponents.styled.div`
   display: inline-flex;
   min-width: 100%;
 
   ${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__default.default(designSystem.Flex)`
+const Cell = styledComponents.styled(designSystem.Flex)`
   width: ${cellWidth};
   position: relative;
 `;
-const Chevron = styled__default.default(designSystem.Box)`
+const Chevron = styledComponents.styled(designSystem.Box)`
   display: none;
   svg {
     width: 11px;
@@ -1589,7 +1589,7 @@ const ContentTypes = ({
     )
   ] });
 };
-const StyledBox = styled__default.default(designSystem.Box)`
+const StyledBox = styledComponents.styled(designSystem.Box)`
   overflow-x: auto;
 `;
 
@@ -1597,73 +1597,53 @@ const PluginsAndSettingsPermissions = ({
   layout,
   ...restProps
 }) => {
-  const [openedCategory, setOpenedCategory] = React__namespace.useState(null);
-  const handleOpenCategory = (categoryName) => {
-    setOpenedCategory(categoryName === openedCategory ? null : categoryName);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, background: "neutral0", children: layout.map(({ category, categoryId, childrenForm }, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { size: "M", children: layout.map(({ category, categoryId, childrenForm }, index) => {
     return /* @__PURE__ */ jsxRuntime.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 } = reactIntl.useIntl();
-  const handleClick = () => {
-    onOpenCategory(name);
-  };
   const categoryName = name.split("::").pop() ?? "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    designSystem.Accordion,
-    {
-      expanded: isOpen,
-      onToggle: handleClick,
-      id: `accordion-${name}`,
-      variant: isWhite ? "primary" : "secondary",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.AccordionToggle,
-          {
-            title: rbac.capitalise(categoryName),
-            description: `${formatMessage(
-              { id: "Settings.permissions.category", defaultMessage: categoryName },
-              { category: categoryName }
-            )} ${kind === "plugins" ? "plugin" : kind}`
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, children: childrenForm.map(({ actions, subCategoryName, subCategoryId }) => /* @__PURE__ */ jsxRuntime.jsx(
-          SubCategory,
-          {
-            actions,
-            categoryName,
-            isFormDisabled,
-            subCategoryName,
-            pathToData: [...pathToData, subCategoryId]
-          },
-          subCategoryName
-        )) }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Accordion.Trigger,
+      {
+        description: `${formatMessage(
+          { id: "Settings.permissions.category", defaultMessage: categoryName },
+          { category: categoryName }
+        )} ${kind === "plugins" ? "plugin" : kind}`,
+        children: rbac.capitalise(categoryName)
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, children: childrenForm.map(({ actions, subCategoryName, subCategoryId }) => /* @__PURE__ */ jsxRuntime.jsx(
+      SubCategory,
+      {
+        actions,
+        categoryName,
+        isFormDisabled,
+        subCategoryName,
+        pathToData: [...pathToData, subCategoryId]
+      },
+      subCategoryName
+    )) }) })
+  ] });
 };
 const SubCategory = ({
   actions = [],
@@ -1742,7 +1722,7 @@ const SubCategory = ({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 6, paddingBottom: 6, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 2, style: { flex: 1 }, children: formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, { disabled: isFormDisabled, hasConditions, children: /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, { $disabled: isFormDisabled, $hasConditions: hasConditions, children: /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.Checkbox,
             {
               name: checkboxName,
@@ -1781,14 +1761,14 @@ const SubCategory = ({
     )
   ] });
 };
-const Border = styled__default.default(designSystem.Box)`
+const Border = styledComponents.styled(designSystem.Box)`
   align-self: center;
   border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
-const CheckboxWrapper = styled__default.default.div`
+const CheckboxWrapper = styledComponents.styled.div`
   position: relative;
   word-break: keep-all;
-  ${({ hasConditions, disabled, theme }) => hasConditions && `
+  ${({ $hasConditions, $disabled, theme }) => $hasConditions && `
     &:before {
       content: '';
       position: absolute;
@@ -1797,7 +1777,7 @@ const CheckboxWrapper = styled__default.default.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};
     }
   `}
 `;
@@ -2082,4 +2062,4 @@ const init = (layout, permissions) => {
 };
 
 exports.Permissions = Permissions;
-//# sourceMappingURL=Permissions-NlSnXUKO.js.map
+//# sourceMappingURL=Permissions-kWoGUyLH.js.map