@frontify/fondue-components 27.0.1 → 29.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 (304) hide show
  1. package/dist/fondue-components.js +62 -56
  2. package/dist/fondue-components.js.map +1 -1
  3. package/dist/fondue-components10.js +1 -1
  4. package/dist/fondue-components100.js +23 -6
  5. package/dist/fondue-components100.js.map +1 -1
  6. package/dist/fondue-components101.js +34 -12
  7. package/dist/fondue-components101.js.map +1 -1
  8. package/dist/fondue-components102.js +10 -70
  9. package/dist/fondue-components102.js.map +1 -1
  10. package/dist/fondue-components103.js +67 -14
  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 +25 -88
  15. package/dist/fondue-components105.js.map +1 -1
  16. package/dist/fondue-components106.js +18 -80
  17. package/dist/fondue-components106.js.map +1 -1
  18. package/dist/fondue-components107.js +24 -30
  19. package/dist/fondue-components107.js.map +1 -1
  20. package/dist/fondue-components108.js +8 -20
  21. package/dist/fondue-components108.js.map +1 -1
  22. package/dist/fondue-components109.js +30 -39
  23. package/dist/fondue-components109.js.map +1 -1
  24. package/dist/fondue-components11.js +3 -3
  25. package/dist/fondue-components110.js +10 -0
  26. package/dist/fondue-components110.js.map +1 -0
  27. package/dist/fondue-components111.js +8 -0
  28. package/dist/fondue-components111.js.map +1 -0
  29. package/dist/fondue-components112.js +8 -0
  30. package/dist/fondue-components112.js.map +1 -0
  31. package/dist/fondue-components113.js +20 -0
  32. package/dist/fondue-components113.js.map +1 -0
  33. package/dist/fondue-components114.js +17 -0
  34. package/dist/fondue-components114.js.map +1 -0
  35. package/dist/fondue-components115.js +18 -0
  36. package/dist/fondue-components115.js.map +1 -0
  37. package/dist/fondue-components116.js +114 -0
  38. package/dist/fondue-components116.js.map +1 -0
  39. package/dist/fondue-components117.js +16 -0
  40. package/dist/fondue-components117.js.map +1 -0
  41. package/dist/fondue-components118.js +20 -0
  42. package/dist/fondue-components118.js.map +1 -0
  43. package/dist/fondue-components119.js +16 -0
  44. package/dist/fondue-components119.js.map +1 -0
  45. package/dist/fondue-components12.js +7 -37
  46. package/dist/fondue-components12.js.map +1 -1
  47. package/dist/fondue-components120.js +130 -0
  48. package/dist/fondue-components120.js.map +1 -0
  49. package/dist/fondue-components121.js +14 -0
  50. package/dist/fondue-components121.js.map +1 -0
  51. package/dist/fondue-components122.js +39 -0
  52. package/dist/fondue-components122.js.map +1 -0
  53. package/dist/fondue-components123.js +220 -0
  54. package/dist/fondue-components123.js.map +1 -0
  55. package/dist/fondue-components124.js +22 -0
  56. package/dist/fondue-components124.js.map +1 -0
  57. package/dist/fondue-components125.js +20 -0
  58. package/dist/fondue-components125.js.map +1 -0
  59. package/dist/fondue-components126.js +154 -0
  60. package/dist/fondue-components126.js.map +1 -0
  61. package/dist/fondue-components127.js +48 -0
  62. package/dist/fondue-components127.js.map +1 -0
  63. package/dist/fondue-components128.js +173 -0
  64. package/dist/fondue-components128.js.map +1 -0
  65. package/dist/fondue-components129.js +63 -0
  66. package/dist/fondue-components129.js.map +1 -0
  67. package/dist/fondue-components13.js +59 -118
  68. package/dist/fondue-components13.js.map +1 -1
  69. package/dist/fondue-components130.js +12 -0
  70. package/dist/fondue-components130.js.map +1 -0
  71. package/dist/fondue-components131.js +259 -0
  72. package/dist/fondue-components131.js.map +1 -0
  73. package/dist/fondue-components132.js +32 -0
  74. package/dist/fondue-components132.js.map +1 -0
  75. package/dist/fondue-components134.js +44 -0
  76. package/dist/fondue-components134.js.map +1 -0
  77. package/dist/fondue-components135.js +9 -0
  78. package/dist/fondue-components135.js.map +1 -0
  79. package/dist/fondue-components136.js +15 -0
  80. package/dist/fondue-components136.js.map +1 -0
  81. package/dist/fondue-components137.js +74 -0
  82. package/dist/fondue-components137.js.map +1 -0
  83. package/dist/fondue-components138.js +18 -0
  84. package/dist/fondue-components138.js.map +1 -0
  85. package/dist/fondue-components139.js +10 -0
  86. package/dist/fondue-components139.js.map +1 -0
  87. package/dist/fondue-components14.js +21 -21
  88. package/dist/fondue-components14.js.map +1 -1
  89. package/dist/fondue-components140.js +92 -0
  90. package/dist/fondue-components140.js.map +1 -0
  91. package/dist/fondue-components141.js +84 -0
  92. package/dist/fondue-components141.js.map +1 -0
  93. package/dist/fondue-components142.js +34 -0
  94. package/dist/fondue-components142.js.map +1 -0
  95. package/dist/fondue-components143.js +22 -0
  96. package/dist/fondue-components143.js.map +1 -0
  97. package/dist/fondue-components144.js +73 -0
  98. package/dist/fondue-components144.js.map +1 -0
  99. package/dist/fondue-components145.js +1355 -0
  100. package/dist/fondue-components145.js.map +1 -0
  101. package/dist/fondue-components146.js +944 -0
  102. package/dist/fondue-components146.js.map +1 -0
  103. package/dist/fondue-components147.js +201 -0
  104. package/dist/fondue-components147.js.map +1 -0
  105. package/dist/fondue-components148.js +24 -0
  106. package/dist/fondue-components148.js.map +1 -0
  107. package/dist/fondue-components149.js +43 -0
  108. package/dist/fondue-components149.js.map +1 -0
  109. package/dist/fondue-components15.js +121 -45
  110. package/dist/fondue-components15.js.map +1 -1
  111. package/dist/fondue-components150.js +71 -0
  112. package/dist/fondue-components150.js.map +1 -0
  113. package/dist/fondue-components151.js +34 -0
  114. package/dist/fondue-components151.js.map +1 -0
  115. package/dist/fondue-components152.js +12 -0
  116. package/dist/fondue-components152.js.map +1 -0
  117. package/dist/fondue-components153.js +156 -0
  118. package/dist/fondue-components153.js.map +1 -0
  119. package/dist/fondue-components154.js +111 -0
  120. package/dist/fondue-components154.js.map +1 -0
  121. package/dist/fondue-components155.js +19 -0
  122. package/dist/fondue-components155.js.map +1 -0
  123. package/dist/fondue-components156.js +19 -0
  124. package/dist/fondue-components156.js.map +1 -0
  125. package/dist/fondue-components157.js +32 -0
  126. package/dist/fondue-components157.js.map +1 -0
  127. package/dist/fondue-components158.js +16 -0
  128. package/dist/fondue-components158.js.map +1 -0
  129. package/dist/fondue-components159.js +10 -0
  130. package/dist/fondue-components159.js.map +1 -0
  131. package/dist/fondue-components16.js +35 -41
  132. package/dist/fondue-components16.js.map +1 -1
  133. package/dist/fondue-components17.js +44 -56
  134. package/dist/fondue-components17.js.map +1 -1
  135. package/dist/fondue-components18.js +40 -41
  136. package/dist/fondue-components18.js.map +1 -1
  137. package/dist/fondue-components19.js +56 -19
  138. package/dist/fondue-components19.js.map +1 -1
  139. package/dist/fondue-components20.js +42 -45
  140. package/dist/fondue-components20.js.map +1 -1
  141. package/dist/fondue-components21.js +18 -71
  142. package/dist/fondue-components21.js.map +1 -1
  143. package/dist/fondue-components22.js +46 -17
  144. package/dist/fondue-components22.js.map +1 -1
  145. package/dist/fondue-components23.js +68 -75
  146. package/dist/fondue-components23.js.map +1 -1
  147. package/dist/fondue-components24.js +70 -32
  148. package/dist/fondue-components24.js.map +1 -1
  149. package/dist/fondue-components25.js +17 -54
  150. package/dist/fondue-components25.js.map +1 -1
  151. package/dist/fondue-components26.js +77 -23
  152. package/dist/fondue-components26.js.map +1 -1
  153. package/dist/fondue-components27.js +34 -53
  154. package/dist/fondue-components27.js.map +1 -1
  155. package/dist/fondue-components28.js +52 -97
  156. package/dist/fondue-components28.js.map +1 -1
  157. package/dist/fondue-components29.js +23 -33
  158. package/dist/fondue-components29.js.map +1 -1
  159. package/dist/fondue-components3.js +1 -1
  160. package/dist/fondue-components30.js +52 -193
  161. package/dist/fondue-components30.js.map +1 -1
  162. package/dist/fondue-components31.js +89 -135
  163. package/dist/fondue-components31.js.map +1 -1
  164. package/dist/fondue-components32.js +30 -130
  165. package/dist/fondue-components32.js.map +1 -1
  166. package/dist/fondue-components33.js +191 -27
  167. package/dist/fondue-components33.js.map +1 -1
  168. package/dist/fondue-components34.js +144 -79
  169. package/dist/fondue-components34.js.map +1 -1
  170. package/dist/fondue-components35.js +125 -116
  171. package/dist/fondue-components35.js.map +1 -1
  172. package/dist/fondue-components36.js +32 -37
  173. package/dist/fondue-components36.js.map +1 -1
  174. package/dist/fondue-components37.js +77 -52
  175. package/dist/fondue-components37.js.map +1 -1
  176. package/dist/fondue-components38.js +123 -20
  177. package/dist/fondue-components38.js.map +1 -1
  178. package/dist/fondue-components39.js +34 -21
  179. package/dist/fondue-components39.js.map +1 -1
  180. package/dist/fondue-components4.js +3 -3
  181. package/dist/fondue-components40.js +56 -7
  182. package/dist/fondue-components40.js.map +1 -1
  183. package/dist/fondue-components41.js +20 -8
  184. package/dist/fondue-components41.js.map +1 -1
  185. package/dist/fondue-components42.js +26 -41
  186. package/dist/fondue-components42.js.map +1 -1
  187. package/dist/fondue-components43.js +7 -4
  188. package/dist/fondue-components43.js.map +1 -1
  189. package/dist/fondue-components44.js +8 -4
  190. package/dist/fondue-components44.js.map +1 -1
  191. package/dist/fondue-components45.js +41 -13
  192. package/dist/fondue-components45.js.map +1 -1
  193. package/dist/fondue-components46.js +5 -32
  194. package/dist/fondue-components46.js.map +1 -1
  195. package/dist/fondue-components47.js +4 -53
  196. package/dist/fondue-components47.js.map +1 -1
  197. package/dist/fondue-components48.js +12 -130
  198. package/dist/fondue-components48.js.map +1 -1
  199. package/dist/fondue-components49.js +32 -21
  200. package/dist/fondue-components49.js.map +1 -1
  201. package/dist/fondue-components5.js +2 -2
  202. package/dist/fondue-components50.js +54 -53
  203. package/dist/fondue-components50.js.map +1 -1
  204. package/dist/fondue-components51.js +130 -7
  205. package/dist/fondue-components51.js.map +1 -1
  206. package/dist/fondue-components52.js +21 -13
  207. package/dist/fondue-components52.js.map +1 -1
  208. package/dist/fondue-components53.js +53 -17
  209. package/dist/fondue-components53.js.map +1 -1
  210. package/dist/fondue-components54.js +7 -4
  211. package/dist/fondue-components54.js.map +1 -1
  212. package/dist/fondue-components55.js +13 -18
  213. package/dist/fondue-components55.js.map +1 -1
  214. package/dist/fondue-components56.js +16 -18
  215. package/dist/fondue-components56.js.map +1 -1
  216. package/dist/fondue-components57.js +1 -1
  217. package/dist/fondue-components58.js +18 -13
  218. package/dist/fondue-components58.js.map +1 -1
  219. package/dist/fondue-components59.js +18 -4
  220. package/dist/fondue-components59.js.map +1 -1
  221. package/dist/fondue-components6.js +1 -1
  222. package/dist/fondue-components60.js +43 -17
  223. package/dist/fondue-components60.js.map +1 -1
  224. package/dist/fondue-components61.js +24 -10
  225. package/dist/fondue-components61.js.map +1 -1
  226. package/dist/fondue-components62.js +22 -36
  227. package/dist/fondue-components62.js.map +1 -1
  228. package/dist/fondue-components63.js +6 -6
  229. package/dist/fondue-components64.js +1 -1
  230. package/dist/fondue-components65.js +10 -10
  231. package/dist/fondue-components66.js +3 -7
  232. package/dist/fondue-components66.js.map +1 -1
  233. package/dist/fondue-components67.js +16 -11
  234. package/dist/fondue-components67.js.map +1 -1
  235. package/dist/fondue-components68.js +10 -4
  236. package/dist/fondue-components68.js.map +1 -1
  237. package/dist/fondue-components69.js +36 -24
  238. package/dist/fondue-components69.js.map +1 -1
  239. package/dist/fondue-components7.js +1 -1
  240. package/dist/fondue-components70.js +6 -16
  241. package/dist/fondue-components70.js.map +1 -1
  242. package/dist/fondue-components71.js +5 -20
  243. package/dist/fondue-components71.js.map +1 -1
  244. package/dist/fondue-components72.js +13 -20
  245. package/dist/fondue-components72.js.map +1 -1
  246. package/dist/fondue-components73.js +52 -20
  247. package/dist/fondue-components73.js.map +1 -1
  248. package/dist/fondue-components74.js +44 -20
  249. package/dist/fondue-components74.js.map +1 -1
  250. package/dist/fondue-components75.js +6 -19
  251. package/dist/fondue-components75.js.map +1 -1
  252. package/dist/fondue-components76.js +6 -8
  253. package/dist/fondue-components76.js.map +1 -1
  254. package/dist/fondue-components77.js +13 -11
  255. package/dist/fondue-components77.js.map +1 -1
  256. package/dist/fondue-components78.js +27 -10
  257. package/dist/fondue-components78.js.map +1 -1
  258. package/dist/fondue-components79.js +13 -7
  259. package/dist/fondue-components79.js.map +1 -1
  260. package/dist/fondue-components8.js +5 -5
  261. package/dist/fondue-components80.js +4 -12
  262. package/dist/fondue-components80.js.map +1 -1
  263. package/dist/fondue-components81.js +12 -22
  264. package/dist/fondue-components81.js.map +1 -1
  265. package/dist/fondue-components82.js +48 -34
  266. package/dist/fondue-components82.js.map +1 -1
  267. package/dist/fondue-components83.js +22 -10
  268. package/dist/fondue-components83.js.map +1 -1
  269. package/dist/fondue-components84.js +623 -62
  270. package/dist/fondue-components84.js.map +1 -1
  271. package/dist/fondue-components85.js +8 -14
  272. package/dist/fondue-components85.js.map +1 -1
  273. package/dist/fondue-components86.js +12 -24
  274. package/dist/fondue-components86.js.map +1 -1
  275. package/dist/fondue-components87.js +4 -18
  276. package/dist/fondue-components87.js.map +1 -1
  277. package/dist/fondue-components88.js +24 -24
  278. package/dist/fondue-components88.js.map +1 -1
  279. package/dist/fondue-components89.js +16 -8
  280. package/dist/fondue-components89.js.map +1 -1
  281. package/dist/fondue-components9.js +5 -5
  282. package/dist/fondue-components90.js +20 -26
  283. package/dist/fondue-components90.js.map +1 -1
  284. package/dist/fondue-components91.js +20 -7
  285. package/dist/fondue-components91.js.map +1 -1
  286. package/dist/fondue-components92.js +20 -5
  287. package/dist/fondue-components92.js.map +1 -1
  288. package/dist/fondue-components93.js +20 -5
  289. package/dist/fondue-components93.js.map +1 -1
  290. package/dist/fondue-components94.js +19 -17
  291. package/dist/fondue-components94.js.map +1 -1
  292. package/dist/fondue-components95.js +8 -217
  293. package/dist/fondue-components95.js.map +1 -1
  294. package/dist/fondue-components96.js +10 -18
  295. package/dist/fondue-components96.js.map +1 -1
  296. package/dist/fondue-components97.js +10 -16
  297. package/dist/fondue-components97.js.map +1 -1
  298. package/dist/fondue-components98.js +6 -150
  299. package/dist/fondue-components98.js.map +1 -1
  300. package/dist/fondue-components99.js +12 -44
  301. package/dist/fondue-components99.js.map +1 -1
  302. package/dist/index.d.ts +201 -26
  303. package/dist/style.css +1 -1
  304. package/package.json +7 -3
@@ -1,20 +1,22 @@
1
- const o = "_root_18649_5", c = "_caret_18649_43", t = "_colorName_18649_58", _ = "_colorIndicator_18649_61", n = "_button_18649_82", r = "_actions_18649_113", a = "_clearIcon_18649_122", s = {
2
- root: o,
3
- caret: c,
4
- colorName: t,
5
- colorIndicator: _,
6
- button: n,
7
- actions: r,
8
- clearIcon: a
9
- };
1
+ import { jsxs as d, jsx as r } from "react/jsx-runtime";
2
+ import { IconCheckMark as n } from "@frontify/fondue-icons";
3
+ import { forwardRef as l } from "react";
4
+ import a from "./fondue-components127.js";
5
+ const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
6
+ /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
7
+ /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
8
+ ] });
9
+ o.displayName = "Select.Item";
10
+ const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
11
+ t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
12
+ c
13
+ ] }, e);
14
+ s.displayName = "Select.Group";
15
+ const N = l(s);
10
16
  export {
11
- r as actions,
12
- n as button,
13
- c as caret,
14
- a as clearIcon,
15
- _ as colorIndicator,
16
- t as colorName,
17
- s as default,
18
- o as root
17
+ I as ForwardedRefSelectItem,
18
+ N as ForwardedRefSelectItemGroup,
19
+ o as SelectItem,
20
+ s as SelectItemGroup
19
21
  };
20
22
  //# sourceMappingURL=fondue-components94.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components94.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components94.js","sources":["../src/components/Select/components/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectItemProps = {\n /**\n * The value of the select item.\n */\n value: string;\n /**\n * The data test id of the select item.\n */\n 'data-test-id'?: string;\n} & (\n | {\n /**\n * The label of the select item. Required when the child is not a string.\n */\n label: string;\n /**\n * The children of the select item. This can be a custom component or a string.\n */\n children?: ReactNode;\n }\n | {\n label?: string;\n children: string;\n }\n);\n\nexport const SelectItem = (\n { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n return (\n <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n <div className={styles.itemValue}>{props.children}</div>\n <IconCheckMark className={styles.checkmarkIcon} />\n </li>\n );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n /**\n * The children of the select item group. This can contain multiple `Select.Item` components.\n */\n children: ReactNode;\n /**\n * The internal group ID of the select item group.\n */\n groupId: string;\n /**\n * The groups heading\n */\n heading?: string;\n /**\n * The data test id of the select item group.\n */\n 'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n { children, groupId, heading, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n {heading ? (\n <div className={styles.groupHeading}>\n <span>{heading}</span>\n </div>\n ) : null}\n {children}\n </div>\n );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxDC,wBAGK,MAAA,EAAG,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EAClD,gBAAAD,EAACE,GAAA,EAAc,WAAWD,EAAO,cAAA,CAAe;AAAA,GACpD;AAGRL,EAAW,cAAc;AAElB,MAAMO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAAA,GAC3DE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EAAAS,IACG,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAA,gBAAAD,EAAC,QAAA,EAAM,UAAAQ,EAAA,CAAQ,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEvB,MAAMK,IAA8BN,EAAiDC,CAAe;"}
@@ -1,220 +1,11 @@
1
- import { jsxs as g, jsx as n, Fragment as ue } from "react/jsx-runtime";
2
- import { IconCaretDown as me } from "@frontify/fondue-icons";
3
- import * as H from "@radix-ui/react-popover";
4
- import { useMultipleSelection as K, useCombobox as s } from "downshift";
5
- import { forwardRef as be, useRef as he, useCallback as fe, useState as ge, useMemo as j } from "react";
6
- import { LoadingCircle as pe } from "./fondue-components19.js";
7
- import { useTranslation as Ce } from "./fondue-components39.js";
8
- import { useBadgeItems as ye } from "./fondue-components100.js";
9
- import { useFocusRing as Ie } from "./fondue-components101.js";
10
- import { useSelectData as ve } from "./fondue-components102.js";
11
- import { useSelectionDescription as Be } from "./fondue-components103.js";
12
- import c from "./fondue-components99.js";
13
- import { ClearButton as xe } from "./fondue-components104.js";
14
- import { CollapsibleBadges as Se } from "./fondue-components105.js";
15
- import { SelectMenu as we } from "./fondue-components106.js";
16
- import { ForwardedRefSelectSlot as De } from "./fondue-components76.js";
17
- import { StatusIcons as Re } from "./fondue-components107.js";
18
- const z = ({
19
- children: E,
20
- selectedItemValues: i,
21
- onItemSelect: m,
22
- onClear: $,
23
- placeholder: x = "",
24
- status: p = "neutral",
25
- disabled: b,
26
- "data-test-id": d = "fondue-select-combobox",
27
- alignMenu: _ = "start",
28
- side: q = "bottom",
29
- id: G,
30
- viewportCollisionPadding: J = "compact",
31
- getAsyncItems: C,
32
- onEscapeKeyDown: Q,
33
- multiple: o,
34
- ...a
35
- }, U) => {
36
- const h = he(null), W = fe((e) => {
37
- h.current = e;
38
- }, []), { t: X } = Ce(), { inputSlots: Y, menuSlots: Z, items: y, filterText: A, clearButton: S, getItemByValue: r, setFilterText: I, asyncItemStatus: w } = ve(E, C), { wasClickedRef: V, onMouseDown: D, onFocus: R, onBlur: ee } = Ie(), { selectionDescriptionId: L, selectionDescription: O } = Be(
39
- o,
40
- i,
41
- r
42
- ), te = ye(i, r), [ae, k] = ge(!1), M = j(() => i.map((e) => r(e)).filter((e) => e !== void 0 && "value" in e && "label" in e), [i, r]), ne = K(
43
- o ? {
44
- selectedItems: M,
45
- onStateChange({ selectedItems: e, type: l }) {
46
- if (l === K.stateChangeTypes.SelectedItemKeyDownBackspace) {
47
- const t = M.find((u) => !(e != null && e.includes(u)));
48
- t && m(t.value);
49
- }
50
- }
51
- } : { selectedItems: [] }
52
- ), oe = o ? ne.removeSelectedItem : () => {
53
- }, {
54
- getInputProps: f,
55
- getToggleButtonProps: ie,
56
- getMenuProps: le,
57
- getItemProps: re,
58
- reset: N,
59
- selectedItem: v,
60
- isOpen: T,
61
- highlightedIndex: se,
62
- inputValue: B
63
- } = s({
64
- items: y,
65
- selectedItem: o ? null : r(i[0]),
66
- defaultHighlightedIndex: 0,
67
- toggleButtonId: G,
68
- // Only set labelId if aria-labelledby is explicitly provided, otherwise downshift generates an orphan ID
69
- ..."aria-labelledby" in a && a["aria-labelledby"] ? { labelId: a["aria-labelledby"] } : {},
70
- onSelectedItemChange: ({ selectedItem: e }) => {
71
- e && m(e.value), o && I("");
72
- },
73
- onInputValueChange: ({ inputValue: e }) => {
74
- I(e);
75
- },
76
- onIsOpenChange: () => {
77
- k(!1), I("");
78
- },
79
- onHighlightedIndexChange: () => {
80
- k(!0);
81
- },
82
- itemToString: (e) => e ? e.label : "",
83
- stateReducer: (e, l) => {
84
- const { changes: t, type: u } = l;
85
- if (o)
86
- switch (u) {
87
- case s.stateChangeTypes.InputKeyDownEnter:
88
- case s.stateChangeTypes.ItemClick:
89
- return {
90
- ...t,
91
- isOpen: !0,
92
- highlightedIndex: e.highlightedIndex,
93
- inputValue: ""
94
- };
95
- case s.stateChangeTypes.InputBlur:
96
- return {
97
- ...t,
98
- inputValue: ""
99
- };
100
- }
101
- else
102
- switch (u) {
103
- case s.stateChangeTypes.InputKeyDownEnter:
104
- case s.stateChangeTypes.ItemClick:
105
- t.selectedItem && e.selectedItem && t.selectedItem.value === e.selectedItem.value && m(t.selectedItem.value);
106
- break;
107
- }
108
- return t;
109
- }
110
- }), F = j(() => o ? !1 : !C && !y.find((e) => e.label.toLowerCase().includes(B.toLowerCase())), [B, y, C, o]) || !!w.error || p === "error", ce = (e, l) => {
111
- const t = r(e);
112
- t && (oe(t), m(e), h.current && (h.current.focus(), l && (h.current.dataset.showFocusRing = "false")));
113
- }, de = () => {
114
- $(), N();
115
- }, P = (e) => {
116
- var l, t;
117
- ee(e), o || ((v == null ? void 0 : v.label) ?? "").toLocaleLowerCase() !== B.toLocaleLowerCase() && N(), f().onBlur && ((t = (l = f()).onBlur) == null || t.call(l, e));
118
- };
119
- return /* @__PURE__ */ g(H.Root, { open: T, children: [
120
- /* @__PURE__ */ n(H.Anchor, { asChild: !0, children: /* @__PURE__ */ g(
121
- "div",
122
- {
123
- ref: U,
124
- className: c.root,
125
- "data-status": F ? "error" : p,
126
- "data-disabled": b,
127
- "data-empty": i.length === 0,
128
- children: [
129
- o ? /* @__PURE__ */ g(ue, { children: [
130
- /* @__PURE__ */ n("span", { id: L, className: c.srOnly, children: O }),
131
- /* @__PURE__ */ n(
132
- Se,
133
- {
134
- items: te,
135
- onDismiss: ce,
136
- selectedCount: i.length,
137
- children: /* @__PURE__ */ n(
138
- "input",
139
- {
140
- ...f({
141
- ref: W,
142
- "aria-label": "aria-label" in a ? a["aria-label"] : void 0,
143
- // Remove auto-generated aria-labelledby if not explicitly provided
144
- "aria-labelledby": "aria-labelledby" in a && a["aria-labelledby"] ? a["aria-labelledby"] : void 0,
145
- "aria-describedby": O ? L : void 0
146
- }),
147
- "data-test-id": d,
148
- placeholder: i.length === 0 ? x : "",
149
- className: c.multiSelectInput,
150
- disabled: b,
151
- onMouseDown: D,
152
- onFocus: R,
153
- onBlur: P
154
- }
155
- )
156
- }
157
- )
158
- ] }) : /* @__PURE__ */ n(
159
- "input",
160
- {
161
- ...f({
162
- "aria-label": "aria-label" in a ? a["aria-label"] : void 0,
163
- // Remove auto-generated aria-labelledby if not explicitly provided
164
- "aria-labelledby": "aria-labelledby" in a && a["aria-labelledby"] ? a["aria-labelledby"] : void 0
165
- }),
166
- "data-test-id": d,
167
- placeholder: x,
168
- className: c.input,
169
- disabled: b,
170
- onMouseDown: D,
171
- onFocus: R,
172
- onBlur: P
173
- }
174
- ),
175
- Y,
176
- S ? /* @__PURE__ */ n(xe, { onClear: de, children: S }) : null,
177
- w.isLoading && T ? /* @__PURE__ */ n(De, { name: "right", "data-test-id": `${d}-right-slot`, children: /* @__PURE__ */ n(pe, { size: "x-small", "data-test-id": `${d}-loading-circle` }) }) : null,
178
- /* @__PURE__ */ g("div", { className: c.icons, children: [
179
- /* @__PURE__ */ n(
180
- "button",
181
- {
182
- "aria-label": X("Select_toggleMenu"),
183
- ...ie(),
184
- type: "button",
185
- disabled: b,
186
- onMouseDown: () => {
187
- V.current = !0;
188
- },
189
- children: /* @__PURE__ */ n(me, { size: 16, className: c.caret })
190
- }
191
- ),
192
- /* @__PURE__ */ n(Re, { status: p, hasError: F, dataTestId: d })
193
- ] })
194
- ]
195
- }
196
- ) }),
197
- /* @__PURE__ */ n(
198
- we,
199
- {
200
- align: _,
201
- side: q,
202
- highlightedIndex: se,
203
- filterText: A,
204
- getMenuProps: le,
205
- getItemProps: re,
206
- selectedItemValues: i,
207
- hasInteractedSinceOpening: ae,
208
- viewportCollisionPadding: J,
209
- onEscapeKeyDown: Q,
210
- children: Z
211
- }
212
- )
213
- ] });
214
- };
215
- z.displayName = "Select.Combobox";
216
- const Qe = be(z);
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import { forwardRef as d } from "react";
3
+ import m from "./fondue-components127.js";
4
+ const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
5
+ t.displayName = "Select.Slot";
6
+ const S = d(t);
217
7
  export {
218
- Qe as ComboboxBase
8
+ S as ForwardedRefSelectSlot,
9
+ t as SelectSlot
219
10
  };
220
11
  //# sourceMappingURL=fondue-components95.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components95.js","sources":["../src/components/Select/components/ComboboxBase.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { useCombobox, useMultipleSelection } from 'downshift';\nimport {\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n type FocusEvent,\n type ForwardedRef,\n type ReactNode,\n} from 'react';\n\nimport { LoadingCircle } from '#/components/LoadingCircle/LoadingCircle.tsx';\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { useBadgeItems } from '../hooks/useBadgeItems';\nimport { useFocusRing } from '../hooks/useFocusRing';\nimport { useSelectData, type AsyncItemsFetcher } from '../hooks/useSelectData';\nimport { useSelectionDescription } from '../hooks/useSelectionDescription';\nimport styles from '../styles/select.module.scss';\n\nimport { ClearButton } from './ClearButton';\nimport { CollapsibleBadges } from './CollapsibleBadges';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport { StatusIcons } from './StatusIcons';\n\ntype SelectItem = {\n value: string;\n label: string;\n children?: ReactNode;\n};\n\nexport type ComboboxSharedProps = {\n /**\n * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu\n */\n children?: ReactNode;\n /**\n * The placeholder in the combobox component\n */\n placeholder?: string;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error';\n /**\n * Disables the combobox component\n */\n disabled?: boolean;\n /**\n * The alignment of the menu\n * @default \"start\"\n */\n alignMenu?: 'start' | 'center' | 'end';\n /**\n * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport\n * @default \"bottom\"\n */\n side?: 'left' | 'right' | 'bottom' | 'top';\n /**\n * Id of the combobox component\n */\n id?: string;\n /**\n * The data test id of the combobox component\n */\n 'data-test-id'?: string;\n /**\n * Define the minimum distance between the select menu and the viewport edge\n * @default 'compact'\n */\n viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n /**\n * Function to fetch items asynchronously\n */\n getAsyncItems?: AsyncItemsFetcher;\n /**\n * Event handler called when the escape key is pressed\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n} & CommonAriaProps;\n\ntype ComboboxBaseProps = ComboboxSharedProps & {\n /**\n * The currently selected item values\n */\n selectedItemValues: string[];\n /**\n * Callback fired when an item is selected or deselected\n */\n onItemSelect: (value?: string) => void;\n /**\n * Callback fired when the selection is cleared\n */\n onClear: () => void;\n /**\n * Whether the combobox allows multiple selections\n */\n multiple: boolean;\n};\n\nconst ComboboxBaseInput = (\n {\n children,\n selectedItemValues,\n onItemSelect,\n onClear,\n placeholder = '',\n status = 'neutral',\n disabled,\n 'data-test-id': dataTestId = 'fondue-select-combobox',\n alignMenu = 'start',\n side = 'bottom',\n id,\n viewportCollisionPadding = 'compact',\n getAsyncItems,\n onEscapeKeyDown,\n multiple,\n ...props\n }: ComboboxBaseProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactNode => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n const inputCallbackRef = useCallback((node: HTMLInputElement | null): void => {\n inputRef.current = node;\n }, []);\n const { t } = useTranslation();\n const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText, asyncItemStatus } =\n useSelectData(children, getAsyncItems);\n const { wasClickedRef, onMouseDown, onFocus, onBlur } = useFocusRing();\n const { selectionDescriptionId, selectionDescription } = useSelectionDescription(\n multiple,\n selectedItemValues,\n getItemByValue,\n );\n const badgeItems = useBadgeItems(selectedItemValues, getItemByValue);\n\n const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n const selectedItems = useMemo((): SelectItem[] => {\n return selectedItemValues\n .map((value) => getItemByValue(value))\n .filter((item): item is SelectItem => item !== undefined && 'value' in item && 'label' in item);\n }, [selectedItemValues, getItemByValue]);\n\n const multipleSelectionResult = useMultipleSelection<SelectItem>(\n multiple\n ? {\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace) {\n const removedItem = selectedItems.find((item) => !newSelectedItems?.includes(item));\n if (removedItem) {\n onItemSelect(removedItem.value);\n }\n }\n },\n }\n : { selectedItems: [] },\n );\n const removeSelectedItem = multiple ? multipleSelectionResult.removeSelectedItem : (): void => {};\n\n const {\n getInputProps,\n getToggleButtonProps,\n getMenuProps,\n getItemProps,\n reset,\n selectedItem,\n isOpen,\n highlightedIndex,\n inputValue,\n } = useCombobox<SelectItem>({\n items,\n selectedItem: multiple ? null : (getItemByValue(selectedItemValues[0]) as SelectItem | null | undefined),\n defaultHighlightedIndex: 0,\n toggleButtonId: id,\n // Only set labelId if aria-labelledby is explicitly provided, otherwise downshift generates an orphan ID\n ...('aria-labelledby' in props && props['aria-labelledby'] ? { labelId: props['aria-labelledby'] } : {}),\n onSelectedItemChange: ({ selectedItem }) => {\n if (selectedItem) {\n onItemSelect(selectedItem.value);\n }\n if (multiple) {\n setFilterText('');\n }\n },\n onInputValueChange: ({ inputValue }) => {\n setFilterText(inputValue);\n },\n onIsOpenChange: () => {\n setHasInteractedSinceOpening(false);\n setFilterText('');\n },\n onHighlightedIndexChange: () => {\n setHasInteractedSinceOpening(true);\n },\n itemToString: (item) => (item ? item.label : ''),\n stateReducer: (state, actionAndChanges) => {\n const { changes, type } = actionAndChanges;\n if (multiple) {\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true,\n highlightedIndex: state.highlightedIndex,\n inputValue: '',\n };\n case useCombobox.stateChangeTypes.InputBlur:\n // Select item on blur (Tab key) but clear the input\n return {\n ...changes,\n inputValue: '',\n };\n }\n } else {\n // For single select, handle re-selection of the same item\n // onSelectedItemChange doesn't fire when selecting the same item, so we call onItemSelect here\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n if (\n changes.selectedItem &&\n state.selectedItem &&\n changes.selectedItem.value === state.selectedItem.value\n ) {\n onItemSelect(changes.selectedItem.value);\n }\n break;\n }\n }\n return changes;\n },\n });\n\n const valueInvalid = useMemo(() => {\n if (multiple) {\n return false;\n }\n return !getAsyncItems && !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase()));\n }, [inputValue, items, getAsyncItems, multiple]);\n\n const hasError = valueInvalid || !!asyncItemStatus.error || status === 'error';\n\n const handleDismissBadge = (value: string, preventFocusRing: boolean): void => {\n const item = getItemByValue(value) as SelectItem | undefined;\n if (item) {\n removeSelectedItem(item);\n onItemSelect(value);\n if (inputRef.current) {\n inputRef.current.focus();\n if (preventFocusRing) {\n inputRef.current.dataset.showFocusRing = 'false';\n }\n }\n }\n };\n\n const handleClear = (): void => {\n onClear();\n reset();\n };\n\n const handleBlur = (blurEvent: FocusEvent<HTMLInputElement, Element>): void => {\n onBlur(blurEvent);\n\n if (!multiple) {\n const selectedItemLabel = selectedItem?.label ?? '';\n const isOutdated = selectedItemLabel.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n if (isOutdated) {\n reset();\n }\n }\n\n if (getInputProps().onBlur) {\n getInputProps().onBlur?.(blurEvent);\n }\n };\n\n return (\n <RadixPopover.Root open={isOpen}>\n <RadixPopover.Anchor asChild>\n <div\n ref={forwardedRef}\n className={styles.root}\n data-status={hasError ? 'error' : status}\n data-disabled={disabled}\n data-empty={selectedItemValues.length === 0}\n >\n {multiple ? (\n <>\n {/* Hidden description for screen readers - announced on focus */}\n <span id={selectionDescriptionId} className={styles.srOnly}>\n {selectionDescription}\n </span>\n <CollapsibleBadges\n items={badgeItems}\n onDismiss={handleDismissBadge}\n selectedCount={selectedItemValues.length}\n >\n <input\n // eslint-disable-next-line react-hooks/refs\n {...getInputProps({\n ref: inputCallbackRef,\n 'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n // Remove auto-generated aria-labelledby if not explicitly provided\n 'aria-labelledby':\n 'aria-labelledby' in props && props['aria-labelledby']\n ? props['aria-labelledby']\n : undefined,\n 'aria-describedby': selectionDescription ? selectionDescriptionId : undefined,\n })}\n data-test-id={dataTestId}\n placeholder={selectedItemValues.length === 0 ? placeholder : ''}\n className={styles.multiSelectInput}\n disabled={disabled}\n onMouseDown={onMouseDown}\n onFocus={onFocus}\n onBlur={handleBlur}\n />\n </CollapsibleBadges>\n </>\n ) : (\n <input\n {...getInputProps({\n 'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n // Remove auto-generated aria-labelledby if not explicitly provided\n 'aria-labelledby':\n 'aria-labelledby' in props && props['aria-labelledby']\n ? props['aria-labelledby']\n : undefined,\n })}\n data-test-id={dataTestId}\n placeholder={placeholder}\n className={styles.input}\n disabled={disabled}\n onMouseDown={onMouseDown}\n onFocus={onFocus}\n onBlur={handleBlur}\n />\n )}\n {inputSlots}\n {clearButton ? <ClearButton onClear={handleClear}>{clearButton}</ClearButton> : null}\n {asyncItemStatus.isLoading && isOpen ? (\n <ForwardedRefSelectSlot name=\"right\" data-test-id={`${dataTestId}-right-slot`}>\n <LoadingCircle size=\"x-small\" data-test-id={`${dataTestId}-loading-circle`} />\n </ForwardedRefSelectSlot>\n ) : null}\n <div className={styles.icons}>\n <button\n aria-label={t('Select_toggleMenu')}\n {...getToggleButtonProps()}\n type=\"button\"\n disabled={disabled}\n onMouseDown={() => {\n wasClickedRef.current = true;\n }}\n >\n <IconCaretDown size={16} className={styles.caret} />\n </button>\n <StatusIcons status={status} hasError={hasError} dataTestId={dataTestId} />\n </div>\n </div>\n </RadixPopover.Anchor>\n\n <SelectMenu\n align={alignMenu}\n side={side}\n highlightedIndex={highlightedIndex}\n filterText={filterText}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n selectedItemValues={selectedItemValues}\n hasInteractedSinceOpening={hasInteractedSinceOpening}\n viewportCollisionPadding={viewportCollisionPadding}\n onEscapeKeyDown={onEscapeKeyDown}\n >\n {menuSlots}\n </SelectMenu>\n </RadixPopover.Root>\n );\n};\nComboboxBaseInput.displayName = 'Select.Combobox';\n\nexport const ComboboxBase = forwardRef<HTMLDivElement, ComboboxBaseProps>(ComboboxBaseInput);\n"],"names":["ComboboxBaseInput","children","selectedItemValues","onItemSelect","onClear","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","getAsyncItems","onEscapeKeyDown","multiple","props","forwardedRef","inputRef","useRef","inputCallbackRef","useCallback","node","t","useTranslation","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","asyncItemStatus","useSelectData","wasClickedRef","onMouseDown","onFocus","onBlur","useFocusRing","selectionDescriptionId","selectionDescription","useSelectionDescription","badgeItems","useBadgeItems","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","selectedItems","useMemo","value","item","multipleSelectionResult","useMultipleSelection","newSelectedItems","type","removedItem","removeSelectedItem","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","state","actionAndChanges","changes","hasError","handleDismissBadge","preventFocusRing","handleClear","handleBlur","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","Fragment","CollapsibleBadges","ClearButton","ForwardedRefSelectSlot","LoadingCircle","IconCaretDown","StatusIcons","SelectMenu","ComboboxBase","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"fondue-components95.js","sources":["../src/components/Select/components/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectSlotProps = {\n /**\n * The children of the select slot. This can be a custom component.\n */\n children?: ReactNode;\n /**\n * The slot name that is used to determine the placement.\n */\n name: 'menu' | 'left' | 'right' | 'clear';\n /**\n * The data test id of the select slot.\n */\n 'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n {children}\n </div>\n );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}
@@ -1,22 +1,14 @@
1
- import { useState as f } from "react";
2
- const I = (i, l, r) => {
3
- const [d, n] = f(r ?? []), e = l ?? d, s = (t) => {
4
- l || n(t), i == null || i(t);
5
- };
6
- return {
7
- selectedItemValues: e,
8
- toggleSelectedItem: (t) => {
9
- if (t === void 0)
10
- return;
11
- const c = e.findIndex((o) => t === o);
12
- c > 0 ? s([...e.slice(0, c), ...e.slice(c + 1)]) : s(c === 0 ? [...e.slice(1)] : [...e, t]);
13
- },
14
- clear: () => {
15
- s([]);
16
- }
17
- };
1
+ const t = "_root_1x5sc_5", c = "_thumb_1x5sc_17", o = "_track_1x5sc_21", s = "_range_1x5sc_28", _ = {
2
+ root: t,
3
+ thumb: c,
4
+ track: o,
5
+ range: s
18
6
  };
19
7
  export {
20
- I as useMultiselect
8
+ _ as default,
9
+ s as range,
10
+ t as root,
11
+ c as thumb,
12
+ o as track
21
13
  };
22
14
  //# sourceMappingURL=fondue-components96.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components96.js","sources":["../src/components/Select/hooks/useMultiselect.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useState } from 'react';\n\nexport const useMultiselect = (\n onSelect?: (value: string[] | null) => void,\n value?: string[] | null,\n defaultValue?: string[],\n) => {\n const [selectedItemsState, setSelectedItemsState] = useState<string[]>(defaultValue ?? []);\n\n const selectedItemValues = value ?? selectedItemsState;\n const setSelectedItems = (items: string[]) => {\n if (!value) {\n setSelectedItemsState(items);\n }\n onSelect?.(items);\n };\n\n const toggleSelectedItem = (toggledItem?: string) => {\n if (toggledItem === undefined) {\n return;\n }\n const index = selectedItemValues.findIndex((selectedItemValue) => toggledItem === selectedItemValue);\n if (index > 0) {\n setSelectedItems([...selectedItemValues.slice(0, index), ...selectedItemValues.slice(index + 1)]);\n } else if (index === 0) {\n setSelectedItems([...selectedItemValues.slice(1)]);\n } else {\n setSelectedItems([...selectedItemValues, toggledItem]);\n }\n };\n\n const clear = () => {\n setSelectedItems([]);\n };\n\n return {\n selectedItemValues,\n toggleSelectedItem,\n clear,\n };\n};\n"],"names":["useMultiselect","onSelect","value","defaultValue","selectedItemsState","setSelectedItemsState","useState","selectedItemValues","setSelectedItems","items","toggledItem","index","selectedItemValue"],"mappings":";AAIO,MAAMA,IAAiB,CAC1BC,GACAC,GACAC,MACC;AACD,QAAM,CAACC,GAAoBC,CAAqB,IAAIC,EAAmBH,KAAgB,CAAA,CAAE,GAEnFI,IAAqBL,KAASE,GAC9BI,IAAmB,CAACC,MAAoB;AAC1C,IAAKP,KACDG,EAAsBI,CAAK,GAE/BR,KAAA,QAAAA,EAAWQ;AAAA,EACf;AAoBA,SAAO;AAAA,IACH,oBAAAF;AAAA,IACA,oBApBuB,CAACG,MAAyB;AACjD,UAAIA,MAAgB;AAChB;AAEJ,YAAMC,IAAQJ,EAAmB,UAAU,CAACK,MAAsBF,MAAgBE,CAAiB;AACnG,MAAID,IAAQ,IACRH,EAAiB,CAAC,GAAGD,EAAmB,MAAM,GAAGI,CAAK,GAAG,GAAGJ,EAAmB,MAAMI,IAAQ,CAAC,CAAC,CAAC,IAEhGH,EADOG,MAAU,IACA,CAAC,GAAGJ,EAAmB,MAAM,CAAC,CAAC,IAE/B,CAAC,GAAGA,GAAoBG,CAAW,CAFH;AAAA,IAIzD;AAAA,IASI,OAPU,MAAM;AAChB,MAAAF,EAAiB,CAAA,CAAE;AAAA,IACvB;AAAA,EAKI;AAER;"}
1
+ {"version":3,"file":"fondue-components96.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,20 +1,14 @@
1
- import { useState as a, useCallback as u } from "react";
2
- const n = (s, t, e) => {
3
- const [f, r] = a(e ?? null), i = t !== void 0 ? t : f, l = i !== null ? [i] : [], m = u(
4
- (d) => {
5
- d !== void 0 && (t === void 0 && r(d), s == null || s(d));
6
- },
7
- [t, s]
8
- ), I = u(() => {
9
- t === void 0 && r(null), s == null || s(null);
10
- }, [t, s]);
11
- return {
12
- selectedItemValues: l,
13
- selectItem: m,
14
- clear: I
15
- };
1
+ const t = "_root_gywoe_3", o = "_content_gywoe_18", n = "_action_gywoe_22", c = "_actionButton_gywoe_200", _ = {
2
+ root: t,
3
+ content: o,
4
+ action: n,
5
+ actionButton: c
16
6
  };
17
7
  export {
18
- n as useSingleSelect
8
+ n as action,
9
+ c as actionButton,
10
+ o as content,
11
+ _ as default,
12
+ t as root
19
13
  };
20
14
  //# sourceMappingURL=fondue-components97.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components97.js","sources":["../src/components/Select/hooks/useSingleSelect.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useState } from 'react';\n\nexport const useSingleSelect = (\n onSelect?: (value: string | null) => void,\n value?: string | null,\n defaultValue?: string,\n) => {\n const [selectedItemState, setSelectedItemState] = useState<string | null>(defaultValue ?? null);\n\n const selectedValue = value !== undefined ? value : selectedItemState;\n const selectedItemValues = selectedValue !== null ? [selectedValue] : [];\n\n const selectItem = useCallback(\n (item?: string) => {\n if (item === undefined) {\n return;\n }\n if (value === undefined) {\n setSelectedItemState(item);\n }\n onSelect?.(item);\n },\n [value, onSelect],\n );\n\n const clear = useCallback(() => {\n if (value === undefined) {\n setSelectedItemState(null);\n }\n onSelect?.(null);\n }, [value, onSelect]);\n\n return {\n selectedItemValues,\n selectItem,\n clear,\n };\n};\n"],"names":["useSingleSelect","onSelect","value","defaultValue","selectedItemState","setSelectedItemState","useState","selectedValue","selectedItemValues","selectItem","useCallback","item","clear"],"mappings":";AAIO,MAAMA,IAAkB,CAC3BC,GACAC,GACAC,MACC;AACD,QAAM,CAACC,GAAmBC,CAAoB,IAAIC,EAAwBH,KAAgB,IAAI,GAExFI,IAAgBL,MAAU,SAAYA,IAAQE,GAC9CI,IAAqBD,MAAkB,OAAO,CAACA,CAAa,IAAI,CAAA,GAEhEE,IAAaC;AAAA,IACf,CAACC,MAAkB;AACf,MAAIA,MAAS,WAGTT,MAAU,UACVG,EAAqBM,CAAI,GAE7BV,KAAA,QAAAA,EAAWU;AAAA,IACf;AAAA,IACA,CAACT,GAAOD,CAAQ;AAAA,EAAA,GAGdW,IAAQF,EAAY,MAAM;AAC5B,IAAIR,MAAU,UACVG,EAAqB,IAAI,GAE7BJ,KAAA,QAAAA,EAAW;AAAA,EACf,GAAG,CAACC,GAAOD,CAAQ,CAAC;AAEpB,SAAO;AAAA,IACH,oBAAAO;AAAA,IACA,YAAAC;AAAA,IACA,OAAAG;AAAA,EAAA;AAER;"}
1
+ {"version":3,"file":"fondue-components97.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,154 +1,10 @@
1
- import { jsxs as d, jsx as n } from "react/jsx-runtime";
2
- import { IconCaretDown as V } from "@frontify/fondue-icons";
3
- import * as I from "@radix-ui/react-popover";
4
- import { useSelect as s } from "downshift";
5
- import { forwardRef as ee, useRef as te, useCallback as N, useState as ne, useMemo as oe } from "react";
6
- import { useBadgeItems as re } from "./fondue-components100.js";
7
- import { useFocusRing as ae } from "./fondue-components101.js";
8
- import { useSelectData as se } from "./fondue-components102.js";
9
- import { useSelectionDescription as ie } from "./fondue-components103.js";
10
- import r from "./fondue-components99.js";
11
- import { ClearButton as le } from "./fondue-components104.js";
12
- import { CollapsibleBadges as ce } from "./fondue-components105.js";
13
- import { SelectMenu as ue } from "./fondue-components106.js";
14
- import { StatusIcons as ge } from "./fondue-components107.js";
15
- const O = ({
16
- children: M,
17
- selectedItemValues: o,
18
- onItemSelect: p,
19
- onClear: P,
20
- placeholder: c = "",
21
- status: u = "neutral",
22
- disabled: f,
23
- alignMenu: R = "start",
24
- side: j = "bottom",
25
- id: k,
26
- showStringValue: y = !0,
27
- "data-test-id": b = "fondue-select",
28
- viewportCollisionPadding: E = "compact",
29
- onEscapeKeyDown: F,
30
- multiple: g,
31
- ...i
32
- }, a) => {
33
- const C = te(null), B = N(
34
- (e) => {
35
- C.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
36
- },
37
- [a]
38
- ), { inputSlots: H, menuSlots: K, items: w, clearButton: S, getItemByValue: l } = se(M), { onMouseDown: z, onFocus: A, onBlur: q } = ae(), { selectionDescriptionId: D, selectionDescription: m } = ie(
39
- g,
40
- o,
41
- l
42
- ), G = re(o, l), [J, v] = ne(!1), x = N(
43
- (e) => {
44
- const t = l(e);
45
- if (t)
46
- return !y && (t != null && t.children) ? t.children : t == null ? void 0 : t.label;
47
- },
48
- [l, y]
49
- ), { getToggleButtonProps: L, getMenuProps: Q, getItemProps: U, reset: W, isOpen: X, highlightedIndex: Y } = s({
50
- items: w,
51
- selectedItem: null,
52
- toggleButtonId: k,
53
- labelId: "aria-labelledby" in i ? i["aria-labelledby"] : void 0,
54
- onIsOpenChange: () => {
55
- v(!1);
56
- },
57
- onHighlightedIndexChange: () => {
58
- v(!0);
59
- },
60
- onSelectedItemChange: ({ selectedItem: e }) => {
61
- p(e == null ? void 0 : e.value);
62
- },
63
- itemToString: (e) => e ? e.label : "",
64
- ...g ? {
65
- stateReducer: (e, t) => {
66
- const { changes: h, type: $ } = t;
67
- switch ($) {
68
- case s.stateChangeTypes.ToggleButtonKeyDownEnter:
69
- case s.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
70
- case s.stateChangeTypes.ItemClick:
71
- return {
72
- ...h,
73
- isOpen: !0,
74
- highlightedIndex: e.highlightedIndex
75
- };
76
- case s.stateChangeTypes.ToggleButtonBlur:
77
- return {
78
- ...h,
79
- selectedItem: e.selectedItem
80
- };
81
- }
82
- return h;
83
- }
84
- } : {}
85
- }), T = u === "error", Z = () => {
86
- P(), W();
87
- }, _ = oe(
88
- () => x(o[0]) || c,
89
- [x, o, c]
90
- );
91
- return /* @__PURE__ */ d(I.Root, { open: X, children: [
92
- /* @__PURE__ */ n(I.Anchor, { asChild: !0, onMouseDown: z, onFocus: A, onBlur: q, children: /* @__PURE__ */ d(
93
- "div",
94
- {
95
- ref: B,
96
- className: r.root,
97
- "data-status": T ? "error" : u,
98
- "data-disabled": f,
99
- "data-empty": o.length === 0,
100
- "data-test-id": b,
101
- ...f ? {} : (
102
- // eslint-disable-next-line react-hooks/refs
103
- L({
104
- "aria-label": "aria-label" in i ? i["aria-label"] : void 0,
105
- "aria-describedby": m ? D : void 0,
106
- ref: B
107
- })
108
- ),
109
- children: [
110
- m ? /* @__PURE__ */ n("span", { id: D, className: r.srOnly, children: m }) : null,
111
- g ? /* @__PURE__ */ n("div", { className: r.selectedValue, children: /* @__PURE__ */ n(
112
- ce,
113
- {
114
- items: G,
115
- placeholder: c,
116
- onDismiss: (e) => {
117
- var t;
118
- p(e), (t = C.current) == null || t.focus();
119
- },
120
- selectedCount: o.length
121
- }
122
- ) }) : /* @__PURE__ */ n("span", { className: r.selectedValue, children: _ }),
123
- H,
124
- S ? /* @__PURE__ */ n(le, { onClear: Z, children: S }) : null,
125
- /* @__PURE__ */ d("div", { className: r.icons, children: [
126
- /* @__PURE__ */ n(V, { size: 16, className: r.caret }),
127
- /* @__PURE__ */ n(ge, { status: u, hasError: T, dataTestId: b })
128
- ] })
129
- ]
130
- }
131
- ) }),
132
- /* @__PURE__ */ n(
133
- ue,
134
- {
135
- align: R,
136
- side: j,
137
- highlightedIndex: Y,
138
- getMenuProps: Q,
139
- getItemProps: U,
140
- selectedItemValues: o,
141
- hasInteractedSinceOpening: J,
142
- viewportCollisionPadding: E,
143
- onEscapeKeyDown: F,
144
- children: K
145
- }
146
- )
147
- ] });
1
+ const t = "_root_2ej9d_5", o = "_thumb_2ej9d_62", s = {
2
+ root: t,
3
+ thumb: o
148
4
  };
149
- O.displayName = "Select";
150
- const Te = ee(O);
151
5
  export {
152
- Te as SelectBase
6
+ s as default,
7
+ t as root,
8
+ o as thumb
153
9
  };
154
10
  //# sourceMappingURL=fondue-components98.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components98.js","sources":["../src/components/Select/components/SelectBase.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useCallback, useMemo, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { useBadgeItems } from '../hooks/useBadgeItems';\nimport { useFocusRing } from '../hooks/useFocusRing';\nimport { useSelectData } from '../hooks/useSelectData';\nimport { useSelectionDescription } from '../hooks/useSelectionDescription';\nimport styles from '../styles/select.module.scss';\n\nimport { ClearButton } from './ClearButton';\nimport { CollapsibleBadges } from './CollapsibleBadges';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport { StatusIcons } from './StatusIcons';\n\nexport type SelectSharedProps = {\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 * 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 plain text (from the label prop) when set to true\n * Items child components are used if set to false\n * @default true\n */\n showStringValue?: boolean;\n /**\n * Define the minimum distance between the select menu and the viewport edge\n * @default 'compact'\n */\n viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n /**\n * Event handler called when the escape key is pressed\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n} & CommonAriaProps;\n\ntype SelectBaseProps = SelectSharedProps & {\n /**\n * The currently selected item values\n */\n selectedItemValues: string[];\n /**\n * Callback fired when an item is selected or deselected\n */\n onItemSelect: (value?: string) => void;\n /**\n * Callback fired when the selection is cleared\n */\n onClear: () => void;\n /**\n * Whether the select allows multiple selections\n */\n multiple: boolean;\n};\n\nconst SelectBaseInput = (\n {\n children,\n selectedItemValues,\n onItemSelect,\n onClear,\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 viewportCollisionPadding = 'compact',\n onEscapeKeyDown,\n multiple,\n ...props\n }: SelectBaseProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactNode => {\n const internalRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useCallback(\n (node: HTMLDivElement | null): void => {\n internalRef.current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n forwardedRef.current = node;\n }\n },\n [forwardedRef],\n );\n const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n const { onMouseDown, onFocus, onBlur } = useFocusRing();\n const { selectionDescriptionId, selectionDescription } = useSelectionDescription(\n multiple,\n selectedItemValues,\n getItemByValue,\n );\n const badgeItems = useBadgeItems(selectedItemValues, getItemByValue);\n\n const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n const getDisplayedValue = useCallback(\n (itemValue?: string): ReactNode => {\n const selectedItem = getItemByValue(itemValue);\n if (selectedItem) {\n return !showStringValue && selectedItem?.children ? selectedItem.children : selectedItem?.label;\n }\n return undefined;\n },\n [getItemByValue, showStringValue],\n );\n\n const { getToggleButtonProps, getMenuProps, getItemProps, reset, isOpen, highlightedIndex } = useSelect<{\n value: string;\n label: string;\n children?: ReactNode;\n }>({\n items,\n selectedItem: null,\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 onItemSelect(selectedItem?.value);\n },\n itemToString: (item) => (item ? item.label : ''),\n ...(multiple\n ? {\n stateReducer: (state, actionAndChanges) => {\n const { changes, type } = actionAndChanges;\n switch (type) {\n case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n case useSelect.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true,\n highlightedIndex: state.highlightedIndex,\n };\n case useSelect.stateChangeTypes.ToggleButtonBlur:\n return {\n ...changes,\n selectedItem: state.selectedItem,\n };\n }\n return changes;\n },\n }\n : {}),\n });\n\n const hasError = status === 'error';\n\n const handleClear = (): void => {\n onClear();\n reset();\n };\n\n const singleSelectValue = useMemo(\n (): ReactNode => getDisplayedValue(selectedItemValues[0]) || placeholder,\n [getDisplayedValue, selectedItemValues, placeholder],\n );\n\n return (\n <RadixPopover.Root open={isOpen}>\n <RadixPopover.Anchor asChild onMouseDown={onMouseDown} onFocus={onFocus} onBlur={onBlur}>\n <div\n ref={triggerRef}\n className={styles.root}\n data-status={hasError ? 'error' : status}\n data-disabled={disabled}\n data-empty={selectedItemValues.length === 0}\n data-test-id={dataTestId}\n {...(disabled\n ? {}\n : // eslint-disable-next-line react-hooks/refs\n getToggleButtonProps({\n 'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n 'aria-describedby': selectionDescription ? selectionDescriptionId : undefined,\n ref: triggerRef,\n }))}\n >\n {selectionDescription ? (\n <span id={selectionDescriptionId} className={styles.srOnly}>\n {selectionDescription}\n </span>\n ) : null}\n {multiple ? (\n <div className={styles.selectedValue}>\n <CollapsibleBadges\n items={badgeItems}\n placeholder={placeholder}\n onDismiss={(value) => {\n onItemSelect(value);\n internalRef.current?.focus();\n }}\n selectedCount={selectedItemValues.length}\n />\n </div>\n ) : (\n <span className={styles.selectedValue}>{singleSelectValue}</span>\n )}\n {inputSlots}\n {clearButton ? <ClearButton onClear={handleClear}>{clearButton}</ClearButton> : null}\n <div className={styles.icons}>\n <IconCaretDown size={16} className={styles.caret} />\n <StatusIcons status={status} hasError={hasError} dataTestId={dataTestId} />\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 selectedItemValues={selectedItemValues}\n hasInteractedSinceOpening={hasInteractedSinceOpening}\n viewportCollisionPadding={viewportCollisionPadding}\n onEscapeKeyDown={onEscapeKeyDown}\n >\n {menuSlots}\n </SelectMenu>\n </RadixPopover.Root>\n );\n};\nSelectBaseInput.displayName = 'Select';\n\nexport const SelectBase = forwardRef<HTMLDivElement, SelectBaseProps>(SelectBaseInput);\n"],"names":["SelectBaseInput","children","selectedItemValues","onItemSelect","onClear","placeholder","status","disabled","alignMenu","side","id","showStringValue","dataTestId","viewportCollisionPadding","onEscapeKeyDown","multiple","props","forwardedRef","internalRef","useRef","triggerRef","useCallback","node","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","onMouseDown","onFocus","onBlur","useFocusRing","selectionDescriptionId","selectionDescription","useSelectionDescription","badgeItems","useBadgeItems","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getDisplayedValue","itemValue","selectedItem","getToggleButtonProps","getMenuProps","getItemProps","reset","isOpen","highlightedIndex","useSelect","item","state","actionAndChanges","changes","type","hasError","handleClear","singleSelectValue","useMemo","jsxs","RadixPopover","jsx","styles","CollapsibleBadges","value","_a","ClearButton","IconCaretDown","StatusIcons","SelectMenu","SelectBase","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"fondue-components98.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}