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

package/dist/admin/{Permissions--am-uI7v.mjs → Permissions-7t-Lns0S.mjs}

@@ -8,7 +8,7 @@ import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
 import set from 'lodash/set';
 import { useIntl } from 'react-intl';
-import { A as isObject$1 } from './index-IU9ZrCxt.mjs';
+import { A as isObject$1 } from './index-3zwKJbP6.mjs';
 import { createContext } from '@radix-ui/react-context';
 import isEqual from 'lodash/isEqual';
 import isObject from 'lodash/isObject';
@@ -16,9 +16,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 { CaretDown, Cog, ChevronUp, ChevronDown } from '@strapi/icons';
-import { q as capitalise } from './Theme-vNSAMTAv.mjs';
+import { styled, css } from 'styled-components';
+import { v as capitalise } from './Theme-PSeDjw5h.mjs';
 import upperFirst from 'lodash/upperFirst';
 
 const [PermissionsDataManagerProvider, usePermissionsDataManagerContext] = createContext("PermissionsDataManager");
@@ -392,6 +392,24 @@ const RowLabelWithCheckbox = ({
   value
 }) => {
   const { formatMessage } = 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__ */ jsxs(Flex, { alignItems: "center", paddingLeft: 6, width: firstRowWidth, shrink: 0, children: [
     /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(
       Checkbox,
@@ -414,33 +432,10 @@ const RowLabelWithCheckbox = ({
         checked: someChecked ? "indeterminate" : value
       }
     ) }),
-    /* @__PURE__ */ 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__ */ jsx(
-            Typography,
-            {
-              fontWeight: isActive ? "bold" : void 0,
-              textColor: isActive ? "primary600" : "neutral800",
-              ellipsis: true,
-              children: capitalise(label)
-            }
-          ),
-          children
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs(CollapseLabel, { ...collapseLabelProps, children: [
+      /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: label }),
+      children
+    ] })
   ] });
 };
 
@@ -459,7 +454,7 @@ const CollapsePropertyMatrix = ({
     }),
     [availableActions, propertyName]
   );
-  return /* @__PURE__ */ jsxs(Flex, { display: "inline-flex", direction: "column", minWidth: 0, children: [
+  return /* @__PURE__ */ jsxs(Flex, { display: "inline-flex", direction: "column", alignItems: "stretch", minWidth: 0, children: [
     /* @__PURE__ */ jsx(Header, { label, headers: propertyActions }),
     /* @__PURE__ */ jsx(Box, { children: childrenForm.map(({ children: childrenForm2, label: label2, value, required }, i) => /* @__PURE__ */ jsx(
       ActionRow$1,
@@ -589,7 +584,7 @@ const ActionRow$1 = ({
                           }
                         });
                       },
-                      value: checkboxValue
+                      checked: checkboxValue
                     }
                   )
                 },
@@ -671,20 +666,28 @@ const Wrapper$1 = styled(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 = styled(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]};
 `;
@@ -722,7 +725,7 @@ const SubActionRow = ({
       const isActive = rowToOpen === value;
       return /* @__PURE__ */ jsxs(LeftBorderTimeline, { $isVisible: isVisible, children: [
         /* @__PURE__ */ jsxs(Flex, { height: rowHeight, children: [
-          /* @__PURE__ */ jsx(StyledBox$1, { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(StyledBox, { children: /* @__PURE__ */ jsx(
             Svg,
             {
               width: "20",
@@ -757,7 +760,7 @@ const SubActionRow = ({
                 },
                 title: label,
                 children: [
-                  /* @__PURE__ */ jsx(RowLabel, { ellipsis: true, children: capitalise(label) }),
+                  /* @__PURE__ */ jsx(RowLabel, { ellipsis: true, children: label }),
                   required && /* @__PURE__ */ jsx(RequiredSign, {}),
                   /* @__PURE__ */ jsx(CarretIcon, { $isActive: isActive })
                 ]
@@ -805,7 +808,7 @@ const SubActionRow = ({
                               }
                             });
                           },
-                          value: checkboxValue
+                          checked: checkboxValue
                         }
                       )
                     },
@@ -874,13 +877,13 @@ const RowStyle = styled(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)};
@@ -894,7 +897,7 @@ const TopTimeline = styled.div`
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 `;
-const StyledBox$1 = styled(Box)`
+const StyledBox = styled(Box)`
   transform: translate(-4px, -12px);
 
   &:before {
@@ -936,13 +939,10 @@ const Header = ({ headers = [], label }) => {
   ] });
 };
 const activeStyle = (theme) => 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};
     }
@@ -977,7 +977,8 @@ const ConditionsButton = styled(ConditionsButtonImpl)``;
 const ConditionsModal = ({
   actions = [],
   headerBreadCrumbs = [],
-  isFormDisabled
+  isFormDisabled,
+  onClose
 }) => {
   const { formatMessage } = useIntl();
   const { availableConditions, modifiedData, onChangeConditions } = usePermissionsDataManager();
@@ -1017,6 +1018,13 @@ const ConditionsModal = ({
       {}
     );
     onChangeConditions(conditionsWithoutCategory);
+    onClose && onClose();
+  };
+  const onCloseModal = () => {
+    setState(
+      createDefaultConditionsForm(actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory)
+    );
+    onClose && onClose();
   };
   return /* @__PURE__ */ jsxs(Modal.Content, { children: [
     /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Breadcrumbs, { id: "condition-modal-breadcrumbs", label: headerBreadCrumbs.join(", "), children: headerBreadCrumbs.map((label, index, arr) => /* @__PURE__ */ jsx(Crumb, { isCurrent: index === arr.length - 1, children: upperFirst(
@@ -1048,7 +1056,7 @@ const ConditionsModal = ({
       }) })
     ] }),
     /* @__PURE__ */ jsxs(Modal.Footer, { children: [
-      /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => onCloseModal(), children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
       /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, children: formatMessage({
         id: "Settings.permissions.conditions.apply",
         defaultMessage: "Apply"
@@ -1165,9 +1173,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__ */ jsx(
             Collapse,
@@ -1212,6 +1220,7 @@ const Collapse = ({
 }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const [isConditionModalOpen, setIsConditionModalOpen] = React.useState(false);
   const mainData = get(modifiedData, pathToData.split(".."), {});
   const dataWithoutCondition = React.useMemo(() => {
     return Object.keys(mainData).reduce((acc, current) => {
@@ -1238,7 +1247,7 @@ const Collapse = ({
             {
               isCollapsable: true,
               isFormDisabled,
-              label,
+              label: capitalise(label),
               checkboxName: pathToData,
               onChange: onChangeParentCheckbox,
               onClick: onClickToggle,
@@ -1336,17 +1345,29 @@ const Collapse = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { bottom: "10px", right: "9px", position: "absolute", children: /* @__PURE__ */ jsxs(Modal.Root, { children: [
-      /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(ConditionsButton, { hasConditions: doesConditionButtonHasConditions }) }),
-      /* @__PURE__ */ jsx(
-        ConditionsModal,
-        {
-          headerBreadCrumbs: [label, "Settings.permissions.conditions.conditions"],
-          actions: checkboxesActions,
-          isFormDisabled
-        }
-      )
-    ] }) })
+    /* @__PURE__ */ jsx(Box, { bottom: "10px", right: "9px", position: "absolute", children: /* @__PURE__ */ jsxs(
+      Modal.Root,
+      {
+        open: isConditionModalOpen,
+        onOpenChange: () => {
+          setIsConditionModalOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(ConditionsButton, { hasConditions: doesConditionButtonHasConditions }) }),
+          /* @__PURE__ */ jsx(
+            ConditionsModal,
+            {
+              headerBreadCrumbs: [label, "Settings.permissions.conditions.conditions"],
+              actions: checkboxesActions,
+              isFormDisabled,
+              onClose: () => {
+                setIsConditionModalOpen(false);
+              }
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 };
 const generateCheckboxesActions = (availableActions, modifiedData, pathToData) => {
@@ -1389,16 +1410,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)}
@@ -1428,10 +1448,12 @@ const Cell = styled(Flex)`
 `;
 const Chevron = styled(Box)`
   display: none;
+
   svg {
-    width: 11px;
+    width: 1.4rem;
   }
-  * {
+
+  path {
     fill: ${({ theme }) => theme.colors.primary600};
   }
 `;
@@ -1515,7 +1537,7 @@ const ContentTypes = ({
   layout: { actions, subjects }
 }) => {
   const sortedSubjects = [...subjects].sort((a, b) => a.label.localeCompare(b.label));
-  return /* @__PURE__ */ jsxs(StyledBox, { background: "neutral0", children: [
+  return /* @__PURE__ */ jsxs(Box, { background: "neutral0", children: [
     /* @__PURE__ */ jsx(GlobalActions, { actions, kind, isFormDisabled }),
     /* @__PURE__ */ jsx(
       ContentTypeCollapses,
@@ -1528,9 +1550,6 @@ const ContentTypes = ({
     )
   ] });
 };
-const StyledBox = styled(Box)`
-  overflow-x: auto;
-`;
 
 const PluginsAndSettingsPermissions = ({
   layout,
@@ -1593,6 +1612,7 @@ const SubCategory = ({
   pathToData
 }) => {
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const [isConditionModalOpen, setIsConditionModalOpen] = React.useState(false);
   const { formatMessage } = useIntl();
   const mainData = get(modifiedData, pathToData, {});
   const dataWithoutCondition = React.useMemo(() => {
@@ -1671,17 +1691,29 @@ const SubCategory = ({
           }
         ) }) }, action);
       }) }),
-      /* @__PURE__ */ jsxs(Modal.Root, { children: [
-        /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(ConditionsButton, { hasConditions: doesButtonHasCondition }) }),
-        /* @__PURE__ */ jsx(
-          ConditionsModal,
-          {
-            headerBreadCrumbs: [categoryName, subCategoryName],
-            actions: formattedActions,
-            isFormDisabled
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxs(
+        Modal.Root,
+        {
+          open: isConditionModalOpen,
+          onOpenChange: () => {
+            setIsConditionModalOpen((prev) => !prev);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(ConditionsButton, { hasConditions: doesButtonHasCondition }) }),
+            /* @__PURE__ */ jsx(
+              ConditionsModal,
+              {
+                headerBreadCrumbs: [categoryName, subCategoryName],
+                actions: formattedActions,
+                isFormDisabled,
+                onClose: () => {
+                  setIsConditionModalOpen(false);
+                }
+              }
+            )
+          ]
+        }
+      )
     ] })
   ] }) });
 };
@@ -1983,4 +2015,4 @@ const init = (layout, permissions) => {
 };
 
 export { Permissions as P };
-//# sourceMappingURL=Permissions--am-uI7v.mjs.map
+//# sourceMappingURL=Permissions-7t-Lns0S.mjs.map