@frontify/fondue-components 14.0.0 → 14.2.0

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 (16) hide show
  1. package/dist/fondue-components18.js +16 -13
  2. package/dist/fondue-components18.js.map +1 -1
  3. package/dist/fondue-components21.js +44 -43
  4. package/dist/fondue-components21.js.map +1 -1
  5. package/dist/fondue-components3.js +21 -20
  6. package/dist/fondue-components3.js.map +1 -1
  7. package/dist/fondue-components30.js +10 -10
  8. package/dist/fondue-components45.js +6 -6
  9. package/dist/fondue-components55.js +1 -1
  10. package/dist/fondue-components63.js +15 -15
  11. package/dist/fondue-components64.js.map +1 -1
  12. package/dist/fondue-components78.js +12 -11
  13. package/dist/fondue-components78.js.map +1 -1
  14. package/dist/index.d.ts +18 -3
  15. package/dist/style.css +1 -1
  16. package/package.json +1 -1
package/dist/fondue-components18.js CHANGED
@@ -1,33 +1,36 @@
1
- import { jsxs as d, jsx as l } from "react/jsx-runtime";
1
+ import { jsxs as b, jsx as l } from "react/jsx-runtime";
2
2
  import * as a from "@radix-ui/react-scroll-area";
3
- import { forwardRef as b } from "react";
3
+ import { forwardRef as h } from "react";
4
4
  import o from "./fondue-components55.js";
5
- const h = ({
6
- type: t,
5
+ const p = ({
6
+ type: t = "hover",
7
7
  maxHeight: e = "100%",
8
8
  maxWidth: s = "100%",
9
9
  showShadow: c = !1,
10
- padding: i,
11
- children: m,
10
+ scrollbarGutter: i = "auto",
11
+ padding: m,
12
+ children: n,
12
13
  "data-test-id": r = "fondue-scroll-area"
13
- }, n) => /* @__PURE__ */ d(
14
+ }, d) => /* @__PURE__ */ b(
14
15
  a.Root,
15
16
  {
16
17
  type: t,
17
18
  className: o.root,
18
19
  style: { maxWidth: s },
19
20
  "data-test-id": r,
20
- ref: n,
21
+ ref: d,
21
22
  children: [
22
23
  /* @__PURE__ */ l(
23
24
  a.Viewport,
24
25
  {
25
26
  className: o.viewport,
26
27
  style: { maxHeight: e },
27
- "data-scroll-padding": i,
28
+ "data-scroll-padding": m,
28
29
  "data-show-shadow": c,
30
+ "data-scrollbar-type": t,
31
+ "data-scrollbar-gutter": i,
29
32
  "data-test-id": `${r}-viewport`,
30
- children: m
33
+ children: n
31
34
  }
32
35
  ),
33
36
  /* @__PURE__ */ l(
@@ -63,9 +66,9 @@ const h = ({
63
66
  /* @__PURE__ */ l(a.Corner, { className: o.corner, "data-test-id": `${r}-corner` })
64
67
  ]
65
68
  }
66
- ), p = b(h);
67
- p.displayName = "ScrollArea";
69
+ ), u = h(p);
70
+ u.displayName = "ScrollArea";
68
71
  export {
69
- p as ScrollArea
72
+ u as ScrollArea
70
73
  };
71
74
  //# sourceMappingURL=fondue-components18.js.map
package/dist/fondue-components18.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components18.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n /**\n * \"auto\" visible when content is overflowing on the corresponding orientation.\n * \"always\" always visible regardless of whether the content is overflowing.\n * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n * \"hover\" when the user is hovering over the scroll area.\n * @default 'hover'\n */\n type?: 'auto' | 'always' | 'scroll' | 'hover';\n /**\n * Maximum height of the scroll area\n * @default '100%'\n */\n maxHeight?: string | number;\n /**\n * Minimum width of the scroll area\n * @default '100%'\n */\n maxWidth?: string | number;\n /**\n * Define the padding of the scroll area\n * @default \"compact\"\n */\n padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n /**\n * Determines if a inset shadow should be shown the edge of the component\n */\n showShadow?: boolean;\n 'data-test-id'?: string;\n children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n {\n type,\n maxHeight = '100%',\n maxWidth = '100%',\n showShadow = false,\n padding,\n children,\n 'data-test-id': dataTestId = 'fondue-scroll-area',\n }: ScrollAreaProps,\n ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n return (\n <RadixScrollArea.Root\n type={type}\n className={styles.root}\n style={{ maxWidth }}\n data-test-id={dataTestId}\n ref={ref}\n >\n <RadixScrollArea.Viewport\n className={styles.viewport}\n style={{ maxHeight }}\n data-scroll-padding={padding}\n data-show-shadow={showShadow}\n data-test-id={`${dataTestId}-viewport`}\n >\n {children}\n </RadixScrollArea.Viewport>\n <RadixScrollArea.Scrollbar\n className={styles.scrollbar}\n orientation=\"vertical\"\n data-test-id={`${dataTestId}-vertical-scrollbar`}\n >\n <RadixScrollArea.Thumb\n className={styles.thumb}\n data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Scrollbar\n className={styles.scrollbar}\n orientation=\"horizontal\"\n data-test-id={`${dataTestId}-horizontal-scrollbar`}\n >\n <RadixScrollArea.Thumb\n className={styles.thumb}\n data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n </RadixScrollArea.Root>\n );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","padding","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AAuCA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAT;AAAA,IACA,WAAWU,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAR,EAAS;AAAA,IAClB,gBAAcI;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAT,EAAU;AAAA,UACnB,uBAAqBG;AAAA,UACrB,oBAAkBD;AAAA,UAClB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cd,CAAmB;AACzFa,EAAW,cAAc;"}
1
+ {"version":3,"file":"fondue-components18.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n /**\n * \"auto\" visible when content is overflowing on the corresponding orientation.\n * \"always\" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.\n * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n * \"hover\" when the user is hovering over the scroll area.\n * @default 'hover'\n */\n type?: 'auto' | 'always' | 'scroll' | 'hover';\n /**\n * Determines if the scrollbar should take up space in the content area\n * @default 'auto'\n */\n scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';\n /**\n * Maximum height of the scroll area\n * @default '100%'\n */\n maxHeight?: string | number;\n /**\n * Minimum width of the scroll area\n * @default '100%'\n */\n maxWidth?: string | number;\n /**\n * Define the padding of the scroll area\n * @default \"compact\"\n */\n padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n /**\n * Determines if a inset shadow should be shown the edge of the component\n */\n showShadow?: boolean;\n 'data-test-id'?: string;\n children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n {\n type = 'hover',\n maxHeight = '100%',\n maxWidth = '100%',\n showShadow = false,\n scrollbarGutter = 'auto',\n padding,\n children,\n 'data-test-id': dataTestId = 'fondue-scroll-area',\n }: ScrollAreaProps,\n ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n return (\n <RadixScrollArea.Root\n type={type}\n className={styles.root}\n style={{ maxWidth }}\n data-test-id={dataTestId}\n ref={ref}\n >\n <RadixScrollArea.Viewport\n className={styles.viewport}\n style={{ maxHeight }}\n data-scroll-padding={padding}\n data-show-shadow={showShadow}\n data-scrollbar-type={type}\n data-scrollbar-gutter={scrollbarGutter}\n data-test-id={`${dataTestId}-viewport`}\n >\n {children}\n </RadixScrollArea.Viewport>\n <RadixScrollArea.Scrollbar\n className={styles.scrollbar}\n orientation=\"vertical\"\n data-test-id={`${dataTestId}-vertical-scrollbar`}\n >\n <RadixScrollArea.Thumb\n className={styles.thumb}\n data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Scrollbar\n className={styles.scrollbar}\n orientation=\"horizontal\"\n data-test-id={`${dataTestId}-horizontal-scrollbar`}\n >\n <RadixScrollArea.Thumb\n className={styles.thumb}\n data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n </RadixScrollArea.Root>\n );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","scrollbarGutter","padding","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AA4CA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAV;AAAA,IACA,WAAWW,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAT,EAAS;AAAA,IAClB,gBAAcK;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAV,EAAU;AAAA,UACnB,uBAAqBI;AAAA,UACrB,oBAAkBF;AAAA,UAClB,uBAAqBH;AAAA,UACrB,yBAAuBI;AAAA,UACvB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cf,CAAmB;AACzFc,EAAW,cAAc;"}
package/dist/fondue-components21.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { jsxs as d, jsx as a } from "react/jsx-runtime";
2
- import { IconCaretDown as E, IconCheckMark as H, IconExclamationMarkTriangle as T } from "@frontify/fondue-icons";
2
+ import { IconCaretDown as H, IconCheckMark as T, IconExclamationMarkTriangle as $ } from "@frontify/fondue-icons";
3
3
  import * as g from "@radix-ui/react-popover";
4
- import { Slot as V } from "@radix-ui/react-slot";
5
- import { useSelect as $ } from "downshift";
6
- import { forwardRef as A, useRef as q, useState as J } from "react";
7
- import { ForwardedRefCombobox as K } from "./fondue-components59.js";
8
- import { ForwardedRefSelectItem as L, ForwardedRefSelectItemGroup as Q } from "./fondue-components60.js";
9
- import { SelectMenu as U } from "./fondue-components61.js";
10
- import { ForwardedRefSelectSlot as W } from "./fondue-components62.js";
4
+ import { Slot as A } from "@radix-ui/react-slot";
5
+ import { useSelect as q } from "downshift";
6
+ import { forwardRef as J, useRef as K, useState as L } from "react";
7
+ import { ForwardedRefCombobox as Q } from "./fondue-components59.js";
8
+ import { ForwardedRefSelectItem as U, ForwardedRefSelectItemGroup as W } from "./fondue-components60.js";
9
+ import { SelectMenu as X } from "./fondue-components61.js";
10
+ import { ForwardedRefSelectSlot as Y } from "./fondue-components62.js";
11
11
  import o from "./fondue-components63.js";
12
- import { useSelectData as X } from "./fondue-components64.js";
12
+ import { useSelectData as Z } from "./fondue-components64.js";
13
13
  const S = ({
14
14
  children: h,
15
15
  onSelect: s,
@@ -19,17 +19,18 @@ const S = ({
19
19
  status: n = "neutral",
20
20
  disabled: m,
21
21
  alignMenu: w = "start",
22
- side: C = "bottom",
23
- id: R,
22
+ side: y = "bottom",
23
+ id: C,
24
+ showStringValue: R = !0,
24
25
  "data-test-id": i = "fondue-select",
25
- ...r
26
+ ...l
26
27
  }, x) => {
27
- const { inputSlots: y, menuSlots: F, items: k, clearButton: u, getItemByValue: f } = X(h), v = f(I), B = f(b), c = q(!1), [M, p] = J(!1), { getToggleButtonProps: P, getMenuProps: G, getItemProps: O, reset: z, selectedItem: l, isOpen: D, highlightedIndex: j } = $({
28
- items: k,
29
- defaultSelectedItem: v,
30
- selectedItem: B,
31
- toggleButtonId: R,
32
- labelId: "aria-labelledby" in r ? r["aria-labelledby"] : void 0,
28
+ const { inputSlots: F, menuSlots: k, items: v, clearButton: u, getItemByValue: f } = Z(h), B = f(I), M = f(b), c = K(!1), [P, p] = L(!1), { getToggleButtonProps: G, getMenuProps: O, getItemProps: z, reset: D, selectedItem: r, isOpen: V, highlightedIndex: j } = q({
29
+ items: v,
30
+ defaultSelectedItem: B,
31
+ selectedItem: M,
32
+ toggleButtonId: C,
33
+ labelId: "aria-labelledby" in l ? l["aria-labelledby"] : void 0,
33
34
  onIsOpenChange: () => {
34
35
  p(!1);
35
36
  },
@@ -40,8 +41,8 @@ const S = ({
40
41
  s == null || s((e == null ? void 0 : e.value) ?? null);
41
42
  },
42
43
  itemToString: (e) => e ? e.label : ""
43
- });
44
- return /* @__PURE__ */ d(g.Root, { open: D, children: [
44
+ }), E = r ? !R && r.children || r.label : N;
45
+ return /* @__PURE__ */ d(g.Root, { open: V, children: [
45
46
  /* @__PURE__ */ a(
46
47
  g.Anchor,
47
48
  {
@@ -61,29 +62,29 @@ const S = ({
61
62
  className: o.root,
62
63
  "data-status": n,
63
64
  "data-disabled": m,
64
- "data-empty": !l,
65
+ "data-empty": !r,
65
66
  "data-test-id": i,
66
- ...m ? {} : P({
67
- "aria-label": "aria-label" in r ? r["aria-label"] : void 0,
67
+ ...m ? {} : G({
68
+ "aria-label": "aria-label" in l ? l["aria-label"] : void 0,
68
69
  ref: x
69
70
  }),
70
71
  children: [
71
- /* @__PURE__ */ a("span", { className: o.selectedValue, children: l ? l.label : N }),
72
- y,
72
+ /* @__PURE__ */ a("span", { className: o.selectedValue, children: E }),
73
+ F,
73
74
  u && /* @__PURE__ */ a(
74
- V,
75
+ A,
75
76
  {
76
77
  onClick: (e) => {
77
- e.stopPropagation(), z();
78
+ e.stopPropagation(), D();
78
79
  },
79
80
  className: o.clear,
80
81
  children: u
81
82
  }
82
83
  ),
83
84
  /* @__PURE__ */ d("div", { className: o.icons, children: [
84
- /* @__PURE__ */ a(E, { size: 16, className: o.caret }),
85
+ /* @__PURE__ */ a(H, { size: 16, className: o.caret }),
85
86
  n === "success" ? /* @__PURE__ */ a(
86
- H,
87
+ T,
87
88
  {
88
89
  size: 16,
89
90
  className: o.iconSuccess,
@@ -91,7 +92,7 @@ const S = ({
91
92
  }
92
93
  ) : null,
93
94
  n === "error" ? /* @__PURE__ */ a(
94
- T,
95
+ $,
95
96
  {
96
97
  size: 16,
97
98
  className: o.iconError,
@@ -105,33 +106,33 @@ const S = ({
105
106
  }
106
107
  ),
107
108
  /* @__PURE__ */ a(
108
- U,
109
+ X,
109
110
  {
110
111
  align: w,
111
- side: C,
112
+ side: y,
112
113
  highlightedIndex: j,
113
- getMenuProps: G,
114
- getItemProps: O,
115
- selectedItem: l,
116
- hasInteractedSinceOpening: M,
117
- children: F
114
+ getMenuProps: O,
115
+ getItemProps: z,
116
+ selectedItem: r,
117
+ hasInteractedSinceOpening: P,
118
+ children: k
118
119
  }
119
120
  )
120
121
  ] });
121
122
  };
122
123
  S.displayName = "Select";
123
- const Y = A(S), t = Y;
124
+ const _ = J(S), t = _;
124
125
  t.displayName = "Select";
125
- t.Combobox = K;
126
+ t.Combobox = Q;
126
127
  t.Combobox.displayName = "Select.Combobox";
127
- t.Item = L;
128
+ t.Item = U;
128
129
  t.Item.displayName = "Select.Item";
129
- t.Group = Q;
130
+ t.Group = W;
130
131
  t.Group.displayName = "Select.Group";
131
- t.Slot = W;
132
+ t.Slot = Y;
132
133
  t.Slot.displayName = "Select.Slot";
133
134
  export {
134
- Y as ForwardedRefSelect,
135
+ _ as ForwardedRefSelect,
135
136
  t as Select,
136
137
  S as SelectInput
137
138
  };
package/dist/fondue-components21.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components21.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n /**\n * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n */\n children?: ReactNode;\n /**\n * Callback function that is called when an item is selected.\n */\n onSelect?: (selectedValue: string | null) => void;\n /**\n * The active value in the select component. This is used to control the select externally.\n */\n value?: string | null;\n /**\n * The default value of the select component. Used for uncontrolled usages.\n */\n defaultValue?: string;\n /**\n * The placeholder in the select component.\n */\n placeholder?: string;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error';\n /**\n * Disables the select component.\n */\n disabled?: boolean;\n /**\n * The alignment of the menu.\n * @default \"start\"\n */\n alignMenu?: 'start' | 'center' | 'end';\n /**\n * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n * @default \"bottom\"\n */\n side?: 'left' | 'right' | 'bottom' | 'top';\n /**\n * The data test id of the select component.\n */\n 'data-test-id'?: string;\n /**\n * Id of the select component\n */\n id?: string;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n {\n children,\n onSelect,\n value,\n defaultValue,\n placeholder = '',\n status = 'neutral',\n disabled,\n alignMenu = 'start',\n side = 'bottom',\n id,\n 'data-test-id': dataTestId = 'fondue-select',\n ...props\n }: SelectComponentProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n const defaultItem = getItemByValue(defaultValue);\n const activeItem = getItemByValue(value);\n\n const wasClicked = useRef(false);\n\n const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n useSelect({\n items,\n defaultSelectedItem: defaultItem,\n selectedItem: activeItem,\n toggleButtonId: id,\n labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n onIsOpenChange: () => {\n setHasInteractedSinceOpening(false);\n },\n onHighlightedIndexChange: () => {\n setHasInteractedSinceOpening(true);\n },\n onSelectedItemChange: ({ selectedItem }) => {\n onSelect?.(selectedItem?.value ?? null);\n },\n itemToString: (item) => (item ? item.label : ''),\n });\n\n 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': 'aria-label' in props ? props['aria-label'] : undefined,\n ref: forwardedRef,\n }))}\n >\n <span className={styles.selectedValue}>{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 align={alignMenu}\n side={side}\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","alignMenu","side","id","dataTestId","props","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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"}
1
+ {"version":3,"file":"fondue-components21.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n /**\n * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n */\n children?: ReactNode;\n /**\n * Callback function that is called when an item is selected.\n */\n onSelect?: (selectedValue: string | null) => void;\n /**\n * The active value in the select component. This is used to control the select externally.\n */\n value?: string | null;\n /**\n * The default value of the select component. Used for uncontrolled usages.\n */\n defaultValue?: string;\n /**\n * The placeholder in the select component.\n */\n placeholder?: string;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error';\n /**\n * Disables the select component.\n */\n disabled?: boolean;\n /**\n * The alignment of the menu.\n * @default \"start\"\n */\n alignMenu?: 'start' | 'center' | 'end';\n /**\n * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n * @default \"bottom\"\n */\n side?: 'left' | 'right' | 'bottom' | 'top';\n /**\n * The data test id of the select component.\n */\n 'data-test-id'?: string;\n /**\n * Id of the select component\n */\n id?: string;\n /**\n * The value of the select is shown as plan text when set to true, items child components are used if set to true\n * @default true\n */\n showStringValue?: boolean;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n {\n children,\n onSelect,\n value,\n defaultValue,\n placeholder = '',\n status = 'neutral',\n disabled,\n alignMenu = 'start',\n side = 'bottom',\n id,\n showStringValue = true,\n 'data-test-id': dataTestId = 'fondue-select',\n ...props\n }: SelectComponentProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n const defaultItem = getItemByValue(defaultValue);\n const activeItem = getItemByValue(value);\n\n const wasClicked = useRef(false);\n\n const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n useSelect({\n items,\n defaultSelectedItem: defaultItem,\n selectedItem: activeItem,\n toggleButtonId: id,\n labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n onIsOpenChange: () => {\n setHasInteractedSinceOpening(false);\n },\n onHighlightedIndexChange: () => {\n setHasInteractedSinceOpening(true);\n },\n onSelectedItemChange: ({ selectedItem }) => {\n onSelect?.(selectedItem?.value ?? null);\n },\n itemToString: (item) => (item ? item.label : ''),\n });\n\n const displayedValue = selectedItem\n ? (!showStringValue && selectedItem.children) || selectedItem.label\n : placeholder;\n\n return (\n <RadixPopover.Root open={isOpen}>\n <RadixPopover.Anchor\n asChild\n onMouseDown={(mouseEvent) => {\n wasClicked.current = true;\n mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n }}\n onFocus={(focusEvent) => {\n if (!wasClicked.current) {\n focusEvent.target.dataset.showFocusRing = 'true';\n }\n }}\n onBlur={(blurEvent) => {\n blurEvent.target.dataset.showFocusRing = 'false';\n wasClicked.current = false;\n }}\n >\n <div\n className={styles.root}\n data-status={status}\n data-disabled={disabled}\n data-empty={!selectedItem}\n data-test-id={dataTestId}\n {...(disabled\n ? {}\n : getToggleButtonProps({\n 'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n ref: forwardedRef,\n }))}\n >\n <span className={styles.selectedValue}>{displayedValue}</span>\n {inputSlots}\n {clearButton && (\n <RadixSlot\n onClick={(event) => {\n event.stopPropagation();\n reset();\n }}\n className={styles.clear}\n >\n {clearButton}\n </RadixSlot>\n )}\n <div className={styles.icons}>\n <IconCaretDown size={16} className={styles.caret} />\n {status === 'success' ? (\n <IconCheckMark\n size={16}\n className={styles.iconSuccess}\n data-test-id={`${dataTestId}-success-icon`}\n />\n ) : null}\n {status === 'error' ? (\n <IconExclamationMarkTriangle\n size={16}\n className={styles.iconError}\n data-test-id={`${dataTestId}-error-icon`}\n />\n ) : null}\n </div>\n </div>\n </RadixPopover.Anchor>\n\n <SelectMenu\n align={alignMenu}\n side={side}\n highlightedIndex={highlightedIndex}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n selectedItem={selectedItem}\n hasInteractedSinceOpening={hasInteractedSinceOpening}\n >\n {menuSlots}\n </SelectMenu>\n </RadixPopover.Root>\n );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n Combobox: typeof ForwardedRefCombobox;\n Item: typeof ForwardedRefSelectItem;\n Group: typeof ForwardedRefSelectItemGroup;\n Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}
package/dist/fondue-components3.js CHANGED
@@ -1,38 +1,38 @@
1
- import { jsx as e, jsxs as p } from "react/jsx-runtime";
1
+ import { jsx as r, jsxs as p } from "react/jsx-runtime";
2
2
  import { IconCaretDown as A } from "@frontify/fondue-icons";
3
3
  import * as c from "@radix-ui/react-accordion";
4
- import r from "./fondue-components30.js";
4
+ import a from "./fondue-components30.js";
5
5
  const s = ({
6
6
  "data-test-id": t = "fondue-accordion",
7
7
  border: o = !0,
8
- children: a,
8
+ children: e,
9
9
  defaultValue: d,
10
10
  disabled: i,
11
11
  value: n
12
- }) => /* @__PURE__ */ e(
12
+ }) => /* @__PURE__ */ r(
13
13
  c.Root,
14
14
  {
15
- className: r.root,
15
+ className: a.root,
16
16
  "data-test-id": t,
17
17
  defaultValue: d,
18
18
  disabled: i,
19
19
  type: "multiple",
20
20
  value: n,
21
21
  "data-border": o,
22
- children: a
22
+ children: e
23
23
  }
24
24
  );
25
25
  s.displayName = "Accordion.Root";
26
26
  const m = ({
27
27
  "data-test-id": t = "fondue-accordion-item",
28
28
  children: o,
29
- disabled: a,
29
+ disabled: e,
30
30
  onClick: d,
31
31
  value: i
32
- }) => /* @__PURE__ */ e(
32
+ }) => /* @__PURE__ */ r(
33
33
  c.Item,
34
34
  {
35
- className: r.accordionItem,
35
+ className: a.accordionItem,
36
36
  value: i,
37
37
  onPointerDown: (n) => {
38
38
  n.currentTarget.dataset.showFocusRing = "false";
@@ -41,37 +41,38 @@ const m = ({
41
41
  n.currentTarget.dataset.showFocusRing = "true";
42
42
  },
43
43
  onClick: d,
44
- disabled: a,
44
+ disabled: e,
45
45
  "data-test-id": t,
46
46
  children: o
47
47
  }
48
48
  );
49
49
  m.displayName = "Accordion.Item";
50
- const l = ({ children: t }) => /* @__PURE__ */ e(c.Header, { children: t });
50
+ const l = ({ children: t }) => /* @__PURE__ */ r(c.Header, { children: t });
51
51
  l.displayName = "Accordion.Header";
52
52
  const g = ({
53
53
  "data-test-id": t = "fondue-accordion-trigger",
54
- children: o
55
- }) => /* @__PURE__ */ p(c.Trigger, { className: r.accordionTrigger, "data-test-id": t, children: [
56
- o,
57
- /* @__PURE__ */ e(A, { className: r.accordionCaret, size: "16" })
54
+ asChild: o,
55
+ children: e
56
+ }) => /* @__PURE__ */ p(c.Trigger, { asChild: o, className: a.accordionTrigger, "data-test-id": t, children: [
57
+ e,
58
+ /* @__PURE__ */ r(A, { className: a.accordionCaret, size: "16" })
58
59
  ] });
59
60
  g.displayName = "Accordion.Trigger";
60
61
  const u = ({
61
62
  "data-test-id": t = "collapsible-wrap",
62
63
  children: o,
63
- divider: a = !1,
64
+ divider: e = !1,
64
65
  onClick: d,
65
66
  padding: i = "large"
66
- }) => /* @__PURE__ */ e(
67
+ }) => /* @__PURE__ */ r(
67
68
  c.Content,
68
69
  {
69
- className: r.accordionContent,
70
+ className: a.accordionContent,
70
71
  onClick: d,
71
72
  "data-test-id": t,
72
73
  "data-item-padding": i,
73
- "data-item-divider": a,
74
- children: /* @__PURE__ */ e("div", { className: r.accordionContentText, "data-test-id": `inner-${t}`, children: o })
74
+ "data-item-divider": e,
75
+ children: /* @__PURE__ */ r("div", { className: a.accordionContentText, "data-test-id": `inner-${t}`, children: o })
75
76
  }
76
77
  );
77
78
  u.displayName = "Accordion.Content";
package/dist/fondue-components3.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components3.js","sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport { type MouseEventHandler, type ReactNode } from 'react';\n\nimport styles from './styles/accordion.module.scss';\n\ntype AccordionPadding = 'none' | 'small' | 'medium' | 'large';\n\nexport type AccordionRootProps = {\n 'data-test-id'?: string;\n /**\n * Show or hide the top and bottom border\n * @default true\n */\n border?: boolean;\n /**\n * Children of the Accordion component. This should contain the `Accordion.Item` components\n */\n children?: ReactNode;\n /**\n * The value of the items whose contents are expanded when the accordion is initially rendered.\n * Use `defaultValue` if you do not need to control the state of an accordion.\n */\n defaultValue?: string[];\n /**\n * Whether or not an accordion is disabled from user interaction.\n */\n disabled?: boolean;\n /**\n * The controlled stateful value of the accordion items whose contents are expanded.\n */\n value?: string[];\n};\n\nexport const AccordionRoot = ({\n 'data-test-id': dataTestId = 'fondue-accordion',\n border = true,\n children,\n defaultValue,\n disabled,\n value,\n}: AccordionRootProps) => {\n return (\n <RadixAccordion.Root\n className={styles.root}\n data-test-id={dataTestId}\n defaultValue={defaultValue}\n disabled={disabled}\n type=\"multiple\"\n value={value}\n data-border={border}\n >\n {children}\n </RadixAccordion.Root>\n );\n};\nAccordionRoot.displayName = 'Accordion.Root';\n\nexport type AccordionItemProps = {\n 'data-test-id'?: string;\n /**\n * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components\n */\n children?: ReactNode;\n /**\n * Whether or not an accordion item is disabled from user interaction.\n *\n * @default false\n */\n disabled?: boolean;\n /**\n * Click callback for this item.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * A string value for the accordion item. All items within an accordion should use a unique value.\n */\n value: string;\n};\n\nexport const AccordionItem = ({\n 'data-test-id': dataTestId = 'fondue-accordion-item',\n children,\n disabled,\n onClick,\n value,\n}: AccordionItemProps) => {\n return (\n <RadixAccordion.Item\n className={styles.accordionItem}\n value={value}\n onPointerDown={(event) => {\n event.currentTarget.dataset.showFocusRing = 'false';\n }}\n onBlur={(event) => {\n event.currentTarget.dataset.showFocusRing = 'true';\n }}\n onClick={onClick}\n disabled={disabled}\n data-test-id={dataTestId}\n >\n {children}\n </RadixAccordion.Item>\n );\n};\nAccordionItem.displayName = 'Accordion.Item';\n\nexport type AccordionHeaderProps = {\n /**\n * Children of the Accordion header. This should contain `Accordion.Trigger`\n */\n children?: ReactNode;\n};\n\nexport const AccordionHeader = ({ children }: AccordionHeaderProps) => {\n return <RadixAccordion.Header>{children}</RadixAccordion.Header>;\n};\nAccordionHeader.displayName = 'Accordion.Header';\n\nexport type AccordionTriggerProps = {\n 'data-test-id'?: string;\n /**\n * Children of the Accordion trigger. This contains the actually clickable and visible header content\n */\n children?: ReactNode;\n};\n\nexport const AccordionTrigger = ({\n 'data-test-id': dataTestId = 'fondue-accordion-trigger',\n children,\n}: AccordionTriggerProps) => {\n return (\n <RadixAccordion.Trigger className={styles.accordionTrigger} data-test-id={dataTestId}>\n {children}\n <IconCaretDown className={styles.accordionCaret} size=\"16\" />\n </RadixAccordion.Trigger>\n );\n};\nAccordionTrigger.displayName = 'Accordion.Trigger';\n\ntype AccordionContentProps = {\n 'data-test-id'?: string;\n /**\n * Children of the Accordion content. This contains the main content.\n */\n children?: ReactNode;\n /**\n * Adds a divider line between the header and the content.\n */\n divider?: boolean;\n /**\n * Click callback for the content.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Controls if we show paddings around the content.\n * @default 'large'\n */\n padding?: AccordionPadding;\n};\n\nexport const AccordionContent = ({\n 'data-test-id': dataTestId = 'collapsible-wrap',\n children,\n divider = false,\n onClick,\n padding = 'large',\n}: AccordionContentProps) => {\n return (\n <RadixAccordion.Content\n className={styles.accordionContent}\n onClick={onClick}\n data-test-id={dataTestId}\n data-item-padding={padding}\n data-item-divider={divider}\n >\n <div className={styles.accordionContentText} data-test-id={`inner-${dataTestId}`}>\n {children}\n </div>\n </RadixAccordion.Content>\n );\n};\nAccordionContent.displayName = 'Accordion.Content';\n\nexport const Accordion = {\n Root: AccordionRoot,\n Item: AccordionItem,\n Header: AccordionHeader,\n Trigger: AccordionTrigger,\n Content: AccordionContent,\n};\n"],"names":["AccordionRoot","dataTestId","border","children","defaultValue","disabled","value","jsx","RadixAccordion","styles","AccordionItem","onClick","event","AccordionHeader","AccordionTrigger","jsxs","IconCaretDown","AccordionContent","divider","padding","Accordion"],"mappings":";;;;AAoCO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,gBAAgBC,IAAa;AAAA,EAC7B,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcR;AAAA,IACd,cAAAG;AAAA,IACA,UAAAC;AAAA,IACA,MAAK;AAAA,IACL,OAAAC;AAAA,IACA,eAAaJ;AAAA,IAEZ,UAAAC;AAAA,EAAA;AACL;AAGRH,EAAc,cAAc;AAwBrB,MAAMU,IAAgB,CAAC;AAAA,EAC1B,gBAAgBT,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,UAAAE;AAAA,EACA,SAAAM;AAAA,EACA,OAAAL;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,OAAAH;AAAA,IACA,eAAe,CAACM,MAAU;AAChB,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,QAAQ,CAACA,MAAU;AACT,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,SAAAD;AAAA,IACA,UAAAN;AAAA,IACA,gBAAcJ;AAAA,IAEb,UAAAE;AAAA,EAAA;AACL;AAGRO,EAAc,cAAc;AASrB,MAAMG,IAAkB,CAAC,EAAE,UAAAV,QACtB,gBAAAI,EAAAC,EAAe,QAAf,EAAuB,UAAAL,EAAS,CAAA;AAE5CU,EAAgB,cAAc;AAUvB,MAAMC,IAAmB,CAAC;AAAA,EAC7B,gBAAgBb,IAAa;AAAA,EAC7B,UAAAE;AACJ,MAEQ,gBAAAY,EAACP,EAAe,SAAf,EAAuB,WAAWC,EAAO,kBAAkB,gBAAcR,GACrE,UAAA;AAAA,EAAAE;AAAA,oBACAa,GAAc,EAAA,WAAWP,EAAO,gBAAgB,MAAK,KAAK,CAAA;AAAA,GAC/D;AAGRK,EAAiB,cAAc;AAuBxB,MAAMG,IAAmB,CAAC;AAAA,EAC7B,gBAAgBhB,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,SAAAe,IAAU;AAAA,EACV,SAAAP;AAAA,EACA,SAAAQ,IAAU;AACd,MAEQ,gBAAAZ;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,SAAAE;AAAA,IACA,gBAAcV;AAAA,IACd,qBAAmBkB;AAAA,IACnB,qBAAmBD;AAAA,IAEnB,UAAA,gBAAAX,EAAC,SAAI,WAAWE,EAAO,sBAAsB,gBAAc,SAASR,CAAU,IACzE,UAAAE,EACL,CAAA;AAAA,EAAA;AACJ;AAGRc,EAAiB,cAAc;AAExB,MAAMG,IAAY;AAAA,EACrB,MAAMpB;AAAA,EACN,MAAMU;AAAA,EACN,QAAQG;AAAA,EACR,SAASC;AAAA,EACT,SAASG;AACb;"}
1
+ {"version":3,"file":"fondue-components3.js","sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport { type MouseEventHandler, type ReactNode } from 'react';\n\nimport styles from './styles/accordion.module.scss';\n\ntype AccordionPadding = 'none' | 'small' | 'medium' | 'large';\n\nexport type AccordionRootProps = {\n 'data-test-id'?: string;\n /**\n * Show or hide the top and bottom border\n * @default true\n */\n border?: boolean;\n /**\n * Children of the Accordion component. This should contain the `Accordion.Item` components\n */\n children?: ReactNode;\n /**\n * The value of the items whose contents are expanded when the accordion is initially rendered.\n * Use `defaultValue` if you do not need to control the state of an accordion.\n */\n defaultValue?: string[];\n /**\n * Whether or not an accordion is disabled from user interaction.\n */\n disabled?: boolean;\n /**\n * The controlled stateful value of the accordion items whose contents are expanded.\n */\n value?: string[];\n};\n\nexport const AccordionRoot = ({\n 'data-test-id': dataTestId = 'fondue-accordion',\n border = true,\n children,\n defaultValue,\n disabled,\n value,\n}: AccordionRootProps) => {\n return (\n <RadixAccordion.Root\n className={styles.root}\n data-test-id={dataTestId}\n defaultValue={defaultValue}\n disabled={disabled}\n type=\"multiple\"\n value={value}\n data-border={border}\n >\n {children}\n </RadixAccordion.Root>\n );\n};\nAccordionRoot.displayName = 'Accordion.Root';\n\nexport type AccordionItemProps = {\n 'data-test-id'?: string;\n /**\n * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components\n */\n children?: ReactNode;\n /**\n * Whether or not an accordion item is disabled from user interaction.\n *\n * @default false\n */\n disabled?: boolean;\n /**\n * Click callback for this item.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * A string value for the accordion item. All items within an accordion should use a unique value.\n */\n value: string;\n};\n\nexport const AccordionItem = ({\n 'data-test-id': dataTestId = 'fondue-accordion-item',\n children,\n disabled,\n onClick,\n value,\n}: AccordionItemProps) => {\n return (\n <RadixAccordion.Item\n className={styles.accordionItem}\n value={value}\n onPointerDown={(event) => {\n event.currentTarget.dataset.showFocusRing = 'false';\n }}\n onBlur={(event) => {\n event.currentTarget.dataset.showFocusRing = 'true';\n }}\n onClick={onClick}\n disabled={disabled}\n data-test-id={dataTestId}\n >\n {children}\n </RadixAccordion.Item>\n );\n};\nAccordionItem.displayName = 'Accordion.Item';\n\nexport type AccordionHeaderProps = {\n /**\n * Children of the Accordion header. This should contain `Accordion.Trigger`\n */\n children?: ReactNode;\n};\n\nexport const AccordionHeader = ({ children }: AccordionHeaderProps) => {\n return <RadixAccordion.Header>{children}</RadixAccordion.Header>;\n};\nAccordionHeader.displayName = 'Accordion.Header';\n\nexport type AccordionTriggerProps = {\n 'data-test-id'?: string;\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * @default false\n */\n asChild?: boolean;\n /**\n * Children of the Accordion trigger. This contains the actually clickable and visible header content\n */\n children?: ReactNode;\n};\n\nexport const AccordionTrigger = ({\n 'data-test-id': dataTestId = 'fondue-accordion-trigger',\n asChild,\n children,\n}: AccordionTriggerProps) => {\n return (\n <RadixAccordion.Trigger asChild={asChild} className={styles.accordionTrigger} data-test-id={dataTestId}>\n {children}\n <IconCaretDown className={styles.accordionCaret} size=\"16\" />\n </RadixAccordion.Trigger>\n );\n};\nAccordionTrigger.displayName = 'Accordion.Trigger';\n\ntype AccordionContentProps = {\n 'data-test-id'?: string;\n /**\n * Children of the Accordion content. This contains the main content.\n */\n children?: ReactNode;\n /**\n * Adds a divider line between the header and the content.\n */\n divider?: boolean;\n /**\n * Click callback for the content.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Controls if we show paddings around the content.\n * @default 'large'\n */\n padding?: AccordionPadding;\n};\n\nexport const AccordionContent = ({\n 'data-test-id': dataTestId = 'collapsible-wrap',\n children,\n divider = false,\n onClick,\n padding = 'large',\n}: AccordionContentProps) => {\n return (\n <RadixAccordion.Content\n className={styles.accordionContent}\n onClick={onClick}\n data-test-id={dataTestId}\n data-item-padding={padding}\n data-item-divider={divider}\n >\n <div className={styles.accordionContentText} data-test-id={`inner-${dataTestId}`}>\n {children}\n </div>\n </RadixAccordion.Content>\n );\n};\nAccordionContent.displayName = 'Accordion.Content';\n\nexport const Accordion = {\n Root: AccordionRoot,\n Item: AccordionItem,\n Header: AccordionHeader,\n Trigger: AccordionTrigger,\n Content: AccordionContent,\n};\n"],"names":["AccordionRoot","dataTestId","border","children","defaultValue","disabled","value","jsx","RadixAccordion","styles","AccordionItem","onClick","event","AccordionHeader","AccordionTrigger","asChild","jsxs","IconCaretDown","AccordionContent","divider","padding","Accordion"],"mappings":";;;;AAoCO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,gBAAgBC,IAAa;AAAA,EAC7B,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcR;AAAA,IACd,cAAAG;AAAA,IACA,UAAAC;AAAA,IACA,MAAK;AAAA,IACL,OAAAC;AAAA,IACA,eAAaJ;AAAA,IAEZ,UAAAC;AAAA,EAAA;AACL;AAGRH,EAAc,cAAc;AAwBrB,MAAMU,IAAgB,CAAC;AAAA,EAC1B,gBAAgBT,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,UAAAE;AAAA,EACA,SAAAM;AAAA,EACA,OAAAL;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,OAAAH;AAAA,IACA,eAAe,CAACM,MAAU;AAChB,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,QAAQ,CAACA,MAAU;AACT,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,SAAAD;AAAA,IACA,UAAAN;AAAA,IACA,gBAAcJ;AAAA,IAEb,UAAAE;AAAA,EAAA;AACL;AAGRO,EAAc,cAAc;AASrB,MAAMG,IAAkB,CAAC,EAAE,UAAAV,QACtB,gBAAAI,EAAAC,EAAe,QAAf,EAAuB,UAAAL,EAAS,CAAA;AAE5CU,EAAgB,cAAc;AAevB,MAAMC,IAAmB,CAAC;AAAA,EAC7B,gBAAgBb,IAAa;AAAA,EAC7B,SAAAc;AAAA,EACA,UAAAZ;AACJ,MAEQ,gBAAAa,EAACR,EAAe,SAAf,EAAuB,SAAAO,GAAkB,WAAWN,EAAO,kBAAkB,gBAAcR,GACvF,UAAA;AAAA,EAAAE;AAAA,oBACAc,GAAc,EAAA,WAAWR,EAAO,gBAAgB,MAAK,KAAK,CAAA;AAAA,GAC/D;AAGRK,EAAiB,cAAc;AAuBxB,MAAMI,IAAmB,CAAC;AAAA,EAC7B,gBAAgBjB,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,SAAAgB,IAAU;AAAA,EACV,SAAAR;AAAA,EACA,SAAAS,IAAU;AACd,MAEQ,gBAAAb;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,SAAAE;AAAA,IACA,gBAAcV;AAAA,IACd,qBAAmBmB;AAAA,IACnB,qBAAmBD;AAAA,IAEnB,UAAA,gBAAAZ,EAAC,SAAI,WAAWE,EAAO,sBAAsB,gBAAc,SAASR,CAAU,IACzE,UAAAE,EACL,CAAA;AAAA,EAAA;AACJ;AAGRe,EAAiB,cAAc;AAExB,MAAMG,IAAY;AAAA,EACrB,MAAMrB;AAAA,EACN,MAAMU;AAAA,EACN,QAAQG;AAAA,EACR,SAASC;AAAA,EACT,SAASI;AACb;"}
package/dist/fondue-components30.js CHANGED
@@ -1,22 +1,22 @@
1
- const o = "_root_16fsu_2", c = "_accordionItem_16fsu_7", n = "_accordionTrigger_16fsu_13", t = "_accordionCaret_16fsu_30", r = "_accordionContent_16fsu_34", e = "_accordionContentText_16fsu_61", s = "_slideDown_16fsu_1", i = "_slideUp_16fsu_1", _ = {
1
+ const o = "_root_1f8r4_2", c = "_accordionItem_1f8r4_7", n = "_accordionTrigger_1f8r4_13", r = "_accordionCaret_1f8r4_31", t = "_accordionContent_1f8r4_35", e = "_accordionContentText_1f8r4_62", i = "_slideDown_1f8r4_1", _ = "_slideUp_1f8r4_1", d = {
2
2
  root: o,
3
3
  accordionItem: c,
4
4
  accordionTrigger: n,
5
- accordionCaret: t,
6
- accordionContent: r,
5
+ accordionCaret: r,
6
+ accordionContent: t,
7
7
  accordionContentText: e,
8
- slideDown: s,
9
- slideUp: i
8
+ slideDown: i,
9
+ slideUp: _
10
10
  };
11
11
  export {
12
- t as accordionCaret,
13
- r as accordionContent,
12
+ r as accordionCaret,
13
+ t as accordionContent,
14
14
  e as accordionContentText,
15
15
  c as accordionItem,
16
16
  n as accordionTrigger,
17
- _ as default,
17
+ d as default,
18
18
  o as root,
19
- s as slideDown,
20
- i as slideUp
19
+ i as slideDown,
20
+ _ as slideUp
21
21
  };
22
22
  //# sourceMappingURL=fondue-components30.js.map
package/dist/fondue-components45.js CHANGED
@@ -1,18 +1,18 @@
1
- const t = "_content_2dhca_6", e = "_header_2dhca_51", o = "_footer_2dhca_52", n = "_body_2dhca_53", d = "_underlay_2dhca_177", _ = "_sideContent_2dhca_190", c = {
1
+ const t = "_content_1ajv4_6", e = "_header_1ajv4_50", o = "_footer_1ajv4_51", n = "_body_1ajv4_52", _ = "_underlay_1ajv4_176", a = "_sideContent_1ajv4_189", d = {
2
2
  content: t,
3
3
  header: e,
4
4
  footer: o,
5
5
  body: n,
6
- underlay: d,
7
- sideContent: _
6
+ underlay: _,
7
+ sideContent: a
8
8
  };
9
9
  export {
10
10
  n as body,
11
11
  t as content,
12
- c as default,
12
+ d as default,
13
13
  o as footer,
14
14
  e as header,
15
- _ as sideContent,
16
- d as underlay
15
+ a as sideContent,
16
+ _ as underlay
17
17
  };
18
18
  //# sourceMappingURL=fondue-components45.js.map
package/dist/fondue-components55.js CHANGED
@@ -1,4 +1,4 @@
1
- const o = "_root_4gn3w_4", r = "_viewport_4gn3w_12", t = "_scrollbar_4gn3w_34", _ = "_thumb_4gn3w_66", n = "_corner_4gn3w_84", c = {
1
+ const o = "_root_hkznm_4", r = "_viewport_hkznm_12", t = "_scrollbar_hkznm_43", _ = "_thumb_hkznm_75", n = "_corner_hkznm_93", c = {
2
2
  root: o,
3
3
  viewport: r,
4
4
  scrollbar: t,
package/dist/fondue-components63.js CHANGED
@@ -1,36 +1,36 @@
1
- const c = "_root_1m2qz_7", o = "_selectedValue_1m2qz_69", _ = "_input_1m2qz_82", t = "_slot_1m2qz_108", e = "_clear_1m2qz_160", n = "_icons_1m2qz_173", s = "_caret_1m2qz_179", r = "_iconSuccess_1m2qz_207", m = "_iconError_1m2qz_213", a = "_menu_1m2qz_219", l = "_portal_1m2qz_242", u = "_item_1m2qz_258", i = "_checkmarkIcon_1m2qz_299", q = "_itemValue_1m2qz_306", z = "_group_1m2qz_320", p = {
2
- root: c,
3
- selectedValue: o,
1
+ const o = "_root_o7dw5_7", c = "_selectedValue_o7dw5_69", _ = "_input_o7dw5_87", t = "_slot_o7dw5_113", e = "_clear_o7dw5_165", n = "_icons_o7dw5_178", s = "_caret_o7dw5_184", r = "_iconSuccess_o7dw5_212", a = "_iconError_o7dw5_218", l = "_menu_o7dw5_224", d = "_portal_o7dw5_247", u = "_item_o7dw5_263", i = "_checkmarkIcon_o7dw5_304", w = "_itemValue_o7dw5_311", m = "_group_o7dw5_325", p = {
2
+ root: o,
3
+ selectedValue: c,
4
4
  input: _,
5
5
  slot: t,
6
6
  clear: e,
7
7
  icons: n,
8
8
  caret: s,
9
9
  iconSuccess: r,
10
- iconError: m,
11
- menu: a,
12
- portal: l,
10
+ iconError: a,
11
+ menu: l,
12
+ portal: d,
13
13
  item: u,
14
14
  checkmarkIcon: i,
15
- itemValue: q,
16
- group: z
15
+ itemValue: w,
16
+ group: m
17
17
  };
18
18
  export {
19
19
  s as caret,
20
20
  i as checkmarkIcon,
21
21
  e as clear,
22
22
  p as default,
23
- z as group,
24
- m as iconError,
23
+ m as group,
24
+ a as iconError,
25
25
  r as iconSuccess,
26
26
  n as icons,
27
27
  _ as input,
28
28
  u as item,
29
- q as itemValue,
30
- a as menu,
31
- l as portal,
32
- c as root,
33
- o as selectedValue,
29
+ w as itemValue,
30
+ l as menu,
31
+ d as portal,
32
+ o as root,
33
+ c as selectedValue,
34
34
  t as slot
35
35
  };
36
36
  //# sourceMappingURL=fondue-components63.js.map
package/dist/fondue-components64.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components64.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n value: string;\n label: string;\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n * <SelectItem value=\"1\">Option 1</SelectItem>\n * <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (children: ReactNode): { value: string; label: string }[] => {\n const values: { value: string; label: string }[] = [];\n Children.forEach(children, (child) => {\n if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n values.push(getSelectOptionValue(child.props));\n } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n const optionValues = getRecursiveOptionValues(child.props.children);\n for (const optionValue of optionValues) {\n values.push(optionValue);\n }\n }\n });\n return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode) => {\n const [filterText, setFilterText] = useState('');\n const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n const inputSlots: ReactNode[] = [];\n const menuSlots: ReactNode[] = [];\n let clearButton: ReactNode;\n\n const hasSlots = Children.toArray(children).some(\n (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n );\n\n if (hasSlots) {\n Children.forEach(children, (child) => {\n if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n if (child.props.name === 'menu') {\n menuSlots.push(child.props.children);\n } else if (child.props.name === 'left' || child.props.name === 'right') {\n inputSlots.push(child);\n } else if (child.props.name === 'clear') {\n if (child.props.children) {\n clearButton = child;\n } else {\n clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n }\n }\n }\n });\n } else {\n menuSlots.push(children);\n }\n\n const itemValues = getRecursiveOptionValues(menuSlots);\n\n return { inputSlots, menuSlots, itemValues, clearButton };\n }, [children]);\n\n const items = useMemo(\n () =>\n itemValues.filter(\n (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n ),\n [itemValues, filterText],\n );\n\n const getItemByValue = useCallback(\n (value?: string | null) => (value ? itemValues.find((item) => item.value === value) : undefined),\n [itemValues],\n );\n\n return {\n items,\n menuSlots,\n filterText,\n inputSlots,\n clearButton,\n setFilterText,\n getItemByValue,\n };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","items","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AA6Ba,MAAAA,IAA2B,CAACC,MAA4D;AACjG,QAAMC,IAA6C,CAAC;AAC3C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAC3B;AAAA,EACJ,CACH,GACMP;AACX,GAQaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAC,GAC3BC,IAAyB,CAAC;AAC5BE,QAAAA;AAMJ,IAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IACxE,IAGahB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,GAAI;AAAA,IAGnF,CACH,IAEDN,EAAU,KAAKd,CAAQ;AAGrBe,UAAAA,IAAahB,EAAyBe,CAAS;AAE9C,WAAA,EAAE,YAAAD,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY;AAAA,EAAA,GACzD,CAAChB,CAAQ,CAAC,GAEPqB,IAAQJ;AAAA,IACV,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,cAAc,SAASZ,EAAW,YAAa,CAAA;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAC3B,GAEMa,IAAiBC;AAAA,IACnB,CAACC,MAA2BA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IACtF,CAACV,CAAU;AAAA,EACf;AAEO,SAAA;AAAA,IACH,OAAAM;AAAA,IACA,WAAAP;AAAA,IACA,YAAAJ;AAAA,IACA,YAAAG;AAAA,IACA,aAAAG;AAAA,IACA,eAAAL;AAAA,IACA,gBAAAY;AAAA,EACJ;AACJ;"}
1
+ {"version":3,"file":"fondue-components64.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n value: string;\n label: string;\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n * <SelectItem value=\"1\">Option 1</SelectItem>\n * <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (\n children: ReactNode,\n): { value: string; label: string; children?: ReactNode }[] => {\n const values: { value: string; label: string }[] = [];\n Children.forEach(children, (child) => {\n if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n values.push(getSelectOptionValue(child.props));\n } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n const optionValues = getRecursiveOptionValues(child.props.children);\n for (const optionValue of optionValues) {\n values.push(optionValue);\n }\n }\n });\n return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode) => {\n const [filterText, setFilterText] = useState('');\n const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n const inputSlots: ReactNode[] = [];\n const menuSlots: ReactNode[] = [];\n let clearButton: ReactNode;\n\n const hasSlots = Children.toArray(children).some(\n (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n );\n\n if (hasSlots) {\n Children.forEach(children, (child) => {\n if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n if (child.props.name === 'menu') {\n menuSlots.push(child.props.children);\n } else if (child.props.name === 'left' || child.props.name === 'right') {\n inputSlots.push(child);\n } else if (child.props.name === 'clear') {\n if (child.props.children) {\n clearButton = child;\n } else {\n clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n }\n }\n }\n });\n } else {\n menuSlots.push(children);\n }\n\n const itemValues = getRecursiveOptionValues(menuSlots);\n\n return { inputSlots, menuSlots, itemValues, clearButton };\n }, [children]);\n\n const items = useMemo(\n () =>\n itemValues.filter(\n (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n ),\n [itemValues, filterText],\n );\n\n const getItemByValue = useCallback(\n (value?: string | null) => (value ? itemValues.find((item) => item.value === value) : undefined),\n [itemValues],\n );\n\n return {\n items,\n menuSlots,\n filterText,\n inputSlots,\n clearButton,\n setFilterText,\n getItemByValue,\n };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","items","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AA6Ba,MAAAA,IAA2B,CACpCC,MAC2D;AAC3D,QAAMC,IAA6C,CAAC;AAC3C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAC3B;AAAA,EACJ,CACH,GACMP;AACX,GAQaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAC,GAC3BC,IAAyB,CAAC;AAC5BE,QAAAA;AAMJ,IAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IACxE,IAGahB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,GAAI;AAAA,IAGnF,CACH,IAEDN,EAAU,KAAKd,CAAQ;AAGrBe,UAAAA,IAAahB,EAAyBe,CAAS;AAE9C,WAAA,EAAE,YAAAD,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY;AAAA,EAAA,GACzD,CAAChB,CAAQ,CAAC,GAEPqB,IAAQJ;AAAA,IACV,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,cAAc,SAASZ,EAAW,YAAa,CAAA;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAC3B,GAEMa,IAAiBC;AAAA,IACnB,CAACC,MAA2BA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IACtF,CAACV,CAAU;AAAA,EACf;AAEO,SAAA;AAAA,IACH,OAAAM;AAAA,IACA,WAAAP;AAAA,IACA,YAAAJ;AAAA,IACA,YAAAG;AAAA,IACA,aAAAG;AAAA,IACA,eAAAL;AAAA,IACA,gBAAAY;AAAA,EACJ;AACJ;"}