@strapi/design-system 2.0.0-rc.21 → 2.0.0-rc.22

package/dist/index.mjs

@@ -1808,7 +1808,7 @@ const MenuContent = React.forwardRef(
   ({ children, intersectionId, onCloseAutoFocus, popoverPlacement = "bottom-start", ...props }, ref) => {
     const [side, align] = popoverPlacement.split("-");
     return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuContent, { align, side, loop: true, onCloseAutoFocus, asChild: true, children: /* @__PURE__ */ jsxs(
-      Viewport$2,
+      Viewport$1,
       {
         ref,
         direction: "column",
@@ -1832,7 +1832,7 @@ const MenuContent = React.forwardRef(
     ) }) });
   }
 );
-const Viewport$2 = styled(Flex)`
+const Viewport$1 = styled(Flex)`
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
@@ -1971,7 +1971,7 @@ const SubmenuTrigger = styled(OptionButton)`
 `;
 const MenuSubContent = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, { sideOffset: 8, asChild: true, children: /* @__PURE__ */ jsx(
-    Viewport$2,
+    Viewport$1,
     {
       ref,
       direction: "column",
@@ -2210,6 +2210,10 @@ const CheckboxIndicator = styled(Checkbox.Indicator)`
   cursor: pointer;
   justify-content: center;
   align-items: center;
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
 `;
 const CheckboxImpl = React.forwardRef(({ children, ...restProps }, forwardedRef) => {
   const labelId = useId(restProps.id);
@@ -2969,6 +2973,7 @@ const Combobox = React.forwardRef(
     className,
     clearLabel = "Clear",
     creatable = false,
+    creatableStartIcon,
     createMessage = (value2) => `Create "${value2}"`,
     defaultFilterValue,
     defaultTextValue,
@@ -3052,8 +3057,10 @@ const Combobox = React.forwardRef(
       }
     };
     const handleCreateItemClick = () => {
-      if (onCreateOption && internalTextValue) {
+      if (onCreateOption && internalTextValue && creatable !== "visible") {
         onCreateOption(internalTextValue);
+      } else if (onCreateOption && creatable === "visible") {
+        onCreateOption();
       }
     };
     const generatedIntersectionId = useId();
@@ -3080,12 +3087,12 @@ const Combobox = React.forwardRef(
     return /* @__PURE__ */ jsxs(
       Combobox$1.Root,
       {
-        autocomplete: autocomplete || (creatable ? "list" : "both"),
+        autocomplete: autocomplete || (creatable === true ? "list" : "both"),
         onOpenChange: handleOpenChange,
         open: internalIsOpen,
         onTextValueChange: handleTextValueChange,
         textValue: internalTextValue,
-        allowCustomValue: creatable || allowCustomValue,
+        allowCustomValue: !!creatable || allowCustomValue,
         disabled,
         required,
         value,
@@ -3093,6 +3100,7 @@ const Combobox = React.forwardRef(
         filterValue: internalFilterValue,
         onFilterValueChange: handleFilterValueChange,
         isPrintableCharacter: isPrintableCharacter2,
+        visible: creatable === "visible",
         children: [
           /* @__PURE__ */ jsxs(Trigger$5, { $hasError: hasError, $size: size, className, children: [
             /* @__PURE__ */ jsxs(Flex, { flex: "1", tag: "span", gap: 3, children: [
@@ -3128,21 +3136,18 @@ const Combobox = React.forwardRef(
               /* @__PURE__ */ jsx(DownIcon$1, { children: /* @__PURE__ */ jsx(CaretDown, { fill: "neutral500" }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Content$5, { sideOffset: 4, children: /* @__PURE__ */ jsx(ScrollAreaImpl$1, { children: /* @__PURE__ */ jsxs(Viewport$1, { ref: viewportRef, children: [
-            children,
-            creatable ? /* @__PURE__ */ jsx(
-              Combobox$1.CreateItem,
-              {
-                onPointerUp: handleCreateItemClick,
-                onClick: handleCreateItemClick,
-                asChild: true,
-                children: /* @__PURE__ */ jsx(OptionBox, { children: /* @__PURE__ */ jsx(Typography, { children: createMessage(internalTextValue ?? "") }) })
-              }
-            ) : null,
-            !creatable && !loading ? /* @__PURE__ */ jsx(Combobox$1.NoValueFound, { asChild: true, children: /* @__PURE__ */ jsx(OptionBox, { $hasHover: false, children: /* @__PURE__ */ jsx(Typography, { children: noOptionsMessage(internalTextValue ?? "") }) }) }) : null,
-            loading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Loader, { small: true, children: loadingMessage }) }) : null,
-            /* @__PURE__ */ jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
-          ] }) }) }) })
+          /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Content$5, { sideOffset: 4, children: /* @__PURE__ */ jsxs(Combobox$1.Viewport, { ref: viewportRef, children: [
+            /* @__PURE__ */ jsxs(ScrollAreaCombobox, { children: [
+              children,
+              creatable !== true && !loading ? /* @__PURE__ */ jsx(Combobox$1.NoValueFound, { asChild: true, children: /* @__PURE__ */ jsx(OptionBox, { $hasHover: false, children: /* @__PURE__ */ jsx(Typography, { children: noOptionsMessage(internalTextValue ?? "") }) }) }) : null,
+              loading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Loader, { small: true, children: loadingMessage }) }) : null,
+              /* @__PURE__ */ jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
+            ] }),
+            creatable ? /* @__PURE__ */ jsx(ComboboxCreateItem, { onPointerUp: handleCreateItemClick, asChild: true, children: /* @__PURE__ */ jsx(OptionBox, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+              creatableStartIcon && /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, display: "inline-flex", children: creatableStartIcon }),
+              /* @__PURE__ */ jsx(Typography, { children: createMessage(internalTextValue ?? "") })
+            ] }) }) }) : null
+          ] }) }) })
         ]
       }
     );
@@ -3227,6 +3232,11 @@ const Content$5 = styled(Combobox$1.Content)`
   max-height: 15rem;
   z-index: ${({ theme }) => theme.zIndices.popover};
 
+  &:focus-visible {
+    outline: ${({ theme }) => `2px solid ${theme.colors.primary600}`};
+    outline-offset: 2px;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     animation-duration: ${(props) => props.theme.motion.timings["200"]};
 
@@ -3244,7 +3254,29 @@ const Content$5 = styled(Combobox$1.Content)`
     }
   }
 `;
-const Viewport$1 = styled(Combobox$1.Viewport)`
+const ComboboxCreateItem = styled(Combobox$1.CreateItem)`
+  && {
+    border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+    background: ${({ theme }) => theme.colors.neutral0};
+    cursor: pointer;
+    padding: ${({ theme }) => theme.spaces[1]};
+    position: sticky;
+    bottom: 0;
+    left: 0;
+  }
+  &&:hover,
+  &&[data-highlighted] {
+    background-color: transparent;
+  }
+  && > div {
+    padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
+  }
+  && > div:hover,
+  &&[data-highlighted] > div {
+    background-color: ${({ theme }) => theme.colors.primary100};
+  }
+`;
+const ScrollAreaCombobox = styled(ScrollAreaImpl$1)`
   padding: ${({ theme }) => theme.spaces[1]};
 `;
 const Option = React.forwardRef(
@@ -3537,6 +3569,14 @@ ${css`
     outline-offset: 2px;
   }
 
+  *:has(> :disabled:not(button)) {
+    cursor: not-allowed !important;
+  }
+
+  [aria-disabled='true']:not(button) {
+    cursor: not-allowed !important;
+  }
+
   /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
   *:focus:not(:focus-visible) {
     outline: none;
@@ -4683,6 +4723,9 @@ const convertUTCDateToCalendarDate = (date) => {
 const isNotAlphabeticalCharacter = (str) => {
   return Boolean(str.match(/^[^a-zA-Z]*$/));
 };
+function escapeForRegex(str = "") {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 const TimePicker$1 = React.forwardRef(
   ({ step = 15, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
     const context = useDesignSystem("TimePicker");
@@ -4746,6 +4789,8 @@ const TimePicker$1 = React.forwardRef(
         setTextValue(actualValue);
       }
     }, [valueProp, setTextValue]);
+    const escapedSeparator = escapeForRegex(separator);
+    const pattern = `\\d{2}${escapedSeparator}\\d{2}`;
     return /* @__PURE__ */ jsx(
       Combobox,
       {
@@ -4759,7 +4804,7 @@ const TimePicker$1 = React.forwardRef(
         autocomplete: "none",
         startIcon: /* @__PURE__ */ jsx(Clock, { fill: "neutral500" }),
         inputMode: "numeric",
-        pattern: `\\d{2}\\${separator}\\d{2}`,
+        pattern,
         textValue,
         onTextValueChange: handleTextValueChange,
         onBlur: handleBlur,
@@ -5062,6 +5107,7 @@ const JSONInput = React.forwardRef(
       JSONInputContainer,
       {
         ref: composedRefs,
+        $disabled: disabled,
         $hasError: hasError,
         alignItems: "stretch",
         fontSize: 2,
@@ -5085,6 +5131,7 @@ const JSONInputContainer = styled(Flex)`
     background-color: #32324d;
     width: 100%;
     outline: none;
+    cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "text"};
   }
 
   .cm-scroller {
@@ -5156,19 +5203,23 @@ const SkipToContent = ({ children }) => {
     }
   );
 };
-const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
 const Root$3 = Dialog$1.Root;
 const Trigger$2 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
 const Content$2 = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(ContentImpl, { ref: forwardedRef, ...props }) }) });
+  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(Overlay, {}),
+    /* @__PURE__ */ jsx(ContentImpl, { ref: forwardedRef, ...props })
+  ] });
 });
 const Overlay = styled(Dialog$1.Overlay)`
-  background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};
+  background-color: ${(props) => props.theme.colors.neutral800};
   position: fixed;
   inset: 0;
   z-index: ${(props) => props.theme.zIndices.overlay};
+  opacity: 0.2;
+  will-change: opacity;
 
   @media (prefers-reduced-motion: no-preference) {
     animation: ${ANIMATIONS.overlayFadeIn} ${(props) => props.theme.motion.timings["200"]}
@@ -5644,6 +5695,7 @@ const RadioGroupItem = styled(RadioGroup.Item)`
   border-radius: 50%;
   border: 1px solid ${(props) => props.theme.colors.neutral300};
   position: relative;
+  cursor: pointer;
   z-index: 0;
 
   @media (prefers-reduced-motion: no-preference) {
@@ -5656,6 +5708,7 @@ const RadioGroupItem = styled(RadioGroup.Item)`
   }
 
   &[data-disabled] {
+    cursor: not-allowed;
     background-color: ${(props) => props.theme.colors.neutral200};
   }
 
@@ -7006,6 +7059,10 @@ const TextareaElement = styled(Box)`
   &:focus-within {
     outline: none;
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 const Toggle = React.forwardRef(
   ({