@frontify/fondue-components 19.1.0 → 19.3.0

package/dist/fondue-components6.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components6.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\ntype ButtonAspect = 'default' | 'square';\n\nexport type ButtonProps = {\n    /**\n     * @default \"button\"\n     */\n    type?: ButtonType;\n    /**\n     * @default null\n     */\n    title?: string;\n    /**\n     * @default \"default\"\n     */\n    variant?: ButtonStyle;\n    /**\n     * @default \"strong\"\n     */\n    emphasis?: ButtonEmphasis;\n    /**\n     * @default \"medium\"\n     */\n    size?: ButtonSize;\n    /**\n     * @default \"medium\"\n     */\n    rounding?: ButtonRounding;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * @default \"default\"\n     */\n    aspect?: ButtonAspect;\n    /**\n     * @default true\n     */\n    hugWidth?: boolean;\n    children?: ReactNode;\n    onPress?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    form?: string;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n    (\n        {\n            children,\n            type = 'button',\n            variant,\n            size = 'medium',\n            form,\n            'data-test-id': dataTestId = 'fondue-button',\n            className = '',\n            onPress = () => {},\n            hugWidth = true,\n            ...props\n        }: ButtonProps,\n        ref: ForwardedRef<HTMLButtonElement | null>,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                type={type}\n                form={form}\n                data-test-id={dataTestId}\n                className={cn(\n                    buttonStyles({ size, variant, hugWidth, ...props }),\n                    textStyles({ variant, ...props }),\n                    iconStyles({ variant, ...props }),\n                    className,\n                )}\n                {...props}\n                onClick={(event) => {\n                    // @ts-expect-error - Allows other components who use Button as a trigger to pass an action\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n                    props.onClick?.(event);\n                    onPress?.(event);\n                }}\n            >\n                {children}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","children","type","variant","size","form","dataTestId","className","onPress","hugWidth","props","ref","jsx","cn","buttonStyles","textStyles","iconStyles","event","_a"],"mappings":";;;;;;AAoEO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAAT;AAAA,MACA,MAAAG;AAAA,MACA,gBAAcC;AAAA,MACd,WAAWO;AAAA,QACPC,EAAa,EAAE,MAAAV,GAAM,SAAAD,GAAS,UAAAM,GAAU,GAAGC,GAAO;AAAA,QAClDK,EAAW,EAAE,SAAAZ,GAAS,GAAGO,GAAO;AAAA,QAChCM,EAAW,EAAE,SAAAb,GAAS,GAAGO,GAAO;AAAA,QAChCH;AAAA,MACJ;AAAA,MACC,GAAGG;AAAA,MACJ,SAAS,CAACO,MAAU;;AAGhB,SAAAC,IAAAR,EAAM,YAAN,QAAAQ,EAAA,KAAAR,GAAgBO,IAChBT,KAAA,QAAAA,EAAUS;AAAA,MACd;AAAA,MAEC,UAAAhB;AAAA,IAAA;AAAA,EACL;AAGZ;AAEAF,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components6.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\ntype ButtonAspect = 'default' | 'square';\n\nexport type ButtonProps = {\n    /**\n     * @default \"button\"\n     */\n    type?: ButtonType;\n    /**\n     * @default null\n     */\n    title?: string;\n    /**\n     * @default \"default\"\n     */\n    variant?: ButtonStyle;\n    /**\n     * @default \"strong\"\n     */\n    emphasis?: ButtonEmphasis;\n    /**\n     * @default \"medium\"\n     */\n    size?: ButtonSize;\n    /**\n     * @default \"medium\"\n     */\n    rounding?: ButtonRounding;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * @default \"default\"\n     */\n    aspect?: ButtonAspect;\n    /**\n     * @default true\n     */\n    hugWidth?: boolean;\n    children?: ReactNode;\n    onPress?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    form?: string;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n    (\n        {\n            children,\n            type = 'button',\n            variant,\n            size = 'medium',\n            form,\n            'data-test-id': dataTestId = 'fondue-button',\n            className = '',\n            onPress = () => {},\n            hugWidth = true,\n            ...props\n        }: ButtonProps,\n        ref: ForwardedRef<HTMLButtonElement | null>,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                type={type}\n                form={form}\n                data-test-id={dataTestId}\n                className={cn(\n                    buttonStyles({ size, variant, hugWidth, ...props }),\n                    textStyles({ variant, ...props }),\n                    iconStyles({ variant, ...props }),\n                    className,\n                )}\n                {...props}\n                onClick={(event) => {\n                    // @ts-expect-error - Allows other components who use Button as a trigger to pass an action\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n                    props.onClick?.(event);\n                    onPress?.(event);\n                }}\n            >\n                {children}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","children","type","variant","size","form","dataTestId","className","onPress","hugWidth","props","ref","jsx","cn","buttonStyles","textStyles","iconStyles","event","_a"],"mappings":";;;;;;AAoEO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAAT;AAAA,MACA,MAAAG;AAAA,MACA,gBAAcC;AAAA,MACd,WAAWO;AAAA,QACPC,EAAa,EAAE,MAAAV,GAAM,SAAAD,GAAS,UAAAM,GAAU,GAAGC,GAAO;AAAA,QAClDK,EAAW,EAAE,SAAAZ,GAAS,GAAGO,GAAO;AAAA,QAChCM,EAAW,EAAE,SAAAb,GAAS,GAAGO,GAAO;AAAA,QAChCH;AAAA,MAAA;AAAA,MAEH,GAAGG;AAAA,MACJ,SAAS,CAACO,MAAU;;AAGhB,SAAAC,IAAAR,EAAM,YAAN,QAAAQ,EAAA,KAAAR,GAAgBO,IAChBT,KAAA,QAAAA,EAAUS;AAAA,MACd;AAAA,MAEC,UAAAhB;AAAA,IAAA;AAAA,EAAA;AAIjB;AAEAF,EAAO,cAAc;"}

package/dist/fondue-components60.js

@@ -1,28 +1,16 @@
-import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
-const U = ({
-  prop: e,
-  defaultProp: n,
-  onChange: s = () => {
-  }
-}) => {
-  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
-    (l) => {
-      if (t) {
-        const u = typeof l == "function" ? l(e) : l;
-        u !== e && r(u);
-      } else
-        c(l);
-    },
-    [t, e, c, r]
-  );
-  return [i, a];
-}, b = ({ defaultProp: e, onChange: n }) => {
-  const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
-  return m(() => {
-    c.current !== o && (t == null || t(o), c.current = o);
-  }, [o, c, t]), s;
+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,
+  thumb: _,
+  corner: n
 };
 export {
-  U as useControllableState
+  n as corner,
+  c as default,
+  o as root,
+  t as scrollbar,
+  _ as thumb,
+  r as viewport
 };
 //# sourceMappingURL=fondue-components60.js.map

package/dist/fondue-components60.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components60.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const uncontrolledState = useState<TValue | undefined>(defaultProp);\n    const [value] = uncontrolledState;\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAA;AACrB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAC1D;AAEO,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}
+{"version":3,"file":"fondue-components60.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components61.js

@@ -1,20 +1,8 @@
-const t = "_root_1yzu4_5", e = "_item_1yzu4_30", a = "_itemLabel_1yzu4_50", i = "_itemLabelActive_1yzu4_70", o = "_itemLabelInactive_1yzu4_100", _ = "_activeIndicator_1yzu4_130", c = "_separator_1yzu4_227", n = {
-  root: t,
-  item: e,
-  itemLabel: a,
-  itemLabelActive: i,
-  itemLabelInactive: o,
-  activeIndicator: _,
-  separator: c
+const o = "_root_5sic9_5", t = {
+  root: o
 };
 export {
-  _ as activeIndicator,
-  n as default,
-  e as item,
-  a as itemLabel,
-  i as itemLabelActive,
-  o as itemLabelInactive,
-  t as root,
-  c as separator
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components61.js.map

package/dist/fondue-components61.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components61.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"fondue-components61.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components62.js

@@ -1,150 +1,28 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { IconCaretDown as q, IconCheckMark as G, IconExclamationMarkTriangle as J } from "@frontify/fondue-icons";
-import * as N from "@radix-ui/react-popover";
-import { Slot as K } from "@radix-ui/react-slot";
-import { useCombobox as Q } from "downshift";
-import { forwardRef as U, useState as W, useRef as X, useMemo as Y } from "react";
-import { SelectMenu as Z } from "./fondue-components64.js";
-import o from "./fondue-components66.js";
-import { useSelectData as _ } from "./fondue-components67.js";
-const S = ({
-  children: B,
-  onSelect: l,
-  value: O,
-  defaultValue: R,
-  placeholder: v = "",
-  status: s = "neutral",
-  disabled: g,
-  "data-test-id": i = "fondue-select-combobox",
-  alignMenu: M = "start",
-  side: y = "bottom",
-  id: F,
-  viewportCollisionPadding: L = "compact",
-  ...a
-}, P) => {
-  const { inputSlots: k, menuSlots: D, items: c, filterText: H, clearButton: f, getItemByValue: p, setFilterText: h } = _(B), [T, b] = W(!1), {
-    getInputProps: u,
-    getToggleButtonProps: V,
-    getMenuProps: z,
-    getItemProps: j,
-    reset: C,
-    selectedItem: r,
-    isOpen: $,
-    highlightedIndex: A,
-    inputValue: d
-  } = Q({
-    items: c,
-    selectedItem: p(O),
-    defaultSelectedItem: p(R),
-    defaultHighlightedIndex: 0,
-    toggleButtonId: F,
-    labelId: "aria-labelledby" in a ? a["aria-labelledby"] : void 0,
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      l == null || l((e == null ? void 0 : e.value) ?? null);
+import { useMemo as f, useCallback as d, useState as v, useRef as m, useEffect as S } from "react";
+const U = ({
+  prop: s,
+  defaultProp: c,
+  onChange: t = () => {
+  }
+}) => {
+  const [n, o] = b({ defaultProp: c, onChange: t }), e = s !== void 0, i = e ? s : n, r = f(() => t, [t]), a = d(
+    (l) => {
+      if (e) {
+        const u = typeof l == "function" ? l(s) : l;
+        u !== s && r(u);
+      } else
+        o(l);
     },
-    onInputValueChange: ({ inputValue: e }) => {
-      h(e);
-    },
-    onIsOpenChange: () => {
-      b(!1), h("");
-    },
-    onHighlightedIndexChange: () => {
-      b(!0);
-    },
-    itemToString: (e) => e ? e.label : ""
-  }), n = X(!1), x = Y(
-    () => !c.find((e) => e.label.toLowerCase().includes(d.toLowerCase())),
-    [d, c]
-  ), E = (e) => {
-    var I, w;
-    e.target.dataset.showFocusRing = "false", n.current = !1, (r == null ? void 0 : r.label.toLocaleLowerCase()) !== d.toLocaleLowerCase() && C(), u().onBlur && ((w = (I = u()).onBlur) == null || w.call(I, e));
-  };
-  return /* @__PURE__ */ m(N.Root, { open: $, children: [
-    /* @__PURE__ */ t(N.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: P, className: o.root, "data-status": x ? "error" : s, children: [
-      /* @__PURE__ */ t(
-        "input",
-        {
-          ...u({
-            "aria-label": "aria-label" in a ? a["aria-label"] : void 0
-          }),
-          "data-test-id": i,
-          placeholder: v,
-          className: o.input,
-          disabled: g,
-          onMouseDown: (e) => {
-            n.current = !0, e.currentTarget.dataset.showFocusRing = "false";
-          },
-          onFocus: (e) => {
-            n.current || (e.target.dataset.showFocusRing = "true");
-          },
-          onBlur: E
-        }
-      ),
-      k,
-      f && /* @__PURE__ */ t(
-        K,
-        {
-          onClick: (e) => {
-            e.stopPropagation(), C();
-          },
-          className: o.clear,
-          role: "button",
-          children: f
-        }
-      ),
-      /* @__PURE__ */ m("div", { className: o.icons, children: [
-        /* @__PURE__ */ t(
-          "button",
-          {
-            "aria-label": "toggle menu",
-            ...V(),
-            type: "button",
-            disabled: g,
-            onMouseDown: () => {
-              n.current = !0;
-            },
-            children: /* @__PURE__ */ t(q, { size: 16, className: o.caret })
-          }
-        ),
-        s === "success" ? /* @__PURE__ */ t(
-          G,
-          {
-            size: 16,
-            className: o.iconSuccess,
-            "data-test-id": `${i}-success-icon`
-          }
-        ) : null,
-        x || s === "error" ? /* @__PURE__ */ t(
-          J,
-          {
-            size: 16,
-            className: o.iconError,
-            "data-test-id": `${i}-error-icon`
-          }
-        ) : null
-      ] })
-    ] }) }),
-    /* @__PURE__ */ t(
-      Z,
-      {
-        align: M,
-        side: y,
-        highlightedIndex: A,
-        filterText: H,
-        getMenuProps: z,
-        getItemProps: j,
-        selectedItem: r,
-        hasInteractedSinceOpening: T,
-        viewportCollisionPadding: L,
-        children: D
-      }
-    )
-  ] });
+    [e, s, o, r]
+  );
+  return [i, a];
+}, b = ({ defaultProp: s, onChange: c }) => {
+  const [t, n] = v(s), o = m(t), e = f(() => c, [c]);
+  return S(() => {
+    o.current !== t && (e == null || e(t), o.current = t);
+  }, [t, o, e]), [t, n];
 };
-S.displayName = "Select.Combobox";
-const ce = U(S);
 export {
-  ce as ForwardedRefCombobox,
-  S as SelectCombobox
+  U as useControllableState
 };
 //# sourceMappingURL=fondue-components62.js.map

package/dist/fondue-components62.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components62.js","sources":["../src/components/Select/Combobox.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 { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox 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 combobox component. This is used to control the combobox externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox 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 combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end' /**\n     * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * Id of the combobox component\n     */\n    id?: string;\n    /**\n     * The data test id of the combobox component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        viewportCollisionPadding = 'compact',\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect?.(selectedItem?.value ?? null);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n            setFilterText('');\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\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={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label=\"toggle menu\"\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || 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                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components62.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const [value, setValue] = useState<TValue | undefined>(defaultProp);\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return [value, setValue] as const;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AACtC,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAEpC;AACI,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAG1D,SAAO,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAClH,QAAM,CAACK,GAAOG,CAAQ,IAAIG,EAA6BZ,CAAW,GAC5Da,IAAeC,EAAOR,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAc,EAAU,MAAM;AACZ,IAAIF,EAAa,YAAYP,MACzBC,KAAA,QAAAA,EAAeD,IACfO,EAAa,UAAUP;AAAA,EAE/B,GAAG,CAACA,GAAOO,GAAcN,CAAY,CAAC,GAE/B,CAACD,GAAOG,CAAQ;AAC3B;"}

package/dist/fondue-components63.js

@@ -1,22 +1,20 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconCheckMark as n } from "@frontify/fondue-icons";
-import { forwardRef as l } from "react";
-import a from "./fondue-components66.js";
-const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
-  /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
-  /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
-] });
-o.displayName = "Select.Item";
-const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
-  t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
-  c
-] }, e);
-s.displayName = "Select.Group";
-const N = l(s);
+const t = "_root_1yzu4_5", e = "_item_1yzu4_30", a = "_itemLabel_1yzu4_50", i = "_itemLabelActive_1yzu4_70", o = "_itemLabelInactive_1yzu4_100", _ = "_activeIndicator_1yzu4_130", c = "_separator_1yzu4_227", n = {
+  root: t,
+  item: e,
+  itemLabel: a,
+  itemLabelActive: i,
+  itemLabelInactive: o,
+  activeIndicator: _,
+  separator: c
+};
 export {
-  I as ForwardedRefSelectItem,
-  N as ForwardedRefSelectItemGroup,
-  o as SelectItem,
-  s as SelectItemGroup
+  _ as activeIndicator,
+  n as default,
+  e as item,
+  a as itemLabel,
+  i as itemLabelActive,
+  o as itemLabelInactive,
+  t as root,
+  c as separator
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components63.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components63.js","sources":["../src/components/Select/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            <div className={styles.itemValue}>{props.children}</div>\n            <IconCheckMark className={styles.checkmarkIcon} />\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The groups heading\n     */\n    heading?: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, heading, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,wBAGK,MAAG,EAAA,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAI,EAAA,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EACjD,gBAAAD,EAAAE,GAAA,EAAc,WAAWD,EAAO,cAAe,CAAA;AAAA,GACpD;AAGRL,EAAW,cAAc;AAEZ,MAAAO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAA2B,GACtFE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EACGS,IAAA,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAC,gBAAAD,EAAA,QAAA,EAAM,UAAQQ,EAAA,CAAA,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAK,IAA8BN,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components63.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components64.js

@@ -1,80 +1,154 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as i from "@radix-ui/react-popover";
-import { Slot as C } from "@radix-ui/react-slot";
-import { isValidElement as V } from "react";
-import { useFondueTheme as g, ThemeProvider as A } from "./fondue-components29.js";
-import n from "./fondue-components66.js";
-import { recursiveMap as D, getSelectOptionValue as M } from "./fondue-components83.js";
-const T = ({
-  highlightedIndex: p,
-  getMenuProps: l,
-  getItemProps: m,
-  children: u,
-  filterText: c,
-  align: f,
-  side: d,
-  selectedItem: t,
-  hasInteractedSinceOpening: h,
-  viewportCollisionPadding: v = "compact"
-}) => {
-  const P = (e) => {
-    e.preventDefault();
-  }, O = {
-    compact: 8,
-    spacious: 24
-  }, N = g();
-  return /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ r(A, { theme: N, children: /* @__PURE__ */ r(
-    i.Content,
-    {
-      align: f,
-      side: d,
-      collisionPadding: O[v] + 8,
-      onOpenAutoFocus: P,
-      className: n.portal,
-      children: /* @__PURE__ */ r(
-        "ul",
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { IconCaretDown as Q, IconCheckMark as U, IconExclamationMarkTriangle as W } from "@frontify/fondue-icons";
+import * as B from "@radix-ui/react-popover";
+import { Slot as X } from "@radix-ui/react-slot";
+import { useCombobox as Y } from "downshift";
+import { forwardRef as Z, useState as _, useRef as A, useMemo as ee } from "react";
+import { LoadingCircle as oe } from "./fondue-components18.js";
+import { ForwardedRefSelectSlot as te } from "./fondue-components67.js";
+import { SelectMenu as re } from "./fondue-components66.js";
+import t from "./fondue-components68.js";
+import { useSelectData as ae } from "./fondue-components69.js";
+const L = ({
+  children: O,
+  onSelect: i,
+  value: v,
+  defaultValue: F,
+  placeholder: M = "",
+  status: s = "neutral",
+  disabled: f,
+  "data-test-id": r = "fondue-select-combobox",
+  alignMenu: P = "start",
+  side: k = "bottom",
+  id: y,
+  viewportCollisionPadding: z = "compact",
+  getAsyncItems: c,
+  ...a
+}, D) => {
+  const { inputSlots: H, menuSlots: V, items: u, filterText: $, clearButton: h, getItemByValue: p, setFilterText: b, asyncItemStatus: C } = ae(O, c), [j, x] = _(!1), {
+    getInputProps: d,
+    getToggleButtonProps: E,
+    getMenuProps: T,
+    getItemProps: q,
+    reset: w,
+    selectedItem: l,
+    isOpen: S,
+    highlightedIndex: G,
+    inputValue: m
+  } = Y({
+    items: u,
+    selectedItem: p(v),
+    defaultSelectedItem: p(F),
+    defaultHighlightedIndex: 0,
+    toggleButtonId: y,
+    labelId: "aria-labelledby" in a ? a["aria-labelledby"] : void 0,
+    onSelectedItemChange: ({ selectedItem: e }) => {
+      i == null || i((e == null ? void 0 : e.value) ?? null);
+    },
+    onInputValueChange: ({ inputValue: e }) => {
+      b(e);
+    },
+    onIsOpenChange: () => {
+      x(!1), b("");
+    },
+    onHighlightedIndexChange: () => {
+      x(!0);
+    },
+    itemToString: (e) => e ? e.label : ""
+  }), n = A(!1), J = ee(
+    () => !c && !u.find((e) => e.label.toLowerCase().includes(m.toLowerCase())),
+    [m, u, c]
+  ), K = (e) => {
+    var N, R;
+    e.target.dataset.showFocusRing = "false", n.current = !1, (l == null ? void 0 : l.label.toLocaleLowerCase()) !== m.toLocaleLowerCase() && w(), d().onBlur && ((R = (N = d()).onBlur) == null || R.call(N, e));
+  }, I = J || !!C.error || s === "error";
+  return /* @__PURE__ */ g(B.Root, { open: S, children: [
+    /* @__PURE__ */ o(B.Anchor, { asChild: !0, children: /* @__PURE__ */ g("div", { ref: D, className: t.root, "data-status": I ? "error" : s, children: [
+      /* @__PURE__ */ o(
+        "input",
         {
-          className: n.menu,
-          ...l({}, { suppressRefError: !0 }),
-          "data-has-interacted": h ? "true" : "false",
-          "data-test-id": "fondue-select-menu",
-          children: D(
-            u,
-            (e, s) => {
-              if (((o) => (
-                // @ts-expect-error - We are explicitly checking for ref
-                V(o) && o.ref !== void 0
-              ))(e)) {
-                const o = M(e.props), a = m({
-                  item: o,
-                  index: s,
-                  ...e.ref ? { ref: e.ref } : {}
-                });
-                return /* @__PURE__ */ r(
-                  C,
-                  {
-                    className: n.item,
-                    "data-highlighted": p === s,
-                    "data-selected": (t == null ? void 0 : t.value) === o.value,
-                    onTouchStart: (S) => {
-                      a.onClick && a.onClick(S);
-                    },
-                    ...a,
-                    children: e
-                  },
-                  e.props.value
-                );
-              }
-            },
-            c
-          ).parsedChildren
+          ...d({
+            "aria-label": "aria-label" in a ? a["aria-label"] : void 0
+          }),
+          "data-test-id": r,
+          placeholder: M,
+          className: t.input,
+          disabled: f,
+          onMouseDown: (e) => {
+            n.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+          },
+          onFocus: (e) => {
+            n.current || (e.target.dataset.showFocusRing = "true");
+          },
+          onBlur: K
+        }
+      ),
+      H,
+      h ? /* @__PURE__ */ o(
+        X,
+        {
+          onClick: (e) => {
+            e.stopPropagation(), w();
+          },
+          className: t.clear,
+          role: "button",
+          children: h
         }
-      )
-    }
-  ) }) });
+      ) : null,
+      C.isLoading && S ? /* @__PURE__ */ o(te, { name: "right", "data-test-id": `${r}-right-slot`, children: /* @__PURE__ */ o(oe, { size: "x-small", "data-test-id": `${r}-loading-circle` }) }) : null,
+      /* @__PURE__ */ g("div", { className: t.icons, children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            "aria-label": "toggle menu",
+            ...E(),
+            type: "button",
+            disabled: f,
+            onMouseDown: () => {
+              n.current = !0;
+            },
+            children: /* @__PURE__ */ o(Q, { size: 16, className: t.caret })
+          }
+        ),
+        s === "success" ? /* @__PURE__ */ o(
+          U,
+          {
+            size: 16,
+            className: t.iconSuccess,
+            "data-test-id": `${r}-success-icon`
+          }
+        ) : null,
+        I ? /* @__PURE__ */ o(
+          W,
+          {
+            size: 16,
+            className: t.iconError,
+            "data-test-id": `${r}-error-icon`
+          }
+        ) : null
+      ] })
+    ] }) }),
+    /* @__PURE__ */ o(
+      re,
+      {
+        align: P,
+        side: k,
+        highlightedIndex: G,
+        filterText: $,
+        getMenuProps: T,
+        getItemProps: q,
+        selectedItem: l,
+        hasInteractedSinceOpening: j,
+        viewportCollisionPadding: z,
+        children: V
+      }
+    )
+  ] });
 };
-T.displayName = "Select.Menu";
+L.displayName = "Select.Combobox";
+const pe = Z(L);
 export {
-  T as SelectMenu
+  pe as ForwardedRefCombobox,
+  L as SelectCombobox
 };
 //# sourceMappingURL=fondue-components64.js.map