@strapi/design-system 2.0.0-rc.17 → 2.0.0-rc.18

package/dist/index.mjs

@@ -20,12 +20,12 @@ 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 * as ScrollArea from "@radix-ui/react-scroll-area";
 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 * as Dialog$1 from "@radix-ui/react-dialog";
-import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { NumberParser, NumberFormatter } from "@internationalized/number";
 import * as Popover$1 from "@radix-ui/react-popover";
 import * as Progress from "@radix-ui/react-progress";
@@ -3549,6 +3549,60 @@ const Portal$1 = React.forwardRef(
   }
 );
 Portal$1.displayName = "Portal";
+const ScrollAreaImpl$1 = React.forwardRef(
+  ({ children, viewportRef, ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
+      /* @__PURE__ */ jsx(ScrollAreaViewport, { ref: viewportRef, children }),
+      /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(Thumb, {}) }),
+      /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsx(Thumb, {}) })
+    ] });
+  }
+);
+const ScrollAreaRoot = styled(ScrollArea.Root)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+`;
+const ScrollAreaViewport = styled(ScrollArea.Viewport)`
+  min-width: 100%;
+  padding-inline: 4px;
+`;
+const Scrollbar = styled(ScrollArea.Scrollbar)`
+  display: flex;
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+
+  &[data-orientation='vertical'] {
+    width: 0.4rem;
+  }
+
+  &[data-orientation='horizontal'] {
+    flex-direction: column;
+    height: 0.4rem;
+  }
+`;
+const Thumb = styled(ScrollArea.Thumb)`
+  position: relative;
+  flex: 1;
+  background-color: ${(props) => props.theme.colors.neutral150};
+  border-radius: var(--scrollbar-size);
+
+  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    min-width: 44px;
+    min-height: 44px;
+  }
+`;
 const SelectTrigger = React.forwardRef(
   ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, size = "M", withTags, ...restProps }, ref) => {
     const triggerRef = React.useRef(null);
@@ -3668,7 +3722,10 @@ const StyledValue = styled(Select.Value)`
   gap: ${({ theme }) => theme.spaces[1]};
   flex-wrap: wrap;
 `;
-const SelectContent = styled(Select.Content)`
+const SelectContent = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(StyledContent, { ref, ...props, children: /* @__PURE__ */ jsx(ScrollAreaImpl$1, { children: props.children }) });
+});
+const StyledContent = styled(Select.Content)`
   background: ${({ theme }) => theme.colors.neutral0};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -5112,60 +5169,6 @@ const SkipToContent = ({ children }) => {
   );
 };
 const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
-const ScrollAreaImpl$1 = React.forwardRef(
-  ({ children, viewportRef, ...restProps }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
-      /* @__PURE__ */ jsx(ScrollAreaViewport, { ref: viewportRef, children }),
-      /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(Thumb, {}) }),
-      /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsx(Thumb, {}) })
-    ] });
-  }
-);
-const ScrollAreaRoot = styled(ScrollArea.Root)`
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-`;
-const ScrollAreaViewport = styled(ScrollArea.Viewport)`
-  min-width: 100%;
-  padding-inline: 4px;
-`;
-const Scrollbar = styled(ScrollArea.Scrollbar)`
-  display: flex;
-  /* ensures no selection */
-  user-select: none;
-  /* disable browser handling of all panning and zooming gestures on touch devices */
-  touch-action: none;
-
-  &[data-orientation='vertical'] {
-    width: 0.4rem;
-  }
-
-  &[data-orientation='horizontal'] {
-    flex-direction: column;
-    height: 0.4rem;
-  }
-`;
-const Thumb = styled(ScrollArea.Thumb)`
-  position: relative;
-  flex: 1;
-  background-color: ${(props) => props.theme.colors.neutral150};
-  border-radius: var(--scrollbar-size);
-
-  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    min-width: 44px;
-    min-height: 44px;
-  }
-`;
 const Root$3 = Dialog$1.Root;
 const Trigger$2 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props, asChild: true, ref: forwardedRef });