@frontify/fondue-components 29.1.0 → 30.0.0

package/dist/fondue-components116.js

@@ -1,16 +1,8 @@
-import { useState as o, useMemo as D } from "react";
-import { transformDateRangeToPickerDateRange as c, transformPickerDateRangeToDateRange as i } from "./fondue-components128.js";
-const l = (e, t) => {
-  const [n, r] = o(e), [s, g] = o(e);
-  return s !== e && (g(e), r(e)), {
-    selectedDateRange: D(() => c(n), [n]),
-    handleSelect: (R) => {
-      const a = i(R);
-      a && (t == null || t(a), r(a));
-    }
-  };
+const o = "_root_gey5w_2", t = {
+  root: o
 };
 export {
-  l as useDateRange
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components116.js.map

package/dist/fondue-components116.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components116.js","sources":["../src/components/DatePicker/hooks/useDateRange.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemo, useState } from 'react';\nimport { type DateRange as InternalDayPickerDateRange, type OnSelectHandler } from 'react-day-picker';\n\nimport { transformDateRangeToPickerDateRange, transformPickerDateRangeToDateRange } from '../helpers/dateTransformer';\nimport { type DatePickerDateRange } from '../types';\n\nexport const useDateRange = (selected: DatePickerDateRange, onSelect?: (dateRange: DatePickerDateRange) => void) => {\n    const [internalSelectedDateRange, setInternalSelectedDateRange] = useState<DatePickerDateRange>(selected);\n    const [prevSelected, setPrevSelected] = useState<DatePickerDateRange | undefined>(selected);\n\n    if (prevSelected !== selected) {\n        setPrevSelected(selected);\n        setInternalSelectedDateRange(selected);\n    }\n\n    const selectedDateRange = useMemo(() => {\n        return transformDateRangeToPickerDateRange(internalSelectedDateRange);\n    }, [internalSelectedDateRange]);\n\n    const handleSelect: OnSelectHandler<InternalDayPickerDateRange> = (pickerDateRange) => {\n        const dateRange = transformPickerDateRangeToDateRange(pickerDateRange);\n\n        if (dateRange) {\n            onSelect?.(dateRange);\n            setInternalSelectedDateRange(dateRange);\n        }\n    };\n\n    return {\n        selectedDateRange,\n        handleSelect,\n    };\n};\n"],"names":["useDateRange","selected","onSelect","internalSelectedDateRange","setInternalSelectedDateRange","useState","prevSelected","setPrevSelected","useMemo","transformDateRangeToPickerDateRange","pickerDateRange","dateRange","transformPickerDateRangeToDateRange"],"mappings":";;AAQO,MAAMA,IAAe,CAACC,GAA+BC,MAAwD;AAChH,QAAM,CAACC,GAA2BC,CAA4B,IAAIC,EAA8BJ,CAAQ,GAClG,CAACK,GAAcC,CAAe,IAAIF,EAA0CJ,CAAQ;AAE1F,SAAIK,MAAiBL,MACjBM,EAAgBN,CAAQ,GACxBG,EAA6BH,CAAQ,IAgBlC;AAAA,IACH,mBAdsBO,EAAQ,MACvBC,EAAoCN,CAAyB,GACrE,CAACA,CAAyB,CAAC;AAAA,IAa1B,cAX8D,CAACO,MAAoB;AACnF,YAAMC,IAAYC,EAAoCF,CAAe;AAErE,MAAIC,MACAT,KAAA,QAAAA,EAAWS,IACXP,EAA6BO,CAAS;AAAA,IAE9C;AAAA,EAII;AAER;"}
+{"version":3,"file":"fondue-components116.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components117.js

@@ -1,20 +1,8 @@
-import { useMemo as o } from "react";
-const f = {
-  hoverBefore: !1,
-  hoverAfter: !1,
-  hoverSelected: !1
-}, h = (r) => ({
-  hoverModifiers: o(() => !(r != null && r.from) || !(r != null && r.to) || (r == null ? void 0 : r.to.getTime()) > (r == null ? void 0 : r.from.getTime()) ? f : {
-    hoverBefore: {
-      before: r == null ? void 0 : r.from
-    },
-    hoverAfter: {
-      after: r == null ? void 0 : r.to
-    },
-    hoverSelected: r == null ? void 0 : r.from
-  }, [r])
-});
+const r = (e) => {
+  if (e)
+    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
+};
 export {
-  h as useRangeHover
+  r as colorToCss
 };
 //# sourceMappingURL=fondue-components117.js.map

package/dist/fondue-components117.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components117.js","sources":["../src/components/DatePicker/hooks/useRangeHover.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemo } from 'react';\nimport { type DateRange as InternalDayPickerDateRange } from 'react-day-picker';\n\ntype RangeHoverModifiers = {\n    hoverBefore:\n        | {\n              before: Date;\n          }\n        | false;\n    hoverAfter:\n        | {\n              after: Date;\n          }\n        | false;\n    hoverSelected: Date | false;\n};\n\nconst DISABLED_MODIFIERS: RangeHoverModifiers = {\n    hoverBefore: false,\n    hoverAfter: false,\n    hoverSelected: false,\n};\n\nexport const useRangeHover = (selectedDateRange?: InternalDayPickerDateRange) => {\n    const hoverModifiers = useMemo(() => {\n        if (\n            !selectedDateRange?.from ||\n            !selectedDateRange?.to ||\n            selectedDateRange?.to.getTime() > selectedDateRange?.from.getTime()\n        ) {\n            return DISABLED_MODIFIERS;\n        }\n        return {\n            hoverBefore: {\n                before: selectedDateRange?.from,\n            },\n            hoverAfter: {\n                after: selectedDateRange?.to,\n            },\n            hoverSelected: selectedDateRange?.from,\n        };\n    }, [selectedDateRange]);\n\n    return {\n        hoverModifiers,\n    };\n};\n"],"names":["DISABLED_MODIFIERS","useRangeHover","selectedDateRange","useMemo"],"mappings":";AAmBA,MAAMA,IAA0C;AAAA,EAC5C,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AACnB,GAEaC,IAAgB,CAACC,OAoBnB;AAAA,EACH,gBApBmBC,EAAQ,MAEvB,EAACD,KAAA,QAAAA,EAAmB,SACpB,EAACA,KAAA,QAAAA,EAAmB,QACpBA,KAAA,gBAAAA,EAAmB,GAAG,cAAYA,KAAA,gBAAAA,EAAmB,KAAK,aAEnDF,IAEJ;AAAA,IACH,aAAa;AAAA,MACT,QAAQE,KAAA,gBAAAA,EAAmB;AAAA,IAAA;AAAA,IAE/B,YAAY;AAAA,MACR,OAAOA,KAAA,gBAAAA,EAAmB;AAAA,IAAA;AAAA,IAE9B,eAAeA,KAAA,gBAAAA,EAAmB;AAAA,EAAA,GAEvC,CAACA,CAAiB,CAAC;AAGlB;"}
+{"version":3,"file":"fondue-components117.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}

package/dist/fondue-components118.js

@@ -1,16 +1,220 @@
-import { useState as o, useMemo as i } from "react";
-import { transformDatePickerDateToDate as m, transformDateToDatePickerDate as d } from "./fondue-components128.js";
-const P = (e, t) => {
-  const [a, r] = o(e), [D, s] = o(e);
-  return D !== e && (s(e), r(e)), {
-    selectedDate: i(() => m(a), [a]),
-    handleSelect: (c) => {
-      const n = d(c);
-      r(n), t == null || t(n);
+import { jsxs as g, jsx as n, Fragment as ue } from "react/jsx-runtime";
+import { IconCaretDown as me } from "@frontify/fondue-icons";
+import * as H from "@radix-ui/react-popover";
+import { useMultipleSelection as K, useCombobox as s } from "downshift";
+import { forwardRef as be, useRef as he, useCallback as fe, useState as ge, useMemo as j } from "react";
+import { LoadingCircle as pe } from "./fondue-components22.js";
+import { useTranslation as Ce } from "./fondue-components43.js";
+import { useBadgeItems as ye } from "./fondue-components135.js";
+import { useFocusRing as Ie } from "./fondue-components136.js";
+import { useSelectData as ve } from "./fondue-components137.js";
+import { useSelectionDescription as Be } from "./fondue-components138.js";
+import c from "./fondue-components122.js";
+import { ClearButton as xe } from "./fondue-components139.js";
+import { CollapsibleBadges as Se } from "./fondue-components140.js";
+import { SelectMenu as we } from "./fondue-components141.js";
+import { ForwardedRefSelectSlot as De } from "./fondue-components100.js";
+import { StatusIcons as Re } from "./fondue-components142.js";
+const z = ({
+  children: E,
+  selectedItemValues: i,
+  onItemSelect: m,
+  onClear: $,
+  placeholder: x = "",
+  status: p = "neutral",
+  disabled: b,
+  "data-test-id": d = "fondue-select-combobox",
+  alignMenu: _ = "start",
+  side: q = "bottom",
+  id: G,
+  viewportCollisionPadding: J = "compact",
+  getAsyncItems: C,
+  onEscapeKeyDown: Q,
+  multiple: o,
+  ...a
+}, U) => {
+  const h = he(null), W = fe((e) => {
+    h.current = e;
+  }, []), { t: X } = Ce(), { inputSlots: Y, menuSlots: Z, items: y, filterText: A, clearButton: S, getItemByValue: r, setFilterText: I, asyncItemStatus: w } = ve(E, C), { wasClickedRef: V, onMouseDown: D, onFocus: R, onBlur: ee } = Ie(), { selectionDescriptionId: L, selectionDescription: O } = Be(
+    o,
+    i,
+    r
+  ), te = ye(i, r), [ae, k] = ge(!1), M = j(() => i.map((e) => r(e)).filter((e) => e !== void 0 && "value" in e && "label" in e), [i, r]), ne = K(
+    o ? {
+      selectedItems: M,
+      onStateChange({ selectedItems: e, type: l }) {
+        if (l === K.stateChangeTypes.SelectedItemKeyDownBackspace) {
+          const t = M.find((u) => !(e != null && e.includes(u)));
+          t && m(t.value);
+        }
+      }
+    } : { selectedItems: [] }
+  ), oe = o ? ne.removeSelectedItem : () => {
+  }, {
+    getInputProps: f,
+    getToggleButtonProps: ie,
+    getMenuProps: le,
+    getItemProps: re,
+    reset: N,
+    selectedItem: v,
+    isOpen: T,
+    highlightedIndex: se,
+    inputValue: B
+  } = s({
+    items: y,
+    selectedItem: o ? null : r(i[0]),
+    defaultHighlightedIndex: 0,
+    toggleButtonId: G,
+    // Only set labelId if aria-labelledby is explicitly provided, otherwise downshift generates an orphan ID
+    ..."aria-labelledby" in a && a["aria-labelledby"] ? { labelId: a["aria-labelledby"] } : {},
+    onSelectedItemChange: ({ selectedItem: e }) => {
+      e && m(e.value), o && I("");
+    },
+    onInputValueChange: ({ inputValue: e }) => {
+      I(e);
+    },
+    onIsOpenChange: () => {
+      k(!1), I("");
+    },
+    onHighlightedIndexChange: () => {
+      k(!0);
+    },
+    itemToString: (e) => e ? e.label : "",
+    stateReducer: (e, l) => {
+      const { changes: t, type: u } = l;
+      if (o)
+        switch (u) {
+          case s.stateChangeTypes.InputKeyDownEnter:
+          case s.stateChangeTypes.ItemClick:
+            return {
+              ...t,
+              isOpen: !0,
+              highlightedIndex: e.highlightedIndex,
+              inputValue: ""
+            };
+          case s.stateChangeTypes.InputBlur:
+            return {
+              ...t,
+              inputValue: ""
+            };
+        }
+      else
+        switch (u) {
+          case s.stateChangeTypes.InputKeyDownEnter:
+          case s.stateChangeTypes.ItemClick:
+            t.selectedItem && e.selectedItem && t.selectedItem.value === e.selectedItem.value && m(t.selectedItem.value);
+            break;
+        }
+      return t;
     }
+  }), F = j(() => o ? !1 : !C && !y.find((e) => e.label.toLowerCase().includes(B.toLowerCase())), [B, y, C, o]) || !!w.error || p === "error", ce = (e, l) => {
+    const t = r(e);
+    t && (oe(t), m(e), h.current && (h.current.focus(), l && (h.current.dataset.showFocusRing = "false")));
+  }, de = () => {
+    $(), N();
+  }, P = (e) => {
+    var l, t;
+    ee(e), o || ((v == null ? void 0 : v.label) ?? "").toLocaleLowerCase() !== B.toLocaleLowerCase() && N(), f().onBlur && ((t = (l = f()).onBlur) == null || t.call(l, e));
   };
+  return /* @__PURE__ */ g(H.Root, { open: T, children: [
+    /* @__PURE__ */ n(H.Anchor, { asChild: !0, children: /* @__PURE__ */ g(
+      "div",
+      {
+        ref: U,
+        className: c.root,
+        "data-status": F ? "error" : p,
+        "data-disabled": b,
+        "data-empty": i.length === 0,
+        children: [
+          o ? /* @__PURE__ */ g(ue, { children: [
+            /* @__PURE__ */ n("span", { id: L, className: c.srOnly, children: O }),
+            /* @__PURE__ */ n(
+              Se,
+              {
+                items: te,
+                onDismiss: ce,
+                selectedCount: i.length,
+                children: /* @__PURE__ */ n(
+                  "input",
+                  {
+                    ...f({
+                      ref: W,
+                      "aria-label": "aria-label" in a ? a["aria-label"] : void 0,
+                      // Remove auto-generated aria-labelledby if not explicitly provided
+                      "aria-labelledby": "aria-labelledby" in a && a["aria-labelledby"] ? a["aria-labelledby"] : void 0,
+                      "aria-describedby": O ? L : void 0
+                    }),
+                    "data-test-id": d,
+                    placeholder: i.length === 0 ? x : "",
+                    className: c.multiSelectInput,
+                    disabled: b,
+                    onMouseDown: D,
+                    onFocus: R,
+                    onBlur: P
+                  }
+                )
+              }
+            )
+          ] }) : /* @__PURE__ */ n(
+            "input",
+            {
+              ...f({
+                "aria-label": "aria-label" in a ? a["aria-label"] : void 0,
+                // Remove auto-generated aria-labelledby if not explicitly provided
+                "aria-labelledby": "aria-labelledby" in a && a["aria-labelledby"] ? a["aria-labelledby"] : void 0
+              }),
+              "data-test-id": d,
+              placeholder: x,
+              className: c.input,
+              disabled: b,
+              onMouseDown: D,
+              onFocus: R,
+              onBlur: P
+            }
+          ),
+          Y,
+          S ? /* @__PURE__ */ n(xe, { onClear: de, children: S }) : null,
+          w.isLoading && T ? /* @__PURE__ */ n(De, { name: "right", "data-test-id": `${d}-right-slot`, children: /* @__PURE__ */ n(pe, { size: "x-small", "data-test-id": `${d}-loading-circle` }) }) : null,
+          /* @__PURE__ */ g("div", { className: c.icons, children: [
+            /* @__PURE__ */ n(
+              "button",
+              {
+                "aria-label": X("Select_toggleMenu"),
+                ...ie(),
+                type: "button",
+                disabled: b,
+                onMouseDown: () => {
+                  V.current = !0;
+                },
+                children: /* @__PURE__ */ n(me, { size: 16, className: c.caret })
+              }
+            ),
+            /* @__PURE__ */ n(Re, { status: p, hasError: F, dataTestId: d })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      we,
+      {
+        align: _,
+        side: q,
+        highlightedIndex: se,
+        filterText: A,
+        getMenuProps: le,
+        getItemProps: re,
+        selectedItemValues: i,
+        hasInteractedSinceOpening: ae,
+        viewportCollisionPadding: J,
+        onEscapeKeyDown: Q,
+        children: Z
+      }
+    )
+  ] });
 };
+z.displayName = "Select.Combobox";
+const Qe = be(z);
 export {
-  P as useSingleDate
+  Qe as ComboboxBase
 };
 //# sourceMappingURL=fondue-components118.js.map

package/dist/fondue-components118.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components118.js","sources":["../src/components/DatePicker/hooks/useSingleDate.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemo, useState } from 'react';\nimport { type OnSelectHandler } from 'react-day-picker';\n\nimport { transformDatePickerDateToDate, transformDateToDatePickerDate } from '../helpers/dateTransformer';\nimport { type DatePickerDate } from '../types';\n\nexport const useSingleDate = (selected?: DatePickerDate, onSelect?: (date?: DatePickerDate) => void) => {\n    const [internalSelectedDate, setInternalSelectedDate] = useState<DatePickerDate | undefined>(selected);\n    const [prevSelected, setPrevSelected] = useState<DatePickerDate | undefined>(selected);\n\n    if (prevSelected !== selected) {\n        setPrevSelected(selected);\n        setInternalSelectedDate(selected);\n    }\n\n    const selectedDate = useMemo(() => {\n        return transformDatePickerDateToDate(internalSelectedDate);\n    }, [internalSelectedDate]);\n\n    const handleSelect: OnSelectHandler<Date> = (date) => {\n        const datePickerDate = transformDateToDatePickerDate(date);\n\n        setInternalSelectedDate(datePickerDate);\n        onSelect?.(datePickerDate);\n    };\n\n    return {\n        selectedDate,\n        handleSelect,\n    };\n};\n"],"names":["useSingleDate","selected","onSelect","internalSelectedDate","setInternalSelectedDate","useState","prevSelected","setPrevSelected","useMemo","transformDatePickerDateToDate","date","datePickerDate","transformDateToDatePickerDate"],"mappings":";;AAQO,MAAMA,IAAgB,CAACC,GAA2BC,MAA+C;AACpG,QAAM,CAACC,GAAsBC,CAAuB,IAAIC,EAAqCJ,CAAQ,GAC/F,CAACK,GAAcC,CAAe,IAAIF,EAAqCJ,CAAQ;AAErF,SAAIK,MAAiBL,MACjBM,EAAgBN,CAAQ,GACxBG,EAAwBH,CAAQ,IAc7B;AAAA,IACH,cAZiBO,EAAQ,MAClBC,EAA8BN,CAAoB,GAC1D,CAACA,CAAoB,CAAC;AAAA,IAWrB,cATwC,CAACO,MAAS;AAClD,YAAMC,IAAiBC,EAA8BF,CAAI;AAEzD,MAAAN,EAAwBO,CAAc,GACtCT,KAAA,QAAAA,EAAWS;AAAA,IACf;AAAA,EAII;AAER;"}
+{"version":3,"file":"fondue-components118.js","sources":["../src/components/Select/components/ComboboxBase.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { useCombobox, useMultipleSelection } from 'downshift';\nimport {\n    forwardRef,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n    type FocusEvent,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { LoadingCircle } from '#/components/LoadingCircle/LoadingCircle.tsx';\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { useBadgeItems } from '../hooks/useBadgeItems';\nimport { useFocusRing } from '../hooks/useFocusRing';\nimport { useSelectData, type AsyncItemsFetcher } from '../hooks/useSelectData';\nimport { useSelectionDescription } from '../hooks/useSelectionDescription';\nimport styles from '../styles/select.module.scss';\n\nimport { ClearButton } from './ClearButton';\nimport { CollapsibleBadges } from './CollapsibleBadges';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport { StatusIcons } from './StatusIcons';\n\ntype SelectItem = {\n    value: string;\n    label: string;\n    children?: ReactNode;\n};\n\nexport type ComboboxSharedProps = {\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     * 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    /**\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    /**\n     * Function to fetch items asynchronously\n     */\n    getAsyncItems?: AsyncItemsFetcher;\n    /**\n     * Event handler called when the escape key is pressed\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n} & CommonAriaProps;\n\ntype ComboboxBaseProps = ComboboxSharedProps & {\n    /**\n     * The currently selected item values\n     */\n    selectedItemValues: string[];\n    /**\n     * Callback fired when an item is selected or deselected\n     */\n    onItemSelect: (value?: string) => void;\n    /**\n     * Callback fired when the selection is cleared\n     */\n    onClear: () => void;\n    /**\n     * Whether the combobox allows multiple selections\n     */\n    multiple: boolean;\n};\n\nconst ComboboxBaseInput = (\n    {\n        children,\n        selectedItemValues,\n        onItemSelect,\n        onClear,\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        getAsyncItems,\n        onEscapeKeyDown,\n        multiple,\n        ...props\n    }: ComboboxBaseProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactNode => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const inputCallbackRef = useCallback((node: HTMLInputElement | null): void => {\n        inputRef.current = node;\n    }, []);\n    const { t } = useTranslation();\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText, asyncItemStatus } =\n        useSelectData(children, getAsyncItems);\n    const { wasClickedRef, onMouseDown, onFocus, onBlur } = useFocusRing();\n    const { selectionDescriptionId, selectionDescription } = useSelectionDescription(\n        multiple,\n        selectedItemValues,\n        getItemByValue,\n    );\n    const badgeItems = useBadgeItems(selectedItemValues, getItemByValue);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const selectedItems = useMemo((): SelectItem[] => {\n        return selectedItemValues\n            .map((value) => getItemByValue(value))\n            .filter((item): item is SelectItem => item !== undefined && 'value' in item && 'label' in item);\n    }, [selectedItemValues, getItemByValue]);\n\n    const multipleSelectionResult = useMultipleSelection<SelectItem>(\n        multiple\n            ? {\n                  selectedItems,\n                  onStateChange({ selectedItems: newSelectedItems, type }) {\n                      if (type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace) {\n                          const removedItem = selectedItems.find((item) => !newSelectedItems?.includes(item));\n                          if (removedItem) {\n                              onItemSelect(removedItem.value);\n                          }\n                      }\n                  },\n              }\n            : { selectedItems: [] },\n    );\n    const removeSelectedItem = multiple ? multipleSelectionResult.removeSelectedItem : (): void => {};\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox<SelectItem>({\n        items,\n        selectedItem: multiple ? null : (getItemByValue(selectedItemValues[0]) as SelectItem | null | undefined),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        // Only set labelId if aria-labelledby is explicitly provided, otherwise downshift generates an orphan ID\n        ...('aria-labelledby' in props && props['aria-labelledby'] ? { labelId: props['aria-labelledby'] } : {}),\n        onSelectedItemChange: ({ selectedItem }) => {\n            if (selectedItem) {\n                onItemSelect(selectedItem.value);\n            }\n            if (multiple) {\n                setFilterText('');\n            }\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        stateReducer: (state, actionAndChanges) => {\n            const { changes, type } = actionAndChanges;\n            if (multiple) {\n                switch (type) {\n                    case useCombobox.stateChangeTypes.InputKeyDownEnter:\n                    case useCombobox.stateChangeTypes.ItemClick:\n                        return {\n                            ...changes,\n                            isOpen: true,\n                            highlightedIndex: state.highlightedIndex,\n                            inputValue: '',\n                        };\n                    case useCombobox.stateChangeTypes.InputBlur:\n                        // Select item on blur (Tab key) but clear the input\n                        return {\n                            ...changes,\n                            inputValue: '',\n                        };\n                }\n            } else {\n                // For single select, handle re-selection of the same item\n                // onSelectedItemChange doesn't fire when selecting the same item, so we call onItemSelect here\n                switch (type) {\n                    case useCombobox.stateChangeTypes.InputKeyDownEnter:\n                    case useCombobox.stateChangeTypes.ItemClick:\n                        if (\n                            changes.selectedItem &&\n                            state.selectedItem &&\n                            changes.selectedItem.value === state.selectedItem.value\n                        ) {\n                            onItemSelect(changes.selectedItem.value);\n                        }\n                        break;\n                }\n            }\n            return changes;\n        },\n    });\n\n    const valueInvalid = useMemo(() => {\n        if (multiple) {\n            return false;\n        }\n        return !getAsyncItems && !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase()));\n    }, [inputValue, items, getAsyncItems, multiple]);\n\n    const hasError = valueInvalid || !!asyncItemStatus.error || status === 'error';\n\n    const handleDismissBadge = (value: string, preventFocusRing: boolean): void => {\n        const item = getItemByValue(value) as SelectItem | undefined;\n        if (item) {\n            removeSelectedItem(item);\n            onItemSelect(value);\n            if (inputRef.current) {\n                inputRef.current.focus();\n                if (preventFocusRing) {\n                    inputRef.current.dataset.showFocusRing = 'false';\n                }\n            }\n        }\n    };\n\n    const handleClear = (): void => {\n        onClear();\n        reset();\n    };\n\n    const handleBlur = (blurEvent: FocusEvent<HTMLInputElement, Element>): void => {\n        onBlur(blurEvent);\n\n        if (!multiple) {\n            const selectedItemLabel = selectedItem?.label ?? '';\n            const isOutdated = selectedItemLabel.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n            if (isOutdated) {\n                reset();\n            }\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\n                    ref={forwardedRef}\n                    className={styles.root}\n                    data-status={hasError ? 'error' : status}\n                    data-disabled={disabled}\n                    data-empty={selectedItemValues.length === 0}\n                >\n                    {multiple ? (\n                        <>\n                            {/* Hidden description for screen readers - announced on focus */}\n                            <span id={selectionDescriptionId} className={styles.srOnly}>\n                                {selectionDescription}\n                            </span>\n                            <CollapsibleBadges\n                                items={badgeItems}\n                                onDismiss={handleDismissBadge}\n                                selectedCount={selectedItemValues.length}\n                            >\n                                <input\n                                    // eslint-disable-next-line react-hooks/refs\n                                    {...getInputProps({\n                                        ref: inputCallbackRef,\n                                        'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                                        // Remove auto-generated aria-labelledby if not explicitly provided\n                                        'aria-labelledby':\n                                            'aria-labelledby' in props && props['aria-labelledby']\n                                                ? props['aria-labelledby']\n                                                : undefined,\n                                        'aria-describedby': selectionDescription ? selectionDescriptionId : undefined,\n                                    })}\n                                    data-test-id={dataTestId}\n                                    placeholder={selectedItemValues.length === 0 ? placeholder : ''}\n                                    className={styles.multiSelectInput}\n                                    disabled={disabled}\n                                    onMouseDown={onMouseDown}\n                                    onFocus={onFocus}\n                                    onBlur={handleBlur}\n                                />\n                            </CollapsibleBadges>\n                        </>\n                    ) : (\n                        <input\n                            {...getInputProps({\n                                'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                                // Remove auto-generated aria-labelledby if not explicitly provided\n                                'aria-labelledby':\n                                    'aria-labelledby' in props && props['aria-labelledby']\n                                        ? props['aria-labelledby']\n                                        : undefined,\n                            })}\n                            data-test-id={dataTestId}\n                            placeholder={placeholder}\n                            className={styles.input}\n                            disabled={disabled}\n                            onMouseDown={onMouseDown}\n                            onFocus={onFocus}\n                            onBlur={handleBlur}\n                        />\n                    )}\n                    {inputSlots}\n                    {clearButton ? <ClearButton onClear={handleClear}>{clearButton}</ClearButton> : null}\n                    {asyncItemStatus.isLoading && isOpen ? (\n                        <ForwardedRefSelectSlot name=\"right\" data-test-id={`${dataTestId}-right-slot`}>\n                            <LoadingCircle size=\"x-small\" data-test-id={`${dataTestId}-loading-circle`} />\n                        </ForwardedRefSelectSlot>\n                    ) : null}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label={t('Select_toggleMenu')}\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClickedRef.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        <StatusIcons status={status} hasError={hasError} dataTestId={dataTestId} />\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                selectedItemValues={selectedItemValues}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n                onEscapeKeyDown={onEscapeKeyDown}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nComboboxBaseInput.displayName = 'Select.Combobox';\n\nexport const ComboboxBase = forwardRef<HTMLDivElement, ComboboxBaseProps>(ComboboxBaseInput);\n"],"names":["ComboboxBaseInput","children","selectedItemValues","onItemSelect","onClear","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","getAsyncItems","onEscapeKeyDown","multiple","props","forwardedRef","inputRef","useRef","inputCallbackRef","useCallback","node","t","useTranslation","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","asyncItemStatus","useSelectData","wasClickedRef","onMouseDown","onFocus","onBlur","useFocusRing","selectionDescriptionId","selectionDescription","useSelectionDescription","badgeItems","useBadgeItems","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","selectedItems","useMemo","value","item","multipleSelectionResult","useMultipleSelection","newSelectedItems","type","removedItem","removeSelectedItem","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","state","actionAndChanges","changes","hasError","handleDismissBadge","preventFocusRing","handleClear","handleBlur","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","Fragment","CollapsibleBadges","ClearButton","ForwardedRefSelectSlot","LoadingCircle","IconCaretDown","StatusIcons","SelectMenu","ComboboxBase","forwardRef"],"mappings":"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"}

package/dist/fondue-components119.js

@@ -1,20 +1,22 @@
-const o = "_root_18649_5", c = "_caret_18649_43", t = "_colorName_18649_58", _ = "_colorIndicator_18649_61", n = "_button_18649_82", r = "_actions_18649_113", a = "_clearIcon_18649_122", s = {
-  root: o,
-  caret: c,
-  colorName: t,
-  colorIndicator: _,
-  button: n,
-  actions: r,
-  clearIcon: a
+import { useState as f } from "react";
+const I = (i, l, r) => {
+  const [d, n] = f(r ?? []), e = l ?? d, s = (t) => {
+    l || n(t), i == null || i(t);
+  };
+  return {
+    selectedItemValues: e,
+    toggleSelectedItem: (t) => {
+      if (t === void 0)
+        return;
+      const c = e.findIndex((o) => t === o);
+      c > 0 ? s([...e.slice(0, c), ...e.slice(c + 1)]) : s(c === 0 ? [...e.slice(1)] : [...e, t]);
+    },
+    clear: () => {
+      s([]);
+    }
+  };
 };
 export {
-  r as actions,
-  n as button,
-  c as caret,
-  a as clearIcon,
-  _ as colorIndicator,
-  t as colorName,
-  s as default,
-  o as root
+  I as useMultiselect
 };
 //# sourceMappingURL=fondue-components119.js.map

package/dist/fondue-components119.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components119.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"fondue-components119.js","sources":["../src/components/Select/hooks/useMultiselect.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useState } from 'react';\n\nexport const useMultiselect = (\n    onSelect?: (value: string[] | null) => void,\n    value?: string[] | null,\n    defaultValue?: string[],\n) => {\n    const [selectedItemsState, setSelectedItemsState] = useState<string[]>(defaultValue ?? []);\n\n    const selectedItemValues = value ?? selectedItemsState;\n    const setSelectedItems = (items: string[]) => {\n        if (!value) {\n            setSelectedItemsState(items);\n        }\n        onSelect?.(items);\n    };\n\n    const toggleSelectedItem = (toggledItem?: string) => {\n        if (toggledItem === undefined) {\n            return;\n        }\n        const index = selectedItemValues.findIndex((selectedItemValue) => toggledItem === selectedItemValue);\n        if (index > 0) {\n            setSelectedItems([...selectedItemValues.slice(0, index), ...selectedItemValues.slice(index + 1)]);\n        } else if (index === 0) {\n            setSelectedItems([...selectedItemValues.slice(1)]);\n        } else {\n            setSelectedItems([...selectedItemValues, toggledItem]);\n        }\n    };\n\n    const clear = () => {\n        setSelectedItems([]);\n    };\n\n    return {\n        selectedItemValues,\n        toggleSelectedItem,\n        clear,\n    };\n};\n"],"names":["useMultiselect","onSelect","value","defaultValue","selectedItemsState","setSelectedItemsState","useState","selectedItemValues","setSelectedItems","items","toggledItem","index","selectedItemValue"],"mappings":";AAIO,MAAMA,IAAiB,CAC1BC,GACAC,GACAC,MACC;AACD,QAAM,CAACC,GAAoBC,CAAqB,IAAIC,EAAmBH,KAAgB,CAAA,CAAE,GAEnFI,IAAqBL,KAASE,GAC9BI,IAAmB,CAACC,MAAoB;AAC1C,IAAKP,KACDG,EAAsBI,CAAK,GAE/BR,KAAA,QAAAA,EAAWQ;AAAA,EACf;AAoBA,SAAO;AAAA,IACH,oBAAAF;AAAA,IACA,oBApBuB,CAACG,MAAyB;AACjD,UAAIA,MAAgB;AAChB;AAEJ,YAAMC,IAAQJ,EAAmB,UAAU,CAACK,MAAsBF,MAAgBE,CAAiB;AACnG,MAAID,IAAQ,IACRH,EAAiB,CAAC,GAAGD,EAAmB,MAAM,GAAGI,CAAK,GAAG,GAAGJ,EAAmB,MAAMI,IAAQ,CAAC,CAAC,CAAC,IAEhGH,EADOG,MAAU,IACA,CAAC,GAAGJ,EAAmB,MAAM,CAAC,CAAC,IAE/B,CAAC,GAAGA,GAAoBG,CAAW,CAFH;AAAA,IAIzD;AAAA,IASI,OAPU,MAAM;AAChB,MAAAF,EAAiB,CAAA,CAAE;AAAA,IACvB;AAAA,EAKI;AAER;"}

package/dist/fondue-components12.js

@@ -1,10 +1,188 @@
-import { ForwardedRefDatePickerInput as r } from "./fondue-components60.js";
-import { ForwardedRefRangeDatePicker as o } from "./fondue-components61.js";
-import { ForwardedRefSingleDatePicker as t } from "./fondue-components62.js";
-const e = t;
-e.Range = o;
-e.Input = r;
+import { jsx as d, jsxs as C } from "react/jsx-runtime";
+import { IconCaretRight as _ } from "@frontify/fondue-icons";
+import * as a from "@radix-ui/react-dropdown-menu";
+import { forwardRef as i, useRef as R, useMemo as j, Children as B } from "react";
+import { useFondueTheme as F, ThemeProvider as I } from "./fondue-components40.js";
+import { useProcessedChildren as T } from "./fondue-components63.js";
+import u from "./fondue-components64.js";
+const y = ({
+  children: t,
+  open: o,
+  modal: r = !1,
+  onOpenChange: n,
+  "data-test-id": e = "fondue-dropdown"
+}) => /* @__PURE__ */ d(a.Root, { open: o, modal: r, onOpenChange: n, "data-test-id": e, children: t });
+y.displayName = "Dropdown.Root";
+const M = ({
+  asChild: t = !0,
+  children: o,
+  "data-test-id": r = "fondue-dropdown-trigger",
+  ...n
+}, e) => /* @__PURE__ */ d(a.Trigger, { asChild: t, "data-test-id": r, ref: e, ...n, children: o });
+M.displayName = "Dropdown.Trigger";
+const L = {
+  compact: 8,
+  comfortable: 12,
+  spacious: 16
+}, k = {
+  compact: 8,
+  spacious: 24
+}, P = ({
+  side: t = "bottom",
+  align: o = "start",
+  triggerOffset: r = "compact",
+  children: n,
+  preventTriggerFocusOnClose: e,
+  viewportCollisionPadding: s = "compact",
+  forceMount: l = !1,
+  onEscapeKeyDown: g,
+  "data-test-id": D = "fondue-dropdown-content"
+}, b) => {
+  const c = R(null), { theme: p, dir: N } = F(), w = b || c;
+  return /* @__PURE__ */ d(a.Portal, { forceMount: l || void 0, children: /* @__PURE__ */ d(I, { theme: p, dir: N, children: /* @__PURE__ */ d(
+    a.Content,
+    {
+      dir: N,
+      align: o,
+      collisionPadding: k[s],
+      sideOffset: L[r],
+      side: t,
+      className: u.content,
+      "data-test-id": D,
+      ref: w,
+      onEscapeKeyDown: g,
+      onPointerDownOutside: (f) => {
+        var S;
+        if (!l || !(f.target instanceof Element) || !(w instanceof Object) || !("current" in w))
+          return;
+        let m = f.target, h = null;
+        for (; m && m !== document.body && (h = m.getAttribute("aria-controls"), !h); )
+          m = m.parentElement;
+        h === ((S = w.current) == null ? void 0 : S.id) && f.preventDefault();
+      },
+      onCloseAutoFocus: (f) => {
+        e && f.preventDefault();
+      },
+      forceMount: l || void 0,
+      children: n
+    }
+  ) }) });
+};
+P.displayName = "Dropdown.Content";
+const A = ({ children: t, heading: o, "data-test-id": r = "fondue-dropdown-group" }, n) => j(
+  () => B.toArray(t).filter((s) => s !== null).length > 0,
+  [t]
+) ? /* @__PURE__ */ C(a.Group, { className: u.group, "data-test-id": r, ref: n, children: [
+  o ? /* @__PURE__ */ d("div", { className: u.groupHeading, children: /* @__PURE__ */ d("span", { "aria-label": o, children: o }) }) : null,
+  t
+] }) : null;
+A.displayName = "Dropdown.Group";
+const G = ({
+  children: t,
+  "data-test-id": o = "fondue-dropdown-submenu"
+}) => /* @__PURE__ */ d(a.Sub, { "data-test-id": o, children: t });
+G.displayName = "Dropdown.SubMenu";
+const O = ({ children: t, "data-test-id": o = "fondue-dropdown-subtrigger" }, r) => {
+  const { content: n } = T(t), e = R(!1);
+  return /* @__PURE__ */ C(
+    a.SubTrigger,
+    {
+      className: u.subTrigger,
+      "data-show-focus-ring": e.current,
+      "data-test-id": o,
+      ref: r,
+      onMouseEnter: () => {
+        e.current = !0;
+      },
+      onFocus: (s) => {
+        e.current || (s.target.dataset.showFocusRing = "true");
+      },
+      onBlur: (s) => {
+        s.target.dataset.showFocusRing = "false", e.current = !1;
+      },
+      children: [
+        n,
+        /* @__PURE__ */ d(_, { className: u.subMenuIndicator, size: 16 })
+      ]
+    }
+  );
+};
+O.displayName = "Dropdown.SubTrigger";
+const v = ({ children: t, "data-test-id": o = "fondue-dropdown-subcontent" }, r) => {
+  const { theme: n, dir: e } = F();
+  return /* @__PURE__ */ d(a.Portal, { children: /* @__PURE__ */ d(I, { theme: n, dir: e, children: /* @__PURE__ */ d(
+    a.SubContent,
+    {
+      dir: e,
+      className: u.subContent,
+      "data-test-id": o,
+      ref: r,
+      children: t
+    }
+  ) }) });
+};
+v.displayName = "Dropdown.SubContent";
+const E = ({
+  children: t,
+  disabled: o,
+  textValue: r,
+  onSelect: n,
+  emphasis: e = "default",
+  asChild: s = !1,
+  "data-test-id": l = "fondue-dropdown-subtrigger",
+  ...g
+}, D) => {
+  const { content: b } = T(t), c = R(!1);
+  return /* @__PURE__ */ d(
+    a.Item,
+    {
+      onSelect: n,
+      className: u.item,
+      textValue: r,
+      "data-test-id": l,
+      "data-emphasis": e,
+      ref: D,
+      disabled: o,
+      asChild: s,
+      "data-show-focus-ring": c.current,
+      onMouseEnter: () => {
+        c.current = !0;
+      },
+      onFocus: (p) => {
+        c.current || (p.target.dataset.showFocusRing = "true");
+      },
+      onBlur: (p) => {
+        p.target.dataset.showFocusRing = "false", c.current = !1;
+      },
+      ...g,
+      children: b
+    }
+  );
+};
+E.displayName = "Dropdown.Item";
+const x = ({ children: t, name: o, "data-test-id": r = "fondue-dropdown-slot" }, n) => /* @__PURE__ */ d("div", { "data-name": o, className: u.slot, "data-test-id": r, ref: n, children: t });
+x.displayName = "Dropdown.Slot";
+const z = i(M), H = i(P), V = i(A), W = i(O), q = i(v), J = i(E), K = i(x), tt = {
+  Root: y,
+  Trigger: z,
+  Content: H,
+  Group: V,
+  SubMenu: G,
+  SubTrigger: W,
+  SubContent: q,
+  Item: J,
+  Slot: K
+};
 export {
-  e as DatePicker
+  tt as Dropdown,
+  P as DropdownContent,
+  A as DropdownGroup,
+  E as DropdownItem,
+  y as DropdownRoot,
+  x as DropdownSlot,
+  v as DropdownSubContent,
+  G as DropdownSubMenu,
+  O as DropdownSubTrigger,
+  M as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components12.js.map