@frontify/fondue-components 27.0.1 → 28.0.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 (254) hide show
  1. package/dist/fondue-components.js +55 -53
  2. package/dist/fondue-components.js.map +1 -1
  3. package/dist/fondue-components10.js +1 -1
  4. package/dist/fondue-components100.js +17 -6
  5. package/dist/fondue-components100.js.map +1 -1
  6. package/dist/fondue-components101.js +150 -11
  7. package/dist/fondue-components101.js.map +1 -1
  8. package/dist/fondue-components102.js +44 -70
  9. package/dist/fondue-components102.js.map +1 -1
  10. package/dist/fondue-components103.js +14 -15
  11. package/dist/fondue-components103.js.map +1 -1
  12. package/dist/fondue-components104.js +15 -7
  13. package/dist/fondue-components104.js.map +1 -1
  14. package/dist/fondue-components105.js +107 -85
  15. package/dist/fondue-components105.js.map +1 -1
  16. package/dist/fondue-components106.js +11 -79
  17. package/dist/fondue-components106.js.map +1 -1
  18. package/dist/fondue-components107.js +17 -31
  19. package/dist/fondue-components107.js.map +1 -1
  20. package/dist/fondue-components108.js +11 -19
  21. package/dist/fondue-components108.js.map +1 -1
  22. package/dist/fondue-components109.js +16 -39
  23. package/dist/fondue-components109.js.map +1 -1
  24. package/dist/fondue-components11.js +3 -3
  25. package/dist/fondue-components110.js +9 -0
  26. package/dist/fondue-components110.js.map +1 -0
  27. package/dist/fondue-components111.js +15 -0
  28. package/dist/fondue-components111.js.map +1 -0
  29. package/dist/fondue-components112.js +74 -0
  30. package/dist/fondue-components112.js.map +1 -0
  31. package/dist/fondue-components113.js +18 -0
  32. package/dist/fondue-components113.js.map +1 -0
  33. package/dist/fondue-components114.js +10 -0
  34. package/dist/fondue-components114.js.map +1 -0
  35. package/dist/fondue-components115.js +92 -0
  36. package/dist/fondue-components115.js.map +1 -0
  37. package/dist/fondue-components116.js +84 -0
  38. package/dist/fondue-components116.js.map +1 -0
  39. package/dist/fondue-components117.js +34 -0
  40. package/dist/fondue-components117.js.map +1 -0
  41. package/dist/fondue-components118.js +32 -0
  42. package/dist/fondue-components118.js.map +1 -0
  43. package/dist/fondue-components12.js +7 -37
  44. package/dist/fondue-components12.js.map +1 -1
  45. package/dist/fondue-components120.js +44 -0
  46. package/dist/fondue-components120.js.map +1 -0
  47. package/dist/fondue-components121.js +22 -0
  48. package/dist/fondue-components121.js.map +1 -0
  49. package/dist/fondue-components122.js +24 -0
  50. package/dist/fondue-components122.js.map +1 -0
  51. package/dist/fondue-components123.js +43 -0
  52. package/dist/fondue-components123.js.map +1 -0
  53. package/dist/fondue-components124.js +71 -0
  54. package/dist/fondue-components124.js.map +1 -0
  55. package/dist/fondue-components125.js +34 -0
  56. package/dist/fondue-components125.js.map +1 -0
  57. package/dist/fondue-components126.js +12 -0
  58. package/dist/fondue-components126.js.map +1 -0
  59. package/dist/fondue-components127.js +156 -0
  60. package/dist/fondue-components127.js.map +1 -0
  61. package/dist/fondue-components128.js +111 -0
  62. package/dist/fondue-components128.js.map +1 -0
  63. package/dist/fondue-components129.js +19 -0
  64. package/dist/fondue-components129.js.map +1 -0
  65. package/dist/fondue-components13.js +36 -121
  66. package/dist/fondue-components13.js.map +1 -1
  67. package/dist/fondue-components130.js +19 -0
  68. package/dist/fondue-components130.js.map +1 -0
  69. package/dist/fondue-components131.js +32 -0
  70. package/dist/fondue-components131.js.map +1 -0
  71. package/dist/fondue-components132.js +16 -0
  72. package/dist/fondue-components132.js.map +1 -0
  73. package/dist/fondue-components133.js +10 -0
  74. package/dist/fondue-components133.js.map +1 -0
  75. package/dist/fondue-components14.js +121 -36
  76. package/dist/fondue-components14.js.map +1 -1
  77. package/dist/fondue-components15.js +30 -39
  78. package/dist/fondue-components15.js.map +1 -1
  79. package/dist/fondue-components16.js +44 -41
  80. package/dist/fondue-components16.js.map +1 -1
  81. package/dist/fondue-components17.js +42 -57
  82. package/dist/fondue-components17.js.map +1 -1
  83. package/dist/fondue-components18.js +55 -41
  84. package/dist/fondue-components18.js.map +1 -1
  85. package/dist/fondue-components19.js +39 -16
  86. package/dist/fondue-components19.js.map +1 -1
  87. package/dist/fondue-components20.js +17 -43
  88. package/dist/fondue-components20.js.map +1 -1
  89. package/dist/fondue-components21.js +42 -69
  90. package/dist/fondue-components21.js.map +1 -1
  91. package/dist/fondue-components22.js +72 -16
  92. package/dist/fondue-components22.js.map +1 -1
  93. package/dist/fondue-components23.js +18 -77
  94. package/dist/fondue-components23.js.map +1 -1
  95. package/dist/fondue-components24.js +75 -34
  96. package/dist/fondue-components24.js.map +1 -1
  97. package/dist/fondue-components25.js +34 -53
  98. package/dist/fondue-components25.js.map +1 -1
  99. package/dist/fondue-components26.js +55 -23
  100. package/dist/fondue-components26.js.map +1 -1
  101. package/dist/fondue-components27.js +23 -55
  102. package/dist/fondue-components27.js.map +1 -1
  103. package/dist/fondue-components28.js +52 -97
  104. package/dist/fondue-components28.js.map +1 -1
  105. package/dist/fondue-components29.js +98 -31
  106. package/dist/fondue-components29.js.map +1 -1
  107. package/dist/fondue-components3.js +1 -1
  108. package/dist/fondue-components30.js +31 -194
  109. package/dist/fondue-components30.js.map +1 -1
  110. package/dist/fondue-components31.js +184 -134
  111. package/dist/fondue-components31.js.map +1 -1
  112. package/dist/fondue-components32.js +143 -130
  113. package/dist/fondue-components32.js.map +1 -1
  114. package/dist/fondue-components33.js +131 -30
  115. package/dist/fondue-components33.js.map +1 -1
  116. package/dist/fondue-components34.js +29 -78
  117. package/dist/fondue-components34.js.map +1 -1
  118. package/dist/fondue-components35.js +67 -110
  119. package/dist/fondue-components35.js.map +1 -1
  120. package/dist/fondue-components36.js +121 -34
  121. package/dist/fondue-components36.js.map +1 -1
  122. package/dist/fondue-components37.js +36 -56
  123. package/dist/fondue-components37.js.map +1 -1
  124. package/dist/fondue-components38.js +56 -20
  125. package/dist/fondue-components38.js.map +1 -1
  126. package/dist/fondue-components39.js +20 -23
  127. package/dist/fondue-components39.js.map +1 -1
  128. package/dist/fondue-components4.js +3 -3
  129. package/dist/fondue-components40.js +25 -7
  130. package/dist/fondue-components40.js.map +1 -1
  131. package/dist/fondue-components41.js +7 -8
  132. package/dist/fondue-components41.js.map +1 -1
  133. package/dist/fondue-components42.js +9 -41
  134. package/dist/fondue-components42.js.map +1 -1
  135. package/dist/fondue-components43.js +41 -5
  136. package/dist/fondue-components43.js.map +1 -1
  137. package/dist/fondue-components44.js +1 -1
  138. package/dist/fondue-components45.js +3 -11
  139. package/dist/fondue-components45.js.map +1 -1
  140. package/dist/fondue-components46.js +13 -32
  141. package/dist/fondue-components46.js.map +1 -1
  142. package/dist/fondue-components47.js +32 -54
  143. package/dist/fondue-components47.js.map +1 -1
  144. package/dist/fondue-components48.js +48 -125
  145. package/dist/fondue-components48.js.map +1 -1
  146. package/dist/fondue-components49.js +130 -20
  147. package/dist/fondue-components49.js.map +1 -1
  148. package/dist/fondue-components5.js +2 -2
  149. package/dist/fondue-components50.js +21 -53
  150. package/dist/fondue-components50.js.map +1 -1
  151. package/dist/fondue-components51.js +53 -8
  152. package/dist/fondue-components51.js.map +1 -1
  153. package/dist/fondue-components52.js +8 -13
  154. package/dist/fondue-components52.js.map +1 -1
  155. package/dist/fondue-components53.js +13 -17
  156. package/dist/fondue-components53.js.map +1 -1
  157. package/dist/fondue-components54.js +16 -4
  158. package/dist/fondue-components54.js.map +1 -1
  159. package/dist/fondue-components55.js +5 -18
  160. package/dist/fondue-components55.js.map +1 -1
  161. package/dist/fondue-components56.js +18 -19
  162. package/dist/fondue-components56.js.map +1 -1
  163. package/dist/fondue-components57.js +18 -4
  164. package/dist/fondue-components57.js.map +1 -1
  165. package/dist/fondue-components58.js +43 -12
  166. package/dist/fondue-components58.js.map +1 -1
  167. package/dist/fondue-components59.js +24 -4
  168. package/dist/fondue-components59.js.map +1 -1
  169. package/dist/fondue-components6.js +1 -1
  170. package/dist/fondue-components60.js +22 -17
  171. package/dist/fondue-components60.js.map +1 -1
  172. package/dist/fondue-components61.js +4 -10
  173. package/dist/fondue-components61.js.map +1 -1
  174. package/dist/fondue-components62.js +11 -35
  175. package/dist/fondue-components62.js.map +1 -1
  176. package/dist/fondue-components63.js +4 -6
  177. package/dist/fondue-components63.js.map +1 -1
  178. package/dist/fondue-components64.js +17 -4
  179. package/dist/fondue-components64.js.map +1 -1
  180. package/dist/fondue-components65.js +10 -12
  181. package/dist/fondue-components65.js.map +1 -1
  182. package/dist/fondue-components66.js +35 -7
  183. package/dist/fondue-components66.js.map +1 -1
  184. package/dist/fondue-components67.js +6 -12
  185. package/dist/fondue-components67.js.map +1 -1
  186. package/dist/fondue-components68.js +1 -1
  187. package/dist/fondue-components69.js +12 -24
  188. package/dist/fondue-components69.js.map +1 -1
  189. package/dist/fondue-components7.js +1 -1
  190. package/dist/fondue-components70.js +8 -16
  191. package/dist/fondue-components70.js.map +1 -1
  192. package/dist/fondue-components71.js +13 -20
  193. package/dist/fondue-components71.js.map +1 -1
  194. package/dist/fondue-components72.js +5 -20
  195. package/dist/fondue-components72.js.map +1 -1
  196. package/dist/fondue-components73.js +24 -19
  197. package/dist/fondue-components73.js.map +1 -1
  198. package/dist/fondue-components74.js +17 -20
  199. package/dist/fondue-components74.js.map +1 -1
  200. package/dist/fondue-components75.js +20 -19
  201. package/dist/fondue-components75.js.map +1 -1
  202. package/dist/fondue-components76.js +20 -8
  203. package/dist/fondue-components76.js.map +1 -1
  204. package/dist/fondue-components77.js +20 -11
  205. package/dist/fondue-components77.js.map +1 -1
  206. package/dist/fondue-components78.js +20 -11
  207. package/dist/fondue-components78.js.map +1 -1
  208. package/dist/fondue-components79.js +19 -7
  209. package/dist/fondue-components79.js.map +1 -1
  210. package/dist/fondue-components8.js +5 -5
  211. package/dist/fondue-components80.js +8 -13
  212. package/dist/fondue-components80.js.map +1 -1
  213. package/dist/fondue-components81.js +10 -22
  214. package/dist/fondue-components81.js.map +1 -1
  215. package/dist/fondue-components82.js +11 -34
  216. package/dist/fondue-components82.js.map +1 -1
  217. package/dist/fondue-components83.js +6 -10
  218. package/dist/fondue-components83.js.map +1 -1
  219. package/dist/fondue-components84.js +12 -67
  220. package/dist/fondue-components84.js.map +1 -1
  221. package/dist/fondue-components85.js +22 -14
  222. package/dist/fondue-components85.js.map +1 -1
  223. package/dist/fondue-components86.js +34 -25
  224. package/dist/fondue-components86.js.map +1 -1
  225. package/dist/fondue-components87.js +8 -16
  226. package/dist/fondue-components87.js.map +1 -1
  227. package/dist/fondue-components88.js +67 -24
  228. package/dist/fondue-components88.js.map +1 -1
  229. package/dist/fondue-components89.js +14 -8
  230. package/dist/fondue-components89.js.map +1 -1
  231. package/dist/fondue-components9.js +5 -5
  232. package/dist/fondue-components90.js +24 -25
  233. package/dist/fondue-components90.js.map +1 -1
  234. package/dist/fondue-components91.js +18 -6
  235. package/dist/fondue-components91.js.map +1 -1
  236. package/dist/fondue-components92.js +24 -4
  237. package/dist/fondue-components92.js.map +1 -1
  238. package/dist/fondue-components93.js +8 -4
  239. package/dist/fondue-components93.js.map +1 -1
  240. package/dist/fondue-components94.js +30 -16
  241. package/dist/fondue-components94.js.map +1 -1
  242. package/dist/fondue-components95.js +6 -216
  243. package/dist/fondue-components95.js.map +1 -1
  244. package/dist/fondue-components96.js +4 -18
  245. package/dist/fondue-components96.js.map +1 -1
  246. package/dist/fondue-components97.js +4 -16
  247. package/dist/fondue-components97.js.map +1 -1
  248. package/dist/fondue-components98.js +188 -122
  249. package/dist/fondue-components98.js.map +1 -1
  250. package/dist/fondue-components99.js +18 -44
  251. package/dist/fondue-components99.js.map +1 -1
  252. package/dist/index.d.ts +101 -24
  253. package/dist/style.css +1 -1
  254. package/package.json +5 -3
@@ -2,9 +2,9 @@ import { jsx as d, jsxs as C } from "react/jsx-runtime";
2
2
  import { IconCaretRight as _ } from "@frontify/fondue-icons";
3
3
  import * as a from "@radix-ui/react-dropdown-menu";
4
4
  import { forwardRef as i, useRef as R, useMemo as j, Children as B } from "react";
5
- import { useFondueTheme as F, ThemeProvider as I } from "./fondue-components36.js";
6
- import { useProcessedChildren as T } from "./fondue-components55.js";
7
- import u from "./fondue-components56.js";
5
+ import { useFondueTheme as F, ThemeProvider as I } from "./fondue-components37.js";
6
+ import { useProcessedChildren as T } from "./fondue-components56.js";
7
+ import u from "./fondue-components57.js";
8
8
  const y = ({
9
9
  children: t,
10
10
  open: o,
@@ -0,0 +1,9 @@
1
+ import { useMemo as t } from "react";
2
+ const m = (n, s) => t(() => n.map((r) => {
3
+ const o = s(r), p = (o == null ? void 0 : o.label) ?? r;
4
+ return { value: r, displayValue: p };
5
+ }), [n, s]);
6
+ export {
7
+ m as useBadgeItems
8
+ };
9
+ //# sourceMappingURL=fondue-components110.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components110.js","sources":["../src/components/Select/hooks/useBadgeItems.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemo } from 'react';\n\ntype SelectItemLike = {\n value: string;\n label: string;\n};\n\ntype BadgeItem = {\n value: string;\n displayValue: string;\n};\n\nexport const useBadgeItems = (\n selectedItemValues: string[],\n getItemByValue: (value?: string) => SelectItemLike | undefined,\n): BadgeItem[] => {\n return useMemo(() => {\n return selectedItemValues.map((value) => {\n const item = getItemByValue(value);\n const displayValue = item?.label ?? value;\n return { value, displayValue };\n });\n }, [selectedItemValues, getItemByValue]);\n};\n"],"names":["useBadgeItems","selectedItemValues","getItemByValue","useMemo","value","item","displayValue"],"mappings":";AAcO,MAAMA,IAAgB,CACzBC,GACAC,MAEOC,EAAQ,MACJF,EAAmB,IAAI,CAACG,MAAU;AACrC,QAAMC,IAAOH,EAAeE,CAAK,GAC3BE,KAAeD,KAAA,gBAAAA,EAAM,UAASD;AACpC,SAAO,EAAE,OAAAA,GAAO,cAAAE,EAAA;AACpB,CAAC,GACF,CAACL,GAAoBC,CAAc,CAAC;"}
@@ -0,0 +1,15 @@
1
+ import { useRef as u, useCallback as t } from "react";
2
+ const c = () => {
3
+ const s = u(!1), o = t((e) => {
4
+ s.current = !0, e.currentTarget.dataset.showFocusRing = "false";
5
+ }, []), r = t((e) => {
6
+ s.current || (e.target.dataset.showFocusRing = "true");
7
+ }, []), n = t((e) => {
8
+ e.target.dataset.showFocusRing = "false", s.current = !1;
9
+ }, []);
10
+ return { wasClickedRef: s, onMouseDown: o, onFocus: r, onBlur: n };
11
+ };
12
+ export {
13
+ c as useFocusRing
14
+ };
15
+ //# sourceMappingURL=fondue-components111.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components111.js","sources":["../src/components/Select/hooks/useFocusRing.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useRef, type FocusEvent, type MouseEvent, type MutableRefObject } from 'react';\n\ntype FocusRingHandlers = {\n /** Ref tracking whether the element was activated via mouse click. */\n wasClickedRef: MutableRefObject<boolean>;\n /** Handler for mousedown events — marks the interaction as click-based. */\n onMouseDown: (event: MouseEvent<HTMLElement>) => void;\n /** Handler for focus events — shows the focus ring only for keyboard navigation. */\n onFocus: (event: FocusEvent<HTMLElement>) => void;\n /** Handler for blur events — hides the focus ring and resets click tracking. */\n onBlur: (event: FocusEvent<HTMLElement>) => void;\n};\n\nexport const useFocusRing = (): FocusRingHandlers => {\n const wasClickedRef = useRef(false);\n\n const onMouseDown = useCallback((event: MouseEvent<HTMLElement>): void => {\n wasClickedRef.current = true;\n event.currentTarget.dataset.showFocusRing = 'false';\n }, []);\n\n const onFocus = useCallback((event: FocusEvent<HTMLElement>): void => {\n if (!wasClickedRef.current) {\n event.target.dataset.showFocusRing = 'true';\n }\n }, []);\n\n const onBlur = useCallback((event: FocusEvent<HTMLElement>): void => {\n event.target.dataset.showFocusRing = 'false';\n wasClickedRef.current = false;\n }, []);\n\n return { wasClickedRef, onMouseDown, onFocus, onBlur };\n};\n"],"names":["useFocusRing","wasClickedRef","useRef","onMouseDown","useCallback","event","onFocus","onBlur"],"mappings":";AAeO,MAAMA,IAAe,MAAyB;AACjD,QAAMC,IAAgBC,EAAO,EAAK,GAE5BC,IAAcC,EAAY,CAACC,MAAyC;AACtE,IAAAJ,EAAc,UAAU,IACxBI,EAAM,cAAc,QAAQ,gBAAgB;AAAA,EAChD,GAAG,CAAA,CAAE,GAECC,IAAUF,EAAY,CAACC,MAAyC;AAClE,IAAKJ,EAAc,YACfI,EAAM,OAAO,QAAQ,gBAAgB;AAAA,EAE7C,GAAG,CAAA,CAAE,GAECE,IAASH,EAAY,CAACC,MAAyC;AACjE,IAAAA,EAAM,OAAO,QAAQ,gBAAgB,SACrCJ,EAAc,UAAU;AAAA,EAC5B,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,eAAAA,GAAe,aAAAE,GAAa,SAAAG,GAAS,QAAAC,EAAA;AAClD;"}
@@ -0,0 +1,74 @@
1
+ import { jsx as E } from "react/jsx-runtime";
2
+ import { useState as S, useMemo as b, Children as V, isValidElement as C, cloneElement as w, useCallback as B, useEffect as x } from "react";
3
+ import { SelectClear as F } from "./fondue-components122.js";
4
+ import { ForwardedRefSelectItem as L } from "./fondue-components79.js";
5
+ import { ForwardedRefSelectSlot as y } from "./fondue-components80.js";
6
+ import { getSelectOptionValue as I } from "./fondue-components123.js";
7
+ const d = (n, s) => {
8
+ const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
9
+ menuComponents: [],
10
+ items: []
11
+ });
12
+ return x(() => {
13
+ i(null), s || f({
14
+ menuComponents: [],
15
+ items: []
16
+ }), s && (r(!0), s(n).then((u) => {
17
+ f({
18
+ menuComponents: u.map((o) => /* @__PURE__ */ E(L, { label: o.label, value: o.value, children: o.content ? o.content : o.label }, o.value)),
19
+ items: u.map((o) => ({ value: o.value, label: o.label, children: o.content }))
20
+ }), r(!1);
21
+ }).catch((u) => {
22
+ i(u), r(!1);
23
+ }));
24
+ }, [n, s]), { isLoading: e, error: m, menuComponents: l.menuComponents, items: l.items };
25
+ }, g = (n) => {
26
+ const s = [];
27
+ return V.forEach(n, (e) => {
28
+ if (C(e) && e.type === L)
29
+ s.push(I(e.props));
30
+ else if (C(e) && e.props.children) {
31
+ const r = g(e.props.children);
32
+ for (const m of r)
33
+ s.push(m);
34
+ }
35
+ }), s;
36
+ }, q = (n, s) => {
37
+ const [e, r] = S(""), { inputSlots: m, menuSlots: i, itemValues: l, clearButton: f } = b(() => {
38
+ const a = [], p = [];
39
+ let v;
40
+ V.toArray(n).some(
41
+ (t) => C(t) && t.type === y
42
+ ) ? V.forEach(n, (t) => {
43
+ C(t) && t.type === y && (t.props.name === "menu" ? p.push(t.props.children) : t.props.name === "left" || t.props.name === "right" ? a.push(t) : t.props.name === "clear" && (t.props.children ? v = t : v = w(t, { children: /* @__PURE__ */ E(F, {}) })));
44
+ }) : p.push(n);
45
+ const R = g(p);
46
+ return { inputSlots: a, menuSlots: p, itemValues: R, clearButton: v };
47
+ }, [n]), u = b(
48
+ () => l.filter(
49
+ (a) => e === "" || a.label.toLowerCase().includes(e.toLowerCase())
50
+ ),
51
+ [l, e]
52
+ ), o = B(
53
+ (a) => a !== void 0 ? l.find((p) => p.value === a) : void 0,
54
+ [l]
55
+ ), c = d(e, s);
56
+ return {
57
+ items: [...u, ...c.items],
58
+ menuSlots: [...i, ...c.menuComponents],
59
+ filterText: e,
60
+ inputSlots: m,
61
+ clearButton: f,
62
+ setFilterText: r,
63
+ getItemByValue: o,
64
+ asyncItemStatus: {
65
+ isLoading: c.isLoading,
66
+ error: c.error
67
+ }
68
+ };
69
+ };
70
+ export {
71
+ g as getRecursiveOptionValues,
72
+ q as useSelectData
73
+ };
74
+ //# sourceMappingURL=fondue-components112.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components112.js","sources":["../src/components/Select/hooks/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\n\nimport { SelectClear } from '../components/SelectClear';\nimport { ForwardedRefSelectItem, type SelectItemProps } from '../components/SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from '../components/SelectSlot';\nimport { getSelectOptionValue } from '../utils';\n\nexport type SelectItemType = {\n value: string;\n label: string;\n};\n\nexport type AsyncItem = { label: string; value: string; content?: ReactNode };\n\nexport type AsyncItemsFetcher = (filterText: string) => Promise<AsyncItem[]>;\n\nconst useAsyncItems = (filterText: string, getAsyncItems?: AsyncItemsFetcher) => {\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n const [asyncResult, setAsyncResult] = useState<{\n menuComponents: ReactNode[];\n items: { value: string; label: string; children?: ReactNode }[];\n }>({\n menuComponents: [],\n items: [],\n });\n\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setError(null);\n if (!getAsyncItems) {\n setAsyncResult({\n menuComponents: [],\n items: [],\n });\n }\n\n if (getAsyncItems) {\n setIsLoading(true);\n getAsyncItems(filterText)\n .then((items) => {\n setAsyncResult({\n menuComponents: items.map((item) => (\n <ForwardedRefSelectItem key={item.value} label={item.label} value={item.value}>\n {item.content ? item.content : item.label}\n </ForwardedRefSelectItem>\n )),\n items: items.map((item) => ({ value: item.value, label: item.label, children: item.content })),\n });\n setIsLoading(false);\n })\n .catch((error: Error) => {\n setError(error);\n setIsLoading(false);\n });\n }\n }, [filterText, getAsyncItems]);\n\n return { isLoading, error, menuComponents: asyncResult.menuComponents, items: asyncResult.items };\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 * @param {AsyncItemsFetcher} [getAsyncItems] - Optional function to fetch items asynchronously based on filter text.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode, getAsyncItems?: AsyncItemsFetcher) => {\n const [filterText, setFilterText] = useState('');\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\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: <SelectClear /> });\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 !== undefined ? itemValues.find((item) => item.value === value) : undefined),\n [itemValues],\n );\n\n const asyncItems = useAsyncItems(filterText, getAsyncItems);\n\n return {\n items: [...items, ...asyncItems.items],\n menuSlots: [...menuSlots, ...asyncItems.menuComponents],\n filterText,\n inputSlots,\n clearButton,\n setFilterText,\n getItemByValue,\n asyncItemStatus: {\n isLoading: asyncItems.isLoading,\n error: asyncItems.error,\n },\n };\n};\n"],"names":["useAsyncItems","filterText","getAsyncItems","isLoading","setIsLoading","useState","error","setError","asyncResult","setAsyncResult","useEffect","items","item","jsx","ForwardedRefSelectItem","getRecursiveOptionValues","children","values","Children","child","isValidElement","getSelectOptionValue","optionValues","optionValue","useSelectData","setFilterText","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","SelectClear","getItemByValue","useCallback","value","asyncItems"],"mappings":"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"}
@@ -0,0 +1,18 @@
1
+ import { useId as u, useMemo as f } from "react";
2
+ import { useTranslation as D } from "./fondue-components40.js";
3
+ const g = (t, n, r) => {
4
+ const { t: i } = D(), s = u(), e = f(() => {
5
+ if (!t || n.length === 0)
6
+ return "";
7
+ const p = n.map((c) => {
8
+ const o = r(c);
9
+ return (o == null ? void 0 : o.label) ?? c;
10
+ }).join(", ");
11
+ return i("Select_selectedCount", { count: n.length.toString(), items: p });
12
+ }, [t, n, r, i]);
13
+ return { selectionDescriptionId: s, selectionDescription: e };
14
+ };
15
+ export {
16
+ g as useSelectionDescription
17
+ };
18
+ //# sourceMappingURL=fondue-components113.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components113.js","sources":["../src/components/Select/hooks/useSelectionDescription.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId, useMemo } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\ntype SelectItemLike = {\n value: string;\n label: string;\n};\n\ntype SelectionDescription = {\n /** The unique ID for the SR description element. */\n selectionDescriptionId: string;\n /** The description text for screen readers (empty string when not applicable). */\n selectionDescription: string;\n};\n\nexport const useSelectionDescription = (\n isMultiple: boolean,\n selectedItemValues: string[],\n getItemByValue: (value?: string) => SelectItemLike | undefined,\n): SelectionDescription => {\n const { t } = useTranslation();\n const selectionDescriptionId = useId();\n\n const selectionDescription = useMemo((): string => {\n if (!isMultiple || selectedItemValues.length === 0) {\n return '';\n }\n const labels = selectedItemValues\n .map((value) => {\n const item = getItemByValue(value);\n return item?.label ?? value;\n })\n .join(', ');\n return t('Select_selectedCount', { count: selectedItemValues.length.toString(), items: labels });\n }, [isMultiple, selectedItemValues, getItemByValue, t]);\n\n return { selectionDescriptionId, selectionDescription };\n};\n"],"names":["useSelectionDescription","isMultiple","selectedItemValues","getItemByValue","t","useTranslation","selectionDescriptionId","useId","selectionDescription","useMemo","labels","value","item"],"mappings":";;AAkBO,MAAMA,IAA0B,CACnCC,GACAC,GACAC,MACuB;AACvB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAyBC,EAAA,GAEzBC,IAAuBC,EAAQ,MAAc;AAC/C,QAAI,CAACR,KAAcC,EAAmB,WAAW;AAC7C,aAAO;AAEX,UAAMQ,IAASR,EACV,IAAI,CAACS,MAAU;AACZ,YAAMC,IAAOT,EAAeQ,CAAK;AACjC,cAAOC,KAAA,gBAAAA,EAAM,UAASD;AAAA,IAC1B,CAAC,EACA,KAAK,IAAI;AACd,WAAOP,EAAE,wBAAwB,EAAE,OAAOF,EAAmB,OAAO,SAAA,GAAY,OAAOQ,GAAQ;AAAA,EACnG,GAAG,CAACT,GAAYC,GAAoBC,GAAgBC,CAAC,CAAC;AAEtD,SAAO,EAAE,wBAAAE,GAAwB,sBAAAE,EAAA;AACrC;"}
@@ -0,0 +1,10 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { Slot as e } from "@radix-ui/react-slot";
3
+ import a from "./fondue-components102.js";
4
+ const m = ({ children: o, onClear: t }) => /* @__PURE__ */ r(e, { onClick: (l) => {
5
+ l.stopPropagation(), t();
6
+ }, className: a.clear, role: "button", "aria-label": "Clear selection", children: o });
7
+ export {
8
+ m as ClearButton
9
+ };
10
+ //# sourceMappingURL=fondue-components114.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components114.js","sources":["../src/components/Select/components/ClearButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\ntype ClearButtonProps = {\n /** The clear button element to render inside the slot. */\n children: ReactNode;\n /** Callback fired when the clear button is clicked. */\n onClear: () => void;\n};\n\nexport const ClearButton = ({ children, onClear }: ClearButtonProps): ReactNode => {\n const handleClick = (event: MouseEvent): void => {\n event.stopPropagation();\n onClear();\n };\n\n return (\n <RadixSlot onClick={handleClick} className={styles.clear} role=\"button\" aria-label=\"Clear selection\">\n {children}\n </RadixSlot>\n );\n};\n"],"names":["ClearButton","children","onClear","jsx","RadixSlot","event","styles"],"mappings":";;;AAcO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAOhC,gBAAAC,EAACC,GAAA,EAAU,SANK,CAACC,MAA4B;AAC7C,EAAAA,EAAM,gBAAA,GACNH,EAAA;AACJ,GAGqC,WAAWI,EAAO,OAAO,MAAK,UAAS,cAAW,mBAC9E,UAAAL,EAAA,CACL;"}
@@ -0,0 +1,92 @@
1
+ import { jsxs as S, jsx as f } from "react/jsx-runtime";
2
+ import { useRef as m, useState as C, useEffect as _ } from "react";
3
+ import { Badge as w } from "./fondue-components4.js";
4
+ import { useTranslation as I } from "./fondue-components40.js";
5
+ import p from "./fondue-components102.js";
6
+ const W = 4, D = 40, E = 24, M = (r, h, u, o) => {
7
+ const g = r.offsetWidth;
8
+ let s = o ? E + W : 0, n = 0;
9
+ for (const d of u) {
10
+ const a = h.get(d.value);
11
+ if (!a)
12
+ continue;
13
+ const l = a.offsetWidth, i = n > 0 ? l + W : l, c = u.length - n - 1 > 0 ? D + W : 0;
14
+ if (s + i + c > g)
15
+ break;
16
+ s += i, n++;
17
+ }
18
+ return Math.max(1, n);
19
+ }, x = ({
20
+ items: r,
21
+ placeholder: h,
22
+ onDismiss: u,
23
+ children: o,
24
+ selectedCount: g = 0
25
+ }) => {
26
+ const { t: s } = I(), n = m(!1), d = m(null), a = m(/* @__PURE__ */ new Map()), [l, i] = C(r.length), b = o !== void 0;
27
+ if (_(() => {
28
+ const e = d.current;
29
+ if (!e)
30
+ return;
31
+ const v = () => {
32
+ if (r.length === 0) {
33
+ i(0);
34
+ return;
35
+ }
36
+ i(M(e, a.current, r, b));
37
+ }, t = new ResizeObserver(v);
38
+ return t.observe(e), () => {
39
+ t.disconnect();
40
+ };
41
+ }, [r, b]), r.length === 0 && !o)
42
+ return h;
43
+ const c = r.length - l, y = (e) => e === 1 ? s("Select_singleItemSelected") : e > 1 ? s("Select_multipleItemsSelected", { count: e.toString() }) : "";
44
+ return /* @__PURE__ */ S("div", { ref: d, className: p.badgesContainer, children: [
45
+ /* @__PURE__ */ f("span", { className: p.srOnly, "aria-live": "polite", "aria-atomic": "true", children: y(g) }),
46
+ o,
47
+ r.map((e, v) => /* @__PURE__ */ f(
48
+ "div",
49
+ {
50
+ ref: (t) => {
51
+ t ? a.current.set(e.value, t) : a.current.delete(e.value);
52
+ },
53
+ role: "presentation",
54
+ className: p.badgeWrapper,
55
+ "data-visible": v < l,
56
+ onKeyDown: (t) => {
57
+ (t.key === "Enter" || t.key === " ") && t.stopPropagation();
58
+ },
59
+ onMouseDown: () => {
60
+ n.current = !0;
61
+ },
62
+ children: /* @__PURE__ */ f(
63
+ w,
64
+ {
65
+ emphasis: "weak",
66
+ "aria-label": typeof e.displayValue == "string" ? e.displayValue : e.value,
67
+ onDismiss: (t) => {
68
+ t.stopPropagation(), u(e.value, n.current), n.current = !1;
69
+ },
70
+ children: e.displayValue
71
+ }
72
+ )
73
+ },
74
+ e.value
75
+ )),
76
+ c > 0 && /* @__PURE__ */ f(
77
+ "div",
78
+ {
79
+ className: p.badgeWrapper,
80
+ "aria-label": s("Select_additionalItemsSelected", { count: c.toString() }),
81
+ children: /* @__PURE__ */ S(w, { emphasis: "weak", "aria-hidden": "true", children: [
82
+ "+",
83
+ c
84
+ ] })
85
+ }
86
+ )
87
+ ] });
88
+ };
89
+ export {
90
+ x as CollapsibleBadges
91
+ };
92
+ //# sourceMappingURL=fondue-components115.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components115.js","sources":["../src/components/Select/components/CollapsibleBadges.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\n\nimport { Badge } from '#/components/Badge/Badge';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\nconst BADGE_GAP = 4;\nconst OVERFLOW_BADGE_MIN_WIDTH = 40;\nconst INPUT_MIN_WIDTH = 24;\n\ntype BadgeItem = {\n value: string;\n displayValue: ReactNode;\n};\n\ntype CollapsibleBadgesProps = {\n items: BadgeItem[];\n placeholder?: string;\n onDismiss: (value: string, preventFocusRing: boolean) => void;\n /** Optional children to render at the end (e.g., an input field). Space is reserved in the layout calculation. */\n children?: ReactNode;\n /** Total number of selected items (for screen reader announcements). */\n selectedCount?: number;\n};\n\nconst calculateVisibleCount = (\n container: HTMLDivElement,\n badgeElements: Map<string, HTMLDivElement>,\n items: BadgeItem[],\n hasInputSlot: boolean,\n): number => {\n const containerWidth = container.offsetWidth;\n let usedWidth = hasInputSlot ? INPUT_MIN_WIDTH + BADGE_GAP : 0;\n let count = 0;\n\n for (const item of items) {\n const badgeElement = badgeElements.get(item.value);\n if (!badgeElement) {\n continue;\n }\n\n const badgeWidth = badgeElement.offsetWidth;\n const widthWithGap = count > 0 ? badgeWidth + BADGE_GAP : badgeWidth;\n const hasMoreAfterThis = items.length - count - 1 > 0;\n const reservedWidth = hasMoreAfterThis ? OVERFLOW_BADGE_MIN_WIDTH + BADGE_GAP : 0;\n\n if (usedWidth + widthWithGap + reservedWidth > containerWidth) {\n break;\n }\n\n usedWidth += widthWithGap;\n count++;\n }\n\n return Math.max(1, count);\n};\n\nexport const CollapsibleBadges = ({\n items,\n placeholder,\n onDismiss,\n children,\n selectedCount = 0,\n}: CollapsibleBadgesProps): ReactNode => {\n const { t } = useTranslation();\n const wasClickedRef = useRef(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const badgeElementsRef = useRef<Map<string, HTMLDivElement>>(new Map());\n const [visibleCount, setVisibleCount] = useState(items.length);\n const hasChildren = children !== undefined;\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const recalculate = (): void => {\n if (items.length === 0) {\n setVisibleCount(0);\n return;\n }\n setVisibleCount(calculateVisibleCount(container, badgeElementsRef.current, items, hasChildren));\n };\n\n const observer = new ResizeObserver(recalculate);\n observer.observe(container);\n return (): void => {\n observer.disconnect();\n };\n }, [items, hasChildren]);\n\n if (items.length === 0 && !children) {\n return placeholder;\n }\n\n const overflowCount = items.length - visibleCount;\n\n const getSelectedCountText = (count: number): string => {\n if (count === 1) {\n return t('Select_singleItemSelected');\n }\n if (count > 1) {\n return t('Select_multipleItemsSelected', { count: count.toString() });\n }\n return '';\n };\n\n return (\n <div ref={containerRef} className={styles.badgesContainer}>\n <span className={styles.srOnly} aria-live=\"polite\" aria-atomic=\"true\">\n {getSelectedCountText(selectedCount)}\n </span>\n {children}\n {items.map((item, index) => (\n <div\n key={item.value}\n ref={(element): void => {\n if (element) {\n badgeElementsRef.current.set(item.value, element);\n } else {\n badgeElementsRef.current.delete(item.value);\n }\n }}\n role=\"presentation\"\n className={styles.badgeWrapper}\n data-visible={index < visibleCount}\n onKeyDown={(event: KeyboardEvent<HTMLDivElement>): void => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.stopPropagation();\n }\n }}\n onMouseDown={(): void => {\n wasClickedRef.current = true;\n }}\n >\n <Badge\n emphasis=\"weak\"\n aria-label={typeof item.displayValue === 'string' ? item.displayValue : item.value}\n onDismiss={(event) => {\n event.stopPropagation();\n onDismiss(item.value, wasClickedRef.current);\n wasClickedRef.current = false;\n }}\n >\n {item.displayValue}\n </Badge>\n </div>\n ))}\n {overflowCount > 0 && (\n <div\n className={styles.badgeWrapper}\n aria-label={t('Select_additionalItemsSelected', { count: overflowCount.toString() })}\n >\n <Badge emphasis=\"weak\" aria-hidden=\"true\">\n +{overflowCount}\n </Badge>\n </div>\n )}\n </div>\n );\n};\n"],"names":["BADGE_GAP","OVERFLOW_BADGE_MIN_WIDTH","INPUT_MIN_WIDTH","calculateVisibleCount","container","badgeElements","items","hasInputSlot","containerWidth","usedWidth","count","item","badgeElement","badgeWidth","widthWithGap","reservedWidth","CollapsibleBadges","placeholder","onDismiss","children","selectedCount","t","useTranslation","wasClickedRef","useRef","containerRef","badgeElementsRef","visibleCount","setVisibleCount","useState","hasChildren","useEffect","recalculate","observer","overflowCount","getSelectedCountText","styles","jsx","index","element","event","Badge","jsxs"],"mappings":"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"}
@@ -0,0 +1,84 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import * as p from "@radix-ui/react-popover";
3
+ import { Slot as M } from "@radix-ui/react-slot";
4
+ import { isValidElement as T } from "react";
5
+ import { useFondueTheme as E, ThemeProvider as F } from "./fondue-components37.js";
6
+ import a from "./fondue-components102.js";
7
+ import { recursiveMap as R, getSelectOptionValue as _ } from "./fondue-components123.js";
8
+ const j = ({
9
+ highlightedIndex: l,
10
+ getMenuProps: u,
11
+ getItemProps: m,
12
+ children: f,
13
+ filterText: d,
14
+ align: h,
15
+ side: P,
16
+ selectedItemValues: o,
17
+ hasInteractedSinceOpening: S,
18
+ viewportCollisionPadding: g = "compact",
19
+ onEscapeKeyDown: v
20
+ }) => {
21
+ const O = (e) => {
22
+ e.preventDefault();
23
+ }, N = {
24
+ compact: 8,
25
+ spacious: 24
26
+ }, { theme: A, dir: n } = E(), C = (e) => n === "ltr" ? e : e === "left" ? "right" : e === "right" ? "left" : e;
27
+ return /* @__PURE__ */ r(p.Portal, { children: /* @__PURE__ */ r(F, { theme: A, dir: n, children: /* @__PURE__ */ r(
28
+ p.Content,
29
+ {
30
+ dir: n,
31
+ align: h,
32
+ side: C(P),
33
+ collisionPadding: N[g] + 8,
34
+ onOpenAutoFocus: O,
35
+ onEscapeKeyDown: v,
36
+ className: a.portal,
37
+ children: /* @__PURE__ */ r(
38
+ "ul",
39
+ {
40
+ className: a.menu,
41
+ ...u({}, { suppressRefError: !0 }),
42
+ "data-has-interacted": S ? "true" : "false",
43
+ "data-test-id": "fondue-select-menu",
44
+ children: R(
45
+ f,
46
+ (e, s) => {
47
+ if (((t) => (
48
+ // @ts-expect-error - We are explicitly checking for ref
49
+ T(t) && t.ref !== void 0
50
+ ))(e)) {
51
+ const t = _(e.props), i = m({
52
+ item: t,
53
+ index: s,
54
+ ...e.ref ? { ref: e.ref } : {}
55
+ }), c = o == null ? void 0 : o.includes(t.value);
56
+ return /* @__PURE__ */ r(
57
+ M,
58
+ {
59
+ className: a.item,
60
+ "data-highlighted": l === s,
61
+ "data-selected": c,
62
+ onTouchStart: (D) => {
63
+ i.onClick && i.onClick(D);
64
+ },
65
+ ...i,
66
+ "aria-selected": c,
67
+ children: e
68
+ },
69
+ e.props.value
70
+ );
71
+ }
72
+ },
73
+ d
74
+ ).parsedChildren
75
+ }
76
+ )
77
+ }
78
+ ) }) });
79
+ };
80
+ j.displayName = "Select.Menu";
81
+ export {
82
+ j as SelectMenu
83
+ };
84
+ //# sourceMappingURL=fondue-components116.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components116.js","sources":["../src/components/Select/components/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '#/components/ThemeProvider/ThemeProvider';\n\nimport styles from '../styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from '../utils';\n\nimport { type SelectItemProps } from './SelectItem';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\n\nexport type SelectMenuProps = {\n /**\n * @internal\n * The index of the highlighted item in the menu.\n */\n highlightedIndex: number;\n /**\n * @internal\n * Callback function to retrieve the props for a menu element.\n */\n getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n /**\n * @internal\n * Callback function to retrieve the props for a item element.\n */\n getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n /**\n * @internal\n * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n */\n children: ReactNode;\n /**\n * @internal\n * The filter text shown in the combobox input element.\n */\n filterText?: string;\n /**\n * @internal\n * The alignment of the menu.\n */\n align: 'start' | 'center' | 'end';\n /**\n * @internal\n * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n * @default \"bottom\"\n */\n side: 'left' | 'right' | 'bottom' | 'top';\n /**\n * @internal\n * The type of the menu.\n */\n selectedItemValues?: string[];\n /**\n * @internal\n * A boolean to indicate if highlighted item was changed since opening the menu.\n * This is used to determine the style of the selected/highlighted item.\n */\n hasInteractedSinceOpening?: boolean;\n /**\n * Define the minimum distance between the select menu and the viewport edge\n * @default 'compact'\n */\n viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n /**\n * @internal\n * Event handler called when the escape key is pressed.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n};\n\nexport const SelectMenu = ({\n highlightedIndex,\n getMenuProps,\n getItemProps,\n children,\n filterText,\n align,\n side,\n selectedItemValues,\n hasInteractedSinceOpening,\n viewportCollisionPadding = 'compact',\n onEscapeKeyDown,\n}: SelectMenuProps) => {\n const handleOnOpenAutoFocus = (event: Event) => {\n event.preventDefault();\n };\n\n const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n compact: 8,\n spacious: 24,\n };\n\n const { theme, dir } = useFondueTheme();\n\n const getAdjustedSide = (side: 'left' | 'right' | 'bottom' | 'top') => {\n if (dir === 'ltr') {\n return side;\n }\n\n if (side === 'left') {\n return 'right';\n }\n if (side === 'right') {\n return 'left';\n }\n\n return side;\n };\n\n return (\n <RadixPopover.Portal>\n <ThemeProvider theme={theme} dir={dir}>\n <RadixPopover.Content\n dir={dir}\n align={align}\n side={getAdjustedSide(side)}\n collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n onOpenAutoFocus={handleOnOpenAutoFocus}\n onEscapeKeyDown={onEscapeKeyDown}\n className={styles.portal}\n >\n <ul\n className={styles.menu}\n // TODO: fix this accessibility issue\n // We are mounting/unmounting the menu on open/close\n // We should instead toggle its visibility for accessibility reasons\n // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n {...getMenuProps({}, { suppressRefError: true })}\n data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n data-test-id=\"fondue-select-menu\"\n >\n {\n recursiveMap(\n children,\n (child, index) => {\n const isValid = <TProps,>(\n child: ReactNode,\n ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n // @ts-expect-error - We are explicitly checking for ref\n isValidElement<TProps>(child) && child.ref !== undefined;\n\n if (isValid<SelectItemProps>(child)) {\n const optionData = getSelectOptionValue(child.props);\n const itemProps = getItemProps({\n item: optionData,\n index,\n ...(child.ref ? { ref: child.ref } : {}),\n });\n\n const isSelected = selectedItemValues?.includes(optionData.value);\n\n return (\n <RadixSlot\n className={styles.item}\n data-highlighted={highlightedIndex === index}\n data-selected={isSelected}\n key={child.props.value}\n // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n onTouchStart={(event) => {\n if (itemProps.onClick) {\n itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n }\n }}\n {...itemProps}\n aria-selected={isSelected}\n >\n {child}\n </RadixSlot>\n );\n }\n },\n filterText,\n ).parsedChildren\n }\n </ul>\n </RadixPopover.Content>\n </ThemeProvider>\n </RadixPopover.Portal>\n );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItemValues","hasInteractedSinceOpening","viewportCollisionPadding","onEscapeKeyDown","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","dir","useFondueTheme","getAdjustedSide","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AA4EO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,iBAAAC;AACJ,MAAuB;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGR,EAAE,OAAAC,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACX,MACjBS,MAAQ,QACDT,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKY,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAAN,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,KAAAH;AAAA,MACA,OAAAV;AAAA,MACA,MAAMY,EAAgBX,CAAI;AAAA,MAC1B,kBAAkBO,EAA+BJ,CAAwB,IAAI;AAAA,MAC7E,iBAAiBE;AAAA,MACjB,iBAAAD;AAAA,MACA,WAAWW,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGpB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAc;AAAA,YACInB;AAAA,YACA,CAACoB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAY1B,EAAa;AAAA,kBAC3B,MAAMwB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,IAAatB,KAAA,gBAAAA,EAAoB,SAASmB,EAAW;AAE3D,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBrB,MAAqBwB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACjB,MAAU;AACrB,sBAAIgB,EAAU,WACVA,EAAU,QAAQhB,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGgB;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAnB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}
@@ -0,0 +1,34 @@
1
+ import { jsxs as c, Fragment as n, jsx as r } from "react/jsx-runtime";
2
+ import { IconCheckMark as i, IconExclamationMarkTriangle as l } from "@frontify/fondue-icons";
3
+ import { useTranslation as m } from "./fondue-components40.js";
4
+ import s from "./fondue-components102.js";
5
+ const f = ({ status: o, hasError: a, dataTestId: e }) => {
6
+ const { t } = m();
7
+ return /* @__PURE__ */ c(n, { children: [
8
+ o === "success" ? /* @__PURE__ */ r(
9
+ i,
10
+ {
11
+ size: 16,
12
+ className: s.iconSuccess,
13
+ "data-test-id": `${e}-success-icon`,
14
+ "aria-hidden": "true"
15
+ }
16
+ ) : null,
17
+ a ? /* @__PURE__ */ c(n, { children: [
18
+ /* @__PURE__ */ r(
19
+ l,
20
+ {
21
+ size: 16,
22
+ className: s.iconError,
23
+ "data-test-id": `${e}-error-icon`,
24
+ "aria-hidden": "true"
25
+ }
26
+ ),
27
+ /* @__PURE__ */ r("span", { className: s.srOnly, role: "alert", children: t("Select_error") })
28
+ ] }) : null
29
+ ] });
30
+ };
31
+ export {
32
+ f as StatusIcons
33
+ };
34
+ //# sourceMappingURL=fondue-components117.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components117.js","sources":["../src/components/Select/components/StatusIcons.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport { type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\ntype StatusIconsProps = {\n /** The current status of the component. */\n status: 'neutral' | 'success' | 'error';\n /** Whether the component is in an error state (may differ from status when validation is involved). */\n hasError: boolean;\n /** The data-test-id prefix for the icons. */\n dataTestId: string;\n};\n\nexport const StatusIcons = ({ status, hasError, dataTestId }: StatusIconsProps): ReactNode => {\n const { t } = useTranslation();\n return (\n <>\n {status === 'success' ? (\n <IconCheckMark\n size={16}\n className={styles.iconSuccess}\n data-test-id={`${dataTestId}-success-icon`}\n aria-hidden=\"true\"\n />\n ) : null}\n {hasError ? (\n <>\n <IconExclamationMarkTriangle\n size={16}\n className={styles.iconError}\n data-test-id={`${dataTestId}-error-icon`}\n aria-hidden=\"true\"\n />\n <span className={styles.srOnly} role=\"alert\">\n {t('Select_error')}\n </span>\n </>\n ) : null}\n </>\n );\n};\n"],"names":["StatusIcons","status","hasError","dataTestId","useTranslation","jsxs","Fragment","jsx","IconCheckMark","styles","IconExclamationMarkTriangle"],"mappings":";;;;AAkBO,MAAMA,IAAc,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,YAAAC,QAA8C;AAC1F,QAAM,EAAE,EAAA,IAAMC,EAAA;AACd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAL,MAAW,YACR,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWC,EAAO;AAAA,QAClB,gBAAc,GAAGN,CAAU;AAAA,QAC3B,eAAY;AAAA,MAAA;AAAA,IAAA,IAEhB;AAAA,IACHD,IACG,gBAAAG,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAWD,EAAO;AAAA,UAClB,gBAAc,GAAGN,CAAU;AAAA,UAC3B,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB,gBAAAI,EAAC,UAAK,WAAWE,EAAO,QAAQ,MAAK,SAChC,UAAA,EAAE,cAAc,EAAA,CACrB;AAAA,IAAA,EAAA,CACJ,IACA;AAAA,EAAA,GACR;AAER;"}
@@ -0,0 +1,32 @@
1
+ const n = (r) => {
2
+ if (r)
3
+ return {
4
+ year: r.getUTCFullYear(),
5
+ // Month is 0-indexed in JavaScript, so we add 1 to get the correct month
6
+ month: r.getUTCMonth() + 1,
7
+ day: r.getUTCDate()
8
+ };
9
+ }, f = (r) => {
10
+ if (r)
11
+ return new Date(Date.UTC(r.year, r.month - 1, r.day));
12
+ }, D = (r) => {
13
+ const o = n(r == null ? void 0 : r.from), t = n(r == null ? void 0 : r.to);
14
+ if (!(!o || !t))
15
+ return {
16
+ from: o,
17
+ to: t
18
+ };
19
+ }, m = (r) => {
20
+ if (r)
21
+ return {
22
+ from: f(r.from),
23
+ to: f(r.to)
24
+ };
25
+ };
26
+ export {
27
+ f as transformDatePickerDateToDate,
28
+ m as transformDateRangeToPickerDateRange,
29
+ n as transformDateToDatePickerDate,
30
+ D as transformPickerDateRangeToDateRange
31
+ };
32
+ //# sourceMappingURL=fondue-components118.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components118.js","sources":["../src/components/DatePicker/helpers/dateTransformer.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type DateRange as InternalDayPickerDateRange } from 'react-day-picker';\n\nimport { type DatePickerDate, type DatePickerDateRange } from '../types';\n\nexport const transformDateToDatePickerDate = (date?: Date): DatePickerDate | undefined => {\n if (!date) {\n return undefined;\n }\n return {\n year: date.getUTCFullYear(),\n // Month is 0-indexed in JavaScript, so we add 1 to get the correct month\n month: date.getUTCMonth() + 1,\n day: date.getUTCDate(),\n };\n};\n\nexport const transformDatePickerDateToDate = (datePickerDate?: DatePickerDate): Date | undefined => {\n if (!datePickerDate) {\n return undefined;\n }\n // Month is 0-indexed in JavaScript, so we subtract 1 to get the correct month\n return new Date(Date.UTC(datePickerDate.year, datePickerDate.month - 1, datePickerDate.day));\n};\n\nexport const transformPickerDateRangeToDateRange = (dateRange?: InternalDayPickerDateRange): DatePickerDateRange => {\n const fromDate = transformDateToDatePickerDate(dateRange?.from);\n const toDate = transformDateToDatePickerDate(dateRange?.to);\n if (!fromDate || !toDate) {\n return undefined;\n }\n\n return {\n from: fromDate,\n to: toDate,\n };\n};\n\nexport const transformDateRangeToPickerDateRange = (\n dateRange?: DatePickerDateRange,\n): InternalDayPickerDateRange | undefined => {\n if (!dateRange) {\n return undefined;\n }\n\n return {\n from: transformDatePickerDateToDate(dateRange.from),\n to: transformDatePickerDateToDate(dateRange.to),\n };\n};\n"],"names":["transformDateToDatePickerDate","date","transformDatePickerDateToDate","datePickerDate","transformPickerDateRangeToDateRange","dateRange","fromDate","toDate","transformDateRangeToPickerDateRange"],"mappings":"AAMO,MAAMA,IAAgC,CAACC,MAA4C;AACtF,MAAKA;AAGL,WAAO;AAAA,MACH,MAAMA,EAAK,eAAA;AAAA;AAAA,MAEX,OAAOA,EAAK,YAAA,IAAgB;AAAA,MAC5B,KAAKA,EAAK,WAAA;AAAA,IAAW;AAE7B,GAEaC,IAAgC,CAACC,MAAsD;AAChG,MAAKA;AAIL,WAAO,IAAI,KAAK,KAAK,IAAIA,EAAe,MAAMA,EAAe,QAAQ,GAAGA,EAAe,GAAG,CAAC;AAC/F,GAEaC,IAAsC,CAACC,MAAgE;AAChH,QAAMC,IAAWN,EAA8BK,KAAA,gBAAAA,EAAW,IAAI,GACxDE,IAASP,EAA8BK,KAAA,gBAAAA,EAAW,EAAE;AAC1D,MAAI,GAACC,KAAY,CAACC;AAIlB,WAAO;AAAA,MACH,MAAMD;AAAA,MACN,IAAIC;AAAA,IAAA;AAEZ,GAEaC,IAAsC,CAC/CH,MACyC;AACzC,MAAKA;AAIL,WAAO;AAAA,MACH,MAAMH,EAA8BG,EAAU,IAAI;AAAA,MAClD,IAAIH,EAA8BG,EAAU,EAAE;AAAA,IAAA;AAEtD;"}
@@ -1,40 +1,10 @@
1
- import { jsx as m } from "react/jsx-runtime";
2
- import { forwardRef as n } from "react";
3
- import { propsToCssVariables as y } from "./fondue-components42.js";
4
- import x from "./fondue-components57.js";
5
- const u = n(
6
- ({
7
- as: a = "div",
8
- "data-test-id": e = "fondue-flex",
9
- children: r,
10
- role: i,
11
- "aria-label": d,
12
- "aria-hidden": s,
13
- "aria-describedby": t,
14
- "aria-labelledby": o,
15
- "aria-expanded": l,
16
- "aria-haspopup": p,
17
- ...b
18
- }, f) => /* @__PURE__ */ m(
19
- a,
20
- {
21
- className: x.root,
22
- "data-test-id": e,
23
- style: y(b, { justify: "justify-content" }),
24
- role: i,
25
- "aria-label": d,
26
- "aria-hidden": s,
27
- "aria-describedby": t,
28
- "aria-labelledby": o,
29
- "aria-expanded": l,
30
- "aria-haspopup": p,
31
- ref: f,
32
- children: r
33
- }
34
- )
35
- );
36
- u.displayName = "Flex";
1
+ import { ForwardedRefDatePickerInput as r } from "./fondue-components58.js";
2
+ import { ForwardedRefRangeDatePicker as o } from "./fondue-components59.js";
3
+ import { ForwardedRefSingleDatePicker as t } from "./fondue-components60.js";
4
+ const e = t;
5
+ e.Range = o;
6
+ e.Input = r;
37
7
  export {
38
- u as Flex
8
+ e as DatePicker
39
9
  };
40
10
  //# sourceMappingURL=fondue-components12.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components12.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n /**\n * The element to render the Flex component as.\n * @default 'div'\n */\n as?: 'div' | 'span';\n /**\n * The display property.\n * @default 'flex'\n */\n display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n /**\n * The direction of the children.\n * @default 'row'\n */\n direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n /**\n * The alignment of the children.\n */\n align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n /**\n * The justification of the children.\n */\n justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n /**\n * The wrap property.\n */\n wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n /**\n * The gap between the children.\n */\n gap?: Responsive<SizeValue>;\n /**\n * The horizontal gap between the children.\n */\n gapX?: Responsive<SizeValue>;\n /**\n * The vertical gap between the children.\n */\n gapY?: Responsive<SizeValue>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(\n (\n {\n as: Component = 'div',\n 'data-test-id': dataTestId = 'fondue-flex',\n children,\n role,\n 'aria-label': ariaLabel,\n 'aria-hidden': ariaHidden,\n 'aria-describedby': ariaDescribedBy,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n ...props\n },\n ref,\n ) => {\n return (\n <Component\n className={styles.root}\n data-test-id={dataTestId}\n style={propsToCssVariables(props, { justify: 'justify-content' })}\n role={role}\n aria-label={ariaLabel}\n aria-hidden={ariaHidden}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nFlex.displayName = 'Flex';\n"],"names":["Flex","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAuDO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,mBAAmB;AAAA,MAChE,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAK,cAAc;"}
1
+ {"version":3,"file":"fondue-components12.js","sources":["../src/components/DatePicker/DatePicker.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ForwardedRefDatePickerInput } from './DatePickerInput';\nimport { ForwardedRefRangeDatePicker } from './RangeDatePicker';\nimport { ForwardedRefSingleDatePicker } from './SingleDatePicker';\n\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const DatePicker: typeof ForwardedRefSingleDatePicker & {\n Range: typeof ForwardedRefRangeDatePicker;\n Input: typeof ForwardedRefDatePickerInput;\n} = ForwardedRefSingleDatePicker;\nDatePicker.Range = ForwardedRefRangeDatePicker;\nDatePicker.Input = ForwardedRefDatePickerInput;\n\nexport type { DatePickerDate, DatePickerDateRange } from './types';\n"],"names":["DatePicker","ForwardedRefSingleDatePicker","ForwardedRefRangeDatePicker","ForwardedRefDatePickerInput"],"mappings":";;;AAOO,MAAMA,IAGTC;AACJD,EAAW,QAAQE;AACnBF,EAAW,QAAQG;"}
@@ -0,0 +1,44 @@
1
+ const e = "_wrapper_ejipv_4", t = "_root_ejipv_8", o = "_toggleMonthButtonContainer_ejipv_8", n = "_nextMonthButtonContainer_ejipv_22", _ = "_weekday_ejipv_27", d = "_weekdays_ejipv_39", s = "_week_ejipv_27", c = "_day_ejipv_49", i = "_disabled_ejipv_69", r = "_dayContent_ejipv_72", a = "_outside_ejipv_76", v = "_dayButton_ejipv_89", l = "_selected_ejipv_123", p = "_selectedMiddle_ejipv_133", j = "_selectedStart_ejipv_146", y = "_selectedEnd_ejipv_146", h = "_hoverAfter_ejipv_179", u = "_hoverSelected_ejipv_192", w = "_hoverBefore_ejipv_253", B = {
2
+ wrapper: e,
3
+ root: t,
4
+ toggleMonthButtonContainer: o,
5
+ nextMonthButtonContainer: n,
6
+ weekday: _,
7
+ weekdays: d,
8
+ week: s,
9
+ day: c,
10
+ disabled: i,
11
+ dayContent: r,
12
+ outside: a,
13
+ dayButton: v,
14
+ selected: l,
15
+ selectedMiddle: p,
16
+ selectedStart: j,
17
+ selectedEnd: y,
18
+ hoverAfter: h,
19
+ hoverSelected: u,
20
+ hoverBefore: w
21
+ };
22
+ export {
23
+ c as day,
24
+ v as dayButton,
25
+ r as dayContent,
26
+ B as default,
27
+ i as disabled,
28
+ h as hoverAfter,
29
+ w as hoverBefore,
30
+ u as hoverSelected,
31
+ n as nextMonthButtonContainer,
32
+ a as outside,
33
+ t as root,
34
+ l as selected,
35
+ y as selectedEnd,
36
+ p as selectedMiddle,
37
+ j as selectedStart,
38
+ o as toggleMonthButtonContainer,
39
+ s as week,
40
+ _ as weekday,
41
+ d as weekdays,
42
+ e as wrapper
43
+ };
44
+ //# sourceMappingURL=fondue-components120.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components120.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}