@strapi/design-system 2.0.0-rc.16 → 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";
@@ -1856,8 +1856,33 @@ const DropdownMenuContent = styled(DropdownMenu.Content)`
     }
   }
 `;
-const MenuItem$1 = ({ onSelect, disabled = false, isLink, ...props }) => {
-  return /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, onSelect, disabled, children: isLink || props.isExternal ? /* @__PURE__ */ jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: /* @__PURE__ */ jsx(Typography, { children: props.children }) }) : /* @__PURE__ */ jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: /* @__PURE__ */ jsx(Typography, { children: props.children }) }) });
+const MenuItem$1 = ({ onSelect, disabled = false, isLink, startIcon, endIcon, isExternal, ...props }) => {
+  return /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, onSelect, disabled, children: isLink || isExternal ? /* @__PURE__ */ jsx(
+    OptionLink,
+    {
+      color: "neutral800",
+      startIcon,
+      endIcon,
+      ...props,
+      isExternal: isExternal ?? false,
+      children: /* @__PURE__ */ jsx(Typography, { children: props.children })
+    }
+  ) : /* @__PURE__ */ jsxs(
+    OptionButton,
+    {
+      cursor: "pointer",
+      color: "neutral800",
+      background: "transparent",
+      borderStyle: "none",
+      gap: 2,
+      ...props,
+      children: [
+        startIcon && /* @__PURE__ */ jsx(Flex, { tag: "span", "aria-hidden": true, children: startIcon }),
+        /* @__PURE__ */ jsx(Typography, { grow: 1, children: props.children }),
+        endIcon && /* @__PURE__ */ jsx(Flex, { tag: "span", "aria-hidden": true, children: endIcon })
+      ]
+    }
+  ) });
 };
 const getOptionStyle = ({ theme }) => css`
   text-align: left;
@@ -3524,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);
@@ -3643,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};
@@ -5087,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 });