@strapi/design-system 2.0.0-rc.24 → 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;
   }
 
@@ -3221,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;
   }
@@ -3980,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
@@ -4109,6 +4114,7 @@ const DatePicker$1 = React.forwardRef(
         onTextValueChange: setTextValue,
         onTriggerChange: setTrigger,
         onValueChange: setValue,
+        onClear,
         required,
         textInput,
         textValue,
@@ -4186,6 +4192,7 @@ const DatePickerTrigger = React.forwardRef(
             ref: composedRefs,
             $hasError: hasError,
             $size: size,
+            $hasOnClear: Boolean(context.onClear),
             ...restProps,
             hasRadius: true,
             gap: 3,
@@ -4215,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) {
@@ -4439,6 +4447,11 @@ const Input$1 = styled.input`
     outline: none;
   }
 
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
+    opacity: 1;
+  }
+
   &[aria-disabled='true'] {
     cursor: inherit;
   }
@@ -4754,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("");
@@ -4820,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,
@@ -4841,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",
@@ -4917,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,
@@ -4933,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,
@@ -5231,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) {
@@ -5274,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"]};
@@ -5322,7 +5332,7 @@ 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]};
@@ -6045,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;
@@ -7081,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;
   }
 
@@ -7435,7 +7440,7 @@ export {
   Crumb,
   CrumbLink,
   CrumbSimpleMenu,
-  DatePicker$1 as DatePicker,
+  DatePicker,
   DateTimePicker,
   DesignSystemProvider,
   Dialog,
@@ -7504,7 +7509,7 @@ export {
   Textarea,
   Th,
   Thead,
-  TimePicker$1 as TimePicker,
+  TimePicker,
   Toggle,
   TooltipImpl as Tooltip,
   Tr,