@strapi/design-system 2.0.0-rc.28 → 2.0.0-rc.30

package/dist/index.mjs

@@ -1,11 +1,11 @@
+import styled$1, { styled, css, keyframes, useTheme, createGlobalStyle, ThemeProvider } from "styled-components";
 import * as React from "react";
 import { useEffect, useLayoutEffect, useState, useMemo } from "react";
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { DateFormatter, getLocalTimeZone, today, minDate, maxDate, startOfMonth, startOfWeek, getDayOfWeek, isSameDay, endOfMonth, parseAbsolute, toCalendarDate, parseAbsoluteToLocal, toCalendarDateTime } from "@internationalized/date";
+import { DateFormatter, getLocalTimeZone, today, parseAbsolute, toCalendarDate, minDate, maxDate, startOfMonth, startOfWeek, getDayOfWeek, isSameDay, endOfMonth, parseAbsoluteToLocal, toCalendarDateTime } from "@internationalized/date";
 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$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";
@@ -16,15 +16,15 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Checkbox from "@radix-ui/react-checkbox";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
-import { useFloating, offset, shift, flip, autoUpdate } from "@floating-ui/react-dom";
+import { useFloating, autoUpdate, offset, shift, flip } from "@floating-ui/react-dom";
 import { useFocusGuards } from "@radix-ui/react-focus-guards";
 import { FocusScope } from "@radix-ui/react-focus-scope";
 import { createPortal } from "react-dom";
 import { RemoveScroll } from "react-remove-scroll";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { useCodeMirror } from "@uiw/react-codemirror";
-import { StateEffect, StateField } from "@codemirror/state";
-import { Decoration, EditorView } from "@codemirror/view";
+import { StateField, StateEffect } from "@codemirror/state";
+import { EditorView, Decoration } from "@codemirror/view";
 import * as Dialog$1 from "@radix-ui/react-dialog";
 import { NumberParser, NumberFormatter } from "@internationalized/number";
 import * as Popover$1 from "@radix-ui/react-popover";
@@ -2304,15 +2304,11 @@ const KeyboardKeys = {
   LEFT: "ArrowLeft",
   ESCAPE: "Escape",
   ENTER: "Enter",
-  SPACE: " ",
   TAB: "Tab",
   END: "End",
   HOME: "Home",
-  DELETE: "Delete",
   PAGE_UP: "PageUp",
-  PAGE_DOWN: "PageDown",
-  BACKSPACE: "Backspace",
-  CLEAR: "Clear"
+  PAGE_DOWN: "PageDown"
 };
 const CarouselGrid = styled(Box)`
   grid-template-columns: auto 1fr auto;
@@ -3400,7 +3396,7 @@ const Overlay$1 = styled(AlertDialog.Overlay)`
 const ContentImpl$1 = styled(AlertDialog.Content)`
   max-width: 42rem;
   height: min-content;
-  width: 100%;
+  width: calc(100% - ${({ theme }) => theme.spaces[8]});
   overflow: hidden;
   margin: 0 auto;
   display: flex;
@@ -3699,7 +3695,10 @@ const DesignSystemProvider = ({
 const DismissibleLayer = DismissibleLayerPrimitive.Root;
 const Portal$1 = React.forwardRef(
   ({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
-    return container ? createPortal(/* @__PURE__ */ jsx(Box, { ref: forwardedRef, ...portalProps }), container) : null;
+    if (!container) {
+      return null;
+    }
+    return createPortal(/* @__PURE__ */ jsx(Box, { ref: forwardedRef, ...portalProps }), container);
   }
 );
 Portal$1.displayName = "Portal";
@@ -5271,7 +5270,7 @@ const ContentImpl = styled(Dialog$1.Content)`
   max-width: 83rem;
   max-height: 90vh;
   height: auto;
-  width: 60%;
+  width: calc(100% - ${({ theme }) => theme.spaces[8]});
   overflow: hidden;
   margin: 0 auto;
   display: flex;
@@ -5287,6 +5286,9 @@ const ContentImpl = styled(Dialog$1.Content)`
   box-shadow: ${(props) => props.theme.shadows.popupShadow};
   z-index: ${(props) => props.theme.zIndices.modal};
 
+  ${({ theme }) => theme.breakpoints.medium} {
+    width: calc(100% - ${({ theme }) => theme.spaces[9]});
+  }
   > form {
     display: flex;
     flex-direction: column;
@@ -7055,7 +7057,15 @@ const TextInput = React.forwardRef((props, ref) => {
 });
 TextInput.displayName = "TextInput";
 const Textarea = React.forwardRef(
-  ({ disabled, hasError: hasErrorProp, id: idProp, name: nameProp, required: requiredProp, ...props }, ref) => {
+  ({
+    disabled,
+    hasError: hasErrorProp,
+    id: idProp,
+    name: nameProp,
+    required: requiredProp,
+    resizable = true,
+    ...props
+  }, ref) => {
     const { error, ...field } = useField("Textarea");
     const hasError = Boolean(error) || hasErrorProp;
     const id = field.id ?? idProp;
@@ -7086,18 +7096,20 @@ const Textarea = React.forwardRef(
         id,
         name,
         "aria-describedby": ariaDescription,
+        $resizable: resizable,
         ...props
       }
     ) });
   }
 );
 const Wrapper$1 = styled(Box)`
-  height: 10.5rem;
   ${inputFocusStyle()}
 `;
 const TextareaElement = styled(Box)`
+  display: block;
   border: none;
-  resize: none;
+  resize: ${({ $resizable }) => $resizable ? "vertical" : "none"};
+  min-height: ${({ minHeight }) => minHeight || "10.5rem"};
 
   &::placeholder {
     color: ${({ theme }) => theme.colors.neutral600};