@kanso-labs/kanso-ui 0.26.2 → 0.26.4

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 (177) hide show
  1. package/dist/calendar/index.js +1 -1
  2. package/dist/calendar/index.js.map +1 -1
  3. package/dist/calendar/months.js.map +1 -1
  4. package/dist/calendar/styles.js.map +1 -1
  5. package/dist/chip/styles.js.map +1 -1
  6. package/dist/components/app-bar/index.js +148 -40
  7. package/dist/components/app-bar/index.js.map +1 -1
  8. package/dist/components/autocomplete/index.js +1 -1
  9. package/dist/components/autocomplete/index.js.map +1 -1
  10. package/dist/components/avatar/index.js +46 -14
  11. package/dist/components/avatar/index.js.map +1 -1
  12. package/dist/components/breadcrumbs/index.js +1 -1
  13. package/dist/components/breadcrumbs/index.js.map +1 -1
  14. package/dist/components/button/index.js +67 -18
  15. package/dist/components/button/index.js.map +1 -1
  16. package/dist/components/calendar/index.js +1 -1
  17. package/dist/components/calendar/index.js.map +1 -1
  18. package/dist/components/card/index.js +71 -19
  19. package/dist/components/card/index.js.map +1 -1
  20. package/dist/components/checkbox/index.js +1 -1
  21. package/dist/components/checkbox/index.js.map +1 -1
  22. package/dist/components/checkbox-group/index.js +1 -1
  23. package/dist/components/checkbox-group/index.js.map +1 -1
  24. package/dist/components/chip/index.js +1 -1
  25. package/dist/components/chip/index.js.map +1 -1
  26. package/dist/components/chip-group/index.js +118 -28
  27. package/dist/components/chip-group/index.js.map +1 -1
  28. package/dist/components/code/index.js.map +1 -1
  29. package/dist/components/color-area/index.js +66 -12
  30. package/dist/components/color-area/index.js.map +1 -1
  31. package/dist/components/color-field/index.js +61 -12
  32. package/dist/components/color-field/index.js.map +1 -1
  33. package/dist/components/color-picker/index.js +146 -43
  34. package/dist/components/color-picker/index.js.map +1 -1
  35. package/dist/components/color-slider/index.js +116 -21
  36. package/dist/components/color-slider/index.js.map +1 -1
  37. package/dist/components/color-swatch/index.js +1 -1
  38. package/dist/components/color-swatch/index.js.map +1 -1
  39. package/dist/components/color-swatch-picker/index.js +1 -1
  40. package/dist/components/color-swatch-picker/index.js.map +1 -1
  41. package/dist/components/color-wheel/index.js +75 -11
  42. package/dist/components/color-wheel/index.js.map +1 -1
  43. package/dist/components/combo-box/index.js +113 -32
  44. package/dist/components/combo-box/index.js.map +1 -1
  45. package/dist/components/container/index.js +53 -10
  46. package/dist/components/container/index.js.map +1 -1
  47. package/dist/components/copy-field/index.js +95 -40
  48. package/dist/components/copy-field/index.js.map +1 -1
  49. package/dist/components/currency/index.js +68 -11
  50. package/dist/components/currency/index.js.map +1 -1
  51. package/dist/components/date-field/index.js +64 -15
  52. package/dist/components/date-field/index.js.map +1 -1
  53. package/dist/components/date-picker/index.js +121 -38
  54. package/dist/components/date-picker/index.js.map +1 -1
  55. package/dist/components/date-range-picker/index.js +154 -52
  56. package/dist/components/date-range-picker/index.js.map +1 -1
  57. package/dist/components/dialog/index.js +87 -19
  58. package/dist/components/dialog/index.js.map +1 -1
  59. package/dist/components/disclosure/index.js +43 -10
  60. package/dist/components/disclosure/index.js.map +1 -1
  61. package/dist/components/disclosure-group/index.js +49 -6
  62. package/dist/components/disclosure-group/index.js.map +1 -1
  63. package/dist/components/drop-zone/index.js +1 -1
  64. package/dist/components/drop-zone/index.js.map +1 -1
  65. package/dist/components/drop-zone/styles.js.map +1 -1
  66. package/dist/components/feed/index.js +52 -9
  67. package/dist/components/feed/index.js.map +1 -1
  68. package/dist/components/form/index.js +39 -6
  69. package/dist/components/form/index.js.map +1 -1
  70. package/dist/components/icon-button/index.js +89 -29
  71. package/dist/components/icon-button/index.js.map +1 -1
  72. package/dist/components/keycap/index.js.map +1 -1
  73. package/dist/components/link/index.js +52 -11
  74. package/dist/components/link/index.js.map +1 -1
  75. package/dist/components/list/index.js +96 -16
  76. package/dist/components/list/index.js.map +1 -1
  77. package/dist/components/list-box/index.js +45 -8
  78. package/dist/components/list-box/index.js.map +1 -1
  79. package/dist/components/list-detail/index.js +99 -20
  80. package/dist/components/list-detail/index.js.map +1 -1
  81. package/dist/components/list-item/index.js +42 -15
  82. package/dist/components/list-item/index.js.map +1 -1
  83. package/dist/components/menu/index.js +139 -23
  84. package/dist/components/menu/index.js.map +1 -1
  85. package/dist/components/meter/index.js +68 -8
  86. package/dist/components/meter/index.js.map +1 -1
  87. package/dist/components/navigation-tree/index.js +1 -1
  88. package/dist/components/navigation-tree/index.js.map +1 -1
  89. package/dist/components/number-field/index.js +135 -47
  90. package/dist/components/number-field/index.js.map +1 -1
  91. package/dist/components/popover/index.js +226 -49
  92. package/dist/components/popover/index.js.map +1 -1
  93. package/dist/components/product-icon/index.js +50 -17
  94. package/dist/components/product-icon/index.js.map +1 -1
  95. package/dist/components/progress-indicator/index.js +92 -9
  96. package/dist/components/progress-indicator/index.js.map +1 -1
  97. package/dist/components/radio-group/index.js +44 -10
  98. package/dist/components/radio-group/index.js.map +1 -1
  99. package/dist/components/range-calendar/index.js +1 -1
  100. package/dist/components/range-calendar/index.js.map +1 -1
  101. package/dist/components/search-field/index.js +44 -9
  102. package/dist/components/search-field/index.js.map +1 -1
  103. package/dist/components/segmented-button/index.js +111 -19
  104. package/dist/components/segmented-button/index.js.map +1 -1
  105. package/dist/components/select/index.js +48 -10
  106. package/dist/components/select/index.js.map +1 -1
  107. package/dist/components/separator/index.js +21 -6
  108. package/dist/components/separator/index.js.map +1 -1
  109. package/dist/components/sheet/index.js +87 -19
  110. package/dist/components/sheet/index.js.map +1 -1
  111. package/dist/components/slider/index.js +90 -18
  112. package/dist/components/slider/index.js.map +1 -1
  113. package/dist/components/snackbar/index.js +1 -1
  114. package/dist/components/snackbar/index.js.map +1 -1
  115. package/dist/components/stack/index.js +54 -9
  116. package/dist/components/stack/index.js.map +1 -1
  117. package/dist/components/supporting-pane/index.js +91 -20
  118. package/dist/components/supporting-pane/index.js.map +1 -1
  119. package/dist/components/switch/index.js +57 -12
  120. package/dist/components/switch/index.js.map +1 -1
  121. package/dist/components/table/index.js +229 -46
  122. package/dist/components/table/index.js.map +1 -1
  123. package/dist/components/tabs/index.js +1 -1
  124. package/dist/components/tabs/index.js.map +1 -1
  125. package/dist/components/tag/index.js +53 -10
  126. package/dist/components/tag/index.js.map +1 -1
  127. package/dist/components/text/index.js +54 -9
  128. package/dist/components/text/index.js.map +1 -1
  129. package/dist/components/text-area/index.js +70 -15
  130. package/dist/components/text-area/index.js.map +1 -1
  131. package/dist/components/text-field/index.js +73 -16
  132. package/dist/components/text-field/index.js.map +1 -1
  133. package/dist/components/time-field/index.js +64 -15
  134. package/dist/components/time-field/index.js.map +1 -1
  135. package/dist/components/token-field/index.js +133 -18
  136. package/dist/components/token-field/index.js.map +1 -1
  137. package/dist/components/toolbar/index.js +68 -11
  138. package/dist/components/toolbar/index.js.map +1 -1
  139. package/dist/components/tooltip/index.js +87 -11
  140. package/dist/components/tooltip/index.js.map +1 -1
  141. package/dist/components/tree/index.js +96 -16
  142. package/dist/components/tree/index.js.map +1 -1
  143. package/dist/drag/hooks.js +1 -1
  144. package/dist/drag/hooks.js.map +1 -1
  145. package/dist/drag/index.js +1 -1
  146. package/dist/drag/index.js.map +1 -1
  147. package/dist/drag/styles.js.map +1 -1
  148. package/dist/field/index.js +338 -96
  149. package/dist/field/index.js.map +1 -1
  150. package/dist/field/root.js.map +1 -1
  151. package/dist/glyphs/index.js +1 -1
  152. package/dist/glyphs/index.js.map +1 -1
  153. package/dist/hooks/useImageLoadingStatus.js +1 -1
  154. package/dist/hooks/useImageLoadingStatus.js.map +1 -1
  155. package/dist/hooks/useRipple.js +1 -1
  156. package/dist/hooks/useRipple.js.map +1 -1
  157. package/dist/indicator/index.js +1 -1
  158. package/dist/indicator/index.js.map +1 -1
  159. package/dist/indicator/styles.js.map +1 -1
  160. package/dist/layout.js.map +1 -1
  161. package/dist/render/aria.js.map +1 -1
  162. package/dist/render/useRender.js +66 -21
  163. package/dist/render/useRender.js.map +1 -1
  164. package/dist/row/index.js +97 -23
  165. package/dist/row/index.js.map +1 -1
  166. package/dist/row/styles.js.map +1 -1
  167. package/dist/segments/index.js.map +1 -1
  168. package/dist/segments/styles.js.map +1 -1
  169. package/dist/styles/chequer.js.map +1 -1
  170. package/dist/styles/color.js.map +1 -1
  171. package/dist/styles/merge.js.map +1 -1
  172. package/dist/styles/overlay.js.map +1 -1
  173. package/dist/styles/picker.js.map +1 -1
  174. package/dist/styles/ripple.js.map +1 -1
  175. package/dist/tokens/design.tokens.stylex.js.map +1 -1
  176. package/dist/tokens/values.js.map +1 -1
  177. package/package.json +8 -6
@@ -2,9 +2,9 @@ import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
2
2
  import { ArrowDownwardGlyph, ArrowUpwardGlyph } from "../../glyphs/index.js";
3
3
  import ProgressIndicator from "../progress-indicator/index.js";
4
4
  import Checkbox from "../checkbox/index.js";
5
+ import { c } from "react/compiler-runtime";
5
6
  import { createContext, useContext } from "react";
6
7
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
7
- import { c } from "react/compiler-runtime";
8
8
  import { Cell, Column, ColumnResizer, ResizableTableContainer, Row, Table, TableBody, TableFooter, TableHeader, TableLoadMoreItem } from "react-aria-components";
9
9
  //#region src/components/table/index.tsx
10
10
  const SelectAllLabelContext = createContext("Select all");
@@ -114,32 +114,130 @@ function sortArrowFor(direction) {
114
114
  * The call site's `className` and `style` land on the table, which is the
115
115
  * element a layout positions.
116
116
  */
117
- function Table$1({ onResize, onResizeEnd, resizable = false, resizeLabel = "Resize column", selectAllLabel = "Select all", selectLabel = "Select", stickyHeader = false, ...props }) {
118
- const table = /* @__PURE__ */ jsx(Table, {
119
- ...props,
120
- ...mergeStatefulStyles({ className: "x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt" }, props)
121
- });
122
- return /* @__PURE__ */ jsx(SelectAllLabelContext, {
123
- value: selectAllLabel,
124
- children: /* @__PURE__ */ jsx(SelectLabelContext, {
117
+ function Table$1(t0) {
118
+ const $ = c(35);
119
+ let T0;
120
+ let onResize;
121
+ let onResizeEnd;
122
+ let resizable;
123
+ let resizeLabel;
124
+ let selectAllLabel;
125
+ let selectLabel;
126
+ let stickyHeader;
127
+ let t1;
128
+ let t2;
129
+ if ($[0] !== t0) {
130
+ const { onResize: t3, onResizeEnd: t4, resizable: t5, resizeLabel: t6, selectAllLabel: t7, selectLabel: t8, stickyHeader: t9, ...props } = t0;
131
+ onResize = t3;
132
+ onResizeEnd = t4;
133
+ resizable = t5 === void 0 ? false : t5;
134
+ resizeLabel = t6 === void 0 ? "Resize column" : t6;
135
+ selectAllLabel = t7 === void 0 ? "Select all" : t7;
136
+ selectLabel = t8 === void 0 ? "Select" : t8;
137
+ stickyHeader = t9 === void 0 ? false : t9;
138
+ T0 = Table;
139
+ t1 = props;
140
+ t2 = mergeStatefulStyles({ className: "x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt" }, props);
141
+ $[0] = t0;
142
+ $[1] = T0;
143
+ $[2] = onResize;
144
+ $[3] = onResizeEnd;
145
+ $[4] = resizable;
146
+ $[5] = resizeLabel;
147
+ $[6] = selectAllLabel;
148
+ $[7] = selectLabel;
149
+ $[8] = stickyHeader;
150
+ $[9] = t1;
151
+ $[10] = t2;
152
+ } else {
153
+ T0 = $[1];
154
+ onResize = $[2];
155
+ onResizeEnd = $[3];
156
+ resizable = $[4];
157
+ resizeLabel = $[5];
158
+ selectAllLabel = $[6];
159
+ selectLabel = $[7];
160
+ stickyHeader = $[8];
161
+ t1 = $[9];
162
+ t2 = $[10];
163
+ }
164
+ let t3;
165
+ if ($[11] !== T0 || $[12] !== t1 || $[13] !== t2) {
166
+ t3 = /* @__PURE__ */ jsx(T0, {
167
+ ...t1,
168
+ ...t2
169
+ });
170
+ $[11] = T0;
171
+ $[12] = t1;
172
+ $[13] = t2;
173
+ $[14] = t3;
174
+ } else t3 = $[14];
175
+ const table = t3;
176
+ let t4;
177
+ if ($[15] !== onResize || $[16] !== onResizeEnd || $[17] !== resizable || $[18] !== table) {
178
+ t4 = resizable ? /* @__PURE__ */ jsx(ResizableTableContainer, {
179
+ className: resizableContainerClassName(),
180
+ onResize,
181
+ onResizeEnd,
182
+ children: table
183
+ }) : table;
184
+ $[15] = onResize;
185
+ $[16] = onResizeEnd;
186
+ $[17] = resizable;
187
+ $[18] = table;
188
+ $[19] = t4;
189
+ } else t4 = $[19];
190
+ let t5;
191
+ if ($[20] !== stickyHeader || $[21] !== t4) {
192
+ t5 = /* @__PURE__ */ jsx(StickyHeaderContext, {
193
+ value: stickyHeader,
194
+ children: t4
195
+ });
196
+ $[20] = stickyHeader;
197
+ $[21] = t4;
198
+ $[22] = t5;
199
+ } else t5 = $[22];
200
+ let t6;
201
+ if ($[23] !== resizable || $[24] !== t5) {
202
+ t6 = /* @__PURE__ */ jsx(ResizableContext, {
203
+ value: resizable,
204
+ children: t5
205
+ });
206
+ $[23] = resizable;
207
+ $[24] = t5;
208
+ $[25] = t6;
209
+ } else t6 = $[25];
210
+ let t7;
211
+ if ($[26] !== resizeLabel || $[27] !== t6) {
212
+ t7 = /* @__PURE__ */ jsx(ResizeLabelContext, {
213
+ value: resizeLabel,
214
+ children: t6
215
+ });
216
+ $[26] = resizeLabel;
217
+ $[27] = t6;
218
+ $[28] = t7;
219
+ } else t7 = $[28];
220
+ let t8;
221
+ if ($[29] !== selectLabel || $[30] !== t7) {
222
+ t8 = /* @__PURE__ */ jsx(SelectLabelContext, {
125
223
  value: selectLabel,
126
- children: /* @__PURE__ */ jsx(ResizeLabelContext, {
127
- value: resizeLabel,
128
- children: /* @__PURE__ */ jsx(ResizableContext, {
129
- value: resizable,
130
- children: /* @__PURE__ */ jsx(StickyHeaderContext, {
131
- value: stickyHeader,
132
- children: resizable ? /* @__PURE__ */ jsx(ResizableTableContainer, {
133
- className: resizableContainerClassName(),
134
- onResize,
135
- onResizeEnd,
136
- children: table
137
- }) : table
138
- })
139
- })
140
- })
141
- })
142
- });
224
+ children: t7
225
+ });
226
+ $[29] = selectLabel;
227
+ $[30] = t7;
228
+ $[31] = t8;
229
+ } else t8 = $[31];
230
+ let t9;
231
+ if ($[32] !== selectAllLabel || $[33] !== t8) {
232
+ t9 = /* @__PURE__ */ jsx(SelectAllLabelContext, {
233
+ value: selectAllLabel,
234
+ children: t8
235
+ });
236
+ $[32] = selectAllLabel;
237
+ $[33] = t8;
238
+ $[34] = t9;
239
+ } else t9 = $[34];
240
+ return t9;
143
241
  }
144
242
  /**
145
243
  * The rows. `emptyState` is what it shows when there are none — a table with
@@ -185,13 +283,35 @@ function TableBody$1(t0) {
185
283
  * One cell. `selection` draws this row's checkbox in place of whatever else
186
284
  * the cell would hold.
187
285
  */
188
- function TableCell({ children, selection = false, ...props }) {
286
+ function TableCell(t0) {
287
+ const $ = c(9);
288
+ const { children, selection: t1, ...props } = t0;
289
+ const selection = t1 === void 0 ? false : t1;
189
290
  const label = useContext(SelectLabelContext);
190
- return /* @__PURE__ */ jsx(Cell, {
191
- ...props,
192
- ...mergeStatefulStyles(cellStyles(selection), props),
193
- children: cellContent(children, selection, label)
194
- });
291
+ const T0 = Cell;
292
+ const t2 = mergeStatefulStyles(cellStyles(selection), props);
293
+ let t3;
294
+ if ($[0] !== children || $[1] !== label || $[2] !== selection) {
295
+ t3 = cellContent(children, selection, label);
296
+ $[0] = children;
297
+ $[1] = label;
298
+ $[2] = selection;
299
+ $[3] = t3;
300
+ } else t3 = $[3];
301
+ let t4;
302
+ if ($[4] !== T0 || $[5] !== props || $[6] !== t2 || $[7] !== t3) {
303
+ t4 = /* @__PURE__ */ jsx(T0, {
304
+ ...props,
305
+ ...t2,
306
+ children: t3
307
+ });
308
+ $[4] = T0;
309
+ $[5] = props;
310
+ $[6] = t2;
311
+ $[7] = t3;
312
+ $[8] = t4;
313
+ } else t4 = $[8];
314
+ return t4;
195
315
  }
196
316
  /**
197
317
  * One column. `allowsSorting` is React Aria's and makes the header cell
@@ -203,16 +323,42 @@ function TableCell({ children, selection = false, ...props }) {
203
323
  * that cannot collide — a column and a row with one id between them leaves
204
324
  * the table with no columns at all.
205
325
  */
206
- function TableColumn({ children, resizable = false, selection = false, ...props }) {
326
+ function TableColumn(t0) {
327
+ const $ = c(11);
328
+ const { children, resizable: t1, selection: t2, ...props } = t0;
329
+ const resizable = t1 === void 0 ? false : t1;
330
+ const selection = t2 === void 0 ? false : t2;
207
331
  const label = useContext(SelectAllLabelContext);
208
332
  const resizeLabel = useContext(ResizeLabelContext);
209
333
  const resizableTable = useContext(ResizableContext);
210
334
  const sticky = useContext(StickyHeaderContext);
211
- return /* @__PURE__ */ jsx(Column, {
212
- ...props,
213
- ...mergeStatefulStyles(columnStyles(selection, sticky), props),
214
- children: columnContent(children, selection, label, resizable && resizableTable, resizeLabel)
215
- });
335
+ const T0 = Column;
336
+ const t3 = mergeStatefulStyles(columnStyles(selection, sticky), props);
337
+ const t4 = resizable && resizableTable;
338
+ let t5;
339
+ if ($[0] !== children || $[1] !== label || $[2] !== resizeLabel || $[3] !== selection || $[4] !== t4) {
340
+ t5 = columnContent(children, selection, label, t4, resizeLabel);
341
+ $[0] = children;
342
+ $[1] = label;
343
+ $[2] = resizeLabel;
344
+ $[3] = selection;
345
+ $[4] = t4;
346
+ $[5] = t5;
347
+ } else t5 = $[5];
348
+ let t6;
349
+ if ($[6] !== T0 || $[7] !== props || $[8] !== t3 || $[9] !== t5) {
350
+ t6 = /* @__PURE__ */ jsx(T0, {
351
+ ...props,
352
+ ...t3,
353
+ children: t5
354
+ });
355
+ $[6] = T0;
356
+ $[7] = props;
357
+ $[8] = t3;
358
+ $[9] = t5;
359
+ $[10] = t6;
360
+ } else t6 = $[10];
361
+ return t6;
216
362
  }
217
363
  /**
218
364
  * A row under the body, for totals and the like. It is not part of the
@@ -273,12 +419,32 @@ function TableHeader$1(props) {
273
419
  * `onLoadMore` when this comes into view, and draws it only while
274
420
  * `isLoading`. It goes inside `Table.Body`, after the rows.
275
421
  */
276
- function TableLoadMore({ label = "Loading more", ...props }) {
277
- return /* @__PURE__ */ jsx(TableLoadMoreItem, {
278
- ...props,
279
- ...mergeStyles({ className: "xdd8jsf" }, props),
280
- ref: dropAriaLevel,
281
- children: /* @__PURE__ */ jsx("span", {
422
+ function TableLoadMore(t0) {
423
+ const $ = c(12);
424
+ let T0;
425
+ let label;
426
+ let t1;
427
+ let t2;
428
+ if ($[0] !== t0) {
429
+ const { label: t3, ...props } = t0;
430
+ label = t3 === void 0 ? "Loading more" : t3;
431
+ T0 = TableLoadMoreItem;
432
+ t1 = props;
433
+ t2 = mergeStyles({ className: "xdd8jsf" }, props);
434
+ $[0] = t0;
435
+ $[1] = T0;
436
+ $[2] = label;
437
+ $[3] = t1;
438
+ $[4] = t2;
439
+ } else {
440
+ T0 = $[1];
441
+ label = $[2];
442
+ t1 = $[3];
443
+ t2 = $[4];
444
+ }
445
+ let t3;
446
+ if ($[5] !== label) {
447
+ t3 = /* @__PURE__ */ jsx("span", {
282
448
  className: "x6s0dn4 x9f619 x78zum5 xl56j7k",
283
449
  children: /* @__PURE__ */ jsx(ProgressIndicator, {
284
450
  "aria-label": label,
@@ -286,8 +452,25 @@ function TableLoadMore({ label = "Loading more", ...props }) {
286
452
  size: "24px",
287
453
  variant: "circular"
288
454
  })
289
- })
290
- });
455
+ });
456
+ $[5] = label;
457
+ $[6] = t3;
458
+ } else t3 = $[6];
459
+ let t4;
460
+ if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
461
+ t4 = /* @__PURE__ */ jsx(T0, {
462
+ ...t1,
463
+ ...t2,
464
+ ref: dropAriaLevel,
465
+ children: t3
466
+ });
467
+ $[7] = T0;
468
+ $[8] = t1;
469
+ $[9] = t2;
470
+ $[10] = t3;
471
+ $[11] = t4;
472
+ } else t4 = $[11];
473
+ return t4;
291
474
  }
292
475
  /**
293
476
  * One row. Give every row an `id` — that is the key selection is reported
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n /** A function may compute the class from the body's render state. */\n className?: RACTableBodyProps<T>['className'];\n /**\n * What the table shows in place of rows when it has none. Drawn in a row\n * of its own spanning every column.\n */\n emptyState?: ReactNode;\n /** A function may compute the style from the body's render state. */\n style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n /** What the cell holds. */\n children?: ReactNode;\n /** A function may compute the class from the cell's render state. */\n className?: RACCellProps['className'];\n /**\n * Draws this row's selection checkbox instead of `children`. The row's own\n * text is what names the row; the box inside it takes the table's\n * `selectLabel`.\n */\n selection?: boolean;\n /** A function may compute the style from the cell's render state. */\n style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n /** The column's name. */\n children?: ReactNode;\n /** A function may compute the class from the column's render state. */\n className?: RACColumnProps['className'];\n /**\n * Draws a handle at the column's trailing edge that drags its width. Needs\n * the table's own `resizable` as well — React Aria keeps the resize state\n * on a container around the table, and without it there is nothing for a\n * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n * Aria's and apply only inside that container.\n */\n resizable?: boolean;\n /**\n * Draws the select-all checkbox instead of `children`, for the column the\n * rows put their own checkboxes in.\n */\n selection?: boolean;\n /** A function may compute the style from the column's render state. */\n style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, 'children'> & {\n /**\n * What the row says while it is loading. Read by a screen reader; the ring\n * itself carries no text.\n * @default 'Loading more'\n */\n label?: string;\n};\ntype TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n /** A function may compute the class from the table's render state. */\n className?: RACTableProps['className'];\n /** Called as a column is dragged, with every column's width. */\n onResize?: ResizableTableContainerProps['onResize'];\n /** Called once a drag ends, with every column's width. */\n onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n /**\n * Lets columns marked `resizable` be dragged, by putting the table in the\n * container React Aria keeps the resize state on. A resizable table sizes\n * to its columns rather than to its parent, and that container is what\n * fills the width and scrolls instead.\n */\n resizable?: boolean;\n /**\n * What the resize handle is called, for a screen reader. React Aria\n * composes it with the column's own name.\n * @default 'Resize column'\n */\n resizeLabel?: string;\n /**\n * What the select-all checkbox is called, for a screen reader.\n * @default 'Select all'\n */\n selectAllLabel?: string;\n /**\n * What each row's selection checkbox is called, for a screen reader. The\n * row's own text is what names the row; this names the box inside it.\n * @default 'Select'\n */\n selectLabel?: string;\n /**\n * Holds the header row in place while the rows scroll under it. Needs the\n * table inside something that scrolls; on a table that does not, it draws\n * the same as without it.\n */\n stickyHeader?: boolean;\n /** A function may compute the style from the table's render state. */\n style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n /** A function may compute the class from the row's render state. */\n className?: RACRowProps<T>['className'];\n /** A function may compute the style from the row's render state. */\n style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n if (!selection) {\n return children;\n }\n return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n return {\n 0: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 1: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n }\n }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n if (selection) {\n return <Checkbox aria-label={label} slot=\"selection\" />;\n }\n // The handle is a sibling of the name rather than part of it: React Aria\n // renders it as its own element, positioned against the cell's trailing\n // edge, which the name's own box does not reach.\n return (state: ColumnRenderProps): ReactNode => <>\n <span className=\"x6s0dn4 x78zum5 x126z3so\">\n {children}\n {sortArrowFor(state.sortDirection)}\n </span>\n {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n return (state: ColumnRenderProps) => ({\n 0: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 4: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n },\n 2: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n },\n 6: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n },\n 1: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 5: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 3: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 7: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n }\n })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows. A call rather than a function\n// written at the prop, for the same reason the others are.\nfunction emptyContent(emptyState: ReactNode) {\n // The return type is written out rather than inferred: `ReactNode` is a\n // union that includes a promise, and a function inferred as returning one\n // has to be `async`.\n return (_state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{emptyState}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n return {\n className: \"x9f619 xh8yej3 xw2csxc\"\n }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n return {\n 0: {\n className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n },\n 1: {\n className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n }\n }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n return {\n 0: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z\"\n },\n 4: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 2: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n },\n 6: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n },\n 1: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 5: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 3: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 7: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n }\n }[!!(state.selectionMode !== 'none') << 2 | !!state.isSelected << 1 | !!state.isDisabled << 0];\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n if (direction === undefined) {\n return null;\n }\n return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n * <Table.Header>\n * <Table.Column selection />\n * <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n * </Table.Header>\n * <Table.Body>\n * <Table.Row id=\"first\">\n * <Table.Cell selection />\n * <Table.Cell>First item</Table.Cell>\n * </Table.Row>\n * </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n onResize,\n onResizeEnd,\n resizable = false,\n resizeLabel = 'Resize column',\n selectAllLabel = 'Select all',\n selectLabel = 'Select',\n stickyHeader = false,\n ...props\n}: TableProps) {\n const table = <RACTable {...props} {...mergeStatefulStyles({\n className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n }, props)} />;\n return <SelectAllLabelContext value={selectAllLabel}>\n <SelectLabelContext value={selectLabel}>\n <ResizeLabelContext value={resizeLabel}>\n <ResizableContext value={resizable}>\n <StickyHeaderContext value={stickyHeader}>\n {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n {table}\n </RACResizableTableContainer> : table}\n </StickyHeaderContext>\n </ResizableContext>\n </ResizeLabelContext>\n </SelectLabelContext>\n </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `emptyState` is what it shows when there are none — a table with\n * no rows and nothing to say in their place is a blank area with a header\n * over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n emptyState,\n ...props\n}: TableBodyProps<T>) {\n return <RACTableBody<T> {...props} renderEmptyState={emptyState === undefined ? undefined : emptyContent(emptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n children,\n selection = false,\n ...props\n}: TableCellProps) {\n const label = useContext(SelectLabelContext);\n return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n {cellContent(children, selection, label)}\n </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n children,\n resizable = false,\n selection = false,\n ...props\n}: TableColumnProps) {\n const label = useContext(SelectAllLabelContext);\n const resizeLabel = useContext(ResizeLabelContext);\n const resizableTable = useContext(ResizableContext);\n const sticky = useContext(StickyHeaderContext);\n return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n return <RACTableFooter<T> {...props} {...mergeStyles({\n className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n const sticky = useContext(StickyHeaderContext);\n return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n 0: {\n className: \"x1j6faob x1q0q8m5 xso031l\"\n },\n 1: {}\n }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n label = 'Loading more',\n ...props\n}: TableLoadMoreProps) {\n return <RACTableLoadMoreItem {...props} {...mergeStyles({\n className: \"xdd8jsf\"\n }, props)} ref={dropAriaLevel}>\n <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n </span>\n </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["ReactNode","ColumnRenderProps","ColumnResizerRenderProps","CellProps","RACCellProps","ColumnProps","RACColumnProps","RowProps","RACRowProps","TableBodyProps","RACTableBodyProps","TableFooterProps","RACTableFooterProps","TableHeaderProps","RACTableHeaderProps","TableLoadMoreItemProps","RACTableLoadMoreItemProps","TableProps","RACTableProps","ResizableTableContainerProps","RowRenderProps","TableBodyRenderProps","stylex","createContext","useContext","Cell","RACCell","Column","RACColumn","ColumnResizer","RACColumnResizer","ResizableTableContainer","RACResizableTableContainer","Row","RACRow","Table","RACTable","TableBody","RACTableBody","TableFooter","RACTableFooter","TableHeader","RACTableHeader","TableLoadMoreItem","RACTableLoadMoreItem","ArrowDownwardGlyph","ArrowUpwardGlyph","mergeStatefulStyles","mergeStyles","colors","spacing","stateLayerOpacity","typography","Checkbox","ProgressIndicator","SelectAllLabelContext","SelectLabelContext","Omit","T","className","emptyState","style","TableCellProps","children","selection","TableColumnProps","resizable","TableLoadMoreProps","label","onResize","onResizeEnd","resizeLabel","selectAllLabel","selectLabel","stickyHeader","TableRowProps","ResizeLabelContext","ResizableContext","StickyHeaderContext","cellContent","cellStyles","columnContent","state","sortArrowFor","sortDirection","resizerClassName","columnStyles","sticky","allowsSorting","dropAriaLevel","node","HTMLTableRowElement","removeAttribute","emptyContent","_state","resizableContainerClassName","isResizing","isFocusVisible","rowStyles","selectionMode","isSelected","isDisabled","direction","undefined","t0","$","_c","T0","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","table","TableCell","TableColumn","resizableTable","0","1","TableLoadMore","TableRow","Body","Footer","Header","LoadMore"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n /** A function may compute the class from the body's render state. */\n className?: RACTableBodyProps<T>['className'];\n /**\n * What the table shows in place of rows when it has none. Drawn in a row\n * of its own spanning every column.\n */\n emptyState?: ReactNode;\n /** A function may compute the style from the body's render state. */\n style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n /** What the cell holds. */\n children?: ReactNode;\n /** A function may compute the class from the cell's render state. */\n className?: RACCellProps['className'];\n /**\n * Draws this row's selection checkbox instead of `children`. The row's own\n * text is what names the row; the box inside it takes the table's\n * `selectLabel`.\n */\n selection?: boolean;\n /** A function may compute the style from the cell's render state. */\n style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n /** The column's name. */\n children?: ReactNode;\n /** A function may compute the class from the column's render state. */\n className?: RACColumnProps['className'];\n /**\n * Draws a handle at the column's trailing edge that drags its width. Needs\n * the table's own `resizable` as well — React Aria keeps the resize state\n * on a container around the table, and without it there is nothing for a\n * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n * Aria's and apply only inside that container.\n */\n resizable?: boolean;\n /**\n * Draws the select-all checkbox instead of `children`, for the column the\n * rows put their own checkboxes in.\n */\n selection?: boolean;\n /** A function may compute the style from the column's render state. */\n style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, 'children'> & {\n /**\n * What the row says while it is loading. Read by a screen reader; the ring\n * itself carries no text.\n * @default 'Loading more'\n */\n label?: string;\n};\ntype TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n /** A function may compute the class from the table's render state. */\n className?: RACTableProps['className'];\n /** Called as a column is dragged, with every column's width. */\n onResize?: ResizableTableContainerProps['onResize'];\n /** Called once a drag ends, with every column's width. */\n onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n /**\n * Lets columns marked `resizable` be dragged, by putting the table in the\n * container React Aria keeps the resize state on. A resizable table sizes\n * to its columns rather than to its parent, and that container is what\n * fills the width and scrolls instead.\n */\n resizable?: boolean;\n /**\n * What the resize handle is called, for a screen reader. React Aria\n * composes it with the column's own name.\n * @default 'Resize column'\n */\n resizeLabel?: string;\n /**\n * What the select-all checkbox is called, for a screen reader.\n * @default 'Select all'\n */\n selectAllLabel?: string;\n /**\n * What each row's selection checkbox is called, for a screen reader. The\n * row's own text is what names the row; this names the box inside it.\n * @default 'Select'\n */\n selectLabel?: string;\n /**\n * Holds the header row in place while the rows scroll under it. Needs the\n * table inside something that scrolls; on a table that does not, it draws\n * the same as without it.\n */\n stickyHeader?: boolean;\n /** A function may compute the style from the table's render state. */\n style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n /** A function may compute the class from the row's render state. */\n className?: RACRowProps<T>['className'];\n /** A function may compute the style from the row's render state. */\n style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n if (!selection) {\n return children;\n }\n return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n return {\n 0: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 1: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n }\n }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n if (selection) {\n return <Checkbox aria-label={label} slot=\"selection\" />;\n }\n // The handle is a sibling of the name rather than part of it: React Aria\n // renders it as its own element, positioned against the cell's trailing\n // edge, which the name's own box does not reach.\n return (state: ColumnRenderProps): ReactNode => <>\n <span className=\"x6s0dn4 x78zum5 x126z3so\">\n {children}\n {sortArrowFor(state.sortDirection)}\n </span>\n {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n return (state: ColumnRenderProps) => ({\n 0: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 4: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n },\n 2: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n },\n 6: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n },\n 1: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 5: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 3: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 7: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n }\n })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows. A call rather than a function\n// written at the prop, for the same reason the others are.\nfunction emptyContent(emptyState: ReactNode) {\n // The return type is written out rather than inferred: `ReactNode` is a\n // union that includes a promise, and a function inferred as returning one\n // has to be `async`.\n return (_state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{emptyState}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n return {\n className: \"x9f619 xh8yej3 xw2csxc\"\n }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n return {\n 0: {\n className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n },\n 1: {\n className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n }\n }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n return {\n 0: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z\"\n },\n 4: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 2: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n },\n 6: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n },\n 1: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 5: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 3: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 7: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n }\n }[!!(state.selectionMode !== 'none') << 2 | !!state.isSelected << 1 | !!state.isDisabled << 0];\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n if (direction === undefined) {\n return null;\n }\n return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n * <Table.Header>\n * <Table.Column selection />\n * <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n * </Table.Header>\n * <Table.Body>\n * <Table.Row id=\"first\">\n * <Table.Cell selection />\n * <Table.Cell>First item</Table.Cell>\n * </Table.Row>\n * </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n onResize,\n onResizeEnd,\n resizable = false,\n resizeLabel = 'Resize column',\n selectAllLabel = 'Select all',\n selectLabel = 'Select',\n stickyHeader = false,\n ...props\n}: TableProps) {\n const table = <RACTable {...props} {...mergeStatefulStyles({\n className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n }, props)} />;\n return <SelectAllLabelContext value={selectAllLabel}>\n <SelectLabelContext value={selectLabel}>\n <ResizeLabelContext value={resizeLabel}>\n <ResizableContext value={resizable}>\n <StickyHeaderContext value={stickyHeader}>\n {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n {table}\n </RACResizableTableContainer> : table}\n </StickyHeaderContext>\n </ResizableContext>\n </ResizeLabelContext>\n </SelectLabelContext>\n </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `emptyState` is what it shows when there are none — a table with\n * no rows and nothing to say in their place is a blank area with a header\n * over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n emptyState,\n ...props\n}: TableBodyProps<T>) {\n return <RACTableBody<T> {...props} renderEmptyState={emptyState === undefined ? undefined : emptyContent(emptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n children,\n selection = false,\n ...props\n}: TableCellProps) {\n const label = useContext(SelectLabelContext);\n return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n {cellContent(children, selection, label)}\n </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n children,\n resizable = false,\n selection = false,\n ...props\n}: TableColumnProps) {\n const label = useContext(SelectAllLabelContext);\n const resizeLabel = useContext(ResizeLabelContext);\n const resizableTable = useContext(ResizableContext);\n const sticky = useContext(StickyHeaderContext);\n return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n return <RACTableFooter<T> {...props} {...mergeStyles({\n className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n const sticky = useContext(StickyHeaderContext);\n return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n 0: {\n className: \"x1j6faob x1q0q8m5 xso031l\"\n },\n 1: {}\n }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n label = 'Loading more',\n ...props\n}: TableLoadMoreProps) {\n return <RACTableLoadMoreItem {...props} {...mergeStyles({\n className: \"xdd8jsf\"\n }, props)} ref={dropAriaLevel}>\n <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n </span>\n </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
2
+ import { c } from "react/compiler-runtime";
2
3
  import { createContext, useContext, useEffect, useState } from "react";
3
4
  import { jsx, jsxs } from "react/jsx-runtime";
4
- import { c } from "react/compiler-runtime";
5
5
  import { SelectionIndicator, Tab, TabList, TabPanel, TabPanels, Tabs } from "react-aria-components";
6
6
  //#region src/components/tabs/index.tsx
7
7
  const NO_PANELS = /* @__PURE__ */ new Set();
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["previous","next","register","panels","children"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, TabPanels as RACTabPanels, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\n\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n return (state: TabRenderProps & {\n defaultChildren: ReactNode;\n }) => <span className=\"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\">\n {typeof children === 'function' ? children(state) : children}\n <RACSelectionIndicator className=\"x12w9bfk xnety89 xuoj239 x13dhofw xz4iguh x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd\" />\n </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n return (domProps, state) => {\n const adjusted = hasPanel ? domProps : {\n ...domProps,\n 'aria-controls': undefined\n };\n if (render !== undefined) {\n return render(adjusted, state);\n }\n if ('href' in adjusted) {\n // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n return <a {...adjusted} />;\n }\n return <div {...adjusted} />;\n };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n children,\n ...props\n}: TabsProps) {\n const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n const register = useCallback((id: Key) => {\n setPanels(previous => {\n if (previous.has(id)) {\n return previous;\n }\n const next = new Set(previous);\n next.add(id);\n return next;\n });\n return () => {\n setPanels(previous => {\n if (!previous.has(id)) {\n return previous;\n }\n const next = new Set(previous);\n next.delete(id);\n return next;\n });\n };\n }, []);\n return <RACTabs {...props}>\n <RegisterPanelContext value={register}>\n <PanelsContext value={panels}>{children}</PanelsContext>\n </RegisterPanelContext>\n </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n return <TabList {...props} {...mergeStatefulStyles({\n className: \"xp05xdj x9f619 x78zum5\"\n }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n const register = useContext(RegisterPanelContext);\n const {\n id\n } = props;\n useEffect(() => {\n if (id === undefined) {\n return undefined;\n }\n return register(id);\n }, [id, register]);\n return <TabPanel {...props} {...mergeStatefulStyles({\n className: \"x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\"\n }, props)} />;\n}\n\n/**\n * An optional box around the panels, which animates its height as one panel\n * gives way to the next. Without it the panels still work; the box around\n * them simply jumps from one height to the other.\n */\nfunction TabsPanels(props: TabsPanelsProps) {\n return <RACTabPanels {...props} {...mergeStyles({\n className: \"x12w9bfk x1t2j4n3 x9f619 xb3r6kr xioksi3 x1f55p5c x1seskgd\"\n }, props)} />;\n}\nfunction TabsTab({\n children,\n render,\n ...props\n}: TabsTabProps) {\n const panels = useContext(PanelsContext);\n const hasPanel = props.id !== undefined && panels.has(props.id);\n return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n {tabContent(children)}\n </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n return {\n 0: {\n className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n },\n 2: {\n className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n },\n 1: {\n className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 3: {\n className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n }\n }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Panels = TabsPanels;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsPanelsProps = Omit<TabPanelsProps<object>, 'children'> & {\n children?: ReactNode;\n};\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["ReactNode","Key","TabsProps","RACTabsProps","TabListProps","TabPanelProps","TabPanelsProps","TabProps","TabRenderProps","stylex","createContext","useCallback","useContext","useEffect","useState","SelectionIndicator","RACSelectionIndicator","TabPanels","RACTabPanels","Tabs","RACTabs","Tab","TabList","TabPanel","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","NO_PANELS","ReadonlySet","Set","PanelsContext","RegisterPanelContext","id","Omit","children","tabContent","state","defaultChildren","tabRenderer","hasPanel","render","NonNullable","domProps","adjusted","undefined","t0","$","_c","props","panels","setPanels","t1","Symbol","for","previous","has","next","add","previous_0","next_0","delete","register","t2","t3","TabsList","className","TabsPanel","TabsPanels","TabsTab","T0","tabStyles","t4","isSelected","isDisabled","List","Panel","Panels","TabsListProps","TabsPanelProps","TabsPanelsProps","TabsTabProps"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, TabPanels as RACTabPanels, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\n\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n return (state: TabRenderProps & {\n defaultChildren: ReactNode;\n }) => <span className=\"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\">\n {typeof children === 'function' ? children(state) : children}\n <RACSelectionIndicator className=\"x12w9bfk xnety89 xuoj239 x13dhofw xz4iguh x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd\" />\n </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n return (domProps, state) => {\n const adjusted = hasPanel ? domProps : {\n ...domProps,\n 'aria-controls': undefined\n };\n if (render !== undefined) {\n return render(adjusted, state);\n }\n if ('href' in adjusted) {\n // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n return <a {...adjusted} />;\n }\n return <div {...adjusted} />;\n };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n children,\n ...props\n}: TabsProps) {\n const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n const register = useCallback((id: Key) => {\n setPanels(previous => {\n if (previous.has(id)) {\n return previous;\n }\n const next = new Set(previous);\n next.add(id);\n return next;\n });\n return () => {\n setPanels(previous => {\n if (!previous.has(id)) {\n return previous;\n }\n const next = new Set(previous);\n next.delete(id);\n return next;\n });\n };\n }, []);\n return <RACTabs {...props}>\n <RegisterPanelContext value={register}>\n <PanelsContext value={panels}>{children}</PanelsContext>\n </RegisterPanelContext>\n </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n return <TabList {...props} {...mergeStatefulStyles({\n className: \"xp05xdj x9f619 x78zum5\"\n }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n const register = useContext(RegisterPanelContext);\n const {\n id\n } = props;\n useEffect(() => {\n if (id === undefined) {\n return undefined;\n }\n return register(id);\n }, [id, register]);\n return <TabPanel {...props} {...mergeStatefulStyles({\n className: \"x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\"\n }, props)} />;\n}\n\n/**\n * An optional box around the panels, which animates its height as one panel\n * gives way to the next. Without it the panels still work; the box around\n * them simply jumps from one height to the other.\n */\nfunction TabsPanels(props: TabsPanelsProps) {\n return <RACTabPanels {...props} {...mergeStyles({\n className: \"x12w9bfk x1t2j4n3 x9f619 xb3r6kr xioksi3 x1f55p5c x1seskgd\"\n }, props)} />;\n}\nfunction TabsTab({\n children,\n render,\n ...props\n}: TabsTabProps) {\n const panels = useContext(PanelsContext);\n const hasPanel = props.id !== undefined && panels.has(props.id);\n return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n {tabContent(children)}\n </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n return {\n 0: {\n className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n },\n 2: {\n className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n },\n 1: {\n className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 3: {\n className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n }\n }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Panels = TabsPanels;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsPanelsProps = Omit<TabPanelsProps<object>, 'children'> & {\n children?: ReactNode;\n};\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}