@frontify/fondue-components 14.0.0 → 14.1.0

package/dist/fondue-components18.js

@@ -1,33 +1,36 @@
-import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-scroll-area";
-import { forwardRef as b } from "react";
+import { forwardRef as h } from "react";
 import o from "./fondue-components55.js";
-const h = ({
-  type: t,
+const p = ({
+  type: t = "hover",
   maxHeight: e = "100%",
   maxWidth: s = "100%",
   showShadow: c = !1,
-  padding: i,
-  children: m,
+  scrollbarGutter: i = "auto",
+  padding: m,
+  children: n,
   "data-test-id": r = "fondue-scroll-area"
-}, n) => /* @__PURE__ */ d(
+}, d) => /* @__PURE__ */ b(
   a.Root,
   {
     type: t,
     className: o.root,
     style: { maxWidth: s },
     "data-test-id": r,
-    ref: n,
+    ref: d,
     children: [
       /* @__PURE__ */ l(
         a.Viewport,
         {
           className: o.viewport,
           style: { maxHeight: e },
-          "data-scroll-padding": i,
+          "data-scroll-padding": m,
           "data-show-shadow": c,
+          "data-scrollbar-type": t,
+          "data-scrollbar-gutter": i,
           "data-test-id": `${r}-viewport`,
-          children: m
+          children: n
         }
       ),
       /* @__PURE__ */ l(
@@ -63,9 +66,9 @@ const h = ({
       /* @__PURE__ */ l(a.Corner, { className: o.corner, "data-test-id": `${r}-corner` })
     ]
   }
-), p = b(h);
-p.displayName = "ScrollArea";
+), u = h(p);
+u.displayName = "ScrollArea";
 export {
-  p as ScrollArea
+  u as ScrollArea
 };
 //# sourceMappingURL=fondue-components18.js.map

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Define the padding of the scroll area\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        padding,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-scroll-padding={padding}\n                data-show-shadow={showShadow}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","padding","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AAuCA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAT;AAAA,IACA,WAAWU,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAR,EAAS;AAAA,IAClB,gBAAcI;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAT,EAAU;AAAA,UACnB,uBAAqBG;AAAA,UACrB,oBAAkBD;AAAA,UAClB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cd,CAAmB;AACzFa,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components18.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Determines if the scrollbar should take up space in the content area\n     * @default 'auto'\n     */\n    scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Define the padding of the scroll area\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type = 'hover',\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        scrollbarGutter = 'auto',\n        padding,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-scroll-padding={padding}\n                data-show-shadow={showShadow}\n                data-scrollbar-type={type}\n                data-scrollbar-gutter={scrollbarGutter}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","scrollbarGutter","padding","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AA4CA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAV;AAAA,IACA,WAAWW,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAT,EAAS;AAAA,IAClB,gBAAcK;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAV,EAAU;AAAA,UACnB,uBAAqBI;AAAA,UACrB,oBAAkBF;AAAA,UAClB,uBAAqBH;AAAA,UACrB,yBAAuBI;AAAA,UACvB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cf,CAAmB;AACzFc,EAAW,cAAc;"}

package/dist/fondue-components21.js

@@ -1,15 +1,15 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { IconCaretDown as E, IconCheckMark as H, IconExclamationMarkTriangle as T } from "@frontify/fondue-icons";
+import { IconCaretDown as H, IconCheckMark as T, IconExclamationMarkTriangle as $ } from "@frontify/fondue-icons";
 import * as g from "@radix-ui/react-popover";
-import { Slot as V } from "@radix-ui/react-slot";
-import { useSelect as $ } from "downshift";
-import { forwardRef as A, useRef as q, useState as J } from "react";
-import { ForwardedRefCombobox as K } from "./fondue-components59.js";
-import { ForwardedRefSelectItem as L, ForwardedRefSelectItemGroup as Q } from "./fondue-components60.js";
-import { SelectMenu as U } from "./fondue-components61.js";
-import { ForwardedRefSelectSlot as W } from "./fondue-components62.js";
+import { Slot as A } from "@radix-ui/react-slot";
+import { useSelect as q } from "downshift";
+import { forwardRef as J, useRef as K, useState as L } from "react";
+import { ForwardedRefCombobox as Q } from "./fondue-components59.js";
+import { ForwardedRefSelectItem as U, ForwardedRefSelectItemGroup as W } from "./fondue-components60.js";
+import { SelectMenu as X } from "./fondue-components61.js";
+import { ForwardedRefSelectSlot as Y } from "./fondue-components62.js";
 import o from "./fondue-components63.js";
-import { useSelectData as X } from "./fondue-components64.js";
+import { useSelectData as Z } from "./fondue-components64.js";
 const S = ({
   children: h,
   onSelect: s,
@@ -19,17 +19,18 @@ const S = ({
   status: n = "neutral",
   disabled: m,
   alignMenu: w = "start",
-  side: C = "bottom",
-  id: R,
+  side: y = "bottom",
+  id: C,
+  showStringValue: R = !0,
   "data-test-id": i = "fondue-select",
-  ...r
+  ...l
 }, x) => {
-  const { inputSlots: y, menuSlots: F, items: k, clearButton: u, getItemByValue: f } = X(h), v = f(I), B = f(b), c = q(!1), [M, p] = J(!1), { getToggleButtonProps: P, getMenuProps: G, getItemProps: O, reset: z, selectedItem: l, isOpen: D, highlightedIndex: j } = $({
-    items: k,
-    defaultSelectedItem: v,
-    selectedItem: B,
-    toggleButtonId: R,
-    labelId: "aria-labelledby" in r ? r["aria-labelledby"] : void 0,
+  const { inputSlots: F, menuSlots: k, items: v, clearButton: u, getItemByValue: f } = Z(h), B = f(I), M = f(b), c = K(!1), [P, p] = L(!1), { getToggleButtonProps: G, getMenuProps: O, getItemProps: z, reset: D, selectedItem: r, isOpen: V, highlightedIndex: j } = q({
+    items: v,
+    defaultSelectedItem: B,
+    selectedItem: M,
+    toggleButtonId: C,
+    labelId: "aria-labelledby" in l ? l["aria-labelledby"] : void 0,
     onIsOpenChange: () => {
       p(!1);
     },
@@ -40,8 +41,8 @@ const S = ({
       s == null || s((e == null ? void 0 : e.value) ?? null);
     },
     itemToString: (e) => e ? e.label : ""
-  });
-  return /* @__PURE__ */ d(g.Root, { open: D, children: [
+  }), E = r ? !R && r.children || r.label : N;
+  return /* @__PURE__ */ d(g.Root, { open: V, children: [
     /* @__PURE__ */ a(
       g.Anchor,
       {
@@ -61,29 +62,29 @@ const S = ({
             className: o.root,
             "data-status": n,
             "data-disabled": m,
-            "data-empty": !l,
+            "data-empty": !r,
             "data-test-id": i,
-            ...m ? {} : P({
-              "aria-label": "aria-label" in r ? r["aria-label"] : void 0,
+            ...m ? {} : G({
+              "aria-label": "aria-label" in l ? l["aria-label"] : void 0,
               ref: x
             }),
             children: [
-              /* @__PURE__ */ a("span", { className: o.selectedValue, children: l ? l.label : N }),
-              y,
+              /* @__PURE__ */ a("span", { className: o.selectedValue, children: E }),
+              F,
               u && /* @__PURE__ */ a(
-                V,
+                A,
                 {
                   onClick: (e) => {
-                    e.stopPropagation(), z();
+                    e.stopPropagation(), D();
                   },
                   className: o.clear,
                   children: u
                 }
               ),
               /* @__PURE__ */ d("div", { className: o.icons, children: [
-                /* @__PURE__ */ a(E, { size: 16, className: o.caret }),
+                /* @__PURE__ */ a(H, { size: 16, className: o.caret }),
                 n === "success" ? /* @__PURE__ */ a(
-                  H,
+                  T,
                   {
                     size: 16,
                     className: o.iconSuccess,
@@ -91,7 +92,7 @@ const S = ({
                   }
                 ) : null,
                 n === "error" ? /* @__PURE__ */ a(
-                  T,
+                  $,
                   {
                     size: 16,
                     className: o.iconError,
@@ -105,33 +106,33 @@ const S = ({
       }
     ),
     /* @__PURE__ */ a(
-      U,
+      X,
       {
         align: w,
-        side: C,
+        side: y,
         highlightedIndex: j,
-        getMenuProps: G,
-        getItemProps: O,
-        selectedItem: l,
-        hasInteractedSinceOpening: M,
-        children: F
+        getMenuProps: O,
+        getItemProps: z,
+        selectedItem: r,
+        hasInteractedSinceOpening: P,
+        children: k
       }
     )
   ] });
 };
 S.displayName = "Select";
-const Y = A(S), t = Y;
+const _ = J(S), t = _;
 t.displayName = "Select";
-t.Combobox = K;
+t.Combobox = Q;
 t.Combobox.displayName = "Select.Combobox";
-t.Item = L;
+t.Item = U;
 t.Item.displayName = "Select.Item";
-t.Group = Q;
+t.Group = W;
 t.Group.displayName = "Select.Group";
-t.Slot = W;
+t.Slot = Y;
 t.Slot.displayName = "Select.Slot";
 export {
-  Y as ForwardedRefSelect,
+  _ as ForwardedRefSelect,
   t as Select,
   S as SelectInput
 };

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        'data-test-id': dataTestId = 'fondue-select',\n        ...props\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect?.(selectedItem?.value ?? null);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","side","id","dataTestId","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}
+{"version":3,"file":"fondue-components21.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plan text when set to true, items child components are used if set to true\n     * @default true\n     */\n    showStringValue?: boolean;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        ...props\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect?.(selectedItem?.value ?? null);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    const displayedValue = selectedItem\n        ? (!showStringValue && selectedItem.children) || selectedItem.label\n        : placeholder;\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{displayedValue}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}

package/dist/fondue-components55.js

@@ -1,4 +1,4 @@
-const o = "_root_4gn3w_4", r = "_viewport_4gn3w_12", t = "_scrollbar_4gn3w_34", _ = "_thumb_4gn3w_66", n = "_corner_4gn3w_84", c = {
+const o = "_root_hkznm_4", r = "_viewport_hkznm_12", t = "_scrollbar_hkznm_43", _ = "_thumb_hkznm_75", n = "_corner_hkznm_93", c = {
   root: o,
   viewport: r,
   scrollbar: t,

package/dist/fondue-components63.js

@@ -1,36 +1,36 @@
-const c = "_root_1m2qz_7", o = "_selectedValue_1m2qz_69", _ = "_input_1m2qz_82", t = "_slot_1m2qz_108", e = "_clear_1m2qz_160", n = "_icons_1m2qz_173", s = "_caret_1m2qz_179", r = "_iconSuccess_1m2qz_207", m = "_iconError_1m2qz_213", a = "_menu_1m2qz_219", l = "_portal_1m2qz_242", u = "_item_1m2qz_258", i = "_checkmarkIcon_1m2qz_299", q = "_itemValue_1m2qz_306", z = "_group_1m2qz_320", p = {
-  root: c,
-  selectedValue: o,
+const o = "_root_o7dw5_7", c = "_selectedValue_o7dw5_69", _ = "_input_o7dw5_87", t = "_slot_o7dw5_113", e = "_clear_o7dw5_165", n = "_icons_o7dw5_178", s = "_caret_o7dw5_184", r = "_iconSuccess_o7dw5_212", a = "_iconError_o7dw5_218", l = "_menu_o7dw5_224", d = "_portal_o7dw5_247", u = "_item_o7dw5_263", i = "_checkmarkIcon_o7dw5_304", w = "_itemValue_o7dw5_311", m = "_group_o7dw5_325", p = {
+  root: o,
+  selectedValue: c,
   input: _,
   slot: t,
   clear: e,
   icons: n,
   caret: s,
   iconSuccess: r,
-  iconError: m,
-  menu: a,
-  portal: l,
+  iconError: a,
+  menu: l,
+  portal: d,
   item: u,
   checkmarkIcon: i,
-  itemValue: q,
-  group: z
+  itemValue: w,
+  group: m
 };
 export {
   s as caret,
   i as checkmarkIcon,
   e as clear,
   p as default,
-  z as group,
-  m as iconError,
+  m as group,
+  a as iconError,
   r as iconSuccess,
   n as icons,
   _ as input,
   u as item,
-  q as itemValue,
-  a as menu,
-  l as portal,
-  c as root,
-  o as selectedValue,
+  w as itemValue,
+  l as menu,
+  d as portal,
+  o as root,
+  c as selectedValue,
   t as slot
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components64.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components64.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n *   <SelectItem value=\"1\">Option 1</SelectItem>\n *   <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (children: ReactNode): { value: string; label: string }[] => {\n    const values: { value: string; label: string }[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n            values.push(getSelectOptionValue(child.props));\n        } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n            const optionValues = getRecursiveOptionValues(child.props.children);\n            for (const optionValue of optionValues) {\n                values.push(optionValue);\n            }\n        }\n    });\n    return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode) => {\n    const [filterText, setFilterText] = useState('');\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n\n        const hasSlots = Children.toArray(children).some(\n            (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n        );\n\n        if (hasSlots) {\n            Children.forEach(children, (child) => {\n                if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n                    if (child.props.name === 'menu') {\n                        menuSlots.push(child.props.children);\n                    } else if (child.props.name === 'left' || child.props.name === 'right') {\n                        inputSlots.push(child);\n                    } else if (child.props.name === 'clear') {\n                        if (child.props.children) {\n                            clearButton = child;\n                        } else {\n                            clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n                        }\n                    }\n                }\n            });\n        } else {\n            menuSlots.push(children);\n        }\n\n        const itemValues = getRecursiveOptionValues(menuSlots);\n\n        return { inputSlots, menuSlots, itemValues, clearButton };\n    }, [children]);\n\n    const items = useMemo(\n        () =>\n            itemValues.filter(\n                (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n            ),\n        [itemValues, filterText],\n    );\n\n    const getItemByValue = useCallback(\n        (value?: string | null) => (value ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    return {\n        items,\n        menuSlots,\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n    };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","items","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AA6Ba,MAAAA,IAA2B,CAACC,MAA4D;AACjG,QAAMC,IAA6C,CAAC;AAC3C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAC3B;AAAA,EACJ,CACH,GACMP;AACX,GAQaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAC,GAC3BC,IAAyB,CAAC;AAC5BE,QAAAA;AAMJ,IAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IACxE,IAGahB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,GAAI;AAAA,IAGnF,CACH,IAEDN,EAAU,KAAKd,CAAQ;AAGrBe,UAAAA,IAAahB,EAAyBe,CAAS;AAE9C,WAAA,EAAE,YAAAD,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY;AAAA,EAAA,GACzD,CAAChB,CAAQ,CAAC,GAEPqB,IAAQJ;AAAA,IACV,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,cAAc,SAASZ,EAAW,YAAa,CAAA;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAC3B,GAEMa,IAAiBC;AAAA,IACnB,CAACC,MAA2BA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IACtF,CAACV,CAAU;AAAA,EACf;AAEO,SAAA;AAAA,IACH,OAAAM;AAAA,IACA,WAAAP;AAAA,IACA,YAAAJ;AAAA,IACA,YAAAG;AAAA,IACA,aAAAG;AAAA,IACA,eAAAL;AAAA,IACA,gBAAAY;AAAA,EACJ;AACJ;"}
+{"version":3,"file":"fondue-components64.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n *   <SelectItem value=\"1\">Option 1</SelectItem>\n *   <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (\n    children: ReactNode,\n): { value: string; label: string; children?: ReactNode }[] => {\n    const values: { value: string; label: string }[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n            values.push(getSelectOptionValue(child.props));\n        } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n            const optionValues = getRecursiveOptionValues(child.props.children);\n            for (const optionValue of optionValues) {\n                values.push(optionValue);\n            }\n        }\n    });\n    return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode) => {\n    const [filterText, setFilterText] = useState('');\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n\n        const hasSlots = Children.toArray(children).some(\n            (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n        );\n\n        if (hasSlots) {\n            Children.forEach(children, (child) => {\n                if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n                    if (child.props.name === 'menu') {\n                        menuSlots.push(child.props.children);\n                    } else if (child.props.name === 'left' || child.props.name === 'right') {\n                        inputSlots.push(child);\n                    } else if (child.props.name === 'clear') {\n                        if (child.props.children) {\n                            clearButton = child;\n                        } else {\n                            clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n                        }\n                    }\n                }\n            });\n        } else {\n            menuSlots.push(children);\n        }\n\n        const itemValues = getRecursiveOptionValues(menuSlots);\n\n        return { inputSlots, menuSlots, itemValues, clearButton };\n    }, [children]);\n\n    const items = useMemo(\n        () =>\n            itemValues.filter(\n                (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n            ),\n        [itemValues, filterText],\n    );\n\n    const getItemByValue = useCallback(\n        (value?: string | null) => (value ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    return {\n        items,\n        menuSlots,\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n    };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","items","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AA6Ba,MAAAA,IAA2B,CACpCC,MAC2D;AAC3D,QAAMC,IAA6C,CAAC;AAC3C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAC3B;AAAA,EACJ,CACH,GACMP;AACX,GAQaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAC,GAC3BC,IAAyB,CAAC;AAC5BE,QAAAA;AAMJ,IAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IACxE,IAGahB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,GAAI;AAAA,IAGnF,CACH,IAEDN,EAAU,KAAKd,CAAQ;AAGrBe,UAAAA,IAAahB,EAAyBe,CAAS;AAE9C,WAAA,EAAE,YAAAD,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY;AAAA,EAAA,GACzD,CAAChB,CAAQ,CAAC,GAEPqB,IAAQJ;AAAA,IACV,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,cAAc,SAASZ,EAAW,YAAa,CAAA;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAC3B,GAEMa,IAAiBC;AAAA,IACnB,CAACC,MAA2BA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IACtF,CAACV,CAAU;AAAA,EACf;AAEO,SAAA;AAAA,IACH,OAAAM;AAAA,IACA,WAAAP;AAAA,IACA,YAAAJ;AAAA,IACA,YAAAG;AAAA,IACA,aAAAG;AAAA,IACA,eAAAL;AAAA,IACA,gBAAAY;AAAA,EACJ;AACJ;"}

package/dist/fondue-components78.js

@@ -1,25 +1,26 @@
 import { Children as a, isValidElement as u, cloneElement as f } from "react";
 import { ForwardedRefSelectItem as E } from "./fondue-components60.js";
 const g = ({
-  children: r,
-  value: o,
+  children: o,
+  value: r,
   label: s
-}) => r && typeof r == "string" ? {
-  value: o || r,
-  label: s || r
+}) => o && typeof o == "string" ? {
+  value: r || o,
+  label: s || o
 } : {
-  value: o || "",
-  label: s || o || ""
-}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
+  value: r || "",
+  label: s || r || "",
+  ...o ? { children: o } : null
+}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
   const n = [];
   let t = 0;
-  return a.forEach(r, (e) => {
+  return a.forEach(o, (e) => {
     if (w(e, E) && u(e))
-      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
     else if (u(e) && (e != null && e.props.children)) {
       const { parsedChildren: m, subElementCount: C } = y(
         e.props.children,
-        o,
+        r,
         "",
         p + t
       );

package/dist/fondue-components78.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components78.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAC3B,IAGG;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AACpC,GAkBSE,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAC;AACxC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAChB;AACA,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EACrB;AACJ;"}
+{"version":3,"file":"fondue-components78.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string, children?: ReactNode }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n    children?: ReactNode;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n        ...(children ? { children } : null),\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAC3B,IAGG;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAClC,GAkBSG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAC;AACxC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAChB;AACA,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EACrB;AACJ;"}

package/dist/index.d.ts

@@ -1228,12 +1228,17 @@ export declare const ScrollArea: ForwardRefExoticComponent<ScrollAreaProps & Ref
 declare type ScrollAreaProps = {
     /**
      * "auto" visible when content is overflowing on the corresponding orientation.
-     * "always" always visible regardless of whether the content is overflowing.
+     * "always" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.
      * "scroll" visible when the user is scrolling along its corresponding orientation.
      * "hover" when the user is hovering over the scroll area.
      * @default 'hover'
      */
     type?: 'auto' | 'always' | 'scroll' | 'hover';
+    /**
+     * Determines if the scrollbar should take up space in the content area
+     * @default 'auto'
+     */
+    scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';
     /**
      * Maximum height of the scroll area
      * @default '100%'
@@ -1360,10 +1365,15 @@ declare type SelectComponentProps = {
      * Id of the select component
      */
     id?: string;
+    /**
+     * The value of the select is shown as plan text when set to true, items child components are used if set to true
+     * @default true
+     */
+    showStringValue?: boolean;
 } & CommonAriaProps;
 
 declare const SelectInput: {
-    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, alignMenu, side, id, "data-test-id": dataTestId, ...props }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
+    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, alignMenu, side, id, showStringValue, "data-test-id": dataTestId, ...props }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
     displayName: string;
 };