@frontify/fondue-components 23.0.0 → 24.0.0-rc.1

package/dist/fondue-components68.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components68.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-components68.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const [value, setValue] = useState<TValue | undefined>(defaultProp);\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return [value, setValue] as const;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AACtC,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAEpC;AACI,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAG1D,SAAO,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAClH,QAAM,CAACK,GAAOG,CAAQ,IAAIG,EAA6BZ,CAAW,GAC5Da,IAAeC,EAAOR,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAc,EAAU,MAAM;AACZ,IAAIF,EAAa,YAAYP,MACzBC,KAAA,QAAAA,EAAeD,IACfO,EAAa,UAAUP;AAAA,EAE/B,GAAG,CAACA,GAAOO,GAAcN,CAAY,CAAC,GAE/B,CAACD,GAAOG,CAAQ;AAC3B;"}

package/dist/fondue-components69.js

@@ -1,81 +1,20 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as u from "@radix-ui/react-popover";
-import { Slot as V } from "@radix-ui/react-slot";
-import { isValidElement as D } from "react";
-import { useFondueTheme as M, ThemeProvider as T } from "./fondue-components31.js";
-import n from "./fondue-components71.js";
-import { recursiveMap as E, getSelectOptionValue as F } from "./fondue-components91.js";
-const R = ({
-  highlightedIndex: p,
-  getMenuProps: c,
-  getItemProps: m,
-  children: f,
-  filterText: d,
-  align: h,
-  side: v,
-  selectedItem: o,
-  hasInteractedSinceOpening: P,
-  viewportCollisionPadding: S = "compact"
-}) => {
-  const g = (e) => {
-    e.preventDefault();
-  }, O = {
-    compact: 8,
-    spacious: 24
-  }, { theme: N, dir: i } = M(), A = (e) => i === "ltr" ? e : e === "left" ? "right" : e === "right" ? "left" : e;
-  return /* @__PURE__ */ r(u.Portal, { children: /* @__PURE__ */ r(T, { theme: N, dir: i, children: /* @__PURE__ */ r(
-    u.Content,
-    {
-      align: h,
-      side: A(v),
-      collisionPadding: O[S] + 8,
-      onOpenAutoFocus: g,
-      className: n.portal,
-      children: /* @__PURE__ */ r(
-        "ul",
-        {
-          className: n.menu,
-          ...c({}, { suppressRefError: !0 }),
-          "data-has-interacted": P ? "true" : "false",
-          "data-test-id": "fondue-select-menu",
-          children: E(
-            f,
-            (e, s) => {
-              if (((t) => (
-                // @ts-expect-error - We are explicitly checking for ref
-                D(t) && t.ref !== void 0
-              ))(e)) {
-                const t = F(e.props), a = m({
-                  item: t,
-                  index: s,
-                  ...e.ref ? { ref: e.ref } : {}
-                }), l = (o == null ? void 0 : o.value) === t.value;
-                return /* @__PURE__ */ r(
-                  V,
-                  {
-                    className: n.item,
-                    "data-highlighted": p === s,
-                    "data-selected": l,
-                    onTouchStart: (C) => {
-                      a.onClick && a.onClick(C);
-                    },
-                    ...a,
-                    "aria-selected": l,
-                    children: e
-                  },
-                  e.props.value
-                );
-              }
-            },
-            d
-          ).parsedChildren
-        }
-      )
-    }
-  ) }) });
+const t = "_root_zjamu_5", e = "_item_zjamu_34", a = "_itemLabel_zjamu_59", i = "_itemLabelActive_zjamu_80", o = "_itemLabelInactive_zjamu_111", _ = "_activeIndicator_zjamu_141", c = "_separator_zjamu_267", m = {
+  root: t,
+  item: e,
+  itemLabel: a,
+  itemLabelActive: i,
+  itemLabelInactive: o,
+  activeIndicator: _,
+  separator: c
 };
-R.displayName = "Select.Menu";
 export {
-  R as SelectMenu
+  _ as activeIndicator,
+  m as default,
+  e as item,
+  a as itemLabel,
+  i as itemLabelActive,
+  o as itemLabelInactive,
+  t as root,
+  c as separator
 };
 //# sourceMappingURL=fondue-components69.js.map

package/dist/fondue-components69.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components69.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, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side: 'left' | 'right' | 'bottom' | 'top') => {\n        if (dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixPopover.Content\n                    align={align}\n                    side={getAdjustedSide(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                                        const isSelected = selectedItem?.value === optionData.value;\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={isSelected}\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                                                aria-selected={isSelected}\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","dir","useFondueTheme","getAdjustedSide","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","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;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGR,EAAE,OAAAC,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACV,MACjBQ,MAAQ,QACDR,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKW,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAAN,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAZ;AAAA,MACA,MAAMW,EAAgBV,CAAI;AAAA,MAC1B,kBAAkBM,EAA+BH,CAAwB,IAAI;AAAA,MAC7E,iBAAiBC;AAAA,MACjB,WAAWU,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGnB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAa;AAAA,YACIlB;AAAA,YACA,CAACmB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYzB,EAAa;AAAA,kBAC3B,MAAMuB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,KAAarB,KAAA,gBAAAA,EAAc,WAAUkB,EAAW;AAEtD,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBpB,MAAqBuB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACjB,MAAU;AACrB,sBAAIgB,EAAU,WACVA,EAAU,QAAQhB,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGgB;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAlB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components69.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components7.js

@@ -2,8 +2,8 @@ import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { IconMinus as f, IconCheckMark as u } from "@frontify/fondue-icons";
 import * as r from "@radix-ui/react-checkbox";
 import { forwardRef as h } from "react";
-import { cn as w } from "./fondue-components39.js";
-import { checkboxIndicatorStyles as b, checkboxStyles as x } from "./fondue-components43.js";
+import { cn as w } from "./fondue-components41.js";
+import { checkboxIndicatorStyles as b, checkboxStyles as x } from "./fondue-components45.js";
 const p = ({
   className: d,
   value: s,

package/dist/fondue-components70.js

@@ -1,11 +1,155 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "./fondue-components71.js";
-const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
-t.displayName = "Select.Slot";
-const S = d(t);
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { IconCaretDown as Q, IconCheckMark as U, IconExclamationMarkTriangle as W } from "@frontify/fondue-icons";
+import * as B from "@radix-ui/react-popover";
+import { Slot as X } from "@radix-ui/react-slot";
+import { useCombobox as Y } from "downshift";
+import { forwardRef as Z, useState as A, useRef as ee, useMemo as te } from "react";
+import { LoadingCircle as oe } from "./fondue-components19.js";
+import { ForwardedRefSelectSlot as re } from "./fondue-components73.js";
+import { useTranslation as ae } from "./fondue-components36.js";
+import { SelectMenu as le } from "./fondue-components72.js";
+import o from "./fondue-components74.js";
+import { useSelectData as ne } from "./fondue-components75.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,
+  ...a
+}, D) => {
+  const { t: H } = ae(), { inputSlots: V, menuSlots: $, items: u, filterText: T, clearButton: h, getItemByValue: p, setFilterText: b, asyncItemStatus: C } = ne(M, c), [j, x] = A(!1), {
+    getInputProps: d,
+    getToggleButtonProps: E,
+    getMenuProps: _,
+    getItemProps: q,
+    reset: w,
+    selectedItem: l,
+    isOpen: S,
+    highlightedIndex: G,
+    inputValue: m
+  } = Y({
+    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 = ee(!1), J = te(
+    () => !c && !u.find((e) => e.label.toLowerCase().includes(m.toLowerCase())),
+    [m, u, c]
+  ), K = (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 = J || !!C.error || s === "error";
+  return /* @__PURE__ */ g(B.Root, { open: S, children: [
+    /* @__PURE__ */ t(B.Anchor, { asChild: !0, children: /* @__PURE__ */ g("div", { ref: D, 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: K
+        }
+      ),
+      V,
+      h ? /* @__PURE__ */ t(
+        X,
+        {
+          onClick: (e) => {
+            e.stopPropagation(), w();
+          },
+          className: o.clear,
+          role: "button",
+          children: h
+        }
+      ) : null,
+      C.isLoading && S ? /* @__PURE__ */ t(re, { name: "right", "data-test-id": `${r}-right-slot`, children: /* @__PURE__ */ t(oe, { size: "x-small", "data-test-id": `${r}-loading-circle` }) }) : null,
+      /* @__PURE__ */ g("div", { className: o.icons, children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            "aria-label": H("Select_toggleMenu"),
+            ...E(),
+            type: "button",
+            disabled: f,
+            onMouseDown: () => {
+              n.current = !0;
+            },
+            children: /* @__PURE__ */ t(Q, { size: 16, className: o.caret })
+          }
+        ),
+        s === "success" ? /* @__PURE__ */ t(
+          U,
+          {
+            size: 16,
+            className: o.iconSuccess,
+            "data-test-id": `${r}-success-icon`
+          }
+        ) : null,
+        I ? /* @__PURE__ */ t(
+          W,
+          {
+            size: 16,
+            className: o.iconError,
+            "data-test-id": `${r}-error-icon`
+          }
+        ) : null
+      ] })
+    ] }) }),
+    /* @__PURE__ */ t(
+      le,
+      {
+        align: P,
+        side: k,
+        highlightedIndex: G,
+        filterText: T,
+        getMenuProps: _,
+        getItemProps: q,
+        selectedItem: l,
+        hasInteractedSinceOpening: j,
+        viewportCollisionPadding: z,
+        children: $
+      }
+    )
+  ] });
+};
+L.displayName = "Select.Combobox";
+const xe = Z(L);
 export {
-  S as ForwardedRefSelectSlot,
-  t as SelectSlot
+  xe as ForwardedRefCombobox,
+  L as SelectCombobox
 };
 //# sourceMappingURL=fondue-components70.js.map

package/dist/fondue-components70.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components70.js","sources":["../src/components/Select/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}
+{"version":3,"file":"fondue-components70.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} & 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        ...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            >\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","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":";;;;;;;;;;;;AA2EO,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,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,GAAczB,GAAUY,CAAa,GAEnC,CAACc,GAA2BC,CAA4B,IAAIC,EAAS,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,EAAepB,CAAK;AAAA,IAClC,qBAAqBoB,EAAenB,CAAY;AAAA,IAChD,yBAAyB;AAAA,IACzB,gBAAgBO;AAAA,IAChB,SAAS,qBAAqBG,IAAQA,EAAM,iBAAiB,IAAI;AAAA,IACjE,sBAAsB,CAAC,EAAE,cAAAqB,QAAmB;AACxC,MAAAjC,KAAA,QAAAA,GAAWiC,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,CAAC/B,KAAiB,CAACO,EAAM,KAAK,CAACoB,MAASA,EAAK,MAAM,cAAc,SAASF,EAAW,YAAA,CAAa,CAAC;AAAA,IACzG,CAACA,GAAYlB,GAAOP,CAAa;AAAA,EAAA,GAG/BgC,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,SAASnB,MAAW;AAEvE,SACI,gBAAA4C,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,UAAU3C,GAC9E,UAAA;AAAA,MAAA,gBAAA8C;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGtB,EAAc;AAAA,YACd,cAAc,gBAAgBhB,IAAQA,EAAM,YAAY,IAAI;AAAA,UAAA,CAC/D;AAAA,UACD,gBAAcN;AAAA,UACd,aAAAH;AAAA,UACA,WAAWgD,EAAO;AAAA,UAClB,UAAA9C;AAAA,UACA,aAAa,CAAC+C,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,GAAGlD,CAAU,eAC5D,UAAA,gBAAA4C,EAACO,IAAA,EAAc,MAAK,WAAU,gBAAc,GAAGnD,CAAU,mBAAmB,GAChF,IACA;AAAA,MACJ,gBAAA0C,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,UAAAxB;AAAA,YACA,aAAa,MAAM;AACf,cAAAkC,EAAW,UAAU;AAAA,YACzB;AAAA,YAEA,4BAACmB,GAAA,EAAc,MAAM,IAAI,WAAWP,EAAO,MAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAErD/C,MAAW,YACR,gBAAA8C;AAAA,UAACS;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWR,EAAO;AAAA,YAClB,gBAAc,GAAG7C,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QACHyC,IACG,gBAAAG;AAAA,UAACU;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWT,EAAO;AAAA,YAClB,gBAAc,GAAG7C,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,EAAA,CACJ,EAAA,CACJ;AAAA,IAEA,gBAAA4C;AAAA,MAACW;AAAA,MAAA;AAAA,QACG,OAAOtD;AAAA,QACP,MAAAC;AAAA,QACA,kBAAA2B;AAAA,QACA,YAAAhB;AAAA,QACA,cAAAW;AAAA,QACA,cAAAC;AAAA,QACA,cAAAE;AAAA,QACA,2BAAAR;AAAA,QACA,0BAAAf;AAAA,QAEC,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AACAnB,EAAe,cAAc;AAEtB,MAAMgE,KAAuBC,EAA0CjE,CAAc;"}

package/dist/fondue-components71.js

@@ -1,40 +1,22 @@
-const n = "_root_1a48n_7", c = "_selectedValue_1a48n_57", o = "_input_1a48n_74", _ = "_slot_1a48n_100", e = "_clear_1a48n_150", t = "_clearIcon_1a48n_157", a = "_icons_1a48n_161", s = "_caret_1a48n_167", r = "_iconSuccess_1a48n_195", l = "_iconError_1a48n_201", u = "_menu_1a48n_207", i = "_portal_1a48n_230", p = "_item_1a48n_246", m = "_checkmarkIcon_1a48n_276", g = "_itemValue_1a48n_283", d = "_group_1a48n_297", k = "_groupHeading_1a48n_308", I = {
-  root: n,
-  selectedValue: c,
-  input: o,
-  slot: _,
-  clear: e,
-  clearIcon: t,
-  icons: a,
-  caret: s,
-  iconSuccess: r,
-  iconError: l,
-  menu: u,
-  portal: i,
-  item: p,
-  checkmarkIcon: m,
-  itemValue: g,
-  group: d,
-  groupHeading: k
-};
+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-components74.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);
 export {
-  s as caret,
-  m as checkmarkIcon,
-  e as clear,
-  t as clearIcon,
-  I as default,
-  d as group,
-  k as groupHeading,
-  l as iconError,
-  r as iconSuccess,
-  a as icons,
-  o as input,
-  p as item,
-  g as itemValue,
-  u as menu,
-  i as portal,
-  n as root,
-  c as selectedValue,
-  _ as slot
+  I as ForwardedRefSelectItem,
+  N as ForwardedRefSelectItemGroup,
+  o as SelectItem,
+  s as SelectItemGroup
 };
 //# sourceMappingURL=fondue-components71.js.map

package/dist/fondue-components71.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components71.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components71.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;"}

package/dist/fondue-components72.js

@@ -1,74 +1,81 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useState as S, useMemo as b, Children as v, isValidElement as C, cloneElement as w, useCallback as B, useEffect as x } from "react";
-import { SelectClear as F } from "./fondue-components92.js";
-import { ForwardedRefSelectItem as L } from "./fondue-components68.js";
-import { ForwardedRefSelectSlot as y } from "./fondue-components70.js";
-import { getSelectOptionValue as I } from "./fondue-components91.js";
-const O = (n, s) => {
-  const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
-    menuComponents: [],
-    items: []
-  });
-  return x(() => {
-    i(null), s || f({
-      menuComponents: [],
-      items: []
-    }), s && (r(!0), s(n).then((u) => {
-      f({
-        menuComponents: u.map((o) => /* @__PURE__ */ E(L, { label: o.label, value: o.value, children: o.content ? o.content : o.label }, o.value)),
-        items: u.map((o) => ({ value: o.value, label: o.label, children: o.content }))
-      }), r(!1);
-    }).catch((u) => {
-      i(u), r(!1);
-    }));
-  }, [n, s]), { isLoading: e, error: m, menuComponents: l.menuComponents, items: l.items };
-}, g = (n) => {
-  const s = [];
-  return v.forEach(n, (e) => {
-    if (C(e) && e.type === L)
-      s.push(I(e.props));
-    else if (C(e) && e.props.children) {
-      const r = g(e.props.children);
-      for (const m of r)
-        s.push(m);
+import { jsx as r } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-popover";
+import { Slot as V } from "@radix-ui/react-slot";
+import { isValidElement as D } from "react";
+import { useFondueTheme as M, ThemeProvider as T } from "./fondue-components33.js";
+import n from "./fondue-components74.js";
+import { recursiveMap as E, getSelectOptionValue as F } from "./fondue-components92.js";
+const R = ({
+  highlightedIndex: p,
+  getMenuProps: c,
+  getItemProps: m,
+  children: f,
+  filterText: d,
+  align: h,
+  side: v,
+  selectedItem: o,
+  hasInteractedSinceOpening: P,
+  viewportCollisionPadding: S = "compact"
+}) => {
+  const g = (e) => {
+    e.preventDefault();
+  }, O = {
+    compact: 8,
+    spacious: 24
+  }, { theme: N, dir: i } = M(), A = (e) => i === "ltr" ? e : e === "left" ? "right" : e === "right" ? "left" : e;
+  return /* @__PURE__ */ r(u.Portal, { children: /* @__PURE__ */ r(T, { theme: N, dir: i, children: /* @__PURE__ */ r(
+    u.Content,
+    {
+      align: h,
+      side: A(v),
+      collisionPadding: O[S] + 8,
+      onOpenAutoFocus: g,
+      className: n.portal,
+      children: /* @__PURE__ */ r(
+        "ul",
+        {
+          className: n.menu,
+          ...c({}, { suppressRefError: !0 }),
+          "data-has-interacted": P ? "true" : "false",
+          "data-test-id": "fondue-select-menu",
+          children: E(
+            f,
+            (e, s) => {
+              if (((t) => (
+                // @ts-expect-error - We are explicitly checking for ref
+                D(t) && t.ref !== void 0
+              ))(e)) {
+                const t = F(e.props), a = m({
+                  item: t,
+                  index: s,
+                  ...e.ref ? { ref: e.ref } : {}
+                }), l = (o == null ? void 0 : o.value) === t.value;
+                return /* @__PURE__ */ r(
+                  V,
+                  {
+                    className: n.item,
+                    "data-highlighted": p === s,
+                    "data-selected": l,
+                    onTouchStart: (C) => {
+                      a.onClick && a.onClick(C);
+                    },
+                    ...a,
+                    "aria-selected": l,
+                    children: e
+                  },
+                  e.props.value
+                );
+              }
+            },
+            d
+          ).parsedChildren
+        }
+      )
     }
-  }), s;
-}, q = (n, s) => {
-  const [e, r] = S(""), { inputSlots: m, menuSlots: i, itemValues: l, clearButton: f } = b(() => {
-    const a = [], p = [];
-    let V;
-    v.toArray(n).some(
-      (t) => C(t) && t.type === y
-    ) ? v.forEach(n, (t) => {
-      C(t) && t.type === y && (t.props.name === "menu" ? p.push(t.props.children) : t.props.name === "left" || t.props.name === "right" ? a.push(t) : t.props.name === "clear" && (t.props.children ? V = t : V = w(t, { children: /* @__PURE__ */ E(F, {}) })));
-    }) : p.push(n);
-    const R = g(p);
-    return { inputSlots: a, menuSlots: p, itemValues: R, clearButton: V };
-  }, [n]), u = b(
-    () => l.filter(
-      (a) => e === "" || a.label.toLowerCase().includes(e.toLowerCase())
-    ),
-    [l, e]
-  ), o = B(
-    (a) => a ? l.find((p) => p.value === a) : void 0,
-    [l]
-  ), c = O(e, s);
-  return {
-    items: [...u, ...c.items],
-    menuSlots: [...i, ...c.menuComponents],
-    filterText: e,
-    inputSlots: m,
-    clearButton: f,
-    setFilterText: r,
-    getItemByValue: o,
-    asyncItemStatus: {
-      isLoading: c.isLoading,
-      error: c.error
-    }
-  };
+  ) }) });
 };
+R.displayName = "Select.Menu";
 export {
-  g as getRecursiveOptionValues,
-  q as useSelectData
+  R as SelectMenu
 };
 //# sourceMappingURL=fondue-components72.js.map