@frontify/fondue-components 3.3.2 → 3.3.4

package/dist/fondue-components48.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components48.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { type FocusEvent, 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     * 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 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        status = 'neutral',\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 {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect && onSelect(selectedItem.value);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': ariaLabel,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            aria-label=\"toggle menu\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                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","status","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":";;;;;;;;;AAoDO,MAAMA,IAAiB,CAC1B;AAAA,EACI,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,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,EAAcjB,CAAQ,GAEpB;AAAA,IACF,eAAAkB;AAAA,IACA,sBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,MACAC,EAAY;AAAA,IACZ,OAAAf;AAAA,IACA,cAAcG,EAAeb,CAAK;AAAA,IAClC,qBAAqBa,EAAeZ,CAAY;AAAA,IAChD,yBAAyB;AAAA,IACzB,sBAAsB,CAAC,EAAE,cAAAoB,QAAmB;AAC5B,MAAAtB,KAAAA,EAASsB,EAAa,KAAK;AAAA,IAC3C;AAAA,IACA,oBAAoB,CAAC,EAAE,YAAAG,QAAiB;AACpC,MAAAV,EAAcU,CAAU;AAAA,IAC5B;AAAA,IACA,cAAc,CAACE,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD,GAEKC,IAAaC,EAAO,EAAK,GAEzBC,IAAeC;AAAA,IACjB,MAAM,CAACpB,EAAM,KAAK,CAACgB,MAASA,EAAK,MAAM,YAAc,EAAA,SAASF,EAAW,YAAa,CAAA,CAAC;AAAA,IACvF,CAACA,GAAYd,CAAK;AAAA,EAAA,GAGhBqB,IAAgB,CAACC,MAAqD;;AAC9D,IAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCL,EAAW,UAAU,KAEcN,KAAA,gBAAAA,EAAc,MAAM,yBAAwBG,EAAW,uBAMhFJ,KAGNJ,IAAgB,YACFiB,KAAAC,IAAAlB,EAAA,GAAE,WAAF,QAAAiB,EAAA,KAAAC,GAAWF;AAAA,EAC7B;AAGJ,SACK,gBAAAG,EAAAC,EAAa,MAAb,EAAkB,MAAMd,GACrB,UAAA;AAAA,IAAA,gBAAAe,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAC,gBAAAD,EAAA,OAAA,EAAI,KAAK5B,GAAc,WAAW+B,EAAO,MAAM,eAAaT,IAAe,UAAU1B,GAClF,UAAA;AAAA,MAAA,gBAAAkC;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGrB,EAAc;AAAA,YACd,cAAcX;AAAA,UAAA,CACjB;AAAA,UACD,gBAAcC;AAAA,UACd,aAAAJ;AAAA,UACA,WAAWoC,EAAO;AAAA,UAClB,UAAAlC;AAAA,UACA,aAAa,CAACmC,MAAe;AACzB,YAAAZ,EAAW,UAAU,IACVY,EAAA,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,SAAS,CAACC,MAAe;AACjB,YAACb,EAAW,YACDa,EAAA,OAAO,QAAQ,gBAAgB;AAAA,UAElD;AAAA,UACA,QAAQT;AAAA,QAAA;AAAA,MACZ;AAAA,MACCvB;AAAA,MACAI,KACG,gBAAAyB;AAAA,QAACI;AAAAA,QAAA;AAAA,UACG,SAAS,CAACC,MAAU;AAChB,YAAAA,EAAM,gBAAgB,GAChBtB;UACV;AAAA,UACA,WAAWkB,EAAO;AAAA,UAClB,MAAK;AAAA,UAEJ,UAAA1B;AAAA,QAAA;AAAA,MACL;AAAA,MAEH,gBAAAuB,EAAA,OAAA,EAAI,WAAWG,EAAO,OACnB,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACI,GAAGpB,EAAqB;AAAA,YACzB,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAAb;AAAA,YACA,aAAa,MAAM;AACf,cAAAuB,EAAW,UAAU;AAAA,YACzB;AAAA,YAEA,4BAACgB,GAAc,EAAA,MAAM,IAAI,WAAWL,EAAO,OAAO;AAAA,UAAA;AAAA,QACtD;AAAA,QACCnC,MAAW,YACR,gBAAAkC;AAAA,UAACO;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWN,EAAO;AAAA,YAClB,gBAAc,GAAGhC,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QACHuB,KAAgB1B,MAAW,UACxB,gBAAAkC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWP,EAAO;AAAA,YAClB,gBAAc,GAAGhC,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,MAAA,GACR;AAAA,IAAA,EAAA,CACJ,EACJ,CAAA;AAAA,IAEA,gBAAA+B;AAAA,MAACS;AAAA,MAAA;AAAA,QACG,kBAAAvB;AAAA,QACA,YAAAZ;AAAA,QACA,cAAAO;AAAA,QACA,cAAAC;AAAA,QAEC,UAAAV;AAAA,MAAA;AAAA,IACL;AAAA,EACJ,EAAA,CAAA;AAER;AACAZ,EAAe,cAAc;AAEhB,MAAAkD,KAAuBC,EAA0CnD,CAAc;"}
+{"version":3,"file":"fondue-components48.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { 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     * 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 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        status = 'neutral',\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 [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect && onSelect(selectedItem.value);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': ariaLabel,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            aria-label=\"toggle menu\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}

package/dist/fondue-components49.js

@@ -1,15 +1,19 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { IconCheckMark as l } from "@frontify/fondue-icons";
+import { forwardRef as a } from "react";
 import c from "./fondue-components52.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);
+const d = ({ "data-test-id": t = "fondue-select-item", ...e }, r) => /* @__PURE__ */ i("li", { "data-test-id": t, ref: r, ...e, children: [
+  e.children,
+  /* @__PURE__ */ o(l, { className: c.checkmarkIcon })
+] });
+d.displayName = "Select.Item";
+const I = a(d), m = ({ children: t, groupId: e, "data-test-id": r = "fondue-select-item-group" }, s) => /* @__PURE__ */ o("div", { "data-test-id": r, className: c.group, ref: s, children: t }, e);
 m.displayName = "Select.Group";
-const p = o(m);
+const S = a(m);
 export {
-  n as ForwardedRefSelectItem,
-  p as ForwardedRefSelectItemGroup,
-  a as SelectItem,
+  I as ForwardedRefSelectItem,
+  S as ForwardedRefSelectItemGroup,
+  d as SelectItem,
   m as SelectItemGroup
 };
 //# sourceMappingURL=fondue-components49.js.map

package/dist/fondue-components49.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components49.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-components49.js","sources":["../src/components/Select/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            {props.children}\n            <IconCheckMark className={styles.checkmarkIcon} />\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The 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","IconCheckMark","styles","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,wBAGK,MAAG,EAAA,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GAChD,UAAA;AAAA,EAAMA,EAAA;AAAA,EACN,gBAAAE,EAAAC,GAAA,EAAc,WAAWC,EAAO,cAAe,CAAA;AACpD,EAAA,CAAA;AAGRN,EAAW,cAAc;AAEZ,MAAAO,IAAyBC,EAA2CR,CAAU,GAiB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,gBAAgBV,IAAa,2BAA2B,GAC7EE,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcH,GAAY,WAAWK,EAAO,OAAO,KAAKH,GACxD,UAAAO,EAAA,GAD2EC,CAEhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAG,IAA8BJ,EAAiDC,CAAe;"}

package/dist/fondue-components50.js

@@ -1,46 +1,65 @@
-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-components38.js";
-import r from "./fondue-components52.js";
-import { recursiveMap as g, getSelectOptionValue as C } from "./fondue-components60.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();
+import { jsx as t } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-popover";
+import { Slot as S } from "@radix-ui/react-slot";
+import { useRef as g, isValidElement as C } from "react";
+import { usePreventDropdownOverflow as M } from "./fondue-components38.js";
+import n from "./fondue-components52.js";
+import { recursiveMap as N, getSelectOptionValue as P } from "./fondue-components60.js";
+const V = ({
+  highlightedIndex: p,
+  getMenuProps: u,
+  getItemProps: m,
+  children: f,
+  filterText: c,
+  selectedItem: r,
+  hasInteractedSinceOpening: d
+}) => {
+  const s = g(null), { setMaxHeight: v } = M(s), h = (e) => {
+    e.preventDefault(), v();
   };
-  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 }) }) });
+  return /* @__PURE__ */ t(l.Portal, { children: /* @__PURE__ */ t(l.Content, { onOpenAutoFocus: h, className: n.portal, children: /* @__PURE__ */ t(
+    "ul",
+    {
+      className: n.menu,
+      ...u(),
+      ref: s,
+      "data-has-interacted": d ? "true" : "false",
+      "data-test-id": "fondue-select-menu",
+      children: N(
+        f,
+        (e, i) => {
+          if (((o) => (
+            // @ts-expect-error - We are explicitly checking for ref
+            C(o) && o.ref !== void 0
+          ))(e)) {
+            const o = P(e.props), a = m({
+              item: o,
+              index: i,
+              ...e.ref ? { ref: e.ref } : {}
+            });
+            return /* @__PURE__ */ t(
+              S,
+              {
+                className: n.item,
+                "data-highlighted": p === i,
+                "data-selected": (r == null ? void 0 : r.value) === o.value,
+                onTouchStart: (O) => {
+                  a.onClick && a.onClick(O);
+                },
+                ...a,
+                children: e
+              },
+              e.props.value
+            );
+          }
+        },
+        c
+      ).parsedChildren
+    }
+  ) }) });
 };
-M.displayName = "Select.Menu";
+V.displayName = "Select.Menu";
 export {
-  M as SelectMenu
+  V as SelectMenu
 };
 //# sourceMappingURL=fondue-components50.js.map

package/dist/fondue-components50.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components50.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;"}
+{"version":3,"file":"fondue-components50.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     * @internal\n     * The type of the menu.\n     */\n    selectedItem?: {\n        value: string;\n    } | null;\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    selectedItem,\n    hasInteractedSinceOpening,\n}: 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\n                    className={styles.menu}\n                    {...getMenuProps()}\n                    ref={ref}\n                    data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                    data-test-id=\"fondue-select-menu\"\n                >\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 optionData = getSelectOptionValue(child.props);\n                                    const itemProps = getItemProps({\n                                        item: optionData,\n                                        index,\n                                        ...(child.ref ? { ref: child.ref } : {}),\n                                    });\n\n                                    return (\n                                        <RadixSlot\n                                            className={styles.item}\n                                            data-highlighted={highlightedIndex === index}\n                                            data-selected={selectedItem?.value === optionData.value}\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","selectedItem","hasInteractedSinceOpening","ref","useRef","setMaxHeight","usePreventDropdownOverflow","handleOnOpenAutoFocus","event","jsx","RadixPopover","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","RadixSlot"],"mappings":";;;;;;;AAsDO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AACJ,MAAuB;AACb,QAAAC,IAAMC,EAAgC,IAAI,GAE1C,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAG,GAEjDI,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe,GACRH;EAAA;AAGjB,SACK,gBAAAI,EAAAC,EAAa,QAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,SAAb,EAAqB,iBAAiBH,GAAuB,WAAWI,EAAO,QAC5E,UAAA,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWE,EAAO;AAAA,MACjB,GAAGd,EAAa;AAAA,MACjB,KAAAM;AAAA,MACA,uBAAqBD,IAA4B,SAAS;AAAA,MAC1D,gBAAa;AAAA,MAGT,UAAAU;AAAA,QACIb;AAAA,QACA,CAACc,GAAOC,MAAU;AAOV,eANY,CACZD;AAAAA;AAAAA,YAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,aAEtBA,CAAK,GAAG;AAC3B,kBAAAG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYpB,EAAa;AAAA,cAC3B,MAAMkB;AAAA,cACN,OAAAF;AAAA,cACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAC;AAAA,YAAA,CACzC;AAGG,mBAAA,gBAAAJ;AAAA,cAACU;AAAAA,cAAA;AAAA,gBACG,WAAWR,EAAO;AAAA,gBAClB,oBAAkBf,MAAqBkB;AAAA,gBACvC,kBAAeb,KAAA,gBAAAA,EAAc,WAAUe,EAAW;AAAA,gBAGlD,cAAc,CAACR,MAAU;AACrB,kBAAIU,EAAU,WACVA,EAAU,QAAQV,CAA2C;AAAA,gBAErE;AAAA,gBACC,GAAGU;AAAA,gBAEH,UAAAL;AAAA,cAAA;AAAA,cATIA,EAAM,MAAM;AAAA,YAAA;AAAA,UAY7B;AAAA,QACJ;AAAA,QACAb;AAAA,MAAA,EACF;AAAA,IAAA;AAAA,EAAA,EAGd,CAAA,EACJ,CAAA;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components52.js

@@ -1,30 +1,32 @@
-const t = "_root_tjp5n_5", o = "_input_tjp5n_59", n = "_slot_tjp5n_78", _ = "_clear_tjp5n_127", c = "_icons_tjp5n_140", s = "_caret_tjp5n_146", r = "_iconSuccess_tjp5n_168", p = "_iconError_tjp5n_174", e = "_menu_tjp5n_180", i = "_portal_tjp5n_194", u = "_item_tjp5n_198", j = "_group_tjp5n_216", a = {
-  root: t,
+const n = "_root_1nim9_5", o = "_input_1nim9_59", c = "_slot_1nim9_78", _ = "_clear_1nim9_127", t = "_icons_1nim9_140", s = "_caret_1nim9_146", i = "_iconSuccess_1nim9_168", r = "_iconError_1nim9_174", m = "_menu_1nim9_180", e = "_portal_1nim9_194", a = "_item_1nim9_198", u = "_checkmarkIcon_1nim9_217", l = "_group_1nim9_231", p = {
+  root: n,
   input: o,
-  slot: n,
+  slot: c,
   clear: _,
-  icons: c,
+  icons: t,
   caret: s,
-  iconSuccess: r,
-  iconError: p,
-  menu: e,
-  portal: i,
-  item: u,
-  group: j
+  iconSuccess: i,
+  iconError: r,
+  menu: m,
+  portal: e,
+  item: a,
+  checkmarkIcon: u,
+  group: l
 };
 export {
   s as caret,
+  u as checkmarkIcon,
   _ as clear,
-  a as default,
-  j as group,
-  p as iconError,
-  r as iconSuccess,
-  c as icons,
+  p as default,
+  l as group,
+  r as iconError,
+  i as iconSuccess,
+  t as icons,
   o as input,
-  u as item,
-  e as menu,
-  i as portal,
-  t as root,
-  n as slot
+  a as item,
+  m as menu,
+  e as portal,
+  n as root,
+  c as slot
 };
 //# sourceMappingURL=fondue-components52.js.map

package/dist/fondue-components52.js.map

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

package/dist/fondue-components56.js

@@ -1,21 +1,21 @@
-const s = "_root_zfs0q_5", o = "_input_zfs0q_52", t = "_slot_zfs0q_71", _ = "_iconSuccess_zfs0q_121", n = "_iconError_zfs0q_129", c = "_loadingStatus_zfs0q_137", i = "_spin_zfs0q_1", r = {
-  root: s,
-  input: o,
-  slot: t,
+const o = "_root_2iy13_5", t = "_input_2iy13_52", s = "_slot_2iy13_71", _ = "_iconSuccess_2iy13_121", i = "_iconError_2iy13_129", n = "_loadingStatus_2iy13_137", c = "_spin_2iy13_1", r = {
+  root: o,
+  input: t,
+  slot: s,
   iconSuccess: _,
-  iconError: n,
-  loadingStatus: c,
-  spin: i,
-  "tw-dark": "_tw-dark_zfs0q_169"
+  iconError: i,
+  loadingStatus: n,
+  spin: c,
+  "tw-dark": "_tw-dark_2iy13_169"
 };
 export {
   r as default,
-  n as iconError,
+  i as iconError,
   _ as iconSuccess,
-  o as input,
-  c as loadingStatus,
-  s as root,
-  t as slot,
-  i as spin
+  t as input,
+  n as loadingStatus,
+  o as root,
+  s as slot,
+  c as spin
 };
 //# sourceMappingURL=fondue-components56.js.map

package/dist/fondue-components58.js

@@ -1,5 +1,14 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+const o = "_root_6hy5w_5", c = "_colorName_6hy5w_53", t = "_colorIndicator_6hy5w_57", r = "_caret_6hy5w_63", _ = {
+  root: o,
+  colorName: c,
+  colorIndicator: t,
+  caret: r
+};
 export {
-  t as FOCUS_OUTLINE
+  r as caret,
+  t as colorIndicator,
+  c as colorName,
+  _ as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components58.js.map

package/dist/fondue-components58.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components58.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components58.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/fondue-components59.js

@@ -1,14 +1,5 @@
-const o = "_root_6hy5w_5", c = "_colorName_6hy5w_53", t = "_colorIndicator_6hy5w_57", r = "_caret_6hy5w_63", _ = {
-  root: o,
-  colorName: c,
-  colorIndicator: t,
-  caret: r
-};
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
-  r as caret,
-  t as colorIndicator,
-  c as colorName,
-  _ as default,
-  o as root
+  t as FOCUS_OUTLINE
 };
 //# sourceMappingURL=fondue-components59.js.map

package/dist/fondue-components59.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components59.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components59.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}

package/dist/fondue-components7.js

@@ -1,95 +1,98 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { jsx as o, jsxs as F } from "react/jsx-runtime";
 import { IconCross as w } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-dialog";
-import { forwardRef as d } from "react";
-import { addAutoFocusAttribute as F, addShowFocusRing as S } from "./fondue-components35.js";
-import r from "./fondue-components36.js";
-const s = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
-s.displayName = "Dialog.Root";
-const n = ({ children: t, "data-test-id": o = "fondue-dialog-trigger" }, e) => /* @__PURE__ */ a(
+import { createContext as M, forwardRef as l, useContext as S } from "react";
+import { addAutoFocusAttribute as B, addShowFocusRing as H } from "./fondue-components35.js";
+import d from "./fondue-components36.js";
+const s = M({ isModal: !1 }), n = ({ children: t, ...a }) => /* @__PURE__ */ o(s.Provider, { value: { isModal: a.modal ?? !1 }, children: /* @__PURE__ */ o(i.Root, { ...a, children: t }) });
+n.displayName = "Dialog.Root";
+const g = ({ children: t, "data-test-id": a = "fondue-dialog-trigger" }, e) => /* @__PURE__ */ o(
   i.Trigger,
   {
-    onMouseDown: F,
+    onMouseDown: B,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
-    "data-test-id": o,
+    "data-test-id": a,
     asChild: !0,
     ref: e,
     children: t
   }
 );
-n.displayName = "Dialog.Trigger";
-const g = ({
+g.displayName = "Dialog.Trigger";
+const j = ({ children: t, showUnderlay: a }) => {
+  const { isModal: e } = S(s);
+  return e ? /* @__PURE__ */ o(i.Overlay, { "data-visible": a, className: d.underlay, children: t }) : /* @__PURE__ */ o("div", { className: d.underlay, "data-visible": a, children: t });
+}, c = ({
   maxWidth: t = "800px",
-  minWidth: o = "400px",
+  minWidth: a = "400px",
   minHeight: e = "200px",
-  padding: l = "compact",
+  padding: r = "compact",
   verticalAlign: N = "center",
-  "data-test-id": C = "fondue-dialog-content",
+  "data-test-id": v = "fondue-dialog-content",
   showUnderlay: h = !1,
-  children: v,
-  rounded: x = !0,
+  children: x,
+  rounded: b = !0,
   ...R
-}, T) => /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ a(i.Overlay, { "data-visible": h, className: r.underlay, children: /* @__PURE__ */ a(
+}, T) => /* @__PURE__ */ o(i.Portal, { children: /* @__PURE__ */ o(j, { showUnderlay: h, children: /* @__PURE__ */ o(
   i.Content,
   {
     style: {
       "--dialog-max-width": t,
-      "--dialog-min-width": o,
+      "--dialog-min-width": a,
       "--dialog-min-height": e
     },
     ref: T,
-    className: r.content,
-    onFocus: S,
-    "data-dialog-rounded": x,
-    "data-dialog-spacing": l,
-    "data-test-id": C,
+    className: d.content,
+    onFocus: H,
+    "data-dialog-rounded": b,
+    "data-dialog-spacing": r,
+    "data-test-id": v,
     "data-dialog-vertical-align": N,
     ...R,
-    children: v
+    children: x
   }
 ) }) });
-g.displayName = "Dialog.Content";
-const c = ({ children: t, showCloseButton: o = !0, "data-test-id": e = "fondue-dialog-header" }, l) => /* @__PURE__ */ b("div", { "data-test-id": e, ref: l, className: r.header, "data-dialog-layout-component": !0, children: [
-  /* @__PURE__ */ a("div", { children: t }),
-  o && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ a(w, { size: 20 }) })
+c.displayName = "Dialog.Content";
+const u = ({ children: t, showCloseButton: a = !0, "data-test-id": e = "fondue-dialog-header" }, r) => /* @__PURE__ */ F("div", { "data-test-id": e, ref: r, className: d.header, "data-dialog-layout-component": !0, children: [
+  /* @__PURE__ */ o("div", { children: t }),
+  a && /* @__PURE__ */ o(i.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ o(w, { size: 20 }) })
 ] });
-c.displayName = "Dialog.Header";
-const u = ({ children: t, "data-test-id": o = "fondue-dialog-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.footer, "data-dialog-layout-component": !0, children: t });
-u.displayName = "Dialog.Footer";
-const m = ({ children: t, "data-test-id": o = "fondue-dialog-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.body, "data-dialog-layout-component": !0, children: t });
-m.displayName = "Dialog.Body";
-const p = ({ children: t, "data-test-id": o = "fondue-dialog-side-content" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.sideContent, "data-dialog-layout-component": !0, children: t });
-p.displayName = "Dialog.SideContent";
-const D = ({ children: t }) => /* @__PURE__ */ a(i.Close, { asChild: !0, children: t });
-D.displayName = "Dialog.Close";
-const y = ({ children: t, asChild: o }) => /* @__PURE__ */ a(i.Title, { asChild: o, children: t });
-y.displayName = "Dialog.Title";
-const f = ({ children: t, asChild: o }) => /* @__PURE__ */ a(i.Description, { asChild: o, children: t });
-f.displayName = "Dialog.Description";
-const M = {
-  Root: s,
-  Title: y,
-  Description: f,
-  Close: D,
-  Trigger: d(n),
-  Content: d(g),
-  Header: d(c),
-  Footer: d(u),
-  Body: d(m),
-  SideContent: d(p)
+u.displayName = "Dialog.Header";
+const m = ({ children: t, "data-test-id": a = "fondue-dialog-footer" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: d.footer, "data-dialog-layout-component": !0, children: t });
+m.displayName = "Dialog.Footer";
+const p = ({ children: t, "data-test-id": a = "fondue-dialog-body" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: d.body, "data-dialog-layout-component": !0, children: t });
+p.displayName = "Dialog.Body";
+const D = ({ children: t, "data-test-id": a = "fondue-dialog-side-content" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: d.sideContent, "data-dialog-layout-component": !0, children: t });
+D.displayName = "Dialog.SideContent";
+const y = ({ children: t }) => /* @__PURE__ */ o(i.Close, { asChild: !0, children: t });
+y.displayName = "Dialog.Close";
+const f = ({ children: t, asChild: a }) => /* @__PURE__ */ o(i.Title, { asChild: a, children: t });
+f.displayName = "Dialog.Title";
+const C = ({ children: t, asChild: a }) => /* @__PURE__ */ o(i.Description, { asChild: a, children: t });
+C.displayName = "Dialog.Description";
+const k = {
+  Root: n,
+  Title: f,
+  Description: C,
+  Close: y,
+  Trigger: l(g),
+  Content: l(c),
+  Header: l(u),
+  Footer: l(m),
+  Body: l(p),
+  SideContent: l(D)
 };
 export {
-  M as Dialog,
-  m as DialogBody,
-  D as DialogClose,
-  g as DialogContent,
-  f as DialogDescription,
-  u as DialogFooter,
-  c as DialogHeader,
-  s as DialogRoot,
-  p as DialogSideContent,
-  y as DialogTitle,
-  n as DialogTrigger
+  k as Dialog,
+  p as DialogBody,
+  y as DialogClose,
+  c as DialogContent,
+  C as DialogDescription,
+  m as DialogFooter,
+  u as DialogHeader,
+  n as DialogRoot,
+  D as DialogSideContent,
+  f as DialogTitle,
+  g as DialogTrigger
 };
 //# sourceMappingURL=fondue-components7.js.map