@frontify/fondue-components 3.3.2 → 3.3.4

package/dist/fondue-components18.js

@@ -1,90 +1,96 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { IconCaretDown as G, IconCheckMark as z, IconExclamationMarkTriangle as D } from "@frontify/fondue-icons";
-import * as f from "@radix-ui/react-popover";
-import { Slot as j } from "@radix-ui/react-slot";
-import { useSelect as E } from "downshift";
-import { forwardRef as T, useRef as $ } from "react";
-import { ForwardedRefCombobox as A } from "./fondue-components48.js";
-import { ForwardedRefSelectItem as O, ForwardedRefSelectItemGroup as V } from "./fondue-components49.js";
-import { SelectMenu as q } from "./fondue-components50.js";
-import { ForwardedRefSelectSlot as H } from "./fondue-components51.js";
-import r from "./fondue-components52.js";
-import { useSelectData as J } from "./fondue-components53.js";
-const S = ({
-  children: g,
-  onSelect: m,
-  value: h,
-  defaultValue: I,
-  placeholder: N = "",
-  status: a = "neutral",
-  disabled: n,
-  "aria-label": b,
-  "data-test-id": s = "fondue-select"
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { IconCaretDown as z, IconCheckMark as D, IconExclamationMarkTriangle as j } from "@frontify/fondue-icons";
+import * as S from "@radix-ui/react-popover";
+import { Slot as E } from "@radix-ui/react-slot";
+import { useSelect as H } from "downshift";
+import { forwardRef as T, useRef as $, useState as A } from "react";
+import { ForwardedRefCombobox as V } from "./fondue-components48.js";
+import { ForwardedRefSelectItem as q, ForwardedRefSelectItemGroup as J } from "./fondue-components49.js";
+import { SelectMenu as K } from "./fondue-components50.js";
+import { ForwardedRefSelectSlot as L } from "./fondue-components51.js";
+import a from "./fondue-components52.js";
+import { useSelectData as Q } from "./fondue-components53.js";
+const g = ({
+  children: h,
+  onSelect: i,
+  value: I,
+  defaultValue: N,
+  placeholder: b = "",
+  status: s = "neutral",
+  disabled: m,
+  "aria-label": C,
+  "data-test-id": l = "fondue-select"
 }, d) => {
-  const { inputSlots: w, menuSlots: R, items: x, clearButton: u, getItemByValue: p } = J(g), C = p(I), y = p(h), l = $(!1), { getToggleButtonProps: F, getMenuProps: k, getItemProps: v, reset: M, selectedItem: c, isOpen: P, highlightedIndex: B } = E({
-    items: x,
-    defaultSelectedItem: C,
-    selectedItem: y,
+  const { inputSlots: w, menuSlots: x, items: R, clearButton: u, getItemByValue: p } = Q(h), y = p(N), F = p(I), c = $(!1), [k, f] = A(!1), { getToggleButtonProps: v, getMenuProps: M, getItemProps: P, reset: B, selectedItem: r, isOpen: G, highlightedIndex: O } = H({
+    items: R,
+    defaultSelectedItem: y,
+    selectedItem: F,
+    onIsOpenChange: () => {
+      f(!1);
+    },
+    onHighlightedIndexChange: () => {
+      f(!0);
+    },
     onSelectedItemChange: ({ selectedItem: e }) => {
-      m && m(e.value);
+      i && i(e.value);
     },
     itemToString: (e) => e ? e.label : ""
   });
-  return /* @__PURE__ */ i(f.Root, { open: P, children: [
+  return /* @__PURE__ */ n(S.Root, { open: G, children: [
     /* @__PURE__ */ o(
-      f.Anchor,
+      S.Anchor,
       {
         asChild: !0,
         onMouseDown: (e) => {
-          l.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+          c.current = !0, e.currentTarget.dataset.showFocusRing = "false";
         },
         onFocus: (e) => {
-          l.current || (e.target.dataset.showFocusRing = "true");
+          c.current || (e.target.dataset.showFocusRing = "true");
         },
         onBlur: (e) => {
-          e.target.dataset.showFocusRing = "false", l.current = !1;
+          e.target.dataset.showFocusRing = "false", c.current = !1;
         },
-        children: /* @__PURE__ */ i(
+        children: /* @__PURE__ */ n(
           "div",
           {
-            className: r.root,
-            "data-status": a,
-            "data-disabled": n,
-            "data-empty": !c,
-            "data-test-id": s,
-            ...n ? {} : F({
-              "aria-label": b,
+            className: a.root,
+            "data-status": s,
+            "data-disabled": m,
+            "data-empty": !r,
+            "data-test-id": l,
+            ...m ? {} : v({
+              "aria-label": C,
               ...d ? { ref: d } : {}
             }),
             children: [
-              /* @__PURE__ */ o("span", { className: r.input, children: c ? c.label : N }),
+              /* @__PURE__ */ o("span", { className: a.input, children: r ? r.label : b }),
               w,
               u && /* @__PURE__ */ o(
-                j,
+                E,
                 {
                   onClick: (e) => {
-                    e.stopPropagation(), M();
+                    e.stopPropagation(), B();
                   },
-                  className: r.clear,
+                  className: a.clear,
                   children: u
                 }
               ),
-              /* @__PURE__ */ i("div", { className: r.icons, children: [
-                /* @__PURE__ */ o(G, { size: 16, className: r.caret }),
-                a === "success" ? /* @__PURE__ */ o(
-                  z,
+              /* @__PURE__ */ n("div", { className: a.icons, children: [
+                /* @__PURE__ */ o(z, { size: 16, className: a.caret }),
+                s === "success" ? /* @__PURE__ */ o(
+                  D,
                   {
                     size: 16,
-                    className: r.iconSuccess,
-                    "data-test-id": `${s}-success-icon`
+                    className: a.iconSuccess,
+                    "data-test-id": `${l}-success-icon`
                   }
                 ) : null,
-                a === "error" ? /* @__PURE__ */ o(
-                  D,
+                s === "error" ? /* @__PURE__ */ o(
+                  j,
                   {
                     size: 16,
-                    className: r.iconError,
-                    "data-test-id": `${s}-error-icon`
+                    className: a.iconError,
+                    "data-test-id": `${l}-error-icon`
                   }
                 ) : null
               ] })
@@ -93,23 +99,33 @@ const S = ({
         )
       }
     ),
-    /* @__PURE__ */ o(q, { highlightedIndex: B, getMenuProps: k, getItemProps: v, children: R })
+    /* @__PURE__ */ o(
+      K,
+      {
+        highlightedIndex: O,
+        getMenuProps: M,
+        getItemProps: P,
+        selectedItem: r,
+        hasInteractedSinceOpening: k,
+        children: x
+      }
+    )
   ] });
 };
-S.displayName = "Select";
-const K = T(S), t = K;
+g.displayName = "Select";
+const U = T(g), t = U;
 t.displayName = "Select";
-t.Combobox = A;
+t.Combobox = V;
 t.Combobox.displayName = "Select.Combobox";
-t.Item = O;
+t.Item = q;
 t.Item.displayName = "Select.Item";
-t.Group = V;
+t.Group = J;
 t.Group.displayName = "Select.Group";
-t.Slot = H;
+t.Slot = L;
 t.Slot.displayName = "Select.Slot";
 export {
-  K as ForwardedRefSelect,
+  U as ForwardedRefSelect,
   t as Select,
-  S as SelectInput
+  g as SelectInput
 };
 //# sourceMappingURL=fondue-components18.js.map

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.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, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } 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) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\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 aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\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 { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\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                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.input}>{selectedItem ? selectedItem.label : placeholder}</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                    )}\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 highlightedIndex={highlightedIndex} getMenuProps={getMenuProps} getItemProps={getItemProps}>\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","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","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-components18.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 { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } 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) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\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 aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\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            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\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                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.input}>{selectedItem ? selectedItem.label : placeholder}</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                    )}\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                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\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","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","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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"}

package/dist/fondue-components22.js

@@ -1,11 +1,11 @@
 import { jsx as e, jsxs as T } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
-import { forwardRef as s } from "react";
+import { forwardRef as n } from "react";
 import { cn as f } from "./fondue-components25.js";
-import n from "./fondue-components57.js";
+import s from "./fondue-components57.js";
 const d = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: a }) => /* @__PURE__ */ e(o.Provider, { children: /* @__PURE__ */ e(o.Root, { delayDuration: r, open: i, onOpenChange: a, children: t }) });
 d.displayName = "Tooltip.Root";
-const l = ({ children: t, "data-test-id": r = "fondue-tooltip-trigger" }, i) => /* @__PURE__ */ e(o.Trigger, { "data-test-id": r, asChild: !0, ref: i, children: t });
+const l = ({ children: t, "data-test-id": r = "fondue-tooltip-trigger" }, i) => /* @__PURE__ */ e(o.Trigger, { "data-test-id": r, ref: i, children: t });
 l.displayName = "Tooltip.Trigger";
 const p = ({
   children: t,
@@ -19,7 +19,7 @@ const p = ({
   {
     "data-test-id": a,
     "data-tooltip-spacing": m,
-    className: f(n.root, r),
+    className: f(s.root, r),
     style: { maxWidth: i },
     collisionPadding: 16,
     sideOffset: 8,
@@ -27,18 +27,18 @@ const p = ({
     ...c,
     children: [
       t,
-      /* @__PURE__ */ e(o.Arrow, { "aria-hidden": "true", className: n.arrow })
+      /* @__PURE__ */ e(o.Arrow, { "aria-hidden": "true", className: s.arrow })
     ]
   }
 ) });
 p.displayName = "Tooltip.Content";
-const C = {
+const h = {
   Root: d,
-  Trigger: s(l),
-  Content: s(p)
+  Trigger: n(l),
+  Content: n(p)
 };
 export {
-  C as Tooltip,
+  h as Tooltip,
   p as TooltipContent,
   d as TooltipRoot,
   l as TooltipTrigger

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = { children: ReactNode; 'data-test-id'?: string };\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport const TooltipTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","dataTestId","ref","TooltipContent","className","maxWidth","padding","props","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AAyCa,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAO,IAAiB,CAC1B,EAAE,UAAAN,GAAU,gBAAgBO,IAAa,4BACzCC,MAGI,gBAAAJ,EAACC,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAR,EACL,CAAA;AAGRM,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAT;AAAA,EACA,WAAAU;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGC;AACP,GACAL,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWG,EAAGC,EAAO,MAAMN,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAb;AAAA,MACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,OAAO;AAAA,IAAA;AAAA,EAAA;AAExE,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMlB;AAAA,EACN,SAASmB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components22.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport const TooltipTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","dataTestId","ref","TooltipContent","className","maxWidth","padding","props","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA4Ca,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAO,IAAiB,CAC1B,EAAE,UAAAN,GAAU,gBAAgBO,IAAa,4BACzCC,wBAGKH,EAAa,SAAb,EAAqB,gBAAcE,GAAY,KAAAC,GAC3C,UAAAR,EACL,CAAA;AAGRM,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAT;AAAA,EACA,WAAAU;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGC;AACP,GACAL,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWG,EAAGC,EAAO,MAAMN,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAb;AAAA,MACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,OAAO;AAAA,IAAA;AAAA,EAAA;AAExE,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMlB;AAAA,EACN,SAASmB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}

package/dist/fondue-components26.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components58.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components59.js";
 import { sv as e } from "./fondue-components25.js";
 const o = e({
   base: `tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ${t}`,

package/dist/fondue-components29.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components58.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components59.js";
 import { sv as e } from "./fondue-components25.js";
 const s = e({
   base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong ${t}`,

package/dist/fondue-components31.js

@@ -1,7 +1,7 @@
 import { jsxs as d, jsx as a, Fragment as m } from "react/jsx-runtime";
 import { IconDroplet as n, IconTrashBin as p, IconCaretDown as f } from "@frontify/fondue-icons";
 import { forwardRef as I, useId as N } from "react";
-import i from "./fondue-components59.js";
+import i from "./fondue-components58.js";
 import { colorToCss as h } from "./fondue-components34.js";
 const c = ({ currentColor: e, onClear: s, "data-test-id": t = "color-picker-input", ...r }, l) => {
   const o = N();

package/dist/fondue-components36.js

@@ -1,18 +1,18 @@
-const t = "_content_duup7_6", e = "_header_duup7_50", o = "_footer_duup7_51", n = "_body_duup7_52", d = "_underlay_duup7_77", _ = "_sideContent_duup7_86", u = {
-  content: t,
-  header: e,
-  footer: o,
-  body: n,
-  underlay: d,
-  sideContent: _
+const o = "_content_1nokb_6", n = "_header_1nokb_50", t = "_footer_1nokb_51", e = "_body_1nokb_52", _ = "_underlay_1nokb_77", d = "_sideContent_1nokb_90", s = {
+  content: o,
+  header: n,
+  footer: t,
+  body: e,
+  underlay: _,
+  sideContent: d
 };
 export {
-  n as body,
-  t as content,
-  u as default,
-  o as footer,
-  e as header,
-  _ as sideContent,
-  d as underlay
+  e as body,
+  o as content,
+  s as default,
+  t as footer,
+  n as header,
+  d as sideContent,
+  _ as underlay
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components39.js

@@ -1,20 +1,20 @@
-const t = "_content_ca3qa_4", n = "_subContent_ca3qa_5", o = "_item_ca3qa_15", s = "_subTrigger_ca3qa_16", c = "_subMenuIndicator_ca3qa_53", _ = "_group_ca3qa_59", a = "_slot_ca3qa_66", e = {
-  content: t,
+const o = "_content_ojnoh_4", n = "_subContent_ojnoh_5", t = "_item_ojnoh_23", s = "_subTrigger_ojnoh_24", _ = "_subMenuIndicator_ojnoh_63", e = "_group_ojnoh_69", u = "_slot_ojnoh_76", c = {
+  content: o,
   subContent: n,
-  item: o,
+  item: t,
   subTrigger: s,
-  subMenuIndicator: c,
-  group: _,
-  slot: a
+  subMenuIndicator: _,
+  group: e,
+  slot: u
 };
 export {
-  t as content,
-  e as default,
-  _ as group,
-  o as item,
-  a as slot,
+  o as content,
+  c as default,
+  e as group,
+  t as item,
+  u as slot,
   n as subContent,
-  c as subMenuIndicator,
+  _ as subMenuIndicator,
   s as subTrigger
 };
 //# sourceMappingURL=fondue-components39.js.map

package/dist/fondue-components48.js

@@ -1,79 +1,85 @@
 import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { IconCaretDown as z, IconCheckMark as j, IconExclamationMarkTriangle as H } from "@frontify/fondue-icons";
+import { IconCaretDown as j, IconCheckMark as $, IconExclamationMarkTriangle as A } from "@frontify/fondue-icons";
 import * as x from "@radix-ui/react-popover";
-import { Slot as $ } from "@radix-ui/react-slot";
-import { useCombobox as A } from "downshift";
-import { forwardRef as E, useRef as q, useMemo as G } from "react";
-import { SelectMenu as J } from "./fondue-components50.js";
+import { Slot as E } from "@radix-ui/react-slot";
+import { useCombobox as q } from "downshift";
+import { forwardRef as G, useState as J, useRef as K, useMemo as Q } from "react";
+import { SelectMenu as U } from "./fondue-components50.js";
 import o from "./fondue-components52.js";
-import { useSelectData as K } from "./fondue-components53.js";
+import { useSelectData as W } from "./fondue-components53.js";
 const w = ({
-  children: I,
-  onSelect: m,
+  children: S,
+  onSelect: d,
   value: N,
-  defaultValue: S,
+  defaultValue: O,
   placeholder: R = "",
-  status: a = "neutral",
-  disabled: d,
+  status: n = "neutral",
+  disabled: m,
   "aria-label": B,
-  "data-test-id": l = "fondue-select-combobox"
+  "data-test-id": s = "fondue-select-combobox"
 }, M) => {
-  const { inputSlots: F, menuSlots: L, items: s, filterText: P, clearButton: p, getItemByValue: f, setFilterText: k } = K(I), {
-    getInputProps: n,
-    getToggleButtonProps: v,
-    getMenuProps: O,
-    getItemProps: y,
-    reset: g,
-    selectedItem: c,
-    isOpen: D,
-    highlightedIndex: T,
+  const { inputSlots: F, menuSlots: L, items: l, filterText: P, clearButton: p, getItemByValue: g, setFilterText: k } = W(S), [v, f] = J(!1), {
+    getInputProps: c,
+    getToggleButtonProps: y,
+    getMenuProps: D,
+    getItemProps: H,
+    reset: h,
+    selectedItem: r,
+    isOpen: T,
+    highlightedIndex: V,
     inputValue: i
-  } = A({
-    items: s,
-    selectedItem: f(N),
-    defaultSelectedItem: f(S),
+  } = q({
+    items: l,
+    selectedItem: g(N),
+    defaultSelectedItem: g(O),
     defaultHighlightedIndex: 0,
     onSelectedItemChange: ({ selectedItem: e }) => {
-      m && m(e.value);
+      d && d(e.value);
     },
     onInputValueChange: ({ inputValue: e }) => {
       k(e);
     },
+    onIsOpenChange: () => {
+      f(!1);
+    },
+    onHighlightedIndexChange: () => {
+      f(!0);
+    },
     itemToString: (e) => e ? e.label : ""
-  }), r = q(!1), h = G(
-    () => !s.find((e) => e.label.toLowerCase().includes(i.toLowerCase())),
-    [i, s]
-  ), V = (e) => {
-    var b, C;
-    e.target.dataset.showFocusRing = "false", r.current = !1, (c == null ? void 0 : c.label.toLocaleLowerCase()) !== i.toLocaleLowerCase() && g(), n().onBlur && ((C = (b = n()).onBlur) == null || C.call(b, e));
+  }), a = K(!1), b = Q(
+    () => !l.find((e) => e.label.toLowerCase().includes(i.toLowerCase())),
+    [i, l]
+  ), z = (e) => {
+    var C, I;
+    e.target.dataset.showFocusRing = "false", a.current = !1, (r == null ? void 0 : r.label.toLocaleLowerCase()) !== i.toLocaleLowerCase() && h(), c().onBlur && ((I = (C = c()).onBlur) == null || I.call(C, e));
   };
-  return /* @__PURE__ */ u(x.Root, { open: D, children: [
-    /* @__PURE__ */ t(x.Anchor, { asChild: !0, children: /* @__PURE__ */ u("div", { ref: M, className: o.root, "data-status": h ? "error" : a, children: [
+  return /* @__PURE__ */ u(x.Root, { open: T, children: [
+    /* @__PURE__ */ t(x.Anchor, { asChild: !0, children: /* @__PURE__ */ u("div", { ref: M, className: o.root, "data-status": b ? "error" : n, children: [
       /* @__PURE__ */ t(
         "input",
         {
-          ...n({
+          ...c({
             "aria-label": B
           }),
-          "data-test-id": l,
+          "data-test-id": s,
           placeholder: R,
           className: o.input,
-          disabled: d,
+          disabled: m,
           onMouseDown: (e) => {
-            r.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+            a.current = !0, e.currentTarget.dataset.showFocusRing = "false";
           },
           onFocus: (e) => {
-            r.current || (e.target.dataset.showFocusRing = "true");
+            a.current || (e.target.dataset.showFocusRing = "true");
           },
-          onBlur: V
+          onBlur: z
         }
       ),
       F,
       p && /* @__PURE__ */ t(
-        $,
+        E,
         {
           onClick: (e) => {
-            e.stopPropagation(), g();
+            e.stopPropagation(), h();
           },
           className: o.clear,
           role: "button",
@@ -84,50 +90,52 @@ const w = ({
         /* @__PURE__ */ t(
           "button",
           {
-            ...v(),
+            ...y(),
             type: "button",
             "aria-label": "toggle menu",
-            disabled: d,
+            disabled: m,
             onMouseDown: () => {
-              r.current = !0;
+              a.current = !0;
             },
-            children: /* @__PURE__ */ t(z, { size: 16, className: o.caret })
+            children: /* @__PURE__ */ t(j, { size: 16, className: o.caret })
           }
         ),
-        a === "success" ? /* @__PURE__ */ t(
-          j,
+        n === "success" ? /* @__PURE__ */ t(
+          $,
           {
             size: 16,
             className: o.iconSuccess,
-            "data-test-id": `${l}-success-icon`
+            "data-test-id": `${s}-success-icon`
           }
         ) : null,
-        h || a === "error" ? /* @__PURE__ */ t(
-          H,
+        b || n === "error" ? /* @__PURE__ */ t(
+          A,
           {
             size: 16,
             className: o.iconError,
-            "data-test-id": `${l}-error-icon`
+            "data-test-id": `${s}-error-icon`
           }
         ) : null
       ] })
     ] }) }),
     /* @__PURE__ */ t(
-      J,
+      U,
       {
-        highlightedIndex: T,
+        highlightedIndex: V,
         filterText: P,
-        getMenuProps: O,
-        getItemProps: y,
+        getMenuProps: D,
+        getItemProps: H,
+        selectedItem: r,
+        hasInteractedSinceOpening: v,
         children: L
       }
     )
   ] });
 };
 w.displayName = "Select.Combobox";
-const oe = E(w);
+const ne = G(w);
 export {
-  oe as ForwardedRefCombobox,
+  ne as ForwardedRefCombobox,
   w as SelectCombobox
 };
 //# sourceMappingURL=fondue-components48.js.map