@frontify/fondue-components 16.0.4 → 16.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/fondue-components59.js +36 -36
  2. package/dist/fondue-components59.js.map +1 -1
  3. package/package.json +3 -3
package/dist/fondue-components59.js CHANGED
@@ -1,66 +1,66 @@
1
1
  import { jsxs as m, jsx as t } from "react/jsx-runtime";
2
2
  import { IconCaretDown as q, IconCheckMark as G, IconExclamationMarkTriangle as J } from "@frontify/fondue-icons";
3
- import * as w from "@radix-ui/react-popover";
3
+ import * as N from "@radix-ui/react-popover";
4
4
  import { Slot as K } from "@radix-ui/react-slot";
5
5
  import { useCombobox as Q } from "downshift";
6
6
  import { forwardRef as U, useState as W, useRef as X, useMemo as Y } from "react";
7
7
  import { SelectMenu as Z } from "./fondue-components61.js";
8
8
  import o from "./fondue-components63.js";
9
9
  import { useSelectData as _ } from "./fondue-components64.js";
10
- const N = ({
11
- children: S,
10
+ const S = ({
11
+ children: B,
12
12
  onSelect: l,
13
- value: B,
14
- defaultValue: O,
15
- placeholder: R = "",
13
+ value: O,
14
+ defaultValue: R,
15
+ placeholder: v = "",
16
16
  status: s = "neutral",
17
17
  disabled: g,
18
18
  "data-test-id": i = "fondue-select-combobox",
19
- alignMenu: v = "start",
20
- side: M = "bottom",
21
- id: y,
22
- viewportCollisionPadding: F = "compact",
19
+ alignMenu: M = "start",
20
+ side: y = "bottom",
21
+ id: F,
22
+ viewportCollisionPadding: L = "compact",
23
23
  ...a
24
- }, L) => {
25
- const { inputSlots: P, menuSlots: k, items: c, filterText: D, clearButton: f, getItemByValue: p, setFilterText: H } = _(S), [T, h] = W(!1), {
24
+ }, P) => {
25
+ const { inputSlots: k, menuSlots: D, items: c, filterText: H, clearButton: f, getItemByValue: p, setFilterText: h } = _(B), [T, b] = W(!1), {
26
26
  getInputProps: u,
27
27
  getToggleButtonProps: V,
28
28
  getMenuProps: z,
29
29
  getItemProps: j,
30
- reset: b,
30
+ reset: C,
31
31
  selectedItem: r,
32
32
  isOpen: $,
33
33
  highlightedIndex: A,
34
34
  inputValue: d
35
35
  } = Q({
36
36
  items: c,
37
- selectedItem: p(B),
38
- defaultSelectedItem: p(O),
37
+ selectedItem: p(O),
38
+ defaultSelectedItem: p(R),
39
39
  defaultHighlightedIndex: 0,
40
- toggleButtonId: y,
40
+ toggleButtonId: F,
41
41
  labelId: "aria-labelledby" in a ? a["aria-labelledby"] : void 0,
42
42
  onSelectedItemChange: ({ selectedItem: e }) => {
43
43
  l == null || l((e == null ? void 0 : e.value) ?? null);
44
44
  },
45
45
  onInputValueChange: ({ inputValue: e }) => {
46
- H(e);
46
+ h(e);
47
47
  },
48
48
  onIsOpenChange: () => {
49
- h(!1);
49
+ b(!1), h("");
50
50
  },
51
51
  onHighlightedIndexChange: () => {
52
- h(!0);
52
+ b(!0);
53
53
  },
54
54
  itemToString: (e) => e ? e.label : ""
55
- }), n = X(!1), C = Y(
55
+ }), n = X(!1), x = Y(
56
56
  () => !c.find((e) => e.label.toLowerCase().includes(d.toLowerCase())),
57
57
  [d, c]
58
58
  ), E = (e) => {
59
- var x, I;
60
- e.target.dataset.showFocusRing = "false", n.current = !1, (r == null ? void 0 : r.label.toLocaleLowerCase()) !== d.toLocaleLowerCase() && b(), u().onBlur && ((I = (x = u()).onBlur) == null || I.call(x, e));
59
+ var I, w;
60
+ e.target.dataset.showFocusRing = "false", n.current = !1, (r == null ? void 0 : r.label.toLocaleLowerCase()) !== d.toLocaleLowerCase() && C(), u().onBlur && ((w = (I = u()).onBlur) == null || w.call(I, e));
61
61
  };
62
- return /* @__PURE__ */ m(w.Root, { open: $, children: [
63
- /* @__PURE__ */ t(w.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: L, className: o.root, "data-status": C ? "error" : s, children: [
62
+ return /* @__PURE__ */ m(N.Root, { open: $, children: [
63
+ /* @__PURE__ */ t(N.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: P, className: o.root, "data-status": x ? "error" : s, children: [
64
64
  /* @__PURE__ */ t(
65
65
  "input",
66
66
  {
@@ -68,7 +68,7 @@ const N = ({
68
68
  "aria-label": "aria-label" in a ? a["aria-label"] : void 0
69
69
  }),
70
70
  "data-test-id": i,
71
- placeholder: R,
71
+ placeholder: v,
72
72
  className: o.input,
73
73
  disabled: g,
74
74
  onMouseDown: (e) => {
@@ -80,12 +80,12 @@ const N = ({
80
80
  onBlur: E
81
81
  }
82
82
  ),
83
- P,
83
+ k,
84
84
  f && /* @__PURE__ */ t(
85
85
  K,
86
86
  {
87
87
  onClick: (e) => {
88
- e.stopPropagation(), b();
88
+ e.stopPropagation(), C();
89
89
  },
90
90
  className: o.clear,
91
91
  role: "button",
@@ -114,7 +114,7 @@ const N = ({
114
114
  "data-test-id": `${i}-success-icon`
115
115
  }
116
116
  ) : null,
117
- C || s === "error" ? /* @__PURE__ */ t(
117
+ x || s === "error" ? /* @__PURE__ */ t(
118
118
  J,
119
119
  {
120
120
  size: 16,
@@ -127,24 +127,24 @@ const N = ({
127
127
  /* @__PURE__ */ t(
128
128
  Z,
129
129
  {
130
- align: v,
131
- side: M,
130
+ align: M,
131
+ side: y,
132
132
  highlightedIndex: A,
133
- filterText: D,
133
+ filterText: H,
134
134
  getMenuProps: z,
135
135
  getItemProps: j,
136
136
  selectedItem: r,
137
137
  hasInteractedSinceOpening: T,
138
- viewportCollisionPadding: F,
139
- children: k
138
+ viewportCollisionPadding: L,
139
+ children: D
140
140
  }
141
141
  )
142
142
  ] });
143
143
  };
144
- N.displayName = "Select.Combobox";
145
- const ce = U(N);
144
+ S.displayName = "Select.Combobox";
145
+ const ce = U(S);
146
146
  export {
147
147
  ce as ForwardedRefCombobox,
148
- N as SelectCombobox
148
+ S as SelectCombobox
149
149
  };
150
150
  //# sourceMappingURL=fondue-components59.js.map
package/dist/fondue-components59.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n /**\n * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n */\n children?: ReactNode;\n /**\n * Callback function that is called when an item is selected.\n */\n onSelect?: (selectedValue: string | null) => void;\n /**\n * The active value in the combobox component. This is used to control the combobox externally.\n */\n value?: string | null;\n /**\n * The default value of the combobox component. Used for uncontrolled usages.\n */\n defaultValue?: string;\n /**\n * The placeholder in the combobox component.\n */\n placeholder?: string;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error';\n /**\n * Disables the combobox component.\n */\n disabled?: boolean;\n /**\n * The alignment of the menu.\n * @default \"start\"\n */\n alignMenu?: 'start' | 'center' | 'end' /**\n * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n * @default \"bottom\"\n */;\n side?: 'left' | 'right' | 'bottom' | 'top';\n /**\n * Id of the combobox component\n */\n id?: string;\n /**\n * The data test id of the combobox component.\n */\n 'data-test-id'?: string;\n /**\n * Define the minimum distance between the select menu and the viewport edge\n * @default 'compact'\n */\n viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n {\n children,\n onSelect,\n value,\n defaultValue,\n placeholder = '',\n status = 'neutral',\n disabled,\n 'data-test-id': dataTestId = 'fondue-select-combobox',\n alignMenu = 'start',\n side = 'bottom',\n id,\n viewportCollisionPadding = 'compact',\n ...props\n }: ComboboxProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n useSelectData(children);\n\n const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n const {\n getInputProps,\n getToggleButtonProps,\n getMenuProps,\n getItemProps,\n reset,\n selectedItem,\n isOpen,\n highlightedIndex,\n inputValue,\n } = useCombobox({\n items,\n selectedItem: getItemByValue(value),\n defaultSelectedItem: getItemByValue(defaultValue),\n defaultHighlightedIndex: 0,\n toggleButtonId: id,\n labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n onSelectedItemChange: ({ selectedItem }) => {\n onSelect?.(selectedItem?.value ?? null);\n },\n onInputValueChange: ({ inputValue }) => {\n setFilterText(inputValue);\n },\n onIsOpenChange: () => {\n setHasInteractedSinceOpening(false);\n },\n onHighlightedIndexChange: () => {\n setHasInteractedSinceOpening(true);\n },\n itemToString: (item) => (item ? item.label : ''),\n });\n\n const wasClicked = useRef(false);\n\n const valueInvalid = useMemo(\n () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n [inputValue, items],\n );\n\n const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n blurEvent.target.dataset.showFocusRing = 'false';\n wasClicked.current = false;\n\n const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n if (selectedItemNullOrOutdated) {\n // if there is no selection or\n // the existing selected value is not the same as the input value (old),\n // reset the input\n reset();\n }\n\n if (getInputProps().onBlur) {\n getInputProps().onBlur?.(blurEvent);\n }\n };\n\n return (\n <RadixPopover.Root open={isOpen}>\n <RadixPopover.Anchor asChild>\n <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n <input\n {...getInputProps({\n 'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n })}\n data-test-id={dataTestId}\n placeholder={placeholder}\n className={styles.input}\n disabled={disabled}\n onMouseDown={(mouseEvent) => {\n wasClicked.current = true;\n mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n }}\n onFocus={(focusEvent) => {\n if (!wasClicked.current) {\n focusEvent.target.dataset.showFocusRing = 'true';\n }\n }}\n onBlur={onBlurHandler}\n />\n {inputSlots}\n {clearButton && (\n <RadixSlot\n onClick={(event) => {\n event.stopPropagation();\n reset();\n }}\n className={styles.clear}\n role=\"button\"\n >\n {clearButton}\n </RadixSlot>\n )}\n <div className={styles.icons}>\n <button\n aria-label=\"toggle menu\"\n {...getToggleButtonProps()}\n type=\"button\"\n disabled={disabled}\n onMouseDown={() => {\n wasClicked.current = true;\n }}\n >\n <IconCaretDown size={16} className={styles.caret} />\n </button>\n {status === 'success' ? (\n <IconCheckMark\n size={16}\n className={styles.iconSuccess}\n data-test-id={`${dataTestId}-success-icon`}\n />\n ) : null}\n {valueInvalid || status === 'error' ? (\n <IconExclamationMarkTriangle\n size={16}\n className={styles.iconError}\n data-test-id={`${dataTestId}-error-icon`}\n />\n ) : null}\n </div>\n </div>\n </RadixPopover.Anchor>\n\n <SelectMenu\n align={alignMenu}\n side={side}\n highlightedIndex={highlightedIndex}\n filterText={filterText}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n selectedItem={selectedItem}\n hasInteractedSinceOpening={hasInteractedSinceOpening}\n viewportCollisionPadding={viewportCollisionPadding}\n >\n {menuSlots}\n </SelectMenu>\n </RadixPopover.Root>\n );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":";;;;;;;;;AAoEO,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,GAAGC;AACP,GACAC,MACC;AACK,QAAA,EAAE,YAAAC,GAAY,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,EAAA,IAC3EC,EAAcrB,CAAQ,GAEpB,CAACsB,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,MACAC,EAAY;AAAA,IACZ,OAAAlB;AAAA,IACA,cAAcG,EAAejB,CAAK;AAAA,IAClC,qBAAqBiB,EAAehB,CAAY;AAAA,IAChD,yBAAyB;AAAA,IACzB,gBAAgBO;AAAA,IAChB,SAAS,qBAAqBE,IAAQA,EAAM,iBAAiB,IAAI;AAAA,IACjE,sBAAsB,CAAC,EAAE,cAAAkB,QAAmB;AAC7BA,MAAAA,KAAAA,QAAAA,GAAAA,KAAAA,gBAAAA,EAAc,UAAS;AAAA,IACtC;AAAA,IACA,oBAAoB,CAAC,EAAE,YAAAG,QAAiB;AACpC,MAAAb,EAAca,CAAU;AAAA,IAC5B;AAAA,IACA,gBAAgB,MAAM;AAClB,MAAAV,EAA6B,EAAK;AAAA,IACtC;AAAA,IACA,0BAA0B,MAAM;AAC5B,MAAAA,EAA6B,EAAI;AAAA,IACrC;AAAA,IACA,cAAc,CAACY,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD,GAEKC,IAAaC,EAAO,EAAK,GAEzBC,IAAeC;AAAA,IACjB,MAAM,CAACvB,EAAM,KAAK,CAACmB,MAASA,EAAK,MAAM,YAAc,EAAA,SAASF,EAAW,YAAa,CAAA,CAAC;AAAA,IACvF,CAACA,GAAYjB,CAAK;AAAA,EACtB,GAEMwB,IAAgB,CAACC,MAAqD;;AAC9D,IAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCL,EAAW,UAAU,KAEcN,KAAA,gBAAAA,EAAc,MAAM,yBAAwBG,EAAW,kBAAkB,KAMlGJ,EAAA,GAGNJ,IAAgB,YACFiB,KAAAC,IAAAlB,EAAA,GAAE,WAAF,QAAAiB,EAAA,KAAAC,GAAWF;AAAA,EAEjC;AAEA,SACK,gBAAAG,EAAAC,EAAa,MAAb,EAAkB,MAAMd,GACrB,UAAA;AAAA,IAAA,gBAAAe,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAC,gBAAAD,EAAA,OAAA,EAAI,KAAK/B,GAAc,WAAWkC,EAAO,MAAM,eAAaT,IAAe,UAAUjC,GAClF,UAAA;AAAA,MAAA,gBAAAyC;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGrB,EAAc;AAAA,YACd,cAAc,gBAAgBb,IAAQA,EAAM,YAAY,IAAI;AAAA,UAAA,CAC/D;AAAA,UACD,gBAAcL;AAAA,UACd,aAAAH;AAAA,UACA,WAAW2C,EAAO;AAAA,UAClB,UAAAzC;AAAA,UACA,aAAa,CAAC0C,MAAe;AACzB,YAAAZ,EAAW,UAAU,IACVY,EAAA,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,SAAS,CAACC,MAAe;AACjB,YAACb,EAAW,YACDa,EAAA,OAAO,QAAQ,gBAAgB;AAAA,UAElD;AAAA,UACA,QAAQT;AAAA,QAAA;AAAA,MACZ;AAAA,MACC1B;AAAA,MACAI,KACG,gBAAA4B;AAAA,QAACI;AAAAA,QAAA;AAAA,UACG,SAAS,CAACC,MAAU;AAChB,YAAAA,EAAM,gBAAgB,GAChBtB,EAAA;AAAA,UACV;AAAA,UACA,WAAWkB,EAAO;AAAA,UAClB,MAAK;AAAA,UAEJ,UAAA7B;AAAA,QAAA;AAAA,MACL;AAAA,MAEH,gBAAA0B,EAAA,OAAA,EAAI,WAAWG,EAAO,OACnB,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,cAAW;AAAA,YACV,GAAGpB,EAAqB;AAAA,YACzB,MAAK;AAAA,YACL,UAAApB;AAAA,YACA,aAAa,MAAM;AACf,cAAA8B,EAAW,UAAU;AAAA,YACzB;AAAA,YAEA,4BAACgB,GAAc,EAAA,MAAM,IAAI,WAAWL,EAAO,MAAO,CAAA;AAAA,UAAA;AAAA,QACtD;AAAA,QACC1C,MAAW,YACR,gBAAAyC;AAAA,UAACO;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWN,EAAO;AAAA,YAClB,gBAAc,GAAGxC,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QACH+B,KAAgBjC,MAAW,UACxB,gBAAAyC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWP,EAAO;AAAA,YAClB,gBAAc,GAAGxC,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,MAAA,EACR,CAAA;AAAA,IAAA,EAAA,CACJ,EACJ,CAAA;AAAA,IAEA,gBAAAuC;AAAA,MAACS;AAAA,MAAA;AAAA,QACG,OAAO/C;AAAA,QACP,MAAAC;AAAA,QACA,kBAAAuB;AAAA,QACA,YAAAf;AAAA,QACA,cAAAU;AAAA,QACA,cAAAC;AAAA,QACA,cAAAE;AAAA,QACA,2BAAAR;AAAA,QACA,0BAAAX;AAAA,QAEC,UAAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AACAhB,EAAe,cAAc;AAEhB,MAAAyD,KAAuBC,EAA0C1D,CAAc;"}
1
+ {"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n /**\n * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n */\n children?: ReactNode;\n /**\n * Callback function that is called when an item is selected.\n */\n onSelect?: (selectedValue: string | null) => void;\n /**\n * The active value in the combobox component. This is used to control the combobox externally.\n */\n value?: string | null;\n /**\n * The default value of the combobox component. Used for uncontrolled usages.\n */\n defaultValue?: string;\n /**\n * The placeholder in the combobox component.\n */\n placeholder?: string;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error';\n /**\n * Disables the combobox component.\n */\n disabled?: boolean;\n /**\n * The alignment of the menu.\n * @default \"start\"\n */\n alignMenu?: 'start' | 'center' | 'end' /**\n * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n * @default \"bottom\"\n */;\n side?: 'left' | 'right' | 'bottom' | 'top';\n /**\n * Id of the combobox component\n */\n id?: string;\n /**\n * The data test id of the combobox component.\n */\n 'data-test-id'?: string;\n /**\n * Define the minimum distance between the select menu and the viewport edge\n * @default 'compact'\n */\n viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n {\n children,\n onSelect,\n value,\n defaultValue,\n placeholder = '',\n status = 'neutral',\n disabled,\n 'data-test-id': dataTestId = 'fondue-select-combobox',\n alignMenu = 'start',\n side = 'bottom',\n id,\n viewportCollisionPadding = 'compact',\n ...props\n }: ComboboxProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n useSelectData(children);\n\n const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n const {\n getInputProps,\n getToggleButtonProps,\n getMenuProps,\n getItemProps,\n reset,\n selectedItem,\n isOpen,\n highlightedIndex,\n inputValue,\n } = useCombobox({\n items,\n selectedItem: getItemByValue(value),\n defaultSelectedItem: getItemByValue(defaultValue),\n defaultHighlightedIndex: 0,\n toggleButtonId: id,\n labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n onSelectedItemChange: ({ selectedItem }) => {\n onSelect?.(selectedItem?.value ?? null);\n },\n onInputValueChange: ({ inputValue }) => {\n setFilterText(inputValue);\n },\n onIsOpenChange: () => {\n setHasInteractedSinceOpening(false);\n 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 () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n [inputValue, items],\n );\n\n const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n blurEvent.target.dataset.showFocusRing = 'false';\n wasClicked.current = false;\n\n const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n if (selectedItemNullOrOutdated) {\n // if there is no selection or\n // the existing selected value is not the same as the input value (old),\n // reset the input\n reset();\n }\n\n if (getInputProps().onBlur) {\n getInputProps().onBlur?.(blurEvent);\n }\n };\n\n return (\n <RadixPopover.Root open={isOpen}>\n <RadixPopover.Anchor asChild>\n <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n <input\n {...getInputProps({\n 'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n })}\n data-test-id={dataTestId}\n placeholder={placeholder}\n className={styles.input}\n disabled={disabled}\n onMouseDown={(mouseEvent) => {\n wasClicked.current = true;\n mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n }}\n onFocus={(focusEvent) => {\n if (!wasClicked.current) {\n focusEvent.target.dataset.showFocusRing = 'true';\n }\n }}\n onBlur={onBlurHandler}\n />\n {inputSlots}\n {clearButton && (\n <RadixSlot\n onClick={(event) => {\n event.stopPropagation();\n reset();\n }}\n className={styles.clear}\n role=\"button\"\n >\n {clearButton}\n </RadixSlot>\n )}\n <div className={styles.icons}>\n <button\n aria-label=\"toggle menu\"\n {...getToggleButtonProps()}\n type=\"button\"\n disabled={disabled}\n onMouseDown={() => {\n wasClicked.current = true;\n }}\n >\n <IconCaretDown size={16} className={styles.caret} />\n </button>\n {status === 'success' ? (\n <IconCheckMark\n size={16}\n className={styles.iconSuccess}\n data-test-id={`${dataTestId}-success-icon`}\n />\n ) : null}\n {valueInvalid || status === 'error' ? (\n <IconExclamationMarkTriangle\n size={16}\n className={styles.iconError}\n data-test-id={`${dataTestId}-error-icon`}\n />\n ) : null}\n </div>\n </div>\n </RadixPopover.Anchor>\n\n <SelectMenu\n align={alignMenu}\n side={side}\n highlightedIndex={highlightedIndex}\n filterText={filterText}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n selectedItem={selectedItem}\n hasInteractedSinceOpening={hasInteractedSinceOpening}\n viewportCollisionPadding={viewportCollisionPadding}\n >\n {menuSlots}\n </SelectMenu>\n </RadixPopover.Root>\n );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@frontify/fondue-components",
3
3
  "type": "module",
4
- "version": "16.0.4",
4
+ "version": "16.0.5",
5
5
  "homepage": "https://github.com/Frontify/fondue",
6
6
  "repository": {
7
7
  "type": "git",
@@ -30,8 +30,8 @@
30
30
  "peerDependencies": {
31
31
  "react": "^18",
32
32
  "react-dom": "^18",
33
- "@frontify/fondue-icons": "^0.15.2",
34
- "@frontify/fondue-tokens": "^4.1.3"
33
+ "@frontify/fondue-tokens": "^4.1.3",
34
+ "@frontify/fondue-icons": "^0.15.2"
35
35
  },
36
36
  "dependencies": {
37
37
  "@radix-ui/react-accordion": "^1.2.4",