@strapi/design-system 2.0.0-rc.23 → 2.0.0-rc.25

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { DateFormatter, getLocalTimeZone, today, minDate, maxDate, startOfMonth,
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { Provider as Provider$1 } from "@radix-ui/react-tooltip";
-import { styled, css, keyframes, useTheme, createGlobalStyle, ThemeProvider } from "styled-components";
+import styled$1, { styled, css, keyframes, useTheme, createGlobalStyle, ThemeProvider } from "styled-components";
 import * as DismissibleLayerPrimitive from "@radix-ui/react-dismissable-layer";
 import { useCallbackRef as useCallbackRef$1, Combobox as Combobox$1, Select, composeEventHandlers, usePrev } from "@strapi/ui-primitives";
 import { composeEventHandlers as composeEventHandlers2, useCallbackRef as useCallbackRef2, useCollator, useFilter } from "@strapi/ui-primitives";
@@ -2714,8 +2714,8 @@ const InputElement = styled.input`
   width: 100%;
   background: inherit;
 
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
     opacity: 1;
   }
 
@@ -2875,11 +2875,14 @@ const CarouselImage = (props) => {
   }
   return /* @__PURE__ */ jsx(StyledImage, { tag: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
 };
+const CarouselSlideFlex = styled(Flex)`
+  display: ${({ $selected }) => $selected ? "flex" : "none"};
+`;
 const CarouselSlide = ({ label, children, selected = false, ...props }) => /* @__PURE__ */ jsx(
-  Flex,
+  CarouselSlideFlex,
   {
+    $selected: selected,
     alignItems: "center",
-    display: selected ? "flex" : "none",
     role: "group",
     "aria-roledescription": "slide",
     "aria-label": label,
@@ -2973,6 +2976,7 @@ const Combobox = React.forwardRef(
     className,
     clearLabel = "Clear",
     creatable = false,
+    creatableDisabled = false,
     creatableStartIcon,
     createMessage = (value2) => `Create "${value2}"`,
     defaultFilterValue,
@@ -3144,10 +3148,19 @@ const Combobox = React.forwardRef(
               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, onClick: 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
+            creatable ? /* @__PURE__ */ jsx(
+              ComboboxCreateItem,
+              {
+                onPointerUp: handleCreateItemClick,
+                onClick: handleCreateItemClick,
+                disabled: creatableDisabled,
+                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
           ] }) }) })
         ]
       }
@@ -3208,6 +3221,11 @@ const TextInput$1 = styled(Combobox$1.TextInput)`
     outline: none;
   }
 
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
+    opacity: 1;
+  }
+
   &[aria-disabled='true'] {
     cursor: inherit;
   }
@@ -3267,7 +3285,18 @@ const ComboboxCreateItem = styled(Combobox$1.CreateItem)`
   }
   &&:hover,
   &&[data-highlighted] {
-    background-color: transparent;
+    background: ${({ theme }) => theme.colors.neutral0};
+  }
+  &&[data-disabled] {
+    color: ${({ theme }) => theme.colors.neutral600};
+    background: ${({ theme }) => theme.colors.neutral150};
+    cursor: not-allowed;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &&[data-disabled]:hover {
+    background: ${({ theme }) => theme.colors.neutral150};
+    color: ${({ theme }) => theme.colors.neutral600};
   }
   && > div {
     padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
@@ -3276,6 +3305,9 @@ const ComboboxCreateItem = styled(Combobox$1.CreateItem)`
   &&[data-highlighted] > div {
     background-color: ${({ theme }) => theme.colors.primary100};
   }
+  &&[data-disabled] > div:hover {
+    background: ${({ theme }) => theme.colors.neutral150};
+  }
 `;
 const ScrollAreaCombobox = styled(ScrollAreaImpl$1)`
   padding: ${({ theme }) => theme.spaces[1]};
@@ -3953,7 +3985,7 @@ const SingleSelectOption = React.forwardRef(
 const DEFAULT_PAST_RANGE = 200;
 const DEFAULT_FUTURE_RANGE = 15;
 const [DatePickerProvider, useDatePickerContext] = createContext("DatePicker");
-const DatePicker$1 = React.forwardRef(
+const DatePicker = React.forwardRef(
   ({
     /**
      * DatePickerCalendar props
@@ -4082,6 +4114,7 @@ const DatePicker$1 = React.forwardRef(
         onTextValueChange: setTextValue,
         onTriggerChange: setTrigger,
         onValueChange: setValue,
+        onClear,
         required,
         textInput,
         textValue,
@@ -4159,6 +4192,7 @@ const DatePickerTrigger = React.forwardRef(
             ref: composedRefs,
             $hasError: hasError,
             $size: size,
+            $hasOnClear: Boolean(context.onClear),
             ...restProps,
             hasRadius: true,
             gap: 3,
@@ -4188,6 +4222,7 @@ const DatePickerTrigger = React.forwardRef(
   }
 );
 const TriggerElement = styled(Flex)`
+  min-width: ${({ $hasOnClear }) => $hasOnClear ? "160px" : "130px"};
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   ${(props) => {
   switch (props.$size) {
@@ -4412,6 +4447,11 @@ const Input$1 = styled.input`
     outline: none;
   }
 
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
+    opacity: 1;
+  }
+
   &[aria-disabled='true'] {
     cursor: inherit;
   }
@@ -4727,7 +4767,10 @@ const isNotAlphabeticalCharacter = (str) => {
 function escapeForRegex(str = "") {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-const TimePicker$1 = React.forwardRef(
+const TimePickerCombobox = styled$1(Combobox)`
+  min-width: ${({ onClear }) => onClear ? "160px" : "130px"};
+`;
+const TimePicker = React.forwardRef(
   ({ step = 15, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
     const context = useDesignSystem("TimePicker");
     const [textValue, setTextValue] = React.useState("");
@@ -4793,7 +4836,7 @@ const TimePicker$1 = React.forwardRef(
     const escapedSeparator = escapeForRegex(separator);
     const pattern = `\\d{2}${escapedSeparator}\\d{2}`;
     return /* @__PURE__ */ jsx(
-      Combobox,
+      TimePickerCombobox,
       {
         ...restProps,
         ref: forwardedRef,
@@ -4814,14 +4857,6 @@ const TimePicker$1 = React.forwardRef(
     );
   }
 );
-const DatePicker = styled(DatePicker$1)`
-  flex: 1 1 70%;
-  min-width: 120px;
-`;
-const TimePicker = styled(TimePicker$1)`
-  flex: 1 1 30%;
-  min-width: 140px;
-`;
 const DateTimePicker = React.forwardRef(
   ({
     clearLabel = "clear",
@@ -4890,8 +4925,8 @@ const DateTimePicker = React.forwardRef(
     const composedRefs = useComposedRefs(DatePickerElement2, forwardedRef);
     const { error, id, labelNode } = useField("DateTimePicker");
     const hasError = Boolean(error) || hasErrorProp;
-    return /* @__PURE__ */ jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, children: [
-      /* @__PURE__ */ jsx(Root$6, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, wrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Root$6, { flex: "1", children: /* @__PURE__ */ jsx(
         DatePicker,
         {
           ...props,
@@ -4906,7 +4941,7 @@ const DateTimePicker = React.forwardRef(
           "aria-label": dateLabel
         }
       ) }),
-      /* @__PURE__ */ jsx(Root$6, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Root$6, { flex: "1", children: /* @__PURE__ */ jsx(
         TimePicker,
         {
           size,
@@ -5204,22 +5239,19 @@ 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__ */ jsxs(Dialog$1.Portal, { children: [
-    /* @__PURE__ */ jsx(Overlay, {}),
-    /* @__PURE__ */ jsx(ContentImpl, { ref: forwardedRef, ...props })
-  ] });
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(ContentImpl, { ref: forwardedRef, ...props }) }) });
 });
 const Overlay = styled(Dialog$1.Overlay)`
-  background-color: ${(props) => props.theme.colors.neutral800};
+  background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};
   position: fixed;
   inset: 0;
   z-index: ${(props) => props.theme.zIndices.overlay};
-  opacity: 0.2;
   will-change: opacity;
 
   @media (prefers-reduced-motion: no-preference) {
@@ -5247,6 +5279,11 @@ const ContentImpl = styled(Dialog$1.Content)`
   box-shadow: ${(props) => props.theme.shadows.popupShadow};
   z-index: ${(props) => props.theme.zIndices.modal};
 
+  > form {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
   @media (prefers-reduced-motion: no-preference) {
     &[data-state='open'] {
       animation-duration: ${(props) => props.theme.motion.timings["200"]};
@@ -5295,10 +5332,14 @@ const Body = React.forwardRef(({ children, ...restProps }, forwardedRef) => {
   return /* @__PURE__ */ jsx(BodyScroll, { ref: forwardedRef, ...restProps, children });
 });
 const BodyScroll = styled(ScrollAreaImpl$1)`
-  padding-inline: ${(props) => props.theme.spaces[8]};
+  padding-inline: ${(props) => props.theme.spaces[7]};
 
   & > div {
     padding-block: ${(props) => props.theme.spaces[8]};
+    /* Add negative margin and padding to avoid cropping the box shadow when the inputs are focused */
+    margin: 0 -2px 0 -2px;
+    padding-left: 2px;
+    padding-right: 2px;
 
     & > div {
       // the scroll area component applies a display: table to the child, which we don't want.
@@ -6014,11 +6055,7 @@ const SearchbarInput = styled(Input$2)`
   height: 16px;
   padding: 0 0 0 8px;
   color: ${({ theme }) => theme.colors.neutral800};
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
-  }
-
+  
   &:hover {
     button {
       cursor: pointer;
@@ -7050,10 +7087,9 @@ const TextareaElement = styled(Box)`
   border: none;
   resize: none;
 
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
     font-size: ${({ theme }) => theme.fontSizes[2]};
-    color: ${({ theme }) => theme.colors.neutral500};
     opacity: 1;
   }
 
@@ -7404,7 +7440,7 @@ export {
   Crumb,
   CrumbLink,
   CrumbSimpleMenu,
-  DatePicker$1 as DatePicker,
+  DatePicker,
   DateTimePicker,
   DesignSystemProvider,
   Dialog,
@@ -7473,7 +7509,7 @@ export {
   Textarea,
   Th,
   Thead,
-  TimePicker$1 as TimePicker,
+  TimePicker,
   Toggle,
   TooltipImpl as Tooltip,
   Tr,