@strapi/admin 5.0.0-beta.15 → 5.0.0-beta.16

package/dist/admin/{Permissions-4O88Ora2.js → Permissions-qgk7SdYP.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-QO9bLgSs.js');
+const index = require('./index-dEjaesKw.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 styledComponents = require('styled-components');
 const icons = require('@strapi/icons');
-const Theme = require('./Theme-QO8ntQqL.js');
+const styledComponents = require('styled-components');
+const Theme = require('./Theme-KfX2lO_d.js');
 const upperFirst = require('lodash/upperFirst');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
@@ -428,6 +428,24 @@ const RowLabelWithCheckbox = ({
   value
 }) => {
   const { formatMessage } = reactIntl.useIntl();
+  const collapseLabelProps = {
+    title: label,
+    alignItems: "center",
+    $isCollapsable: isCollapsable
+  };
+  if (isCollapsable) {
+    Object.assign(collapseLabelProps, {
+      onClick,
+      "aria-expanded": isActive,
+      onKeyDown({ key }) {
+        if (key === "Enter" || key === " ") {
+          onClick();
+        }
+      },
+      tabIndex: 0,
+      role: "button"
+    });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", paddingLeft: 6, width: firstRowWidth, shrink: 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Checkbox,
@@ -450,33 +468,10 @@ const RowLabelWithCheckbox = ({
         checked: someChecked ? "indeterminate" : value
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      CollapseLabel,
-      {
-        title: label,
-        alignItems: "center",
-        $isCollapsable: isCollapsable,
-        ...isCollapsable && {
-          onClick,
-          "aria-expanded": isActive,
-          onKeyDown: ({ key }) => (key === "Enter" || key === " ") && onClick(),
-          tabIndex: 0,
-          role: "button"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Typography,
-            {
-              fontWeight: isActive ? "bold" : void 0,
-              textColor: isActive ? "primary600" : "neutral800",
-              ellipsis: true,
-              children: Theme.capitalise(label)
-            }
-          ),
-          children
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsxs(CollapseLabel, { ...collapseLabelProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, children: label }),
+      children
+    ] })
   ] });
 };
 
@@ -495,7 +490,7 @@ const CollapsePropertyMatrix = ({
     }),
     [availableActions, propertyName]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { display: "inline-flex", direction: "column", minWidth: 0, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { display: "inline-flex", direction: "column", alignItems: "stretch", minWidth: 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header, { label, headers: propertyActions }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: childrenForm.map(({ children: childrenForm2, label: label2, value, required }, i) => /* @__PURE__ */ jsxRuntime.jsx(
       ActionRow$1,
@@ -625,7 +620,7 @@ const ActionRow$1 = ({
                           }
                         });
                       },
-                      value: checkboxValue
+                      checked: checkboxValue
                     }
                   )
                 },
@@ -707,20 +702,28 @@ const Wrapper$1 = styledComponents.styled(designSystem.Flex)`
   height: ${rowHeight};
   flex: 1;
 
-  ${({ $isCollapsable, theme }) => $isCollapsable && `
+  &:hover {
+    ${({ $isCollapsable, theme }) => $isCollapsable && activeStyle(theme)}
+  }
+
+  ${({ $isCollapsable }) => $isCollapsable && `
       ${CarretIcon} {
-        display: block;
-        color: ${theme.colors.neutral100};
-      }
-      &:hover {
-        ${activeStyle(theme)}
+        display: flex;
       }
   `}
   ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
 `;
 const CarretIcon = styledComponents.styled(icons.CaretDown)`
   display: none;
-  width: 1rem;
+
+  svg {
+    width: 1.4rem;
+  }
+
+  path {
+    fill: ${({ theme }) => theme.colors.neutral200};
+  }
+
   transform: rotate(${({ $isActive }) => $isActive ? "180" : "0"}deg);
   margin-left: ${({ theme }) => theme.spaces[2]};
 `;
@@ -758,7 +761,7 @@ const SubActionRow = ({
       const isActive = rowToOpen === value;
       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(
+          /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { children: /* @__PURE__ */ jsxRuntime.jsx(
             Svg,
             {
               width: "20",
@@ -793,7 +796,7 @@ const SubActionRow = ({
                 },
                 title: label,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { ellipsis: true, children: Theme.capitalise(label) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { ellipsis: true, children: label }),
                   required && /* @__PURE__ */ jsxRuntime.jsx(RequiredSign, {}),
                   /* @__PURE__ */ jsxRuntime.jsx(CarretIcon, { $isActive: isActive })
                 ]
@@ -841,7 +844,7 @@ const SubActionRow = ({
                               }
                             });
                           },
-                          value: checkboxValue
+                          checked: checkboxValue
                         }
                       )
                     },
@@ -910,13 +913,13 @@ const RowStyle = styledComponents.styled(designSystem.Flex)`
   padding-left: ${({ theme }) => theme.spaces[4]};
   width: ${({ $level }) => 145 - $level * 36}px;
 
-  ${({ $isCollapsable, theme }) => $isCollapsable && `
+  &:hover {
+    ${({ $isCollapsable, theme }) => $isCollapsable && activeStyle(theme)}
+  }
+
+  ${({ $isCollapsable }) => $isCollapsable && `
       ${CarretIcon} {
-        display: block;
-        color: ${theme.colors.neutral100};
-      }
-      &:hover {
-        ${activeStyle(theme)}
+        display: flex;
       }
   `}
   ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
@@ -930,7 +933,7 @@ const TopTimeline = styledComponents.styled.div`
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 `;
-const StyledBox$1 = styledComponents.styled(designSystem.Box)`
+const StyledBox = styledComponents.styled(designSystem.Box)`
   transform: translate(-4px, -12px);
 
   &:before {
@@ -972,13 +975,10 @@ const Header = ({ headers = [], label }) => {
   ] });
 };
 const activeStyle = (theme) => styledComponents.css`
-  ${RowLabel} {
-    color: ${theme.colors.primary600};
-    font-weight: ${theme.fontWeights.bold};
-  }
-  ${CarretIcon} {
-    display: block;
+  color: ${theme.colors.primary600};
+  font-weight: ${theme.fontWeights.bold};
 
+  ${CarretIcon} {
     path {
       fill: ${theme.colors.primary600};
     }
@@ -1013,7 +1013,8 @@ const ConditionsButton = styledComponents.styled(ConditionsButtonImpl)``;
 const ConditionsModal = ({
   actions = [],
   headerBreadCrumbs = [],
-  isFormDisabled
+  isFormDisabled,
+  onClose
 }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { availableConditions, modifiedData, onChangeConditions } = usePermissionsDataManager();
@@ -1053,6 +1054,13 @@ const ConditionsModal = ({
       {}
     );
     onChangeConditions(conditionsWithoutCategory);
+    onClose && onClose();
+  };
+  const onCloseModal = () => {
+    setState(
+      createDefaultConditionsForm(actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory)
+    );
+    onClose && onClose();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Breadcrumbs, { id: "condition-modal-breadcrumbs", label: headerBreadCrumbs.join(", "), children: headerBreadCrumbs.map((label, index, arr) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Crumb, { isCurrent: index === arr.length - 1, children: upperFirst__default.default(
@@ -1084,7 +1092,7 @@ const ConditionsModal = ({
       }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: () => onCloseModal(), children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleSubmit, children: formatMessage({
         id: "Settings.permissions.conditions.apply",
         defaultMessage: "Apply"
@@ -1201,9 +1209,9 @@ const ContentTypeCollapses = ({
       {
         direction: "column",
         display: "inline-flex",
+        alignItems: "stretch",
         minWidth: "100%",
-        borderColor: "primary600",
-        borderWidth: isActive ? 1 : 0,
+        borderColor: isActive ? "primary600" : void 0,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Collapse,
@@ -1248,6 +1256,7 @@ const Collapse = ({
 }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const [isConditionModalOpen, setIsConditionModalOpen] = React__namespace.useState(false);
   const mainData = get__default.default(modifiedData, pathToData.split(".."), {});
   const dataWithoutCondition = React__namespace.useMemo(() => {
     return Object.keys(mainData).reduce((acc, current) => {
@@ -1274,7 +1283,7 @@ const Collapse = ({
             {
               isCollapsable: true,
               isFormDisabled,
-              label,
+              label: Theme.capitalise(label),
               checkboxName: pathToData,
               onChange: onChangeParentCheckbox,
               onClick: onClickToggle,
@@ -1372,17 +1381,29 @@ const Collapse = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { bottom: "10px", right: "9px", position: "absolute", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ConditionsButton, { hasConditions: doesConditionButtonHasConditions }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ConditionsModal,
-        {
-          headerBreadCrumbs: [label, "Settings.permissions.conditions.conditions"],
-          actions: checkboxesActions,
-          isFormDisabled
-        }
-      )
-    ] }) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { bottom: "10px", right: "9px", position: "absolute", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Modal.Root,
+      {
+        open: isConditionModalOpen,
+        onOpenChange: () => {
+          setIsConditionModalOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ConditionsButton, { hasConditions: doesConditionButtonHasConditions }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ConditionsModal,
+            {
+              headerBreadCrumbs: [label, "Settings.permissions.conditions.conditions"],
+              actions: checkboxesActions,
+              isFormDisabled,
+              onClose: () => {
+                setIsConditionModalOpen(false);
+              }
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 };
 const generateCheckboxesActions = (availableActions, modifiedData, pathToData) => {
@@ -1425,16 +1446,15 @@ const activeRowStyle = (theme, isActive) => `
     background-color: ${theme.colors.primary100};
     color: ${theme.colors.primary600};
     border-radius: ${isActive ? "2px 2px 0 0" : "2px"};
+    font-weight: ${theme.fontWeights.bold};
   }
+
   ${Chevron} {
     display: flex;
   }
   ${ConditionsButton} {
     display: block;
   }
-  &:hover {
-    ${activeStyle(theme)}
-  }
 
   &:focus-within {
     ${() => activeRowStyle(theme, isActive)}
@@ -1464,10 +1484,12 @@ const Cell = styledComponents.styled(designSystem.Flex)`
 `;
 const Chevron = styledComponents.styled(designSystem.Box)`
   display: none;
+
   svg {
-    width: 11px;
+    width: 1.4rem;
   }
-  * {
+
+  path {
     fill: ${({ theme }) => theme.colors.primary600};
   }
 `;
@@ -1551,7 +1573,7 @@ const ContentTypes = ({
   layout: { actions, subjects }
 }) => {
   const sortedSubjects = [...subjects].sort((a, b) => a.label.localeCompare(b.label));
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledBox, { background: "neutral0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", children: [
     /* @__PURE__ */ jsxRuntime.jsx(GlobalActions, { actions, kind, isFormDisabled }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ContentTypeCollapses,
@@ -1564,9 +1586,6 @@ const ContentTypes = ({
     )
   ] });
 };
-const StyledBox = styledComponents.styled(designSystem.Box)`
-  overflow-x: auto;
-`;
 
 const PluginsAndSettingsPermissions = ({
   layout,
@@ -1629,6 +1648,7 @@ const SubCategory = ({
   pathToData
 }) => {
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const [isConditionModalOpen, setIsConditionModalOpen] = React__namespace.useState(false);
   const { formatMessage } = reactIntl.useIntl();
   const mainData = get__default.default(modifiedData, pathToData, {});
   const dataWithoutCondition = React__namespace.useMemo(() => {
@@ -1707,17 +1727,29 @@ const SubCategory = ({
           }
         ) }) }, action);
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ConditionsButton, { hasConditions: doesButtonHasCondition }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ConditionsModal,
-          {
-            headerBreadCrumbs: [categoryName, subCategoryName],
-            actions: formattedActions,
-            isFormDisabled
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Modal.Root,
+        {
+          open: isConditionModalOpen,
+          onOpenChange: () => {
+            setIsConditionModalOpen((prev) => !prev);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ConditionsButton, { hasConditions: doesButtonHasCondition }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ConditionsModal,
+              {
+                headerBreadCrumbs: [categoryName, subCategoryName],
+                actions: formattedActions,
+                isFormDisabled,
+                onClose: () => {
+                  setIsConditionModalOpen(false);
+                }
+              }
+            )
+          ]
+        }
+      )
     ] })
   ] }) });
 };
@@ -2019,4 +2051,4 @@ const init = (layout, permissions) => {
 };
 
 exports.Permissions = Permissions;
-//# sourceMappingURL=Permissions-4O88Ora2.js.map
+//# sourceMappingURL=Permissions-qgk7SdYP.js.map