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

package/dist/components/Select/SelectParts.d.ts

@@ -38,9 +38,7 @@ declare const Portal: {
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Select.SelectContentImplProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<React.ForwardRefExoticComponent<Select.SelectContentImplProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
+declare const Content: React.ForwardRefExoticComponent<Select.SelectContentImplProps & React.RefAttributes<HTMLDivElement>>;
 declare const Viewport: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Pick<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 } & {

package/dist/components/Select/SelectParts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectParts.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectParts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAI/C,OAAO,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAmC,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG/F,OAAO,EAAE,KAAK,EAAY,MAAM,UAAU,CAAC;AAM3C,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,CAAC;AAE7B,UAAU,YAAa,SAAQ,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5E;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwID,UAAU,UACR,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,CAAC,EACvD,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,GAAG,UAAU,CAAC;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA+DD,UAAU,SAAU,SAAQ,MAAM,CAAC,eAAe;CAAG;AA4CrD,QAAA,MAAM,IAAI;;;;;CAAc,CAAC;AACzB,QAAA,MAAM,OAAO,kGAAgB,CAAC;AAC9B,QAAA,MAAM,KAAK,oFAAc,CAAC;AAC1B,QAAA,MAAM,MAAM;;;;;CAAgB,CAAC;AAC7B,QAAA,MAAM,OAAO;;qKAAgB,CAAC;AAC9B,QAAA,MAAM,QAAQ;;;;;;;;;;+IAAiB,CAAC;AAChC,QAAA,MAAM,IAAI,kFAAa,CAAC;AACxB,QAAA,MAAM,aAAa,yGAAuB,CAAC;AAC3C,QAAA,MAAM,QAAQ;;;;2GAAkB,CAAC;AACjC,QAAA,MAAM,KAAK;;;;yGAAe,CAAC;AAE3B,KAAK,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;AACtC,KAAK,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAClD,KAAK,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAChD,KAAK,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC5C,KAAK,YAAY,GAAG,MAAM,CAAC,kBAAkB,CAAC;AAC9C,KAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC;AAChD,KAAK,kBAAkB,GAAG,MAAM,CAAC,wBAAwB,CAAC;AAC1D,KAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC;AAChD,KAAK,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC1C,KAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AACjG,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,UAAU,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,aAAa,EACb,SAAS,EACT,kBAAkB,EAClB,aAAa,EACb,UAAU,GACX,CAAC"}
+{"version":3,"file":"SelectParts.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectParts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAI/C,OAAO,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAmC,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI/F,OAAO,EAAE,KAAK,EAAY,MAAM,UAAU,CAAC;AAM3C,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,CAAC;AAE7B,UAAU,YAAa,SAAQ,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5E;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwID,UAAU,UACR,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,CAAC,EACvD,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,GAAG,UAAU,CAAC;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAuED,UAAU,SAAU,SAAQ,MAAM,CAAC,eAAe;CAAG;AA4CrD,QAAA,MAAM,IAAI;;;;;CAAc,CAAC;AACzB,QAAA,MAAM,OAAO,kGAAgB,CAAC;AAC9B,QAAA,MAAM,KAAK,oFAAc,CAAC;AAC1B,QAAA,MAAM,MAAM;;;;;CAAgB,CAAC;AAC7B,QAAA,MAAM,OAAO,sGAAgB,CAAC;AAC9B,QAAA,MAAM,QAAQ;;;;;;;;;;+IAAiB,CAAC;AAChC,QAAA,MAAM,IAAI,kFAAa,CAAC;AACxB,QAAA,MAAM,aAAa,yGAAuB,CAAC;AAC3C,QAAA,MAAM,QAAQ;;;;2GAAkB,CAAC;AACjC,QAAA,MAAM,KAAK;;;;yGAAe,CAAC;AAE3B,KAAK,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;AACtC,KAAK,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAClD,KAAK,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAChD,KAAK,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC5C,KAAK,YAAY,GAAG,MAAM,CAAC,kBAAkB,CAAC;AAC9C,KAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC;AAChD,KAAK,kBAAkB,GAAG,MAAM,CAAC,wBAAwB,CAAC;AAC1D,KAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC;AAChD,KAAK,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC1C,KAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AACjG,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,UAAU,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,aAAa,EACb,SAAS,EACT,kBAAkB,EAClB,aAAa,EACb,UAAU,GACX,CAAC"}

package/dist/index.js

@@ -19,12 +19,12 @@ const reactFocusGuards = require("@radix-ui/react-focus-guards");
 const reactFocusScope = require("@radix-ui/react-focus-scope");
 const reactDom = require("react-dom");
 const reactRemoveScroll = require("react-remove-scroll");
+const ScrollArea = require("@radix-ui/react-scroll-area");
 const langJson = require("@codemirror/lang-json");
 const reactCodemirror = require("@uiw/react-codemirror");
 const state = require("@codemirror/state");
 const view = require("@codemirror/view");
 const Dialog$1 = require("@radix-ui/react-dialog");
-const ScrollArea = require("@radix-ui/react-scroll-area");
 const number = require("@internationalized/number");
 const Popover$1 = require("@radix-ui/react-popover");
 const Progress = require("@radix-ui/react-progress");
@@ -58,8 +58,8 @@ const Avatar__namespace = /* @__PURE__ */ _interopNamespace(Avatar$1);
 const DropdownMenu__namespace = /* @__PURE__ */ _interopNamespace(DropdownMenu);
 const Checkbox__namespace = /* @__PURE__ */ _interopNamespace(Checkbox);
 const AlertDialog__namespace = /* @__PURE__ */ _interopNamespace(AlertDialog);
-const Dialog__namespace = /* @__PURE__ */ _interopNamespace(Dialog$1);
 const ScrollArea__namespace = /* @__PURE__ */ _interopNamespace(ScrollArea);
+const Dialog__namespace = /* @__PURE__ */ _interopNamespace(Dialog$1);
 const Popover__namespace = /* @__PURE__ */ _interopNamespace(Popover$1);
 const Progress__namespace = /* @__PURE__ */ _interopNamespace(Progress);
 const RadioGroup__namespace = /* @__PURE__ */ _interopNamespace(RadioGroup);
@@ -3581,6 +3581,60 @@ const Portal$1 = React__namespace.forwardRef(
   }
 );
 Portal$1.displayName = "Portal";
+const ScrollAreaImpl$1 = React__namespace.forwardRef(
+  ({ children, viewportRef, ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaViewport, { ref: viewportRef, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) })
+    ] });
+  }
+);
+const ScrollAreaRoot = styledComponents.styled(ScrollArea__namespace.Root)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+`;
+const ScrollAreaViewport = styledComponents.styled(ScrollArea__namespace.Viewport)`
+  min-width: 100%;
+  padding-inline: 4px;
+`;
+const Scrollbar = styledComponents.styled(ScrollArea__namespace.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 = styledComponents.styled(ScrollArea__namespace.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__namespace.forwardRef(
   ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, size = "M", withTags, ...restProps }, ref) => {
     const triggerRef = React__namespace.useRef(null);
@@ -3700,7 +3754,10 @@ const StyledValue = styledComponents.styled(uiPrimitives.Select.Value)`
   gap: ${({ theme }) => theme.spaces[1]};
   flex-wrap: wrap;
 `;
-const SelectContent = styledComponents.styled(uiPrimitives.Select.Content)`
+const SelectContent = React__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledContent, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaImpl$1, { children: props.children }) });
+});
+const StyledContent = styledComponents.styled(uiPrimitives.Select.Content)`
   background: ${({ theme }) => theme.colors.neutral0};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -5144,60 +5201,6 @@ const SkipToContent = ({ children }) => {
   );
 };
 const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
-const ScrollAreaImpl$1 = React__namespace.forwardRef(
-  ({ children, viewportRef, ...restProps }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaViewport, { ref: viewportRef, children }),
-      /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) })
-    ] });
-  }
-);
-const ScrollAreaRoot = styledComponents.styled(ScrollArea__namespace.Root)`
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-`;
-const ScrollAreaViewport = styledComponents.styled(ScrollArea__namespace.Viewport)`
-  min-width: 100%;
-  padding-inline: 4px;
-`;
-const Scrollbar = styledComponents.styled(ScrollArea__namespace.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 = styledComponents.styled(ScrollArea__namespace.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__namespace.Root;
 const Trigger$2 = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Trigger, { ...props, asChild: true, ref: forwardedRef });