@frontify/fondue-components 28.0.0 → 29.0.1

package/dist/fondue-components121.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components121.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US.mjs"],"sourcesContent":["import { formatDistance } from \"./en-US/_lib/formatDistance.mjs\";\nimport { formatLong } from \"./en-US/_lib/formatLong.mjs\";\nimport { formatRelative } from \"./en-US/_lib/formatRelative.mjs\";\nimport { localize } from \"./en-US/_lib/localize.mjs\";\nimport { match } from \"./en-US/_lib/match.mjs\";\n\n/**\n * @category Locales\n * @summary English locale (United States).\n * @language English\n * @iso-639-2 eng\n * @author Sasha Koss [@kossnocorp](https://github.com/kossnocorp)\n * @author Lesha Koss [@leshakoss](https://github.com/leshakoss)\n */\nexport const enUS = {\n  code: \"en-US\",\n  formatDistance: formatDistance,\n  formatLong: formatLong,\n  formatRelative: formatRelative,\n  localize: localize,\n  match: match,\n  options: {\n    weekStartsOn: 0 /* Sunday */,\n    firstWeekContainsDate: 1,\n  },\n};\n\n// Fallback for modularized imports:\nexport default enUS;\n"],"names":["enUS","formatDistance","formatLong","formatRelative","localize","match"],"mappings":";;;;;AAcY,MAACA,IAAO;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgBC;AAAA,EAChB,YAAYC;AAAA,EACZ,gBAAgBC;AAAA,EAChB,UAAUC;AAAA,EACV,OAAOC;AAAA,EACP,SAAS;AAAA,IACP,cAAc;AAAA,IACd,uBAAuB;AAAA,EAC3B;AACA;","x_google_ignoreList":[0]}
+{"version":3,"file":"fondue-components121.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-components122.js

@@ -1,24 +1,22 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconCross as s } from "@frontify/fondue-icons";
-import { Button as t } from "./fondue-components6.js";
-import { useTranslation as a } from "./fondue-components40.js";
-import l from "./fondue-components102.js";
-const f = ({ onClear: r }) => {
-  const { t: o } = a();
-  return /* @__PURE__ */ e(
-    t,
-    {
-      "aria-label": o("Select_clear"),
-      type: "button",
-      size: "small",
-      emphasis: "weak",
-      aspect: "square",
-      onPress: r,
-      children: /* @__PURE__ */ e(s, { className: l.clearIcon, size: 16 })
+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 {
-  f as SelectClear
+  I as useMultiselect
 };
 //# sourceMappingURL=fondue-components122.js.map

package/dist/fondue-components122.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components122.js","sources":["../src/components/Select/components/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { Button } from '#/components/Button/Button';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    const { t } = useTranslation();\n\n    return (\n        <Button\n            aria-label={t('Select_clear')}\n            type=\"button\"\n            size=\"small\"\n            emphasis=\"weak\"\n            aspect=\"square\"\n            onPress={onClear}\n        >\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","t","useTranslation","jsx","Button","IconCross","styles"],"mappings":";;;;;AASO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAAwC;AAClE,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,cAAYH,EAAE,cAAc;AAAA,MAC5B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,QAAO;AAAA,MACP,SAASD;AAAA,MAET,4BAACK,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAG9D;"}
+{"version":3,"file":"fondue-components122.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-components123.js

@@ -1,43 +1,20 @@
-import { Children as a, isValidElement as u, cloneElement as f } from "react";
-import { ForwardedRefSelectItem as E } from "./fondue-components79.js";
-const g = ({
-  children: o,
-  value: r,
-  label: s
-}) => o && typeof o == "string" ? {
-  value: r !== void 0 ? r : o,
-  label: s !== void 0 ? s : o
-} : {
-  value: r ?? "",
-  label: s !== void 0 ? s : r ?? "",
-  ...o ? { children: o } : null
-}, v = (o, r) => u(o) && o.type === r, w = (o, r, s, p = 0) => {
-  const n = [];
-  let t = 0;
-  return a.forEach(o, (e) => {
-    if (v(e, E) && u(e))
-      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 } = w(
-        e.props.children,
-        r,
-        "",
-        p + t
-      );
-      e = f(e, {
-        children: m,
-        key: `group-${p + t}`
-      }), n.push(e), t += C;
-    } else
-      n.push(e);
-  }), {
-    parsedChildren: n,
-    subElementCount: t
+import { useState as a, useCallback as u } from "react";
+const n = (s, t, e) => {
+  const [f, r] = a(e ?? null), i = t !== void 0 ? t : f, l = i !== null ? [i] : [], m = u(
+    (d) => {
+      d !== void 0 && (t === void 0 && r(d), s == null || s(d));
+    },
+    [t, s]
+  ), I = u(() => {
+    t === void 0 && r(null), s == null || s(null);
+  }, [t, s]);
+  return {
+    selectedItemValues: l,
+    selectItem: m,
+    clear: I
   };
 };
 export {
-  g as getSelectOptionValue,
-  v as isReactLeaf,
-  w as recursiveMap
+  n as useSingleSelect
 };
 //# sourceMappingURL=fondue-components123.js.map

package/dist/fondue-components123.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components123.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 './components/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 !== undefined ? value : children,\n            label: label !== undefined ? label : children,\n        };\n    }\n\n    return {\n        value: value ?? '',\n        label: label !== undefined ? 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,MAAU,SAAYA,IAAQD;AAAA,EACrC,OAAOE,MAAU,SAAYA,IAAQF;AAAA,IAItC;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,MAAU,SAAYA,IAASD,KAAS;AAAA,EAC/C,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,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;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}
+{"version":3,"file":"fondue-components123.js","sources":["../src/components/Select/hooks/useSingleSelect.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useState } from 'react';\n\nexport const useSingleSelect = (\n    onSelect?: (value: string | null) => void,\n    value?: string | null,\n    defaultValue?: string,\n) => {\n    const [selectedItemState, setSelectedItemState] = useState<string | null>(defaultValue ?? null);\n\n    const selectedValue = value !== undefined ? value : selectedItemState;\n    const selectedItemValues = selectedValue !== null ? [selectedValue] : [];\n\n    const selectItem = useCallback(\n        (item?: string) => {\n            if (item === undefined) {\n                return;\n            }\n            if (value === undefined) {\n                setSelectedItemState(item);\n            }\n            onSelect?.(item);\n        },\n        [value, onSelect],\n    );\n\n    const clear = useCallback(() => {\n        if (value === undefined) {\n            setSelectedItemState(null);\n        }\n        onSelect?.(null);\n    }, [value, onSelect]);\n\n    return {\n        selectedItemValues,\n        selectItem,\n        clear,\n    };\n};\n"],"names":["useSingleSelect","onSelect","value","defaultValue","selectedItemState","setSelectedItemState","useState","selectedValue","selectedItemValues","selectItem","useCallback","item","clear"],"mappings":";AAIO,MAAMA,IAAkB,CAC3BC,GACAC,GACAC,MACC;AACD,QAAM,CAACC,GAAmBC,CAAoB,IAAIC,EAAwBH,KAAgB,IAAI,GAExFI,IAAgBL,MAAU,SAAYA,IAAQE,GAC9CI,IAAqBD,MAAkB,OAAO,CAACA,CAAa,IAAI,CAAA,GAEhEE,IAAaC;AAAA,IACf,CAACC,MAAkB;AACf,MAAIA,MAAS,WAGTT,MAAU,UACVG,EAAqBM,CAAI,GAE7BV,KAAA,QAAAA,EAAWU;AAAA,IACf;AAAA,IACA,CAACT,GAAOD,CAAQ;AAAA,EAAA,GAGdW,IAAQF,EAAY,MAAM;AAC5B,IAAIR,MAAU,UACVG,EAAqB,IAAI,GAE7BJ,KAAA,QAAAA,EAAW;AAAA,EACf,GAAG,CAACC,GAAOD,CAAQ,CAAC;AAEpB,SAAO;AAAA,IACH,oBAAAO;AAAA,IACA,YAAAC;AAAA,IACA,OAAAG;AAAA,EAAA;AAER;"}

package/dist/fondue-components124.js

@@ -1,71 +1,154 @@
-const a = {
-  lessThanXSeconds: {
-    one: "less than a second",
-    other: "less than {{count}} seconds"
-  },
-  xSeconds: {
-    one: "1 second",
-    other: "{{count}} seconds"
-  },
-  halfAMinute: "half a minute",
-  lessThanXMinutes: {
-    one: "less than a minute",
-    other: "less than {{count}} minutes"
-  },
-  xMinutes: {
-    one: "1 minute",
-    other: "{{count}} minutes"
-  },
-  aboutXHours: {
-    one: "about 1 hour",
-    other: "about {{count}} hours"
-  },
-  xHours: {
-    one: "1 hour",
-    other: "{{count}} hours"
-  },
-  xDays: {
-    one: "1 day",
-    other: "{{count}} days"
-  },
-  aboutXWeeks: {
-    one: "about 1 week",
-    other: "about {{count}} weeks"
-  },
-  xWeeks: {
-    one: "1 week",
-    other: "{{count}} weeks"
-  },
-  aboutXMonths: {
-    one: "about 1 month",
-    other: "about {{count}} months"
-  },
-  xMonths: {
-    one: "1 month",
-    other: "{{count}} months"
-  },
-  aboutXYears: {
-    one: "about 1 year",
-    other: "about {{count}} years"
-  },
-  xYears: {
-    one: "1 year",
-    other: "{{count}} years"
-  },
-  overXYears: {
-    one: "over 1 year",
-    other: "over {{count}} years"
-  },
-  almostXYears: {
-    one: "almost 1 year",
-    other: "almost {{count}} years"
-  }
-}, r = (s, n, o) => {
-  let e;
-  const t = a[s];
-  return typeof t == "string" ? e = t : n === 1 ? e = t.one : e = t.other.replace("{{count}}", n.toString()), o != null && o.addSuffix ? o.comparison && o.comparison > 0 ? "in " + e : e + " ago" : e;
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { IconCaretDown as V } from "@frontify/fondue-icons";
+import * as I from "@radix-ui/react-popover";
+import { useSelect as s } from "downshift";
+import { forwardRef as ee, useRef as te, useCallback as N, useState as ne, useMemo as oe } from "react";
+import { useBadgeItems as re } from "./fondue-components131.js";
+import { useFocusRing as ae } from "./fondue-components132.js";
+import { useSelectData as se } from "./fondue-components133.js";
+import { useSelectionDescription as ie } from "./fondue-components134.js";
+import r from "./fondue-components125.js";
+import { ClearButton as le } from "./fondue-components135.js";
+import { CollapsibleBadges as ce } from "./fondue-components136.js";
+import { SelectMenu as ue } from "./fondue-components137.js";
+import { StatusIcons as ge } from "./fondue-components138.js";
+const O = ({
+  children: M,
+  selectedItemValues: o,
+  onItemSelect: p,
+  onClear: P,
+  placeholder: c = "",
+  status: u = "neutral",
+  disabled: f,
+  alignMenu: R = "start",
+  side: j = "bottom",
+  id: k,
+  showStringValue: y = !0,
+  "data-test-id": b = "fondue-select",
+  viewportCollisionPadding: E = "compact",
+  onEscapeKeyDown: F,
+  multiple: g,
+  ...i
+}, a) => {
+  const C = te(null), B = N(
+    (e) => {
+      C.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+    },
+    [a]
+  ), { inputSlots: H, menuSlots: K, items: w, clearButton: S, getItemByValue: l } = se(M), { onMouseDown: z, onFocus: A, onBlur: q } = ae(), { selectionDescriptionId: D, selectionDescription: m } = ie(
+    g,
+    o,
+    l
+  ), G = re(o, l), [J, v] = ne(!1), x = N(
+    (e) => {
+      const t = l(e);
+      if (t)
+        return !y && (t != null && t.children) ? t.children : t == null ? void 0 : t.label;
+    },
+    [l, y]
+  ), { getToggleButtonProps: L, getMenuProps: Q, getItemProps: U, reset: W, isOpen: X, highlightedIndex: Y } = s({
+    items: w,
+    selectedItem: null,
+    toggleButtonId: k,
+    labelId: "aria-labelledby" in i ? i["aria-labelledby"] : void 0,
+    onIsOpenChange: () => {
+      v(!1);
+    },
+    onHighlightedIndexChange: () => {
+      v(!0);
+    },
+    onSelectedItemChange: ({ selectedItem: e }) => {
+      p(e == null ? void 0 : e.value);
+    },
+    itemToString: (e) => e ? e.label : "",
+    ...g ? {
+      stateReducer: (e, t) => {
+        const { changes: h, type: $ } = t;
+        switch ($) {
+          case s.stateChangeTypes.ToggleButtonKeyDownEnter:
+          case s.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+          case s.stateChangeTypes.ItemClick:
+            return {
+              ...h,
+              isOpen: !0,
+              highlightedIndex: e.highlightedIndex
+            };
+          case s.stateChangeTypes.ToggleButtonBlur:
+            return {
+              ...h,
+              selectedItem: e.selectedItem
+            };
+        }
+        return h;
+      }
+    } : {}
+  }), T = u === "error", Z = () => {
+    P(), W();
+  }, _ = oe(
+    () => x(o[0]) || c,
+    [x, o, c]
+  );
+  return /* @__PURE__ */ d(I.Root, { open: X, children: [
+    /* @__PURE__ */ n(I.Anchor, { asChild: !0, onMouseDown: z, onFocus: A, onBlur: q, children: /* @__PURE__ */ d(
+      "div",
+      {
+        ref: B,
+        className: r.root,
+        "data-status": T ? "error" : u,
+        "data-disabled": f,
+        "data-empty": o.length === 0,
+        "data-test-id": b,
+        ...f ? {} : (
+          // eslint-disable-next-line react-hooks/refs
+          L({
+            "aria-label": "aria-label" in i ? i["aria-label"] : void 0,
+            "aria-describedby": m ? D : void 0,
+            ref: B
+          })
+        ),
+        children: [
+          m ? /* @__PURE__ */ n("span", { id: D, className: r.srOnly, children: m }) : null,
+          g ? /* @__PURE__ */ n("div", { className: r.selectedValue, children: /* @__PURE__ */ n(
+            ce,
+            {
+              items: G,
+              placeholder: c,
+              onDismiss: (e) => {
+                var t;
+                p(e), (t = C.current) == null || t.focus();
+              },
+              selectedCount: o.length
+            }
+          ) }) : /* @__PURE__ */ n("span", { className: r.selectedValue, children: _ }),
+          H,
+          S ? /* @__PURE__ */ n(le, { onClear: Z, children: S }) : null,
+          /* @__PURE__ */ d("div", { className: r.icons, children: [
+            /* @__PURE__ */ n(V, { size: 16, className: r.caret }),
+            /* @__PURE__ */ n(ge, { status: u, hasError: T, dataTestId: b })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      ue,
+      {
+        align: R,
+        side: j,
+        highlightedIndex: Y,
+        getMenuProps: Q,
+        getItemProps: U,
+        selectedItemValues: o,
+        hasInteractedSinceOpening: J,
+        viewportCollisionPadding: E,
+        onEscapeKeyDown: F,
+        children: K
+      }
+    )
+  ] });
 };
+O.displayName = "Select";
+const Te = ee(O);
 export {
-  r as formatDistance
+  Te as SelectBase
 };
 //# sourceMappingURL=fondue-components124.js.map

package/dist/fondue-components124.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components124.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US/_lib/formatDistance.mjs"],"sourcesContent":["const formatDistanceLocale = {\n  lessThanXSeconds: {\n    one: \"less than a second\",\n    other: \"less than {{count}} seconds\",\n  },\n\n  xSeconds: {\n    one: \"1 second\",\n    other: \"{{count}} seconds\",\n  },\n\n  halfAMinute: \"half a minute\",\n\n  lessThanXMinutes: {\n    one: \"less than a minute\",\n    other: \"less than {{count}} minutes\",\n  },\n\n  xMinutes: {\n    one: \"1 minute\",\n    other: \"{{count}} minutes\",\n  },\n\n  aboutXHours: {\n    one: \"about 1 hour\",\n    other: \"about {{count}} hours\",\n  },\n\n  xHours: {\n    one: \"1 hour\",\n    other: \"{{count}} hours\",\n  },\n\n  xDays: {\n    one: \"1 day\",\n    other: \"{{count}} days\",\n  },\n\n  aboutXWeeks: {\n    one: \"about 1 week\",\n    other: \"about {{count}} weeks\",\n  },\n\n  xWeeks: {\n    one: \"1 week\",\n    other: \"{{count}} weeks\",\n  },\n\n  aboutXMonths: {\n    one: \"about 1 month\",\n    other: \"about {{count}} months\",\n  },\n\n  xMonths: {\n    one: \"1 month\",\n    other: \"{{count}} months\",\n  },\n\n  aboutXYears: {\n    one: \"about 1 year\",\n    other: \"about {{count}} years\",\n  },\n\n  xYears: {\n    one: \"1 year\",\n    other: \"{{count}} years\",\n  },\n\n  overXYears: {\n    one: \"over 1 year\",\n    other: \"over {{count}} years\",\n  },\n\n  almostXYears: {\n    one: \"almost 1 year\",\n    other: \"almost {{count}} years\",\n  },\n};\n\nexport const formatDistance = (token, count, options) => {\n  let result;\n\n  const tokenValue = formatDistanceLocale[token];\n  if (typeof tokenValue === \"string\") {\n    result = tokenValue;\n  } else if (count === 1) {\n    result = tokenValue.one;\n  } else {\n    result = tokenValue.other.replace(\"{{count}}\", count.toString());\n  }\n\n  if (options?.addSuffix) {\n    if (options.comparison && options.comparison > 0) {\n      return \"in \" + result;\n    } else {\n      return result + \" ago\";\n    }\n  }\n\n  return result;\n};\n"],"names":["formatDistanceLocale","formatDistance","token","count","options","result","tokenValue"],"mappings":"AAAA,MAAMA,IAAuB;AAAA,EAC3B,kBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,UAAU;AAAA,IACR,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,aAAa;AAAA,EAEb,kBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,UAAU;AAAA,IACR,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,aAAa;AAAA,IACX,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,OAAO;AAAA,IACL,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,aAAa;AAAA,IACX,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,SAAS;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,aAAa;AAAA,IACX,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,YAAY;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AACA,GAEaC,IAAiB,CAACC,GAAOC,GAAOC,MAAY;AACvD,MAAIC;AAEJ,QAAMC,IAAaN,EAAqBE,CAAK;AAS7C,SARI,OAAOI,KAAe,WACxBD,IAASC,IACAH,MAAU,IACnBE,IAASC,EAAW,MAEpBD,IAASC,EAAW,MAAM,QAAQ,aAAaH,EAAM,UAAU,GAG7DC,KAAA,QAAAA,EAAS,YACPA,EAAQ,cAAcA,EAAQ,aAAa,IACtC,QAAQC,IAERA,IAAS,SAIbA;AACT;","x_google_ignoreList":[0]}
+{"version":3,"file":"fondue-components124.js","sources":["../src/components/Select/components/SelectBase.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 { useSelect } from 'downshift';\nimport { forwardRef, useCallback, useMemo, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { useBadgeItems } from '../hooks/useBadgeItems';\nimport { useFocusRing } from '../hooks/useFocusRing';\nimport { useSelectData } 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 { StatusIcons } from './StatusIcons';\n\nexport type SelectSharedProps = {\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     * 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 plain text (from the label prop) when set to true\n     * Items child components are used if set to false\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * Event handler called when the escape key is pressed\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n} & CommonAriaProps;\n\ntype SelectBaseProps = SelectSharedProps & {\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 select allows multiple selections\n     */\n    multiple: boolean;\n};\n\nconst SelectBaseInput = (\n    {\n        children,\n        selectedItemValues,\n        onItemSelect,\n        onClear,\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        viewportCollisionPadding = 'compact',\n        onEscapeKeyDown,\n        multiple,\n        ...props\n    }: SelectBaseProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactNode => {\n    const internalRef = useRef<HTMLDivElement | null>(null);\n    const triggerRef = useCallback(\n        (node: HTMLDivElement | null): void => {\n            internalRef.current = node;\n            if (typeof forwardedRef === 'function') {\n                forwardedRef(node);\n            } else if (forwardedRef) {\n                forwardedRef.current = node;\n            }\n        },\n        [forwardedRef],\n    );\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n    const { 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 getDisplayedValue = useCallback(\n        (itemValue?: string): ReactNode => {\n            const selectedItem = getItemByValue(itemValue);\n            if (selectedItem) {\n                return !showStringValue && selectedItem?.children ? selectedItem.children : selectedItem?.label;\n            }\n            return undefined;\n        },\n        [getItemByValue, showStringValue],\n    );\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, isOpen, highlightedIndex } = useSelect<{\n        value: string;\n        label: string;\n        children?: ReactNode;\n    }>({\n        items,\n        selectedItem: null,\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            onItemSelect(selectedItem?.value);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n        ...(multiple\n            ? {\n                  stateReducer: (state, actionAndChanges) => {\n                      const { changes, type } = actionAndChanges;\n                      switch (type) {\n                          case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n                          case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n                          case useSelect.stateChangeTypes.ItemClick:\n                              return {\n                                  ...changes,\n                                  isOpen: true,\n                                  highlightedIndex: state.highlightedIndex,\n                              };\n                          case useSelect.stateChangeTypes.ToggleButtonBlur:\n                              return {\n                                  ...changes,\n                                  selectedItem: state.selectedItem,\n                              };\n                      }\n                      return changes;\n                  },\n              }\n            : {}),\n    });\n\n    const hasError = status === 'error';\n\n    const handleClear = (): void => {\n        onClear();\n        reset();\n    };\n\n    const singleSelectValue = useMemo(\n        (): ReactNode => getDisplayedValue(selectedItemValues[0]) || placeholder,\n        [getDisplayedValue, selectedItemValues, placeholder],\n    );\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild onMouseDown={onMouseDown} onFocus={onFocus} onBlur={onBlur}>\n                <div\n                    ref={triggerRef}\n                    className={styles.root}\n                    data-status={hasError ? 'error' : status}\n                    data-disabled={disabled}\n                    data-empty={selectedItemValues.length === 0}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : // eslint-disable-next-line react-hooks/refs\n                          getToggleButtonProps({\n                              'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                              'aria-describedby': selectionDescription ? selectionDescriptionId : undefined,\n                              ref: triggerRef,\n                          }))}\n                >\n                    {selectionDescription ? (\n                        <span id={selectionDescriptionId} className={styles.srOnly}>\n                            {selectionDescription}\n                        </span>\n                    ) : null}\n                    {multiple ? (\n                        <div className={styles.selectedValue}>\n                            <CollapsibleBadges\n                                items={badgeItems}\n                                placeholder={placeholder}\n                                onDismiss={(value) => {\n                                    onItemSelect(value);\n                                    internalRef.current?.focus();\n                                }}\n                                selectedCount={selectedItemValues.length}\n                            />\n                        </div>\n                    ) : (\n                        <span className={styles.selectedValue}>{singleSelectValue}</span>\n                    )}\n                    {inputSlots}\n                    {clearButton ? <ClearButton onClear={handleClear}>{clearButton}</ClearButton> : null}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\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                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};\nSelectBaseInput.displayName = 'Select';\n\nexport const SelectBase = forwardRef<HTMLDivElement, SelectBaseProps>(SelectBaseInput);\n"],"names":["SelectBaseInput","children","selectedItemValues","onItemSelect","onClear","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","viewportCollisionPadding","onEscapeKeyDown","multiple","props","forwardedRef","internalRef","useRef","triggerRef","useCallback","node","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","onMouseDown","onFocus","onBlur","useFocusRing","selectionDescriptionId","selectionDescription","useSelectionDescription","badgeItems","useBadgeItems","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getDisplayedValue","itemValue","selectedItem","getToggleButtonProps","getMenuProps","getItemProps","reset","isOpen","highlightedIndex","useSelect","item","state","actionAndChanges","changes","type","hasError","handleClear","singleSelectValue","useMemo","jsxs","RadixPopover","jsx","styles","CollapsibleBadges","value","_a","ClearButton","IconCaretDown","StatusIcons","SelectMenu","SelectBase","forwardRef"],"mappings":"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"}

package/dist/fondue-components125.js

@@ -1,34 +1,48 @@
-import { buildFormatLongFn as t } from "./fondue-components133.js";
-const m = {
-  full: "EEEE, MMMM do, y",
-  long: "MMMM do, y",
-  medium: "MMM d, y",
-  short: "MM/dd/yyyy"
-}, a = {
-  full: "h:mm:ss a zzzz",
-  long: "h:mm:ss a z",
-  medium: "h:mm:ss a",
-  short: "h:mm a"
-}, o = {
-  full: "{{date}} 'at' {{time}}",
-  long: "{{date}} 'at' {{time}}",
-  medium: "{{date}}, {{time}}",
-  short: "{{date}}, {{time}}"
-}, e = {
-  date: t({
-    formats: m,
-    defaultWidth: "full"
-  }),
-  time: t({
-    formats: a,
-    defaultWidth: "full"
-  }),
-  dateTime: t({
-    formats: o,
-    defaultWidth: "full"
-  })
+const c = "_root_13ciu_7", e = "_selectedValue_13ciu_63", _ = "_input_13ciu_80", o = "_slot_13ciu_106", t = "_clear_13ciu_156", n = "_clearIcon_13ciu_163", u = "_icons_13ciu_167", i = "_caret_13ciu_173", r = "_iconSuccess_13ciu_201", s = "_iconError_13ciu_207", a = "_menu_13ciu_213", l = "_portal_13ciu_236", p = "_item_13ciu_252", g = "_checkmarkIcon_13ciu_281", m = "_itemValue_13ciu_287", d = "_group_13ciu_301", I = "_groupHeading_13ciu_312", b = "_badgesContainer_13ciu_324", k = "_badgeWrapper_13ciu_336", S = "_srOnly_13ciu_345", V = "_multiSelectInput_13ciu_357", y = {
+  root: c,
+  selectedValue: e,
+  input: _,
+  slot: o,
+  clear: t,
+  clearIcon: n,
+  icons: u,
+  caret: i,
+  iconSuccess: r,
+  iconError: s,
+  menu: a,
+  portal: l,
+  item: p,
+  checkmarkIcon: g,
+  itemValue: m,
+  group: d,
+  groupHeading: I,
+  badgesContainer: b,
+  badgeWrapper: k,
+  srOnly: S,
+  multiSelectInput: V
 };
 export {
-  e as formatLong
+  k as badgeWrapper,
+  b as badgesContainer,
+  i as caret,
+  g as checkmarkIcon,
+  t as clear,
+  n as clearIcon,
+  y as default,
+  d as group,
+  I as groupHeading,
+  s as iconError,
+  r as iconSuccess,
+  u as icons,
+  _ as input,
+  p as item,
+  m as itemValue,
+  a as menu,
+  V as multiSelectInput,
+  l as portal,
+  c as root,
+  e as selectedValue,
+  o as slot,
+  S as srOnly
 };
 //# sourceMappingURL=fondue-components125.js.map

package/dist/fondue-components125.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components125.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US/_lib/formatLong.mjs"],"sourcesContent":["import { buildFormatLongFn } from \"../../_lib/buildFormatLongFn.mjs\";\n\nconst dateFormats = {\n  full: \"EEEE, MMMM do, y\",\n  long: \"MMMM do, y\",\n  medium: \"MMM d, y\",\n  short: \"MM/dd/yyyy\",\n};\n\nconst timeFormats = {\n  full: \"h:mm:ss a zzzz\",\n  long: \"h:mm:ss a z\",\n  medium: \"h:mm:ss a\",\n  short: \"h:mm a\",\n};\n\nconst dateTimeFormats = {\n  full: \"{{date}} 'at' {{time}}\",\n  long: \"{{date}} 'at' {{time}}\",\n  medium: \"{{date}}, {{time}}\",\n  short: \"{{date}}, {{time}}\",\n};\n\nexport const formatLong = {\n  date: buildFormatLongFn({\n    formats: dateFormats,\n    defaultWidth: \"full\",\n  }),\n\n  time: buildFormatLongFn({\n    formats: timeFormats,\n    defaultWidth: \"full\",\n  }),\n\n  dateTime: buildFormatLongFn({\n    formats: dateTimeFormats,\n    defaultWidth: \"full\",\n  }),\n};\n"],"names":["dateFormats","timeFormats","dateTimeFormats","formatLong","buildFormatLongFn"],"mappings":";AAEA,MAAMA,IAAc;AAAA,EAClB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT,GAEMC,IAAc;AAAA,EAClB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT,GAEMC,IAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT,GAEaC,IAAa;AAAA,EACxB,MAAMC,EAAkB;AAAA,IACtB,SAASJ;AAAA,IACT,cAAc;AAAA,EAClB,CAAG;AAAA,EAED,MAAMI,EAAkB;AAAA,IACtB,SAASH;AAAA,IACT,cAAc;AAAA,EAClB,CAAG;AAAA,EAED,UAAUG,EAAkB;AAAA,IAC1B,SAASF;AAAA,IACT,cAAc;AAAA,EAClB,CAAG;AACH;","x_google_ignoreList":[0]}
+{"version":3,"file":"fondue-components125.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components126.js

@@ -1,12 +1,8 @@
-const t = {
-  lastWeek: "'last' eeee 'at' p",
-  yesterday: "'yesterday at' p",
-  today: "'today at' p",
-  tomorrow: "'tomorrow at' p",
-  nextWeek: "eeee 'at' p",
-  other: "P"
-}, s = (e, a, o, r) => t[e];
+const o = "_root_gey5w_2", t = {
+  root: o
+};
 export {
-  s as formatRelative
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components126.js.map

package/dist/fondue-components126.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components126.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US/_lib/formatRelative.mjs"],"sourcesContent":["const formatRelativeLocale = {\n  lastWeek: \"'last' eeee 'at' p\",\n  yesterday: \"'yesterday at' p\",\n  today: \"'today at' p\",\n  tomorrow: \"'tomorrow at' p\",\n  nextWeek: \"eeee 'at' p\",\n  other: \"P\",\n};\n\nexport const formatRelative = (token, _date, _baseDate, _options) =>\n  formatRelativeLocale[token];\n"],"names":["formatRelativeLocale","formatRelative","token","_date","_baseDate","_options"],"mappings":"AAAA,MAAMA,IAAuB;AAAA,EAC3B,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AACT,GAEaC,IAAiB,CAACC,GAAOC,GAAOC,GAAWC,MACtDL,EAAqBE,CAAK;","x_google_ignoreList":[0]}
+{"version":3,"file":"fondue-components126.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}