@frontify/fondue-components 15.0.1 → 16.0.3

package/dist/fondue-components59.js

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

package/dist/fondue-components59.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end' /**\n     * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * Id of the combobox component\n     */\n    id?: string;\n    /**\n     * The data test id of the combobox component.\n     */\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect?.(selectedItem?.value ?? null);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label=\"toggle menu\"\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end' /**\n     * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * Id of the combobox component\n     */\n    id?: string;\n    /**\n     * The data test id of the combobox component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        viewportCollisionPadding = 'compact',\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect?.(selectedItem?.value ?? null);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label=\"toggle menu\"\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}

package/dist/fondue-components6.js

@@ -3,7 +3,7 @@ import { IconMinus as m, IconCheckMark as h } from "@frontify/fondue-icons";
 import * as o from "@radix-ui/react-checkbox";
 import { forwardRef as k } from "react";
 import { cn as p } from "./fondue-components33.js";
-import { checkboxStyles as l, checkboxIndicatorStyles as w } from "./fondue-components37.js";
+import { checkboxIndicatorStyles as l, checkboxStyles as w } from "./fondue-components37.js";
 const f = ({
   className: a,
   value: c,
@@ -17,11 +17,11 @@ const f = ({
     ref: n,
     checked: c,
     defaultChecked: d,
-    className: p(l(e), a),
+    className: p(w(e), a),
     onClick: i,
     "data-test-id": r,
     ...e,
-    children: /* @__PURE__ */ s(o.Indicator, { className: w, children: [
+    children: /* @__PURE__ */ s(o.Indicator, { className: l, children: [
       /* @__PURE__ */ t(
         m,
         {

package/dist/fondue-components61.js

@@ -1,57 +1,61 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as s from "@radix-ui/react-popover";
-import { Slot as g } from "@radix-ui/react-slot";
-import { isValidElement as C } from "react";
-import { useFondueTheme as N, ThemeProvider as O } from "./fondue-components28.js";
+import { jsx as r } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-popover";
+import { Slot as C } from "@radix-ui/react-slot";
+import { isValidElement as V } from "react";
+import { useFondueTheme as g, ThemeProvider as A } from "./fondue-components28.js";
 import n from "./fondue-components63.js";
-import { recursiveMap as V, getSelectOptionValue as F } from "./fondue-components78.js";
-const M = ({
-  highlightedIndex: l,
-  getMenuProps: p,
-  getItemProps: u,
-  children: m,
-  filterText: f,
-  align: c,
+import { recursiveMap as D, getSelectOptionValue as M } from "./fondue-components78.js";
+const T = ({
+  highlightedIndex: p,
+  getMenuProps: l,
+  getItemProps: m,
+  children: u,
+  filterText: c,
+  align: f,
   side: d,
   selectedItem: t,
-  hasInteractedSinceOpening: h
+  hasInteractedSinceOpening: h,
+  viewportCollisionPadding: v = "compact"
 }) => {
-  const v = (e) => {
+  const P = (e) => {
     e.preventDefault();
-  }, P = N();
-  return /* @__PURE__ */ o(s.Portal, { children: /* @__PURE__ */ o(O, { theme: P, children: /* @__PURE__ */ o(
-    s.Content,
+  }, O = {
+    compact: 8,
+    spacious: 24
+  }, N = g();
+  return /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ r(A, { theme: N, children: /* @__PURE__ */ r(
+    i.Content,
     {
-      align: c,
+      align: f,
       side: d,
-      collisionPadding: 16,
-      onOpenAutoFocus: v,
+      collisionPadding: O[v] + 8,
+      onOpenAutoFocus: P,
       className: n.portal,
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ r(
         "ul",
         {
           className: n.menu,
-          ...p({}, { suppressRefError: !0 }),
+          ...l({}, { suppressRefError: !0 }),
           "data-has-interacted": h ? "true" : "false",
           "data-test-id": "fondue-select-menu",
-          children: V(
-            m,
-            (e, i) => {
-              if (((r) => (
+          children: D(
+            u,
+            (e, s) => {
+              if (((o) => (
                 // @ts-expect-error - We are explicitly checking for ref
-                C(r) && r.ref !== void 0
+                V(o) && o.ref !== void 0
               ))(e)) {
-                const r = F(e.props), a = u({
-                  item: r,
-                  index: i,
+                const o = M(e.props), a = m({
+                  item: o,
+                  index: s,
                   ...e.ref ? { ref: e.ref } : {}
                 });
-                return /* @__PURE__ */ o(
-                  g,
+                return /* @__PURE__ */ r(
+                  C,
                   {
                     className: n.item,
-                    "data-highlighted": l === i,
-                    "data-selected": (t == null ? void 0 : t.value) === r.value,
+                    "data-highlighted": p === s,
+                    "data-selected": (t == null ? void 0 : t.value) === o.value,
                     onTouchStart: (S) => {
                       a.onClick && a.onClick(S);
                     },
@@ -62,15 +66,15 @@ const M = ({
                 );
               }
             },
-            f
+            c
           ).parsedChildren
         }
       )
     }
   ) }) });
 };
-M.displayName = "Select.Menu";
+T.displayName = "Select.Menu";
 export {
-  M as SelectMenu
+  T as SelectMenu
 };
 //# sourceMappingURL=fondue-components61.js.map

package/dist/fondue-components61.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components61.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 { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\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 alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @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    align,\n    side,\n    selectedItem,\n    hasInteractedSinceOpening,\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixPopover.Content\n                    align={align}\n                    side={side}\n                    collisionPadding={16}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\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            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItem","hasInteractedSinceOpening","handleOnOpenAutoFocus","event","theme","useFondueTheme","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","RadixSlot"],"mappings":";;;;;;;AAiEO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AACJ,MAAuB;AACb,QAAAC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe;AAAA,EACzB,GAEMC,IAAQC,EAAe;AAC7B,2BACKC,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,KAAc,OAAAJ,GACX,UAAA,gBAAAG;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAR;AAAA,MACA,MAAAC;AAAA,MACA,kBAAkB;AAAA,MAClB,iBAAiBG;AAAA,MACjB,WAAWO,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGf,EAAa,IAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAS;AAAA,YACId;AAAA,YACA,CAACe,GAAOC,MAAU;AAOV,mBANY,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AAC3B,sBAAAG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYrB,EAAa;AAAA,kBAC3B,MAAMmB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC;AAGG,uBAAA,gBAAAJ;AAAA,kBAACU;AAAAA,kBAAA;AAAA,oBACG,WAAWR,EAAO;AAAA,oBAClB,oBAAkBhB,MAAqBmB;AAAA,oBACvC,kBAAeZ,KAAA,gBAAAA,EAAc,WAAUc,EAAW;AAAA,oBAGlD,cAAc,CAACX,MAAU;AACrB,sBAAIa,EAAU,WACVA,EAAU,QAAQb,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGa;AAAA,oBAEH,UAAAL;AAAA,kBAAA;AAAA,kBATIA,EAAM,MAAM;AAAA,gBAUrB;AAAA,cAAA;AAAA,YAGZ;AAAA,YACAd;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,KAER,EACJ,CAAA;AAER;AACAL,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components61.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 { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\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 alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @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     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItem,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\n    };\n\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixPopover.Content\n                    align={align}\n                    side={side}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\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            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItem","hasInteractedSinceOpening","viewportCollisionPadding","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","useFondueTheme","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","RadixSlot"],"mappings":";;;;;;;AAwEO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAC/B,MAAuB;AACb,QAAAC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe;AAAA,EACzB,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EACd,GAEMC,IAAQC,EAAe;AAC7B,2BACKC,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,KAAc,OAAAJ,GACX,UAAA,gBAAAG;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAV;AAAA,MACA,MAAAC;AAAA,MACA,kBAAkBM,EAA+BH,CAAwB,IAAI;AAAA,MAC7E,iBAAiBC;AAAA,MACjB,WAAWQ,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGjB,EAAa,IAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAW;AAAA,YACIhB;AAAA,YACA,CAACiB,GAAOC,MAAU;AAOV,mBANY,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AAC3B,sBAAAG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYvB,EAAa;AAAA,kBAC3B,MAAMqB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC;AAGG,uBAAA,gBAAAJ;AAAA,kBAACU;AAAAA,kBAAA;AAAA,oBACG,WAAWR,EAAO;AAAA,oBAClB,oBAAkBlB,MAAqBqB;AAAA,oBACvC,kBAAed,KAAA,gBAAAA,EAAc,WAAUgB,EAAW;AAAA,oBAGlD,cAAc,CAACZ,MAAU;AACrB,sBAAIc,EAAU,WACVA,EAAU,QAAQd,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGc;AAAA,oBAEH,UAAAL;AAAA,kBAAA;AAAA,kBATIA,EAAM,MAAM;AAAA,gBAUrB;AAAA,cAAA;AAAA,YAGZ;AAAA,YACAhB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,KAER,EACJ,CAAA;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components64.js

@@ -1,28 +1,28 @@
 import { jsx as w } from "react/jsx-runtime";
 import { IconCross as x } from "@frontify/fondue-icons";
-import { useState as B, useMemo as i, Children as f, isValidElement as u, cloneElement as E, useCallback as F } from "react";
-import { ForwardedRefSelectItem as I } from "./fondue-components60.js";
+import { useState as B, useMemo as i, Children as f, isValidElement as a, cloneElement as E, useCallback as v } from "react";
+import { ForwardedRefSelectItem as F } from "./fondue-components60.js";
 import { ForwardedRefSelectSlot as c } from "./fondue-components62.js";
-import { getSelectOptionValue as R } from "./fondue-components78.js";
+import { getSelectOptionValue as I } from "./fondue-components78.js";
 const S = (r) => {
   const t = [];
   return f.forEach(r, (o) => {
-    if (u(o) && o.type === I)
-      t.push(R(o.props));
-    else if (u(o) && o.props.children) {
-      const a = S(o.props.children);
-      for (const l of a)
+    if (a(o) && o.type === F)
+      t.push(I(o.props));
+    else if (a(o) && o.props.children) {
+      const u = S(o.props.children);
+      for (const l of u)
         t.push(l);
     }
   }), t;
 }, z = (r) => {
-  const [t, o] = B(""), { inputSlots: a, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
+  const [t, o] = B(""), { inputSlots: u, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
     const s = [], n = [];
     let m;
     f.toArray(r).some(
-      (e) => u(e) && e.type === c
+      (e) => a(e) && e.type === c
     ) ? f.forEach(r, (e) => {
-      u(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? s.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = E(e, { children: /* @__PURE__ */ w(x, { size: 16 }) })));
+      a(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? s.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = E(e, { children: /* @__PURE__ */ w(x, { size: 16 }) })));
     }) : n.push(r);
     const g = S(n);
     return { inputSlots: s, menuSlots: n, itemValues: g, clearButton: m };
@@ -31,7 +31,7 @@ const S = (r) => {
       (s) => t === "" || s.label.toLowerCase().includes(t.toLowerCase())
     ),
     [p, t]
-  ), C = F(
+  ), C = v(
     (s) => s ? p.find((n) => n.value === s) : void 0,
     [p]
   );
@@ -39,7 +39,7 @@ const S = (r) => {
     items: y,
     menuSlots: l,
     filterText: t,
-    inputSlots: a,
+    inputSlots: u,
     clearButton: V,
     setFilterText: o,
     getItemByValue: C

package/dist/fondue-components66.js

@@ -1,16 +1,16 @@
-const m = "_root_hrjmg_5", t = "_small_hrjmg_33", _ = "_medium_hrjmg_37", o = "_large_hrjmg_41", r = "_thumb_hrjmg_55", s = {
-  root: m,
-  small: t,
-  medium: _,
+const t = "_root_1a79q_5", _ = "_small_1a79q_13", a = "_medium_1a79q_17", o = "_large_1a79q_21", m = "_thumb_1a79q_58", s = {
+  root: t,
+  small: _,
+  medium: a,
   large: o,
-  thumb: r
+  thumb: m
 };
 export {
   s as default,
   o as large,
-  _ as medium,
-  m as root,
-  t as small,
-  r as thumb
+  a as medium,
+  t as root,
+  _ as small,
+  m as thumb
 };
 //# sourceMappingURL=fondue-components66.js.map

package/dist/fondue-components7.js

@@ -1,43 +1,46 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Slot as u } from "@radix-ui/react-slot";
-import { forwardRef as k, useState as R, Children as P } from "react";
-import { ForwardedRefColorGradientInput as F } from "./fondue-components38.js";
-import { ForwardedRefColorPickerInput as y } from "./fondue-components39.js";
-import { ForwardedRefColorValueInput as N } from "./fondue-components40.js";
-import I from "./fondue-components41.js";
-import { getColorWithName as d, DEFAULT_COLOR as w, DEFAULT_FORMAT as h } from "./fondue-components42.js";
-const m = ({
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as P } from "@radix-ui/react-slot";
+import { forwardRef as F, useState as y, useMemo as N, Children as I } from "react";
+import { ForwardedRefColorGradientInput as w } from "./fondue-components38.js";
+import { ForwardedRefColorPickerInput as h } from "./fondue-components39.js";
+import { ForwardedRefColorValueInput as G } from "./fondue-components40.js";
+import V from "./fondue-components41.js";
+import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components42.js";
+const p = ({
   children: t,
-  currentColor: o = w,
-  onColorChange: a = () => {
+  currentColor: r = A,
+  onColorChange: i = () => {
   },
-  defaultFormat: p = h,
-  "data-test-id": s = "color-picker-input",
-  ...c
-}, n) => {
-  const [l, C] = R(p);
-  return /* @__PURE__ */ i("div", { className: I.root, "data-picker-type": "custom-color", "data-test-id": s, ref: n, children: P.map(t, (f) => /* @__PURE__ */ i(
-    G,
+  currentFormat: l,
+  onFormatChange: c = () => {
+  },
+  defaultFormat: n = g,
+  "data-test-id": f = "color-picker-input",
+  ...C
+}, u) => {
+  const [d, k] = y(n), m = N(() => l ?? d, [l, d]);
+  return /* @__PURE__ */ a("div", { className: V.root, "data-picker-type": "custom-color", "data-test-id": f, ref: u, children: I.map(t, (R) => /* @__PURE__ */ a(
+    L,
     {
-      ...c,
-      onColorChange: (r) => {
-        a(d(r, l));
+      ...C,
+      onColorChange: (o) => {
+        i(s(o, m));
       },
-      currentColor: o,
-      currentFormat: l,
-      setCurrentFormat: (r) => {
-        C(r), a(d(o, r));
+      currentColor: r,
+      currentFormat: m,
+      setCurrentFormat: (o) => {
+        k(o), c(o), i(s(r, o));
       },
-      children: f
+      children: R
     }
   )) });
 };
-m.displayName = "ColorPicker";
-const G = ({ children: t, ...o }) => /* @__PURE__ */ i(u, { ...o, children: t }), V = k(m), e = {
-  Root: V,
-  Values: N,
-  Gradient: F,
-  Input: y
+p.displayName = "ColorPicker";
+const L = ({ children: t, ...r }) => /* @__PURE__ */ a(P, { ...r, children: t }), M = F(p), e = {
+  Root: M,
+  Values: G,
+  Gradient: w,
+  Input: h
 };
 e.Root.displayName = "ColorPicker.Root";
 e.Values.displayName = "ColorPicker.Values";
@@ -45,7 +48,7 @@ e.Gradient.displayName = "ColorPicker.Gradient";
 e.Input.displayName = "ColorPicker.Input";
 export {
   e as ColorPicker,
-  m as ColorPickerRoot,
-  V as ForwardedRefColorPicker
+  p as ColorPickerRoot,
+  M as ForwardedRefColorPicker
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { Children, forwardRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefColorGradientInput } from './ColorGradientInput';\nimport { ForwardedRefColorPickerInput } from './ColorPickerInput';\nimport { ForwardedRefColorValueInput } from './ColorValueInput';\nimport styles from './styles/customColorPicker.module.scss';\nimport { type ColorFormat, type RgbaColor } from './types';\nimport { DEFAULT_COLOR, DEFAULT_FORMAT, getColorWithName } from './utils';\n\ntype ColorPickerProps = {\n    /**\n     * The children of the color picker component. This can contain multiple `ColorPicker.Values` or `ColorPicker.Gradient` components.\n     */\n    children?: ReactNode;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * Event handler called when the color changes\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The default format to use for the color input\n     * @default \"HEX\"\n     */\n    defaultFormat?: ColorFormat;\n    /**\n     * The test id of the color picker\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorPickerRoot = (\n    {\n        children,\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        defaultFormat = DEFAULT_FORMAT,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [currentFormat, setCurrentFormat] = useState<ColorFormat>(defaultFormat);\n\n    return (\n        <div className={styles.root} data-picker-type=\"custom-color\" data-test-id={dataTestId} ref={forwardedRef}>\n            {Children.map(children, (child) => (\n                <ColorPickerSlot\n                    {...props}\n                    onColorChange={(color: RgbaColor) => {\n                        onColorChange(getColorWithName(color, currentFormat));\n                    }}\n                    currentColor={currentColor}\n                    currentFormat={currentFormat}\n                    setCurrentFormat={(currentFormat: ColorFormat) => {\n                        setCurrentFormat(currentFormat);\n                        onColorChange(getColorWithName(currentColor, currentFormat));\n                    }}\n                >\n                    {child}\n                </ColorPickerSlot>\n            ))}\n        </div>\n    );\n};\nColorPickerRoot.displayName = 'ColorPicker';\n\ntype ColorPickerSlotProps = ColorPickerProps & {\n    currentFormat?: ColorFormat;\n    setCurrentFormat?: (format: ColorFormat) => void;\n};\nconst ColorPickerSlot = ({ children, ...props }: ColorPickerSlotProps) => <RadixSlot {...props}>{children}</RadixSlot>;\n\nexport const ForwardedRefColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(ColorPickerRoot);\n\nexport const ColorPicker = {\n    Root: ForwardedRefColorPicker,\n    Values: ForwardedRefColorValueInput,\n    Gradient: ForwardedRefColorGradientInput,\n    Input: ForwardedRefColorPickerInput,\n};\n\nColorPicker.Root.displayName = 'ColorPicker.Root';\nColorPicker.Values.displayName = 'ColorPicker.Values';\nColorPicker.Gradient.displayName = 'ColorPicker.Gradient';\nColorPicker.Input.displayName = 'ColorPicker.Input';\n"],"names":["ColorPickerRoot","children","currentColor","DEFAULT_COLOR","onColorChange","defaultFormat","DEFAULT_FORMAT","dataTestId","props","forwardedRef","currentFormat","setCurrentFormat","useState","jsx","styles","Children","child","ColorPickerSlot","color","getColorWithName","RadixSlot","ForwardedRefColorPicker","forwardRef","ColorPicker","ForwardedRefColorValueInput","ForwardedRefColorGradientInput","ForwardedRefColorPickerInput"],"mappings":";;;;;;;;AAoCO,MAAMA,IAAkB,CAC3B;AAAA,EACI,UAAAC;AAAA,EACA,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAAC,IAAgBC;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAsBP,CAAa;AAE7E,SACK,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,MAAM,oBAAiB,gBAAe,gBAAcP,GAAY,KAAKE,GACvF,UAAAM,EAAS,IAAId,GAAU,CAACe,MACrB,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MACI,GAAGT;AAAA,MACJ,eAAe,CAACU,MAAqB;AACnB,QAAAd,EAAAe,EAAiBD,GAAOR,CAAa,CAAC;AAAA,MACxD;AAAA,MACA,cAAAR;AAAA,MACA,eAAAQ;AAAA,MACA,kBAAkB,CAACA,MAA+B;AAC9C,QAAAC,EAAiBD,CAAa,GAChBN,EAAAe,EAAiBjB,GAAcQ,CAAa,CAAC;AAAA,MAC/D;AAAA,MAEC,UAAAM;AAAA,IAAA;AAAA,EAER,CAAA,GACL;AAER;AACAhB,EAAgB,cAAc;AAM9B,MAAMiB,IAAkB,CAAC,EAAE,UAAAhB,GAAU,GAAGO,EAAM,MAA6B,gBAAAK,EAAAO,GAAA,EAAW,GAAGZ,GAAQ,UAAAP,GAAS,GAE7FoB,IAA0BC,EAA6CtB,CAAe,GAEtFuB,IAAc;AAAA,EACvB,MAAMF;AAAA,EACN,QAAQG;AAAA,EACR,UAAUC;AAAA,EACV,OAAOC;AACX;AAEAH,EAAY,KAAK,cAAc;AAC/BA,EAAY,OAAO,cAAc;AACjCA,EAAY,SAAS,cAAc;AACnCA,EAAY,MAAM,cAAc;"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { Children, forwardRef, useMemo, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefColorGradientInput } from './ColorGradientInput';\nimport { ForwardedRefColorPickerInput } from './ColorPickerInput';\nimport { ForwardedRefColorValueInput } from './ColorValueInput';\nimport styles from './styles/customColorPicker.module.scss';\nimport { type ColorFormat, type RgbaColor } from './types';\nimport { DEFAULT_COLOR, DEFAULT_FORMAT, getColorWithName } from './utils';\n\ntype ColorPickerProps = {\n    /**\n     * The children of the color picker component. This can contain multiple `ColorPicker.Values` or `ColorPicker.Gradient` components.\n     */\n    children?: ReactNode;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * Event handler called when the color changes\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The active color format in the color picker\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * Event handler called when the color format changes\n     */\n    onFormatChange?: (format: ColorFormat) => void;\n    /**\n     * The default format to use for the color input when not controlled externally\n     * @default \"HEX\"\n     */\n    defaultFormat?: ColorFormat;\n    /**\n     * The test id of the color picker\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorPickerRoot = (\n    {\n        children,\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        currentFormat,\n        onFormatChange = () => {},\n        defaultFormat = DEFAULT_FORMAT,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [managedFormat, setManagedFormat] = useState<ColorFormat>(defaultFormat);\n    const activeFormat = useMemo(() => currentFormat ?? managedFormat, [currentFormat, managedFormat]);\n\n    return (\n        <div className={styles.root} data-picker-type=\"custom-color\" data-test-id={dataTestId} ref={forwardedRef}>\n            {Children.map(children, (child) => (\n                <ColorPickerSlot\n                    {...props}\n                    onColorChange={(color: RgbaColor) => {\n                        onColorChange(getColorWithName(color, activeFormat));\n                    }}\n                    currentColor={currentColor}\n                    currentFormat={activeFormat}\n                    setCurrentFormat={(currentFormat: ColorFormat) => {\n                        setManagedFormat(currentFormat);\n                        onFormatChange(currentFormat);\n                        onColorChange(getColorWithName(currentColor, currentFormat));\n                    }}\n                >\n                    {child}\n                </ColorPickerSlot>\n            ))}\n        </div>\n    );\n};\nColorPickerRoot.displayName = 'ColorPicker';\n\ntype ColorPickerSlotProps = ColorPickerProps & {\n    currentFormat?: ColorFormat;\n    setCurrentFormat?: (format: ColorFormat) => void;\n};\nconst ColorPickerSlot = ({ children, ...props }: ColorPickerSlotProps) => <RadixSlot {...props}>{children}</RadixSlot>;\n\nexport const ForwardedRefColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(ColorPickerRoot);\n\nexport const ColorPicker = {\n    Root: ForwardedRefColorPicker,\n    Values: ForwardedRefColorValueInput,\n    Gradient: ForwardedRefColorGradientInput,\n    Input: ForwardedRefColorPickerInput,\n};\n\nColorPicker.Root.displayName = 'ColorPicker.Root';\nColorPicker.Values.displayName = 'ColorPicker.Values';\nColorPicker.Gradient.displayName = 'ColorPicker.Gradient';\nColorPicker.Input.displayName = 'ColorPicker.Input';\n"],"names":["ColorPickerRoot","children","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","onFormatChange","defaultFormat","DEFAULT_FORMAT","dataTestId","props","forwardedRef","managedFormat","setManagedFormat","useState","activeFormat","useMemo","jsx","styles","Children","child","ColorPickerSlot","color","getColorWithName","RadixSlot","ForwardedRefColorPicker","forwardRef","ColorPicker","ForwardedRefColorValueInput","ForwardedRefColorGradientInput","ForwardedRefColorPickerInput"],"mappings":";;;;;;;;AA4CO,MAAMA,IAAkB,CAC3B;AAAA,EACI,UAAAC;AAAA,EACA,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAAC;AAAA,EACA,gBAAAC,IAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,eAAAC,IAAgBC;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAsBP,CAAa,GACvEQ,IAAeC,EAAQ,MAAMX,KAAiBO,GAAe,CAACP,GAAeO,CAAa,CAAC;AAEjG,SACK,gBAAAK,EAAA,OAAA,EAAI,WAAWC,EAAO,MAAM,oBAAiB,gBAAe,gBAAcT,GAAY,KAAKE,GACvF,UAAAQ,EAAS,IAAIlB,GAAU,CAACmB,MACrB,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,eAAe,CAACY,MAAqB;AACnB,QAAAlB,EAAAmB,EAAiBD,GAAOP,CAAY,CAAC;AAAA,MACvD;AAAA,MACA,cAAAb;AAAA,MACA,eAAea;AAAA,MACf,kBAAkB,CAACV,MAA+B;AAC9C,QAAAQ,EAAiBR,CAAa,GAC9BC,EAAeD,CAAa,GACdD,EAAAmB,EAAiBrB,GAAcG,CAAa,CAAC;AAAA,MAC/D;AAAA,MAEC,UAAAe;AAAA,IAAA;AAAA,EAER,CAAA,GACL;AAER;AACApB,EAAgB,cAAc;AAM9B,MAAMqB,IAAkB,CAAC,EAAE,UAAApB,GAAU,GAAGS,EAAM,MAA6B,gBAAAO,EAAAO,GAAA,EAAW,GAAGd,GAAQ,UAAAT,GAAS,GAE7FwB,IAA0BC,EAA6C1B,CAAe,GAEtF2B,IAAc;AAAA,EACvB,MAAMF;AAAA,EACN,QAAQG;AAAA,EACR,UAAUC;AAAA,EACV,OAAOC;AACX;AAEAH,EAAY,KAAK,cAAc;AAC/BA,EAAY,OAAO,cAAc;AACjCA,EAAY,SAAS,cAAc;AACnCA,EAAY,MAAM,cAAc;"}