@strapi/review-workflows 5.0.0-beta.5 → 5.0.0-beta.7

package/dist/_chunks/{_id-D4CXKOqG.mjs → _id-UJ-8gken.mjs}

@@ -2,18 +2,17 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useTracking, useForm, useField, InputRenderer as InputRenderer$1, useNotification, ConfirmDialog, Page, useAPIErrorHandler, useRBAC, Form, BackButton } from "@strapi/admin/strapi-admin";
 import { useLicenseLimits } from "@strapi/admin/strapi-admin/ee";
-import { Box, Typography, Flex, IconButton, MultiSelectOption, useComposedRefs, VisuallyHidden, Accordion, AccordionToggle, AccordionContent, Grid, GridItem, SingleSelect, SingleSelectOption, TextInput, MultiSelect, MultiSelectGroup, useCollator, Button } from "@strapi/design-system";
+import { Box, Typography, Flex, MenuItem, Menu, IconButton, MultiSelectOption, useComposedRefs, VisuallyHidden, Accordion, AccordionToggle, AccordionContent, Grid, GridItem, Field, SingleSelect, SingleSelectOption, TextInput, MultiSelect, MultiSelectGroup, useCollator, Button } from "@strapi/design-system";
 import { PlusCircle, EyeStriked, More, Drag, Duplicate, Check } from "@strapi/icons";
 import { generateNKeysBetween } from "fractional-indexing";
 import { useIntl } from "react-intl";
 import { useDispatch } from "react-redux";
 import { useParams, useNavigate } from "react-router-dom";
 import * as yup from "yup";
-import { r as reviewWorkflowsApi, A as AVAILABLE_COLORS, g as getStageColorByHex, u as useGetContentTypesQuery, a as useTypedSelector, C as CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME, b as CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME, L as LimitsModal, i as isBaseQueryError } from "./index-D7Y0ofdg.mjs";
-import { D as DRAG_DROP_TYPES, u as useReviewWorkflows, a as DragLayerRendered, H as Header, R as Root } from "./Layout-facLKucY.mjs";
-import { MenuItem, Menu } from "@strapi/design-system/v2";
+import { r as reviewWorkflowsApi, A as AVAILABLE_COLORS, g as getStageColorByHex, u as useGetContentTypesQuery, a as useTypedSelector, C as CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME, b as CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME, L as LimitsModal, i as isBaseQueryError } from "./index-DmQNXb0P.mjs";
+import { D as DRAG_DROP_TYPES, u as useReviewWorkflows, a as DragLayerRendered, H as Header, R as Root } from "./Layout-CJYuYwXO.mjs";
 import { getEmptyImage } from "react-dnd-html5-backend";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { useDrop, useDrag } from "react-dnd";
 const adminApi = reviewWorkflowsApi.injectEndpoints({
   endpoints(builder) {
@@ -249,7 +248,7 @@ const AddStage = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(
     StyledButton,
     {
-      as: "button",
+      tag: "button",
       background: "neutral0",
       border: "neutral150",
       paddingBottom: 3,
@@ -258,62 +257,23 @@ const AddStage = ({ children, ...props }) => {
       paddingTop: 3,
       shadow: "filterShadow",
       ...props,
-      children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true }),
-        /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral500", children })
-      ] })
+      children: /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
+        /* @__PURE__ */ jsx(PlusCircle, { width: "2.4rem", height: "2.4rem", "aria-hidden": true }),
+        children
+      ] }) })
     }
   );
 };
-const StyledAddIcon = styled(PlusCircle)`
-  > circle {
-    fill: ${({ theme }) => theme.colors.neutral150};
-  }
-  > path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
 const StyledButton = styled(Box)`
   border-radius: 26px;
-
-  svg {
-    height: ${({ theme }) => theme.spaces[6]};
-    width: ${({ theme }) => theme.spaces[6]};
-
-    > path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
+  color: ${({ theme }) => theme.colors.neutral500};
 
   &:hover {
-    color: ${({ theme }) => theme.colors.primary600} !important;
-    ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600} !important;
-    }
-
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
-    }
+    color: ${({ theme }) => theme.colors.primary600};
   }
 
   &:active {
-    ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
-    }
+    color: ${({ theme }) => theme.colors.primary600};
   }
 `;
 const Stages = ({ canDelete = true, canUpdate = true, isCreating = false }) => {
@@ -343,9 +303,9 @@ const Stages = ({ canDelete = true, canUpdate = true, isCreating = false }) => {
           gap: 6,
           zIndex: 2,
           position: "relative",
-          as: "ol",
+          tag: "ol",
           children: stages.map((stage, index) => {
-            return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
+            return /* @__PURE__ */ jsx(Box, { tag: "li", children: /* @__PURE__ */ jsx(
               Stage,
               {
                 index,
@@ -476,7 +436,7 @@ const Stage = ({
   const handleCloneClick = () => {
     addFieldRow("stages", { name, color, permissions });
   };
-  return /* @__PURE__ */ jsxs(Box, { ref: (ref) => composedRef(ref), children: [
+  return /* @__PURE__ */ jsxs(Box, { ref: composedRef, children: [
     liveText && /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
     isDragging ? /* @__PURE__ */ jsx(
       Box,
@@ -515,7 +475,7 @@ const Stage = ({
                 /* @__PURE__ */ jsxs(Menu.Root, { children: [
                   /* @__PURE__ */ jsxs(ContextMenuTrigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
                     /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
-                    /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", children: formatMessage({
+                    /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage({
                       id: "[tbdb].components.DynamicZone.more-actions",
                       defaultMessage: "More actions"
                     }) })
@@ -535,7 +495,7 @@ const Stage = ({
                   DragIconButton,
                   {
                     background: "transparent",
-                    forwardedAs: "div",
+                    tag: "div",
                     hasRadius: true,
                     role: "button",
                     noBorder: true,
@@ -652,54 +612,55 @@ const ColorSelector = ({ disabled, label, name, required }) => {
     color: hex
   }));
   const { themeColorName } = getStageColorByHex(value) ?? {};
-  return /* @__PURE__ */ jsx(
-    SingleSelect,
-    {
-      disabled,
-      error,
-      required,
-      label,
-      onChange: (v) => {
-        onChange(name, v.toString());
-      },
-      value: value?.toUpperCase(),
-      startIcon: /* @__PURE__ */ jsx(
-        Flex,
-        {
-          as: "span",
-          height: 2,
-          background: value,
-          borderColor: themeColorName === "neutral0" ? "neutral150" : "transparent",
-          hasRadius: true,
-          shrink: 0,
-          width: 2
-        }
-      ),
-      children: colorOptions.map(({ value: value2, label: label2, color }) => {
-        const { themeColorName: themeColorName2 } = getStageColorByHex(color) || {};
-        return /* @__PURE__ */ jsx(
-          SingleSelectOption,
+  return /* @__PURE__ */ jsxs(Field.Root, { error, name, required, children: [
+    /* @__PURE__ */ jsx(Field.Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      SingleSelect,
+      {
+        disabled,
+        onChange: (v) => {
+          onChange(name, v.toString());
+        },
+        value: value?.toUpperCase(),
+        startIcon: /* @__PURE__ */ jsx(
+          Flex,
           {
-            value: value2,
-            startIcon: /* @__PURE__ */ jsx(
-              Flex,
-              {
-                as: "span",
-                height: 2,
-                background: color,
-                borderColor: themeColorName2 === "neutral0" ? "neutral150" : "transparent",
-                hasRadius: true,
-                shrink: 0,
-                width: 2
-              }
-            ),
-            children: label2
-          },
-          value2
-        );
-      })
-    }
-  );
+            tag: "span",
+            height: 2,
+            background: value,
+            borderColor: themeColorName === "neutral0" ? "neutral150" : "transparent",
+            hasRadius: true,
+            shrink: 0,
+            width: 2
+          }
+        ),
+        children: colorOptions.map(({ value: value2, label: label2, color }) => {
+          const { themeColorName: themeColorName2 } = getStageColorByHex(color) || {};
+          return /* @__PURE__ */ jsx(
+            SingleSelectOption,
+            {
+              value: value2,
+              startIcon: /* @__PURE__ */ jsx(
+                Flex,
+                {
+                  tag: "span",
+                  height: 2,
+                  background: color,
+                  borderColor: themeColorName2 === "neutral0" ? "neutral150" : "transparent",
+                  hasRadius: true,
+                  shrink: 0,
+                  width: 2
+                }
+              ),
+              children: label2
+            },
+            value2
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(Field.Error, {})
+  ] });
 };
 const PermissionsField = ({ disabled, name, placeholder, required }) => {
   const { formatMessage } = useIntl();
@@ -723,68 +684,76 @@ const PermissionsField = ({ disabled, name, placeholder, required }) => {
     }
   }, [formatMessage, isLoading, roles, toggleNotification]);
   if (!isLoading && filteredRoles.length === 0) {
-    return /* @__PURE__ */ jsx(
-      TextInput,
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
       {
-        disabled: true,
         name,
         hint: formatMessage({
           id: "Settings.review-workflows.stage.permissions.noPermissions.description",
           defaultMessage: "You don’t have the permission to see roles"
         }),
-        label: formatMessage({
-          id: "Settings.review-workflows.stage.permissions.label",
-          defaultMessage: "Roles that can change this stage"
-        }),
-        placeholder: formatMessage({
-          id: "components.NotAllowedInput.text",
-          defaultMessage: "No permissions to see this field"
-        }),
         required,
-        startAction: /* @__PURE__ */ jsx(StyledIcon, {}),
-        type: "text",
-        value: ""
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-end", gap: 3, children: [
-      /* @__PURE__ */ jsx(PermissionWrapper, { grow: 1, children: /* @__PURE__ */ jsx(
-        MultiSelect,
-        {
-          disabled,
-          error,
-          id: name,
-          label: formatMessage({
+        children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
             id: "Settings.review-workflows.stage.permissions.label",
             defaultMessage: "Roles that can change this stage"
-          }),
-          onChange: (values) => {
-            const permissions = values.map((value2) => ({
-              role: parseInt(value2, 10),
-              action: "admin::review-workflows.stage.transition"
-            }));
-            onChange(name, permissions);
-          },
-          placeholder,
-          required: true,
-          value: value.map((permission) => `${permission.role}`),
-          withTags: true,
-          children: /* @__PURE__ */ jsx(
-            MultiSelectGroup,
+          }) }),
+          /* @__PURE__ */ jsx(
+            TextInput,
             {
-              label: formatMessage({
-                id: "Settings.review-workflows.stage.permissions.allRoles.label",
-                defaultMessage: "All roles"
+              disabled: true,
+              placeholder: formatMessage({
+                id: "components.NotAllowedInput.text",
+                defaultMessage: "No permissions to see this field"
               }),
-              values: filteredRoles.map((r) => `${r.id}`),
-              children: filteredRoles.map((role) => {
-                return /* @__PURE__ */ jsx(NestedOption$1, { value: `${role.id}`, children: role.name }, role.id);
-              })
+              startAction: /* @__PURE__ */ jsx(StyledIcon, {}),
+              type: "text",
+              value: ""
             }
-          )
-        }
-      ) }),
+          ),
+          /* @__PURE__ */ jsx(Field.Hint, {})
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-end", gap: 3, children: [
+      /* @__PURE__ */ jsx(PermissionWrapper, { grow: 1, children: /* @__PURE__ */ jsxs(Field.Root, { error, name, required: true, children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: "Settings.review-workflows.stage.permissions.label",
+          defaultMessage: "Roles that can change this stage"
+        }) }),
+        /* @__PURE__ */ jsx(
+          MultiSelect,
+          {
+            disabled,
+            onChange: (values) => {
+              const permissions = values.map((value2) => ({
+                role: parseInt(value2, 10),
+                action: "admin::review-workflows.stage.transition"
+              }));
+              onChange(name, permissions);
+            },
+            placeholder,
+            value: value.map((permission) => `${permission.role}`),
+            withTags: true,
+            children: /* @__PURE__ */ jsx(
+              MultiSelectGroup,
+              {
+                label: formatMessage({
+                  id: "Settings.review-workflows.stage.permissions.allRoles.label",
+                  defaultMessage: "All roles"
+                }),
+                values: filteredRoles.map((r) => `${r.id}`),
+                children: filteredRoles.map((role) => {
+                  return /* @__PURE__ */ jsx(NestedOption$1, { value: `${role.id}`, children: role.name }, role.id);
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(Field.Error, {})
+      ] }) }),
       /* @__PURE__ */ jsx(
         IconButton,
         {
@@ -881,81 +850,82 @@ const ContentTypesSelector = ({ disabled }) => {
     label: contentType.info.displayName,
     value: contentType.uid
   }));
-  return /* @__PURE__ */ jsx(
-    MultiSelect,
-    {
-      customizeContent: (value2) => formatMessage(
-        {
-          id: "Settings.review-workflows.workflow.contentTypes.displayValue",
-          defaultMessage: "{count} {count, plural, one {content type} other {content types}} selected"
-        },
-        { count: value2?.length }
-      ),
-      disabled: isDisabled,
-      error,
-      label: formatMessage({
-        id: "Settings.review-workflows.workflow.contentTypes.label",
-        defaultMessage: "Associated to"
-      }),
-      onChange: (values) => {
-        onChange("contentTypes", values);
-      },
-      value,
-      placeholder: formatMessage({
-        id: "Settings.review-workflows.workflow.contentTypes.placeholder",
-        defaultMessage: "Select"
-      }),
-      children: [
-        ...collectionTypes.length > 0 ? [
-          {
-            label: formatMessage({
-              id: "Settings.review-workflows.workflow.contentTypes.collectionTypes.label",
-              defaultMessage: "Collection Types"
-            }),
-            children: collectionTypes
-          }
-        ] : [],
-        ...singleTypes.length > 0 ? [
-          {
-            label: formatMessage({
-              id: "Settings.review-workflows.workflow.contentTypes.singleTypes.label",
-              defaultMessage: "Single Types"
-            }),
-            children: singleTypes
-          }
-        ] : []
-      ].map((opt) => {
-        return /* @__PURE__ */ jsx(
-          MultiSelectGroup,
+  return /* @__PURE__ */ jsxs(Field.Root, { error, name: "contentTypes", children: [
+    /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+      id: "Settings.review-workflows.workflow.contentTypes.label",
+      defaultMessage: "Associated to"
+    }) }),
+    /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        customizeContent: (value2) => formatMessage(
           {
-            label: opt.label,
-            values: opt.children.map((child) => child.value.toString()),
-            children: opt.children.map((child) => {
-              const { name: assignedWorkflowName } = workflows?.find(
-                (workflow) => (currentWorkflow && workflow.id !== currentWorkflow.id || !currentWorkflow) && workflow.contentTypes.includes(child.value)
-              ) ?? {};
-              return /* @__PURE__ */ jsx(NestedOption, { value: child.value, children: /* @__PURE__ */ jsx(Typography, {
-                // @ts-expect-error - formatMessage options doesn't expect to be a React component but that's what we need actually for the <i> and <em> components
-                children: formatMessage(
-                  {
-                    id: "Settings.review-workflows.workflow.contentTypes.assigned.notice",
-                    defaultMessage: "{label} {name, select, undefined {} other {<i>(assigned to <em>{name}</em> workflow)</i>}}"
-                  },
-                  {
-                    label: child.label,
-                    name: assignedWorkflowName,
-                    em: (...children) => /* @__PURE__ */ jsx(Typography, { as: "em", fontWeight: "bold", children }),
-                    i: (...children) => /* @__PURE__ */ jsx(ContentTypeTakeNotice, { children })
-                  }
-                )
-              }) }, child.value);
-            })
+            id: "Settings.review-workflows.workflow.contentTypes.displayValue",
+            defaultMessage: "{count} {count, plural, one {content type} other {content types}} selected"
           },
-          opt.label
-        );
-      })
-    }
-  );
+          { count: value2?.length }
+        ),
+        disabled: isDisabled,
+        onChange: (values) => {
+          onChange("contentTypes", values);
+        },
+        value,
+        placeholder: formatMessage({
+          id: "Settings.review-workflows.workflow.contentTypes.placeholder",
+          defaultMessage: "Select"
+        }),
+        children: [
+          ...collectionTypes.length > 0 ? [
+            {
+              label: formatMessage({
+                id: "Settings.review-workflows.workflow.contentTypes.collectionTypes.label",
+                defaultMessage: "Collection Types"
+              }),
+              children: collectionTypes
+            }
+          ] : [],
+          ...singleTypes.length > 0 ? [
+            {
+              label: formatMessage({
+                id: "Settings.review-workflows.workflow.contentTypes.singleTypes.label",
+                defaultMessage: "Single Types"
+              }),
+              children: singleTypes
+            }
+          ] : []
+        ].map((opt) => {
+          return /* @__PURE__ */ jsx(
+            MultiSelectGroup,
+            {
+              label: opt.label,
+              values: opt.children.map((child) => child.value.toString()),
+              children: opt.children.map((child) => {
+                const { name: assignedWorkflowName } = workflows?.find(
+                  (workflow) => (currentWorkflow && workflow.id !== currentWorkflow.id || !currentWorkflow) && workflow.contentTypes.includes(child.value)
+                ) ?? {};
+                return /* @__PURE__ */ jsx(NestedOption, { value: child.value, children: /* @__PURE__ */ jsx(Typography, {
+                  // @ts-expect-error - formatMessage options doesn't expect to be a React component but that's what we need actually for the <i> and <em> components
+                  children: formatMessage(
+                    {
+                      id: "Settings.review-workflows.workflow.contentTypes.assigned.notice",
+                      defaultMessage: "{label} {name, select, undefined {} other {<i>(assigned to <em>{name}</em> workflow)</i>}}"
+                    },
+                    {
+                      label: child.label,
+                      name: assignedWorkflowName,
+                      em: (...children) => /* @__PURE__ */ jsx(Typography, { tag: "em", fontWeight: "bold", children }),
+                      i: (...children) => /* @__PURE__ */ jsx(ContentTypeTakeNotice, { children })
+                    }
+                  )
+                }) }, child.value);
+              })
+            },
+            opt.label
+          );
+        })
+      }
+    )
+  ] });
 };
 const NestedOption = styled(MultiSelectOption)`
   padding-left: ${({ theme }) => theme.spaces[7]};
@@ -1308,4 +1278,4 @@ const ProtectedEditPage = () => {
 export {
   ProtectedEditPage
 };
-//# sourceMappingURL=_id-D4CXKOqG.mjs.map
+//# sourceMappingURL=_id-UJ-8gken.mjs.map