@frontify/fondue-components 25.0.0 → 26.0.2

package/dist/fondue-components26.js

@@ -1,146 +1,26 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { IconCaretDown as $, IconCheckMark as A, IconExclamationMarkTriangle as q } from "@frontify/fondue-icons";
-import * as g from "@radix-ui/react-popover";
-import { Slot as J } from "@radix-ui/react-slot";
-import { useSelect as K } from "downshift";
-import { forwardRef as L, useRef as Q, useState as U } from "react";
-import { ForwardedRefCombobox as W } from "./fondue-components71.js";
-import { ForwardedRefSelectItem as X, ForwardedRefSelectItemGroup as Y } from "./fondue-components72.js";
-import { SelectMenu as Z } from "./fondue-components73.js";
-import { ForwardedRefSelectSlot as _ } from "./fondue-components74.js";
-import o from "./fondue-components75.js";
-import { useSelectData as ee } from "./fondue-components76.js";
-const S = ({
-  children: h,
-  onSelect: s,
-  value: b,
-  defaultValue: I,
-  placeholder: N = "",
-  status: n = "neutral",
-  disabled: m,
-  alignMenu: w = "start",
-  side: y = "bottom",
-  id: C,
-  showStringValue: R = !0,
-  "data-test-id": c = "fondue-select",
-  viewportCollisionPadding: x = "compact",
-  onEscapeKeyDown: F,
-  ...l
-}, v) => {
-  const { inputSlots: k, menuSlots: B, items: M, clearButton: u, getItemByValue: p } = ee(h), P = p(I), G = p(b), i = Q(!1), [O, f] = U(!1), { getToggleButtonProps: z, getMenuProps: D, getItemProps: V, reset: j, selectedItem: r, isOpen: E, highlightedIndex: H } = K({
-    items: M,
-    defaultSelectedItem: P,
-    selectedItem: G,
-    toggleButtonId: C,
-    labelId: "aria-labelledby" in l ? l["aria-labelledby"] : void 0,
-    onIsOpenChange: () => {
-      f(!1);
-    },
-    onHighlightedIndexChange: () => {
-      f(!0);
-    },
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      s == null || s((e == null ? void 0 : e.value) ?? null);
-    },
-    itemToString: (e) => e ? e.label : ""
-  }), T = r ? !R && r.children || r.label : N;
-  return /* @__PURE__ */ d(g.Root, { open: E, children: [
-    /* @__PURE__ */ a(
-      g.Anchor,
-      {
-        asChild: !0,
-        onMouseDown: (e) => {
-          i.current = !0, e.currentTarget.dataset.showFocusRing = "false";
-        },
-        onFocus: (e) => {
-          i.current || (e.target.dataset.showFocusRing = "true");
-        },
-        onBlur: (e) => {
-          e.target.dataset.showFocusRing = "false", i.current = !1;
-        },
-        children: /* @__PURE__ */ d(
-          "div",
-          {
-            className: o.root,
-            "data-status": n,
-            "data-disabled": m,
-            "data-empty": !r,
-            "data-test-id": c,
-            ...m ? {} : (
-              // eslint-disable-next-line react-hooks/refs
-              z({
-                "aria-label": "aria-label" in l ? l["aria-label"] : void 0,
-                ref: v
-              })
-            ),
-            children: [
-              /* @__PURE__ */ a("span", { className: o.selectedValue, children: T }),
-              k,
-              u ? /* @__PURE__ */ a(
-                J,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation(), j();
-                  },
-                  className: o.clear,
-                  children: u
-                }
-              ) : null,
-              /* @__PURE__ */ d("div", { className: o.icons, children: [
-                /* @__PURE__ */ a($, { size: 16, className: o.caret }),
-                n === "success" ? /* @__PURE__ */ a(
-                  A,
-                  {
-                    size: 16,
-                    className: o.iconSuccess,
-                    "data-test-id": `${c}-success-icon`
-                  }
-                ) : null,
-                n === "error" ? /* @__PURE__ */ a(
-                  q,
-                  {
-                    size: 16,
-                    className: o.iconError,
-                    "data-test-id": `${c}-error-icon`
-                  }
-                ) : null
-              ] })
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ a(
-      Z,
-      {
-        align: w,
-        side: y,
-        highlightedIndex: H,
-        getMenuProps: D,
-        getItemProps: V,
-        selectedItem: r,
-        hasInteractedSinceOpening: O,
-        viewportCollisionPadding: x,
-        onEscapeKeyDown: F,
-        children: B
-      }
-    )
-  ] });
-};
-S.displayName = "Select";
-const te = L(S), t = te;
-t.displayName = "Select";
-t.Combobox = W;
-t.Combobox.displayName = "Select.Combobox";
-t.Item = X;
-t.Item.displayName = "Select.Item";
-t.Group = Y;
-t.Group.displayName = "Select.Group";
-t.Slot = _;
-t.Slot.displayName = "Select.Slot";
+import { ComboboxMultiple as o } from "./fondue-components71.js";
+import { ComboboxSingle as t } from "./fondue-components72.js";
+import { SelectMultiple as m } from "./fondue-components73.js";
+import { SelectSingle as p } from "./fondue-components74.js";
+import { ForwardedRefSelectItem as i, ForwardedRefSelectItemGroup as r } from "./fondue-components75.js";
+import { ForwardedRefSelectSlot as S } from "./fondue-components76.js";
+const l = t;
+l.Multiple = o;
+const e = p;
+e.displayName = "Select";
+e.Multiple = m;
+e.Multiple.displayName = "Select.Multiple";
+e.Combobox = l;
+e.Combobox.displayName = "Select.Combobox";
+e.Combobox.Multiple = o;
+e.Combobox.Multiple.displayName = "Select.Combobox.Multiple";
+e.Item = i;
+e.Item.displayName = "Select.Item";
+e.Group = r;
+e.Group.displayName = "Select.Group";
+e.Slot = S;
+e.Slot.displayName = "Select.Slot";
 export {
-  te as ForwardedRefSelect,
-  t as Select,
-  S as SelectInput
+  e as Select
 };
 //# sourceMappingURL=fondue-components26.js.map

package/dist/fondue-components26.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components26.js","sources":["../src/components/Select/Select.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 { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plain text (from the label prop) when set to true.\n     * Items child components are used if set to false\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        viewportCollisionPadding = 'compact',\n        onEscapeKeyDown,\n        ...props\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect?.(selectedItem?.value ?? null);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    const displayedValue = selectedItem\n        ? (!showStringValue && selectedItem.children) || selectedItem.label\n        : placeholder;\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\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={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : // eslint-disable-next-line react-hooks/refs\n                          getToggleButtonProps({\n                              'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{displayedValue}</span>\n                    {inputSlots}\n                    {clearButton ? (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    ) : null}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {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                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n                onEscapeKeyDown={onEscapeKeyDown}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","viewportCollisionPadding","onEscapeKeyDown","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}
+{"version":3,"file":"fondue-components26.js","sources":["../src/components/Select/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ComboboxMultiple } from './ComboboxMultiple';\nimport { ComboboxSingle } from './ComboboxSingle';\nimport { SelectMultiple } from './SelectMultiple';\nimport { SelectSingle } from './SelectSingle';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './components/SelectItem';\nimport { ForwardedRefSelectSlot } from './components/SelectSlot';\n\ntype ComboboxComponent = typeof ComboboxSingle & {\n    Multiple: typeof ComboboxMultiple;\n};\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nconst Combobox: ComboboxComponent = ComboboxSingle;\nCombobox.Multiple = ComboboxMultiple;\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectSingle & {\n    Multiple: typeof SelectMultiple;\n    Combobox: ComboboxComponent;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = SelectSingle;\n\nSelect.displayName = 'Select';\nSelect.Multiple = SelectMultiple;\nSelect.Multiple.displayName = 'Select.Multiple';\nSelect.Combobox = Combobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Combobox.Multiple = ComboboxMultiple;\nSelect.Combobox.Multiple.displayName = 'Select.Combobox.Multiple';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["Combobox","ComboboxSingle","ComboboxMultiple","Select","SelectSingle","SelectMultiple","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":";;;;;;AAcA,MAAMA,IAA8BC;AACpCD,EAAS,WAAWE;AAGb,MAAMC,IAMTC;AAEJD,EAAO,cAAc;AACrBA,EAAO,WAAWE;AAClBF,EAAO,SAAS,cAAc;AAC9BA,EAAO,WAAWH;AAClBG,EAAO,SAAS,cAAc;AAC9BA,EAAO,SAAS,WAAWD;AAC3BC,EAAO,SAAS,SAAS,cAAc;AACvCA,EAAO,OAAOG;AACdH,EAAO,KAAK,cAAc;AAC1BA,EAAO,QAAQI;AACfJ,EAAO,MAAM,cAAc;AAC3BA,EAAO,OAAOK;AACdL,EAAO,KAAK,cAAc;"}

package/dist/fondue-components4.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components4.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { BadgeStatus, type BadgeStatusProps } from './BadgeStatus';\nimport styles from './styles/badge.module.scss';\n\ntype BadgeStyle = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\ntype BadgeEmphasis = 'strong' | 'weak';\n\ntype BadgeSize = 'default' | 'small';\n\ntype BadgeProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: BadgeEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: BadgeStyle;\n    /**\n     * @default 'default'\n     */\n    size?: BadgeSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * The color of the status dot\n     */\n    status?: BadgeStatusProps['status'];\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport const Badge = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'badge',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onClick,\n    onDismiss,\n    size = 'default',\n    status,\n    title,\n    variant = 'default',\n}: BadgeProps) => {\n    const commonProps = {\n        'aria-label': ariaLabel || title,\n        'data-component': 'badge',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-test-id': dataTestId,\n        'data-variant': variant,\n        className: styles.root,\n        title,\n    };\n\n    const contentProps = {\n        'aria-label': ariaLabel || title,\n        disabled,\n        onDismiss,\n        status,\n    };\n\n    if (onClick) {\n        return (\n            <button type=\"button\" disabled={disabled} {...commonProps} onClick={onClick}>\n                <BadgeContent {...contentProps}>{children}</BadgeContent>\n            </button>\n        );\n    }\n\n    return (\n        <div {...commonProps}>\n            <BadgeContent {...contentProps}>{children}</BadgeContent>\n        </div>\n    );\n};\n\nconst BadgeContent = ({ 'aria-label': ariaLabel, children, disabled = false, onDismiss, status }: BadgeProps) => {\n    const { t } = useTranslation();\n\n    return (\n        <>\n            {status && <BadgeStatus status={status} />}\n            {children}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={t('Badge_dismiss', { label: ariaLabel || '' })}\n                    className={styles.dismiss}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"12\" />\n                </button>\n            )}\n        </>\n    );\n};\n"],"names":["Badge","ariaLabel","dataTestId","children","disabled","emphasis","onClick","onDismiss","size","status","title","variant","commonProps","styles","contentProps","jsx","BadgeContent","t","useTranslation","jsxs","Fragment","BadgeStatus","IconCross"],"mappings":";;;;;AAmDO,MAAMA,IAAQ,CAAC;AAAA,EAClB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AACd,MAAkB;AACd,QAAMC,IAAc;AAAA,IAChB,cAAcX,KAAaS;AAAA,IAC3B,kBAAkB;AAAA,IAClB,iBAAiBN;AAAA,IACjB,oBAAoB,CAAC,CAACG;AAAA,IACtB,iBAAiBF;AAAA,IACjB,aAAaG;AAAA,IACb,gBAAgBN;AAAA,IAChB,gBAAgBS;AAAA,IAChB,WAAWE,EAAO;AAAA,IAClB,OAAAH;AAAA,EAAA,GAGEI,IAAe;AAAA,IACjB,cAAcb,KAAaS;AAAA,IAC3B,UAAAN;AAAA,IACA,WAAAG;AAAA,IACA,QAAAE;AAAA,EAAA;AAGJ,SAAIH,IAEI,gBAAAS,EAAC,UAAA,EAAO,MAAK,UAAS,UAAAX,GAAqB,GAAGQ,GAAa,SAAAN,GACvD,UAAA,gBAAAS,EAACC,GAAA,EAAc,GAAGF,GAAe,UAAAX,GAAS,GAC9C,IAKJ,gBAAAY,EAAC,SAAK,GAAGH,GACL,4BAACI,GAAA,EAAc,GAAGF,GAAe,UAAAX,EAAA,CAAS,EAAA,CAC9C;AAER,GAEMa,IAAe,CAAC,EAAE,cAAcf,GAAW,UAAAE,GAAU,UAAAC,IAAW,IAAO,WAAAG,GAAW,QAAAE,QAAyB;AAC7G,QAAM,EAAE,GAAAQ,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAX,KAAU,gBAAAM,EAACM,KAAY,QAAAZ,EAAA,CAAgB;AAAA,IACvCN;AAAA,IACAI,KACG,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAYE,EAAE,iBAAiB,EAAE,OAAOhB,KAAa,IAAI;AAAA,QACzD,WAAWY,EAAO;AAAA,QAClB,UAAAT;AAAA,QACA,SAASG;AAAA,QAET,UAAA,gBAAAQ,EAACO,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACzB,GAER;AAER;"}
+{"version":3,"file":"fondue-components4.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { BadgeStatus, type BadgeStatusProps } from './BadgeStatus';\nimport styles from './styles/badge.module.scss';\n\ntype BadgeStyle = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\ntype BadgeEmphasis = 'strong' | 'weak';\n\ntype BadgeSize = 'default' | 'small';\n\ntype BadgeProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: BadgeEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: BadgeStyle;\n    /**\n     * @default 'default'\n     */\n    size?: BadgeSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * The color of the status dot\n     */\n    status?: BadgeStatusProps['status'];\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport const Badge = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'badge',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onClick,\n    onDismiss,\n    size = 'default',\n    status,\n    title,\n    variant = 'default',\n}: BadgeProps) => {\n    const commonProps = {\n        'aria-label': ariaLabel || title,\n        'data-component': 'badge',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-test-id': dataTestId,\n        'data-variant': variant,\n        className: styles.root,\n        title,\n    };\n\n    const contentProps = {\n        'aria-label': ariaLabel || title,\n        disabled,\n        onDismiss,\n        status,\n    };\n\n    if (onClick) {\n        return (\n            <button type=\"button\" disabled={disabled} {...commonProps} onClick={onClick}>\n                <BadgeContent {...contentProps}>{children}</BadgeContent>\n            </button>\n        );\n    }\n\n    return (\n        <div {...commonProps}>\n            <BadgeContent {...contentProps}>{children}</BadgeContent>\n        </div>\n    );\n};\n\nconst BadgeContent = ({ 'aria-label': ariaLabel, children, disabled = false, onDismiss, status }: BadgeProps) => {\n    const { t } = useTranslation();\n\n    return (\n        <>\n            {status && <BadgeStatus status={status} />}\n            {children}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={t('Badge_dismiss', { label: ariaLabel || '' })}\n                    className={styles.dismiss}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"12\" />\n                </button>\n            )}\n        </>\n    );\n};\n"],"names":["Badge","ariaLabel","dataTestId","children","disabled","emphasis","onClick","onDismiss","size","status","title","variant","commonProps","styles","contentProps","jsx","BadgeContent","t","useTranslation","jsxs","Fragment","BadgeStatus","IconCross"],"mappings":";;;;;AAmDO,MAAMA,IAAQ,CAAC;AAAA,EAClB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AACd,MAAkB;AACd,QAAMC,IAAc;AAAA,IAChB,cAAcX,KAAaS;AAAA,IAC3B,kBAAkB;AAAA,IAClB,iBAAiBN;AAAA,IACjB,oBAAoB,CAAC,CAACG;AAAA,IACtB,iBAAiBF;AAAA,IACjB,aAAaG;AAAA,IACb,gBAAgBN;AAAA,IAChB,gBAAgBS;AAAA,IAChB,WAAWE,EAAO;AAAA,IAClB,OAAAH;AAAA,EAAA,GAGEI,IAAe;AAAA,IACjB,cAAcb,KAAaS;AAAA,IAC3B,UAAAN;AAAA,IACA,WAAAG;AAAA,IACA,QAAAE;AAAA,EAAA;AAGJ,SAAIH,IAEI,gBAAAS,EAAC,UAAA,EAAO,MAAK,UAAS,UAAAX,GAAqB,GAAGQ,GAAa,SAAAN,GACvD,UAAA,gBAAAS,EAACC,GAAA,EAAc,GAAGF,GAAe,UAAAX,GAAS,GAC9C,IAKJ,gBAAAY,EAAC,SAAK,GAAGH,GACL,4BAACI,GAAA,EAAc,GAAGF,GAAe,UAAAX,EAAA,CAAS,EAAA,CAC9C;AAER,GAEMa,IAAe,CAAC,EAAE,cAAcf,GAAW,UAAAE,GAAU,UAAAC,IAAW,IAAO,WAAAG,GAAW,QAAAE,QAAyB;AAC7G,QAAM,EAAE,GAAAQ,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAX,KAAU,gBAAAM,EAACM,KAAY,QAAAZ,EAAA,CAAgB;AAAA,IACvCN;AAAA,IACAI,KACG,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAYE,EAAE,iBAAiB,EAAE,OAAOhB,KAAa,IAAI;AAAA,QACzD,WAAWY,EAAO;AAAA,QAClB,UAAAT;AAAA,QACA,SAASG;AAAA,QAET,UAAA,gBAAAQ,EAACO,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACzB,GAER;AAER;"}

package/dist/fondue-components40.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components93.js";
-import { colorToCss as e } from "./fondue-components94.js";
+import s from "./fondue-components92.js";
+import { colorToCss as e } from "./fondue-components93.js";
 const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
   const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
   return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });

package/dist/fondue-components47.js

@@ -3,7 +3,7 @@ import { IconDroplet as I, IconCross as k, IconCaretDown as v } from "@frontify/
 import { forwardRef as P } from "react";
 import { useTranslation as w } from "./fondue-components39.js";
 import { Button as y } from "./fondue-components6.js";
-import a from "./fondue-components92.js";
+import a from "./fondue-components94.js";
 import { getColorWithName as z, colorToCss as x } from "./fondue-components50.js";
 const c = ({
   id: m,

package/dist/fondue-components48.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components48.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { Select } from '../Select/Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nconst nooperation = () => {};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = nooperation,\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = nooperation,\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const [hexColorValue, setHexColorValue] = useState<string>(() => rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label={t('ColorPicker_selectFormat')}\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange({ ...hexColorToRgba(event.target.value), alpha: currentColor.alpha });\n                        }\n                    }}\n                    onChange={(event) => {\n                        const inputValue = event.target.value.startsWith('#')\n                            ? event.target.value.slice(1)\n                            : event.target.value;\n\n                        setHexColorValue(inputValue);\n                    }}\n                    aria-label={t('ColorPicker_hexValue')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_redChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_greenChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_blueChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    /* .toString() is a workaround for https://github.com/facebook/react/issues/9402 */\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100).toString()}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label={t('ColorPicker_opacity')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["nooperation","ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","t","useTranslation","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","inputValue","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components48.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { Select } from '../Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nconst nooperation = () => {};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = nooperation,\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = nooperation,\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const [hexColorValue, setHexColorValue] = useState<string>(() => rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label={t('ColorPicker_selectFormat')}\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange({ ...hexColorToRgba(event.target.value), alpha: currentColor.alpha });\n                        }\n                    }}\n                    onChange={(event) => {\n                        const inputValue = event.target.value.startsWith('#')\n                            ? event.target.value.slice(1)\n                            : event.target.value;\n\n                        setHexColorValue(inputValue);\n                    }}\n                    aria-label={t('ColorPicker_hexValue')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_redChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_greenChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_blueChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    /* .toString() is a workaround for https://github.com/facebook/react/issues/9402 */\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100).toString()}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label={t('ColorPicker_opacity')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["nooperation","ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","t","useTranslation","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","inputValue","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}

package/dist/fondue-components71.js

@@ -1,157 +1,23 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { IconCaretDown as U, IconCheckMark as W, IconExclamationMarkTriangle as X } from "@frontify/fondue-icons";
-import * as B from "@radix-ui/react-popover";
-import { Slot as Y } from "@radix-ui/react-slot";
-import { useCombobox as Z } from "downshift";
-import { forwardRef as A, useState as ee, useRef as te, useMemo as oe } from "react";
-import { LoadingCircle as re } from "./fondue-components19.js";
-import { ForwardedRefSelectSlot as ae } from "./fondue-components74.js";
-import { useTranslation as le } from "./fondue-components39.js";
-import { SelectMenu as ne } from "./fondue-components73.js";
-import o from "./fondue-components75.js";
-import { useSelectData as ie } from "./fondue-components76.js";
-const L = ({
-  children: M,
-  onSelect: i,
-  value: O,
-  defaultValue: v,
-  placeholder: F = "",
-  status: s = "neutral",
-  disabled: f,
-  "data-test-id": r = "fondue-select-combobox",
-  alignMenu: P = "start",
-  side: k = "bottom",
-  id: y,
-  viewportCollisionPadding: z = "compact",
-  getAsyncItems: c,
-  onEscapeKeyDown: D,
-  ...a
-}, H) => {
-  const { t: V } = le(), { inputSlots: $, menuSlots: T, items: u, filterText: j, clearButton: h, getItemByValue: p, setFilterText: b, asyncItemStatus: C } = ie(M, c), [E, x] = ee(!1), {
-    getInputProps: d,
-    getToggleButtonProps: _,
-    getMenuProps: q,
-    getItemProps: G,
-    reset: w,
-    selectedItem: l,
-    isOpen: S,
-    highlightedIndex: J,
-    inputValue: m
-  } = Z({
-    items: u,
-    selectedItem: p(O),
-    defaultSelectedItem: p(v),
-    defaultHighlightedIndex: 0,
-    toggleButtonId: y,
-    labelId: "aria-labelledby" in a ? a["aria-labelledby"] : void 0,
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      i == null || i((e == null ? void 0 : e.value) ?? null);
-    },
-    onInputValueChange: ({ inputValue: e }) => {
-      b(e);
-    },
-    onIsOpenChange: () => {
-      x(!1), b("");
-    },
-    onHighlightedIndexChange: () => {
-      x(!0);
-    },
-    itemToString: (e) => e ? e.label : ""
-  }), n = te(!1), K = oe(
-    () => !c && !u.find((e) => e.label.toLowerCase().includes(m.toLowerCase())),
-    [m, u, c]
-  ), Q = (e) => {
-    var N, R;
-    e.target.dataset.showFocusRing = "false", n.current = !1, (l == null ? void 0 : l.label.toLocaleLowerCase()) !== m.toLocaleLowerCase() && w(), d().onBlur && ((R = (N = d()).onBlur) == null || R.call(N, e));
-  }, I = K || !!C.error || s === "error";
-  return /* @__PURE__ */ g(B.Root, { open: S, children: [
-    /* @__PURE__ */ t(B.Anchor, { asChild: !0, children: /* @__PURE__ */ g("div", { ref: H, className: o.root, "data-status": I ? "error" : s, children: [
-      /* @__PURE__ */ t(
-        "input",
-        {
-          ...d({
-            "aria-label": "aria-label" in a ? a["aria-label"] : void 0
-          }),
-          "data-test-id": r,
-          placeholder: F,
-          className: o.input,
-          disabled: f,
-          onMouseDown: (e) => {
-            n.current = !0, e.currentTarget.dataset.showFocusRing = "false";
-          },
-          onFocus: (e) => {
-            n.current || (e.target.dataset.showFocusRing = "true");
-          },
-          onBlur: Q
-        }
-      ),
-      $,
-      h ? /* @__PURE__ */ t(
-        Y,
-        {
-          onClick: (e) => {
-            e.stopPropagation(), w();
-          },
-          className: o.clear,
-          role: "button",
-          children: h
-        }
-      ) : null,
-      C.isLoading && S ? /* @__PURE__ */ t(ae, { name: "right", "data-test-id": `${r}-right-slot`, children: /* @__PURE__ */ t(re, { size: "x-small", "data-test-id": `${r}-loading-circle` }) }) : null,
-      /* @__PURE__ */ g("div", { className: o.icons, children: [
-        /* @__PURE__ */ t(
-          "button",
-          {
-            "aria-label": V("Select_toggleMenu"),
-            ..._(),
-            type: "button",
-            disabled: f,
-            onMouseDown: () => {
-              n.current = !0;
-            },
-            children: /* @__PURE__ */ t(U, { size: 16, className: o.caret })
-          }
-        ),
-        s === "success" ? /* @__PURE__ */ t(
-          W,
-          {
-            size: 16,
-            className: o.iconSuccess,
-            "data-test-id": `${r}-success-icon`
-          }
-        ) : null,
-        I ? /* @__PURE__ */ t(
-          X,
-          {
-            size: 16,
-            className: o.iconError,
-            "data-test-id": `${r}-error-icon`
-          }
-        ) : null
-      ] })
-    ] }) }),
-    /* @__PURE__ */ t(
-      ne,
-      {
-        align: P,
-        side: k,
-        highlightedIndex: J,
-        filterText: j,
-        getMenuProps: q,
-        getItemProps: G,
-        selectedItem: l,
-        hasInteractedSinceOpening: E,
-        viewportCollisionPadding: z,
-        onEscapeKeyDown: D,
-        children: T
-      }
-    )
-  ] });
-};
-L.displayName = "Select.Combobox";
-const we = A(L);
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { ComboboxBase as c } from "./fondue-components95.js";
+import { useMultiselect as b } from "./fondue-components96.js";
+const a = ({ value: e, onSelect: o, defaultValue: t, ...l }, m) => {
+  const { selectedItemValues: r, toggleSelectedItem: p, clear: i } = b(o, e, t);
+  return /* @__PURE__ */ s(
+    c,
+    {
+      ref: m,
+      multiple: !0,
+      selectedItemValues: r,
+      onItemSelect: p,
+      onClear: i,
+      ...l
+    }
+  );
+}, n = u(a);
+n.displayName = "Select.Combobox.Multiple";
 export {
-  we as ForwardedRefCombobox,
-  L as SelectCombobox
+  n as ComboboxMultiple
 };
 //# sourceMappingURL=fondue-components71.js.map

package/dist/fondue-components71.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components71.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 { LoadingCircle } from '#/components/LoadingCircle/LoadingCircle.tsx';\nimport { ForwardedRefSelectSlot } from '#/components/Select/SelectSlot.tsx';\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData, type AsyncItemsFetcher } 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    /**\n     * Function to fetch items asynchronously.\n     */\n    getAsyncItems?: AsyncItemsFetcher;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n} & CommonAriaProps;\n\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        getAsyncItems,\n        onEscapeKeyDown,\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText, asyncItemStatus } =\n        useSelectData(children, getAsyncItems);\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            setFilterText('');\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        () => !getAsyncItems && !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items, getAsyncItems],\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    const hasError = valueInvalid || !!asyncItemStatus.error || status === 'error';\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={hasError ? '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                    ) : null}\n                    {asyncItemStatus.isLoading && isOpen ? (\n                        <ForwardedRefSelectSlot name=\"right\" data-test-id={`${dataTestId}-right-slot`}>\n                            <LoadingCircle size=\"x-small\" data-test-id={`${dataTestId}-loading-circle`} />\n                        </ForwardedRefSelectSlot>\n                    ) : null}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label={t('Select_toggleMenu')}\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                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                        {hasError ? (\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                onEscapeKeyDown={onEscapeKeyDown}\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","getAsyncItems","onEscapeKeyDown","props","forwardedRef","t","useTranslation","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","asyncItemStatus","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","hasError","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","ForwardedRefSelectSlot","LoadingCircle","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":";;;;;;;;;;;;AA+EO,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,gBAAgBC,IAAa;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,IAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,GAAA,GACR,EAAE,YAAAC,GAAY,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAC1FC,GAAc1B,GAAUY,CAAa,GAEnC,CAACe,GAA2BC,CAA4B,IAAIC,GAAS,EAAK,GAE1E;AAAA,IACF,eAAAC;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,EAAA,IACAC,EAAY;AAAA,IACZ,OAAAnB;AAAA,IACA,cAAcG,EAAerB,CAAK;AAAA,IAClC,qBAAqBqB,EAAepB,CAAY;AAAA,IAChD,yBAAyB;AAAA,IACzB,gBAAgBO;AAAA,IAChB,SAAS,qBAAqBI,IAAQA,EAAM,iBAAiB,IAAI;AAAA,IACjE,sBAAsB,CAAC,EAAE,cAAAqB,QAAmB;AACxC,MAAAlC,KAAA,QAAAA,GAAWkC,KAAAA,gBAAAA,EAAc,UAAS;AAAA,IACtC;AAAA,IACA,oBAAoB,CAAC,EAAE,YAAAG,QAAiB;AACpC,MAAAd,EAAcc,CAAU;AAAA,IAC5B;AAAA,IACA,gBAAgB,MAAM;AAClB,MAAAV,EAA6B,EAAK,GAClCJ,EAAc,EAAE;AAAA,IACpB;AAAA,IACA,0BAA0B,MAAM;AAC5B,MAAAI,EAA6B,EAAI;AAAA,IACrC;AAAA,IACA,cAAc,CAACY,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD,GAEKC,IAAaC,GAAO,EAAK,GAEzBC,IAAeC;AAAA,IACjB,MAAM,CAAChC,KAAiB,CAACQ,EAAM,KAAK,CAACoB,MAASA,EAAK,MAAM,cAAc,SAASF,EAAW,YAAA,CAAa,CAAC;AAAA,IACzG,CAACA,GAAYlB,GAAOR,CAAa;AAAA,EAAA,GAG/BiC,IAAgB,CAACC,MAAqD;;AACxE,IAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzCL,EAAW,UAAU,KAEcN,KAAA,gBAAAA,EAAc,MAAM,yBAAwBG,EAAW,kBAAA,KAMtFJ,EAAA,GAGAJ,EAAA,EAAgB,YAChBiB,KAAAC,IAAAlB,EAAA,GAAgB,WAAhB,QAAAiB,EAAA,KAAAC,GAAyBF;AAAA,EAEjC,GACMG,IAAWN,KAAgB,CAAC,CAAClB,EAAgB,SAASpB,MAAW;AAEvE,SACI,gBAAA6C,EAACC,EAAa,MAAb,EAAkB,MAAMf,GACrB,UAAA;AAAA,IAAA,gBAAAgB,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAA,gBAAAD,EAAC,OAAA,EAAI,KAAKnC,GAAc,WAAWsC,EAAO,MAAM,eAAaJ,IAAW,UAAU5C,GAC9E,UAAA;AAAA,MAAA,gBAAA+C;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGtB,EAAc;AAAA,YACd,cAAc,gBAAgBhB,IAAQA,EAAM,YAAY,IAAI;AAAA,UAAA,CAC/D;AAAA,UACD,gBAAcP;AAAA,UACd,aAAAH;AAAA,UACA,WAAWiD,EAAO;AAAA,UAClB,UAAA/C;AAAA,UACA,aAAa,CAACgD,MAAe;AACzB,YAAAb,EAAW,UAAU,IACrBa,EAAW,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,SAAS,CAACC,MAAe;AACrB,YAAKd,EAAW,YACZc,EAAW,OAAO,QAAQ,gBAAgB;AAAA,UAElD;AAAA,UACA,QAAQV;AAAA,QAAA;AAAA,MAAA;AAAA,MAEX3B;AAAA,MACAI,IACG,gBAAA8B;AAAA,QAACI;AAAAA,QAAA;AAAA,UACG,SAAS,CAACC,MAAU;AAChB,YAAAA,EAAM,gBAAA,GACNvB,EAAA;AAAA,UACJ;AAAA,UACA,WAAWmB,EAAO;AAAA,UAClB,MAAK;AAAA,UAEJ,UAAA/B;AAAA,QAAA;AAAA,MAAA,IAEL;AAAA,MACHG,EAAgB,aAAaW,IAC1B,gBAAAgB,EAACM,MAAuB,MAAK,SAAQ,gBAAc,GAAGnD,CAAU,eAC5D,UAAA,gBAAA6C,EAACO,IAAA,EAAc,MAAK,WAAU,gBAAc,GAAGpD,CAAU,mBAAmB,GAChF,IACA;AAAA,MACJ,gBAAA2C,EAAC,OAAA,EAAI,WAAWG,EAAO,OACnB,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,cAAYpC,EAAE,mBAAmB;AAAA,YAChC,GAAGe,EAAA;AAAA,YACJ,MAAK;AAAA,YACL,UAAAzB;AAAA,YACA,aAAa,MAAM;AACf,cAAAmC,EAAW,UAAU;AAAA,YACzB;AAAA,YAEA,4BAACmB,GAAA,EAAc,MAAM,IAAI,WAAWP,EAAO,MAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAErDhD,MAAW,YACR,gBAAA+C;AAAA,UAACS;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWR,EAAO;AAAA,YAClB,gBAAc,GAAG9C,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QACH0C,IACG,gBAAAG;AAAA,UAACU;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWT,EAAO;AAAA,YAClB,gBAAc,GAAG9C,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,EAAA,CACJ,EAAA,CACJ;AAAA,IAEA,gBAAA6C;AAAA,MAACW;AAAA,MAAA;AAAA,QACG,OAAOvD;AAAA,QACP,MAAAC;AAAA,QACA,kBAAA4B;AAAA,QACA,YAAAhB;AAAA,QACA,cAAAW;AAAA,QACA,cAAAC;AAAA,QACA,cAAAE;AAAA,QACA,2BAAAR;AAAA,QACA,0BAAAhB;AAAA,QACA,iBAAAE;AAAA,QAEC,UAAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AACApB,EAAe,cAAc;AAEtB,MAAMiE,KAAuBC,EAA0ClE,CAAc;"}
+{"version":3,"file":"fondue-components71.js","sources":["../src/components/Select/ComboboxMultiple.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { ComboboxBase, type ComboboxSharedProps } from './components/ComboboxBase';\nimport { useMultiselect } from './hooks/useMultiselect';\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally\n     */\n    value?: string[] | null;\n    /**\n     * Callback function that is called when items are selected\n     */\n    onSelect?: (selectedValues: string[] | null) => void;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages\n     */\n    defaultValue?: string[];\n};\n\nconst ComboboxMultipleInput = (\n    { value, onSelect, defaultValue, ...rest }: ComboboxMultipleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, toggleSelectedItem, clear } = useMultiselect(onSelect, value, defaultValue);\n\n    return (\n        <ComboboxBase\n            ref={ref}\n            multiple\n            selectedItemValues={selectedItemValues}\n            onItemSelect={toggleSelectedItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const ComboboxMultiple = forwardRef<HTMLDivElement, ComboboxMultipleProps>(ComboboxMultipleInput);\nComboboxMultiple.displayName = 'Select.Combobox.Multiple';\n"],"names":["ComboboxMultipleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","toggleSelectedItem","clear","useMultiselect","jsx","ComboboxBase","ComboboxMultiple","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAwB,CAC1B,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,oBAAAC,GAAoB,OAAAC,EAAA,IAAUC,EAAeP,GAAUD,GAAOE,CAAY;AAEtG,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAQ;AAAA,MACR,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAmBC,EAAkDb,CAAqB;AACvGY,EAAiB,cAAc;"}

package/dist/fondue-components72.js

@@ -1,22 +1,23 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconCheckMark as n } from "@frontify/fondue-icons";
-import { forwardRef as l } from "react";
-import a from "./fondue-components75.js";
-const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
-  /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
-  /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
-] });
-o.displayName = "Select.Item";
-const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
-  t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
-  c
-] }, e);
-s.displayName = "Select.Group";
-const N = l(s);
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { ComboboxBase as a } from "./fondue-components95.js";
+import { useSingleSelect as b } from "./fondue-components97.js";
+const p = ({ value: e, onSelect: o, defaultValue: t, ...m }, l) => {
+  const { selectedItemValues: r, selectItem: s, clear: n } = b(o, e, t);
+  return /* @__PURE__ */ c(
+    a,
+    {
+      ref: l,
+      multiple: !1,
+      selectedItemValues: r,
+      onItemSelect: s,
+      onClear: n,
+      ...m
+    }
+  );
+}, f = i(p);
+f.displayName = "Select.Combobox";
 export {
-  I as ForwardedRefSelectItem,
-  N as ForwardedRefSelectItemGroup,
-  o as SelectItem,
-  s as SelectItemGroup
+  f as ComboboxSingle
 };
 //# sourceMappingURL=fondue-components72.js.map

package/dist/fondue-components72.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components72.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            <div className={styles.itemValue}>{props.children}</div>\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 groups heading\n     */\n    heading?: 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, heading, '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            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span>{heading}</span>\n                </div>\n            ) : null}\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","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxDC,wBAGK,MAAA,EAAG,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EAClD,gBAAAD,EAACE,GAAA,EAAc,WAAWD,EAAO,cAAA,CAAe;AAAA,GACpD;AAGRL,EAAW,cAAc;AAElB,MAAMO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAAA,GAC3DE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EAAAS,IACG,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAA,gBAAAD,EAAC,QAAA,EAAM,UAAAQ,EAAA,CAAQ,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEvB,MAAMK,IAA8BN,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components72.js","sources":["../src/components/Select/ComboboxSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { ComboboxBase, type ComboboxSharedProps } from './components/ComboboxBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst ComboboxSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: ComboboxSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <ComboboxBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const ComboboxSingle = forwardRef<HTMLDivElement, ComboboxSingleProps>(ComboboxSingleInput);\nComboboxSingle.displayName = 'Select.Combobox';\n"],"names":["ComboboxSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","ComboboxBase","ComboboxSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAsB,CACxB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAiBC,EAAgDb,CAAmB;AACjGY,EAAe,cAAc;"}