@frontify/fondue-components 3.0.3 → 3.1.0

package/dist/fondue-components27.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components27.js","sources":["../src/components/Select/Combobox.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 { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { SelectMenu } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The aria label of the combobox component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect && onSelect(selectedItem.value);\n        },\n        selectedItem: activeItem,\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        defaultSelectedItem: defaultItem,\n        defaultHighlightedIndex: 0,\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n    const valueInvalid = useMemo(\n        () => inputValue && !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-error={valueInvalid}>\n                    <input\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        placeholder={placeholder}\n                        {...getInputProps({\n                            'aria-label': ariaLabel,\n                        })}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={(blurEvent) => {\n                            blurEvent.target.dataset.showFocusRing = 'false';\n                            wasClicked.current = false;\n                            if (getInputProps().onBlur) {\n                                getInputProps().onBlur?.(blurEvent);\n                            }\n                        }}\n                        className={styles.input}\n                        disabled={disabled}\n                        data-test-id={dataTestId}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <button\n                        type=\"button\"\n                        onMouseDown={() => {\n                            wasClicked.current = true;\n                        }}\n                        {...getToggleButtonProps()}\n                        aria-label=\"toggle menu\"\n                        disabled={disabled}\n                    >\n                        <IconCaretDown size={16} className={styles.caret} />\n                    </button>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","defaultItem","activeItem","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","isOpen","highlightedIndex","inputValue","useCombobox","selectedItem","item","wasClicked","useRef","valueInvalid","useMemo","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","blurEvent","_b","_a","RadixSlot","event","IconCaretDown","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":";;;;;;;;;AA+CO,MAAMA,IAAiB,CAC1B;AAAA,EACI,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AACjC,GACAC,MACC;AACK,QAAA,EAAE,YAAAC,GAAY,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,EAAA,IAC3EC,EAAchB,CAAQ,GAEpBiB,IAAcH,EAAeX,CAAY,GACzCe,IAAaJ,EAAeZ,CAAK,GAEjC;AAAA,IACF,eAAAiB;AAAA,IACA,sBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,MACAC,EAAY;AAAA,IACZ,OAAAhB;AAAA,IACA,sBAAsB,CAAC,EAAE,cAAAiB,QAAmB;AAC5B,MAAA3B,KAAAA,EAAS2B,EAAa,KAAK;AAAA,IAC3C;AAAA,IACA,cAAcV;AAAA,IACd,oBAAoB,CAAC,EAAE,YAAAQ,QAAiB;AACpC,MAAAX,EAAcW,CAAU;AAAA,IAC5B;AAAA,IACA,qBAAqBT;AAAA,IACrB,yBAAyB;AAAA,IACzB,cAAc,CAACY,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD,GAEKC,IAAaC,EAAO,EAAK,GACzBC,IAAeC;AAAA,IACjB,MAAMP,KAAc,CAACf,EAAM,KAAK,CAACkB,MAASA,EAAK,MAAM,cAAc,SAASH,EAAW,YAAa,CAAA,CAAC;AAAA,IACrG,CAACA,GAAYf,CAAK;AAAA,EAAA;AAGtB,SACK,gBAAAuB,EAAAC,EAAa,MAAb,EAAkB,MAAMX,GACrB,UAAA;AAAA,IAAA,gBAAAY,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAA,gBAAAD,EAAC,OAAI,EAAA,KAAK1B,GAAc,WAAW6B,EAAO,MAAM,cAAYL,GACxD,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,aAAa,CAACE,MAAe;AACzB,YAAAR,EAAW,UAAU,IACVQ,EAAA,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,aAAAlC;AAAA,UACC,GAAGe,EAAc;AAAA,YACd,cAAcb;AAAA,UAAA,CACjB;AAAA,UACD,SAAS,CAACiC,MAAe;AACjB,YAACT,EAAW,YACDS,EAAA,OAAO,QAAQ,gBAAgB;AAAA,UAElD;AAAA,UACA,QAAQ,CAACC,MAAc;;AACT,YAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCV,EAAW,UAAU,IACjBX,IAAgB,YACFsB,KAAAC,IAAAvB,EAAA,GAAE,WAAF,QAAAsB,EAAA,KAAAC,GAAWF;AAAA,UAEjC;AAAA,UACA,WAAWH,EAAO;AAAA,UAClB,UAAAhC;AAAA,UACA,gBAAcE;AAAA,QAAA;AAAA,MAClB;AAAA,MACCE;AAAA,MACAI,KACG,gBAAAuB;AAAA,QAACO;AAAAA,QAAA;AAAA,UACG,SAAS,CAACC,MAAU;AAChB,YAAAA,EAAM,gBAAgB,GAChBrB;UACV;AAAA,UACA,WAAWc,EAAO;AAAA,UAClB,MAAK;AAAA,UAEJ,UAAAxB;AAAA,QAAA;AAAA,MACL;AAAA,MAEJ,gBAAAuB;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,aAAa,MAAM;AACf,YAAAN,EAAW,UAAU;AAAA,UACzB;AAAA,UACC,GAAGV,EAAqB;AAAA,UACzB,cAAW;AAAA,UACX,UAAAf;AAAA,UAEA,4BAACwC,GAAc,EAAA,MAAM,IAAI,WAAWR,EAAO,OAAO;AAAA,QAAA;AAAA,MACtD;AAAA,IAAA,EAAA,CACJ,EACJ,CAAA;AAAA,IAEA,gBAAAD;AAAA,MAACU;AAAA,MAAA;AAAA,QACG,kBAAArB;AAAA,QACA,YAAAb;AAAA,QACA,cAAAS;AAAA,QACA,cAAAC;AAAA,QAEC,UAAAZ;AAAA,MAAA;AAAA,IACL;AAAA,EACJ,EAAA,CAAA;AAER;AACAX,EAAe,cAAc;AAEhB,MAAAgD,IAAuBC,EAA0CjD,CAAc;"}
+{"version":3,"file":"fondue-components27.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const uncontrolledState = useState<TValue | undefined>(defaultProp);\n    const [value] = uncontrolledState;\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAGnD,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}

package/dist/fondue-components28.js

@@ -1,15 +1,12 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import c from "./fondue-components31.js";
-const a = ({ "data-test-id": t = "fondue-select-item", ...e }, r) => /* @__PURE__ */ d("li", { "data-test-id": t, ref: r, ...e, children: e.children });
-a.displayName = "Select.Item";
-const n = o(a), m = ({ children: t, groupId: e, "data-test-id": r = "fondue-select-item-group" }, s) => /* @__PURE__ */ d("div", { "data-test-id": r, className: c.group, ref: s, children: t }, e);
-m.displayName = "Select.Group";
-const p = o(m);
+import { FOCUS_OUTLINE as t } from "./fondue-components37.js";
+const a = "tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate", n = `tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ${t} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`, o = "tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] peer-data-[state=on]:tw-block [&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] [&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] [&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] [&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] [&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]", w = "-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out group-first:tw-opacity-0 group-first:tw-ease-in group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in [[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in group-focus-visible:tw-duration-0", r = "tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] [&_svg]:tw-shrink-0", i = "tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 group-data-[state=on]:tw-ease-out", s = "tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in";
 export {
-  n as ForwardedRefSelectItem,
-  p as ForwardedRefSelectItemGroup,
-  a as SelectItem,
-  m as SelectItemGroup
+  o as segmentedControlActiveIndicatorStyles,
+  i as segmentedControlItemLabelActiveStyles,
+  s as segmentedControlItemLabelInactiveStyles,
+  r as segmentedControlItemLabelStyles,
+  w as segmentedControlItemSeparatorStyles,
+  n as segmentedControlItemStyles,
+  a as segmentedControlRootStyles
 };
 //# sourceMappingURL=fondue-components28.js.map

package/dist/fondue-components28.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components28.js","sources":["../src/components/Select/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            {props.children}\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","styles","ForwardedRefSelectItemGroup"],"mappings":";;;AAgCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,MAGI,gBAAAC,EAAC,QAAG,gBAAcH,GAAY,KAAKE,GAAe,GAAGD,GAChD,UAAAA,EAAM,SACX,CAAA;AAGRF,EAAW,cAAc;AAEZ,MAAAK,IAAyBC,EAA2CN,CAAU,GAiB9EO,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,gBAAgBR,IAAa,2BAA2B,GAC7EE,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcH,GAAY,WAAWS,EAAO,OAAO,KAAKP,GACxD,UAAAK,EAAA,GAD2EC,CAEhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAI,IAA8BL,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components28.js","sources":["../src/components/SegmentedControl/styles/segmentedControlStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\n\nexport const segmentedControlRootStyles =\n    'tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt ' +\n    'tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate';\n\nexport const segmentedControlItemStyles =\n    'tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none ' +\n    // Apply border radius based on the index\n    'first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ' +\n    // Focus styles for keyboard navigation, custom rounding applied to match the active indicator\n    `${FOCUS_OUTLINE} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`;\n\nexport const segmentedControlActiveIndicatorStyles =\n    'tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform ' +\n    // Outline of active item\n    \"before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled \" +\n    'before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] ' +\n    // Show the active indicator when the state is on\n    'peer-data-[state=on]:tw-block ' +\n    // Used to animate the active indicator horizontally\n    '[&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] ' +\n    '[&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] ' +\n    '[&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] ' +\n    '[&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] ' +\n    '[&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] ' +\n    'peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] ' +\n    'peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] ' +\n    'peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] ' +\n    'peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] ' +\n    'peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] ' +\n    'peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] ' +\n    'peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] ' +\n    'peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] ' +\n    'peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] ' +\n    'peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]';\n\nexport const segmentedControlItemSeparatorStyles =\n    '-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out ' +\n    // Hide the separator when the state is on to rely on the active item's border\n    'group-first:tw-opacity-0 group-first:tw-ease-in ' +\n    'group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in ' +\n    'group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in ' +\n    '[[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in ' +\n    // Remove transition is the control is focused\n    'group-focus-visible:tw-duration-0';\n\nexport const segmentedControlItemLabelStyles =\n    'tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium ' +\n    // Hover on unselected items but not when disabled\n    'group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] ' +\n    // Prevent shrinking of icons\n    '[&_svg]:tw-shrink-0';\n\nexport const segmentedControlItemLabelActiveStyles =\n    'tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium ' +\n    'tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 ' +\n    'group-data-[state=on]:tw-ease-out';\n\nexport const segmentedControlItemLabelInactiveStyles =\n    'tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal ' +\n    'tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 ' +\n    'group-data-[state=on]:tw-ease-in';\n"],"names":["segmentedControlRootStyles","segmentedControlItemStyles","FOCUS_OUTLINE","segmentedControlActiveIndicatorStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles"],"mappings":";AAIO,MAAMA,IACT,+OAGSC,IACT,oNAIGC,CAAa,qEAEPC,IACT,i5CAuBSC,IACT,kYASSC,IACT,qMAMSC,IACT,6OAISC,IACT;"}

package/dist/fondue-components29.js

@@ -1,46 +1,113 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-popover";
-import { Slot as f } from "@radix-ui/react-slot";
-import { isValidElement as c } from "react";
-import t from "./fondue-components31.js";
-import { recursiveMap as d, getSelectOptionValue as v } from "./fondue-components36.js";
-const S = ({ highlightedIndex: l, getMenuProps: n, getItemProps: s, children: m, filterText: p }) => /* @__PURE__ */ o(a.Portal, { children: /* @__PURE__ */ o(
-  a.Content,
-  {
-    onOpenAutoFocus: (e) => {
-      e.preventDefault();
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { IconCaretDown as L } from "@frontify/fondue-icons";
+import * as f from "@radix-ui/react-popover";
+import { Slot as z } from "@radix-ui/react-slot";
+import { useCombobox as A } from "downshift";
+import { forwardRef as H, useRef as O, useMemo as q } from "react";
+import { SelectMenu as G } from "./fondue-components31.js";
+import r from "./fondue-components33.js";
+import { useSelectData as J } from "./fondue-components34.js";
+const g = ({
+  children: h,
+  onSelect: l,
+  value: b,
+  defaultValue: x,
+  placeholder: I = "",
+  disabled: i,
+  "aria-label": C,
+  "data-test-id": w = "fondue-select-combobox"
+}, S) => {
+  const { inputSlots: R, menuSlots: B, items: a, filterText: F, clearButton: u, getItemByValue: c, setFilterText: P } = J(h), v = c(x), M = c(b), {
+    getInputProps: n,
+    getToggleButtonProps: N,
+    getMenuProps: T,
+    getItemProps: y,
+    reset: D,
+    isOpen: V,
+    highlightedIndex: j,
+    inputValue: s
+  } = A({
+    items: a,
+    onSelectedItemChange: ({ selectedItem: e }) => {
+      l && l(e.value);
     },
-    className: t.portal,
-    children: /* @__PURE__ */ o("ul", { className: t.menu, ...n(), role: "dialog", children: d(
-      m,
-      (e, i) => {
-        if (((r) => c(r) && r.ref !== void 0)(e)) {
-          const r = s({
-            item: v(e.props),
-            index: i,
-            ...e.ref ? { ref: e.ref } : {}
-          });
-          return /* @__PURE__ */ o(
-            f,
-            {
-              className: t.item,
-              "data-highlighted": l === i,
-              onTouchStart: (u) => {
-                r.onClick && r.onClick(u);
-              },
-              ...r,
-              children: e
-            },
-            `${e.props.value}`
-          );
+    selectedItem: M,
+    onInputValueChange: ({ inputValue: e }) => {
+      P(e);
+    },
+    defaultSelectedItem: v,
+    defaultHighlightedIndex: 0,
+    itemToString: (e) => e ? e.label : ""
+  }), o = O(!1), k = q(
+    () => s && !a.find((e) => e.label.toLowerCase().includes(s.toLowerCase())),
+    [s, a]
+  );
+  return /* @__PURE__ */ p(f.Root, { open: V, children: [
+    /* @__PURE__ */ t(f.Anchor, { asChild: !0, children: /* @__PURE__ */ p("div", { ref: S, className: r.root, "data-error": k, children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          onMouseDown: (e) => {
+            o.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+          },
+          placeholder: I,
+          ...n({
+            "aria-label": C
+          }),
+          onFocus: (e) => {
+            o.current || (e.target.dataset.showFocusRing = "true");
+          },
+          onBlur: (e) => {
+            var m, d;
+            e.target.dataset.showFocusRing = "false", o.current = !1, n().onBlur && ((d = (m = n()).onBlur) == null || d.call(m, e));
+          },
+          className: r.input,
+          disabled: i,
+          "data-test-id": w
+        }
+      ),
+      R,
+      u && /* @__PURE__ */ t(
+        z,
+        {
+          onClick: (e) => {
+            e.stopPropagation(), D();
+          },
+          className: r.clear,
+          role: "button",
+          children: u
         }
-      },
-      p
-    ).parsedChildren })
-  }
-) });
-S.displayName = "Select.Menu";
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onMouseDown: () => {
+            o.current = !0;
+          },
+          ...N(),
+          "aria-label": "toggle menu",
+          disabled: i,
+          children: /* @__PURE__ */ t(L, { size: 16, className: r.caret })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ t(
+      G,
+      {
+        highlightedIndex: j,
+        filterText: F,
+        getMenuProps: T,
+        getItemProps: y,
+        children: B
+      }
+    )
+  ] });
+};
+g.displayName = "Select.Combobox";
+const $ = H(g);
 export {
-  S as SelectMenu
+  $ as ForwardedRefCombobox,
+  g as SelectCombobox
 };
 //# sourceMappingURL=fondue-components29.js.map

package/dist/fondue-components29.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components29.js","sources":["../src/components/Select/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n};\n\nexport const SelectMenu = ({ highlightedIndex, getMenuProps, getItemProps, children, filterText }: SelectMenuProps) => {\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                onOpenAutoFocus={(event) => {\n                    event.preventDefault();\n                }}\n                className={styles.portal}\n            >\n                <ul className={styles.menu} {...getMenuProps()} role=\"dialog\">\n                    {\n                        recursiveMap(\n                            children,\n                            (child, index) => {\n                                const isValid = <TProps,>(\n                                    child: ReactNode,\n                                ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } => {\n                                    // @ts-expect-error - We are explicitly checking for ref\n                                    return isValidElement<TProps>(child) && child.ref !== undefined;\n                                };\n\n                                if (isValid<SelectItemProps>(child)) {\n                                    const itemProps = getItemProps({\n                                        item: getSelectOptionValue(child.props),\n                                        index,\n                                        ...(child.ref ? { ref: child.ref } : {}),\n                                    });\n                                    return (\n                                        <RadixSlot\n                                            className={styles.item}\n                                            data-highlighted={highlightedIndex === index}\n                                            key={`${child.props.value}`}\n                                            // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                            onTouchStart={(event) => {\n                                                if (itemProps.onClick) {\n                                                    itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                }\n                                            }}\n                                            {...itemProps}\n                                        >\n                                            {child}\n                                        </RadixSlot>\n                                    );\n                                }\n                            },\n                            filterText,\n                        ).parsedChildren\n                    }\n                </ul>\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","jsx","RadixPopover","event","styles","recursiveMap","child","index","isValidElement","itemProps","getSelectOptionValue","RadixSlot"],"mappings":";;;;;;AAuCa,MAAAA,IAAa,CAAC,EAAE,kBAAAC,GAAkB,cAAAC,GAAc,cAAAC,GAAc,UAAAC,GAAU,YAAAC,QAE7E,gBAAAC,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAD;AAAA,EAACC,EAAa;AAAA,EAAb;AAAA,IACG,iBAAiB,CAACC,MAAU;AACxB,MAAAA,EAAM,eAAe;AAAA,IACzB;AAAA,IACA,WAAWC,EAAO;AAAA,IAElB,UAAA,gBAAAH,EAAC,QAAG,WAAWG,EAAO,MAAO,GAAGP,EAAA,GAAgB,MAAK,UAE7C,UAAAQ;AAAA,MACIN;AAAA,MACA,CAACO,GAAOC,MAAU;AAQV,aAPY,CACZD,MAGOE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ,QAG7BA,CAAK,GAAG;AACjC,gBAAMG,IAAYX,EAAa;AAAA,YAC3B,MAAMY,EAAqBJ,EAAM,KAAK;AAAA,YACtC,OAAAC;AAAA,YACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAC;AAAA,UAAA,CACzC;AAEG,iBAAA,gBAAAL;AAAA,YAACU;AAAAA,YAAA;AAAA,cACG,WAAWP,EAAO;AAAA,cAClB,oBAAkBR,MAAqBW;AAAA,cAGvC,cAAc,CAACJ,MAAU;AACrB,gBAAIM,EAAU,WACVA,EAAU,QAAQN,CAA2C;AAAA,cAErE;AAAA,cACC,GAAGM;AAAA,cAEH,UAAAH;AAAA,YAAA;AAAA,YATI,GAAGA,EAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QAYrC;AAAA,MACJ;AAAA,MACAN;AAAA,MACF,eAEV,CAAA;AAAA,EAAA;AAER,EAAA,CAAA;AAGRL,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components29.js","sources":["../src/components/Select/Combobox.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 { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { SelectMenu } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The aria label of the combobox component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect && onSelect(selectedItem.value);\n        },\n        selectedItem: activeItem,\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        defaultSelectedItem: defaultItem,\n        defaultHighlightedIndex: 0,\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n    const valueInvalid = useMemo(\n        () => inputValue && !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-error={valueInvalid}>\n                    <input\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        placeholder={placeholder}\n                        {...getInputProps({\n                            'aria-label': ariaLabel,\n                        })}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={(blurEvent) => {\n                            blurEvent.target.dataset.showFocusRing = 'false';\n                            wasClicked.current = false;\n                            if (getInputProps().onBlur) {\n                                getInputProps().onBlur?.(blurEvent);\n                            }\n                        }}\n                        className={styles.input}\n                        disabled={disabled}\n                        data-test-id={dataTestId}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <button\n                        type=\"button\"\n                        onMouseDown={() => {\n                            wasClicked.current = true;\n                        }}\n                        {...getToggleButtonProps()}\n                        aria-label=\"toggle menu\"\n                        disabled={disabled}\n                    >\n                        <IconCaretDown size={16} className={styles.caret} />\n                    </button>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","defaultItem","activeItem","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","isOpen","highlightedIndex","inputValue","useCombobox","selectedItem","item","wasClicked","useRef","valueInvalid","useMemo","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","blurEvent","_b","_a","RadixSlot","event","IconCaretDown","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}

package/dist/fondue-components30.js

@@ -1,11 +1,15 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "./fondue-components31.js";
-const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
-t.displayName = "Select.Slot";
-const S = d(t);
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import c from "./fondue-components33.js";
+const a = ({ "data-test-id": t = "fondue-select-item", ...e }, r) => /* @__PURE__ */ d("li", { "data-test-id": t, ref: r, ...e, children: e.children });
+a.displayName = "Select.Item";
+const n = o(a), m = ({ children: t, groupId: e, "data-test-id": r = "fondue-select-item-group" }, s) => /* @__PURE__ */ d("div", { "data-test-id": r, className: c.group, ref: s, children: t }, e);
+m.displayName = "Select.Group";
+const p = o(m);
 export {
-  S as ForwardedRefSelectSlot,
-  t as SelectSlot
+  n as ForwardedRefSelectItem,
+  p as ForwardedRefSelectItemGroup,
+  a as SelectItem,
+  m as SelectItemGroup
 };
 //# sourceMappingURL=fondue-components30.js.map

package/dist/fondue-components30.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components30.js","sources":["../src/components/Select/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBa,MAAAA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9EC,MAGK,gBAAAC,EAAA,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,EACL,CAAA;AAGRD,EAAW,cAAc;AAEZ,MAAAQ,IAAyBC,EAA4CT,CAAU;"}
+{"version":3,"file":"fondue-components30.js","sources":["../src/components/Select/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            {props.children}\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","styles","ForwardedRefSelectItemGroup"],"mappings":";;;AAgCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,MAGI,gBAAAC,EAAC,QAAG,gBAAcH,GAAY,KAAKE,GAAe,GAAGD,GAChD,UAAAA,EAAM,SACX,CAAA;AAGRF,EAAW,cAAc;AAEZ,MAAAK,IAAyBC,EAA2CN,CAAU,GAiB9EO,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,gBAAgBR,IAAa,2BAA2B,GAC7EE,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcH,GAAY,WAAWS,EAAO,OAAO,KAAKP,GACxD,UAAAK,EAAA,GAD2EC,CAEhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAI,IAA8BL,EAAiDC,CAAe;"}

package/dist/fondue-components31.js

@@ -1,24 +1,46 @@
-const t = "_root_c61pu_5", _ = "_input_c61pu_56", o = "_slot_c61pu_75", c = "_clear_c61pu_124", p = "_caret_c61pu_137", u = "_menu_c61pu_159", n = "_portal_c61pu_172", r = "_item_c61pu_176", s = "_group_c61pu_196", e = {
-  root: t,
-  input: _,
-  slot: o,
-  clear: c,
-  caret: p,
-  menu: u,
-  portal: n,
-  item: r,
-  group: s
+import { jsx as o } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-popover";
+import { Slot as v } from "@radix-ui/react-slot";
+import { useRef as h, isValidElement as O } from "react";
+import { usePreventDropdownOverflow as S } from "./fondue-components22.js";
+import r from "./fondue-components33.js";
+import { recursiveMap as g, getSelectOptionValue as C } from "./fondue-components38.js";
+const M = ({ highlightedIndex: i, getMenuProps: l, getItemProps: m, children: p, filterText: u }) => {
+  const n = h(null), { setMaxHeight: f } = S(n), c = (e) => {
+    e.preventDefault(), f();
+  };
+  return /* @__PURE__ */ o(a.Portal, { children: /* @__PURE__ */ o(a.Content, { onOpenAutoFocus: c, className: r.portal, children: /* @__PURE__ */ o("ul", { className: r.menu, ...l(), ref: n, "data-test-id": "fondue-select-menu", children: g(
+    p,
+    (e, s) => {
+      if (((t) => (
+        // @ts-expect-error - We are explicitly checking for ref
+        O(t) && t.ref !== void 0
+      ))(e)) {
+        const t = m({
+          item: C(e.props),
+          index: s,
+          ...e.ref ? { ref: e.ref } : {}
+        });
+        return /* @__PURE__ */ o(
+          v,
+          {
+            className: r.item,
+            "data-highlighted": i === s,
+            onTouchStart: (d) => {
+              t.onClick && t.onClick(d);
+            },
+            ...t,
+            children: e
+          },
+          `${e.props.value}`
+        );
+      }
+    },
+    u
+  ).parsedChildren }) }) });
 };
+M.displayName = "Select.Menu";
 export {
-  p as caret,
-  c as clear,
-  e as default,
-  s as group,
-  _ as input,
-  r as item,
-  u as menu,
-  n as portal,
-  t as root,
-  o as slot
+  M as SelectMenu
 };
 //# sourceMappingURL=fondue-components31.js.map

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components31.js","sources":["../src/components/Select/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, useRef, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n};\n\nexport const SelectMenu = ({ highlightedIndex, getMenuProps, getItemProps, children, filterText }: SelectMenuProps) => {\n    const ref = useRef<HTMLUListElement | null>(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(ref);\n\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n        setMaxHeight();\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content onOpenAutoFocus={handleOnOpenAutoFocus} className={styles.portal}>\n                <ul className={styles.menu} {...getMenuProps()} ref={ref} data-test-id=\"fondue-select-menu\">\n                    {\n                        recursiveMap(\n                            children,\n                            (child, index) => {\n                                const isValid = <TProps,>(\n                                    child: ReactNode,\n                                ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                    // @ts-expect-error - We are explicitly checking for ref\n                                    isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                if (isValid<SelectItemProps>(child)) {\n                                    const itemProps = getItemProps({\n                                        item: getSelectOptionValue(child.props),\n                                        index,\n                                        ...(child.ref ? { ref: child.ref } : {}),\n                                    });\n                                    return (\n                                        <RadixSlot\n                                            className={styles.item}\n                                            data-highlighted={highlightedIndex === index}\n                                            key={`${child.props.value}`}\n                                            // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                            onTouchStart={(event) => {\n                                                if (itemProps.onClick) {\n                                                    itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                }\n                                            }}\n                                            {...itemProps}\n                                        >\n                                            {child}\n                                        </RadixSlot>\n                                    );\n                                }\n                            },\n                            filterText,\n                        ).parsedChildren\n                    }\n                </ul>\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","ref","useRef","setMaxHeight","usePreventDropdownOverflow","handleOnOpenAutoFocus","event","jsx","RadixPopover","styles","recursiveMap","child","index","isValidElement","itemProps","getSelectOptionValue","RadixSlot"],"mappings":";;;;;;;AAyCa,MAAAA,IAAa,CAAC,EAAE,kBAAAC,GAAkB,cAAAC,GAAc,cAAAC,GAAc,UAAAC,GAAU,YAAAC,QAAkC;AAC7G,QAAAC,IAAMC,EAAgC,IAAI,GAE1C,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAG,GAEjDI,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe,GACRH;EAAA;AAIb,SAAA,gBAAAI,EAACC,EAAa,QAAb,EACG,4BAACA,EAAa,SAAb,EAAqB,iBAAiBH,GAAuB,WAAWI,EAAO,QAC5E,UAAA,gBAAAF,EAAC,MAAG,EAAA,WAAWE,EAAO,MAAO,GAAGZ,EAAa,GAAG,KAAAI,GAAU,gBAAa,sBAE/D,UAAAS;AAAA,IACIX;AAAA,IACA,CAACY,GAAOC,MAAU;AAOV,WANY,CACZD;AAAAA;AAAAA,QAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,SAEtBA,CAAK,GAAG;AACjC,cAAMG,IAAYhB,EAAa;AAAA,UAC3B,MAAMiB,EAAqBJ,EAAM,KAAK;AAAA,UACtC,OAAAC;AAAA,UACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAC;AAAA,QAAA,CACzC;AAEG,eAAA,gBAAAJ;AAAA,UAACS;AAAAA,UAAA;AAAA,YACG,WAAWP,EAAO;AAAA,YAClB,oBAAkBb,MAAqBgB;AAAA,YAGvC,cAAc,CAACN,MAAU;AACrB,cAAIQ,EAAU,WACVA,EAAU,QAAQR,CAA2C;AAAA,YAErE;AAAA,YACC,GAAGQ;AAAA,YAEH,UAAAH;AAAA,UAAA;AAAA,UATI,GAAGA,EAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAYrC;AAAA,IACJ;AAAA,IACAX;AAAA,EACJ,EAAE,eAEV,CAAA,GACJ,EACJ,CAAA;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components32.js

@@ -1,59 +1,11 @@
-import { jsx as g } from "react/jsx-runtime";
-import { IconCross as w } from "@frontify/fondue-icons";
-import { useState as x, useMemo as S, Children as f, isValidElement as u, cloneElement as B, useCallback as E } from "react";
-import { ForwardedRefSelectItem as I } from "./fondue-components28.js";
-import { ForwardedRefSelectSlot as c } from "./fondue-components30.js";
-import { getSelectOptionValue as v } from "./fondue-components36.js";
-const i = (s) => {
-  const t = [];
-  return f.forEach(s, (o) => {
-    if (u(o) && o.type === I)
-      t.push(v(o.props));
-    else if (u(o) && o.props.children) {
-      const l = i(o.props.children);
-      for (const a of l)
-        t.push(a);
-    }
-  }), t;
-}, k = (s) => {
-  const [t, o] = x(""), { inputSlots: l, menuSlots: a, itemValues: p, clearButton: V } = S(() => {
-    const r = [], n = [];
-    let m;
-    return f.toArray(s).some(
-      (e) => u(e) && e.type === c
-    ) ? (f.forEach(s, (e) => {
-      u(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? r.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = B(e, { children: /* @__PURE__ */ g(w, { size: 16 }) })));
-    }), {
-      inputSlots: r,
-      menuSlots: n,
-      clearButton: m,
-      itemValues: i(n)
-    }) : {
-      menuSlots: s,
-      inputSlots: [],
-      itemValues: i(s)
-    };
-  }, [s]), y = S(
-    () => p.filter(
-      (r) => t === "" || r.label.toLowerCase().includes(t.toLowerCase())
-    ),
-    [p, t]
-  ), C = E(
-    (r) => r ? p.find((n) => n.value === r) : void 0,
-    [p]
-  );
-  return {
-    inputSlots: l,
-    menuSlots: a,
-    clearButton: V,
-    setFilterText: o,
-    filterText: t,
-    items: y,
-    getItemByValue: C
-  };
-};
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import m from "./fondue-components33.js";
+const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
+t.displayName = "Select.Slot";
+const S = d(t);
 export {
-  i as getRecursiveOptionValues,
-  k as useSelectData
+  S as ForwardedRefSelectSlot,
+  t as SelectSlot
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\nexport const getRecursiveOptionValues = (children: ReactNode): { value: string; label: string }[] => {\n    const values: { value: string; label: string }[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n            values.push(getSelectOptionValue(child.props));\n        } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n            const optionValues = getRecursiveOptionValues(child.props.children);\n            for (const optionValue of optionValues) {\n                values.push(optionValue);\n            }\n        }\n    });\n    return values;\n};\n\nexport const useSelectData = (children: ReactNode) => {\n    const [filterText, setFilterText] = useState('');\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n        const hasSlots = Children.toArray(children).some(\n            (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n        );\n\n        if (hasSlots) {\n            Children.forEach(children, (child) => {\n                if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n                    if (child.props.name === 'menu') {\n                        menuSlots.push(child.props.children);\n                    } else if (child.props.name === 'left' || child.props.name === 'right') {\n                        inputSlots.push(child);\n                    } else if (child.props.name === 'clear') {\n                        if (child.props.children) {\n                            clearButton = child;\n                        } else {\n                            clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n                        }\n                    }\n                }\n            });\n\n            return {\n                inputSlots,\n                menuSlots,\n                clearButton,\n                itemValues: getRecursiveOptionValues(menuSlots),\n            };\n        } else {\n            return {\n                menuSlots: children,\n                inputSlots: [],\n                itemValues: getRecursiveOptionValues(children),\n            };\n        }\n    }, [children]);\n\n    const filteredItems = useMemo(\n        () =>\n            itemValues.filter(\n                (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n            ),\n        [itemValues, filterText],\n    );\n\n    const getItemByValue = useCallback(\n        (value?: string) => (value ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    return {\n        inputSlots,\n        menuSlots,\n        clearButton,\n        setFilterText,\n        filterText,\n        items: filteredItems,\n        getItemByValue,\n    };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","filteredItems","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AAca,MAAAA,IAA2B,CAACC,MAA4D;AACjG,QAAMC,IAA6C,CAAA;AAC1C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAE/B;AAAA,EAAA,CACH,GACMP;AACX,GAEaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAA,GAC1BC,IAAyB,CAAA;AAC3BE,QAAAA;AAKJ,WAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IAAA,KAI3DhB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,EAAI,CAAA;AAAA,IAGnF,CACH,GAEM;AAAA,MACH,YAAAP;AAAAA,MACA,WAAAC;AAAAA,MACA,aAAAE;AAAAA,MACA,YAAYjB,EAAyBe,CAAS;AAAA,IAAA,KAG3C;AAAA,MACH,WAAWd;AAAA,MACX,YAAY,CAAC;AAAA,MACb,YAAYD,EAAyBC,CAAQ;AAAA,IAAA;AAAA,EAErD,GACD,CAACA,CAAQ,CAAC,GAEPqB,IAAgBJ;AAAA,IAClB,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,YAAA,EAAc,SAASZ,EAAW,aAAa;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAAA,GAGrBa,IAAiBC;AAAA,IACnB,CAACC,MAAoBA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IAC/E,CAACV,CAAU;AAAA,EAAA;AAGR,SAAA;AAAA,IACH,YAAAF;AAAA,IACA,WAAAC;AAAA,IACA,aAAAE;AAAA,IACA,eAAAL;AAAA,IACA,YAAAD;AAAA,IACA,OAAOW;AAAA,IACP,gBAAAE;AAAA,EAAA;AAER;"}
+{"version":3,"file":"fondue-components32.js","sources":["../src/components/Select/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBa,MAAAA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9EC,MAGK,gBAAAC,EAAA,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,EACL,CAAA;AAGRD,EAAW,cAAc;AAEZ,MAAAQ,IAAyBC,EAA4CT,CAAU;"}

package/dist/fondue-components33.js

@@ -1,21 +1,24 @@
-const o = "_root_pxj69_5", t = "_input_pxj69_52", s = "_slot_pxj69_71", _ = "_iconSuccess_pxj69_121", n = "_iconError_pxj69_129", c = "_loadingStatus_pxj69_137", i = "_spin_pxj69_1", p = {
-  root: o,
-  input: t,
-  slot: s,
-  iconSuccess: _,
-  iconError: n,
-  loadingStatus: c,
-  spin: i,
-  "tw-dark": "_tw-dark_pxj69_169"
+const t = "_root_yu66u_5", u = "_input_yu66u_56", _ = "_slot_yu66u_75", o = "_clear_yu66u_124", c = "_caret_yu66u_137", n = "_menu_yu66u_159", r = "_portal_yu66u_172", s = "_item_yu66u_176", e = "_group_yu66u_194", a = {
+  root: t,
+  input: u,
+  slot: _,
+  clear: o,
+  caret: c,
+  menu: n,
+  portal: r,
+  item: s,
+  group: e
 };
 export {
-  p as default,
-  n as iconError,
-  _ as iconSuccess,
-  t as input,
-  c as loadingStatus,
-  o as root,
-  s as slot,
-  i as spin
+  c as caret,
+  o as clear,
+  a as default,
+  e as group,
+  u as input,
+  s as item,
+  n as menu,
+  r as portal,
+  t as root,
+  _ as slot
 };
 //# sourceMappingURL=fondue-components33.js.map

package/dist/fondue-components33.js.map

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