@atom-learning/components 6.0.0-beta.32 → 6.0.0-beta.33

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 (79) hide show
  1. package/dist/components/banner/Banner.d.ts +2 -2
  2. package/dist/components/banner/banner-regular/BannerRegular.d.ts +95 -91
  3. package/dist/components/banner/banner-slim/BannerSlim.d.ts +95 -91
  4. package/dist/components/button/Button.js +1 -1
  5. package/dist/components/button/Button.js.map +1 -1
  6. package/dist/components/calendar/Calendar.js +1 -1
  7. package/dist/components/checkbox-group/CheckboxGroup.d.ts +90 -90
  8. package/dist/components/checkbox-tree/CheckboxTree.d.ts +344 -344
  9. package/dist/components/data-table/DataTable.d.ts +21 -21
  10. package/dist/components/data-table/DataTable.types.d.ts +1 -0
  11. package/dist/components/data-table/DataTable.types.js.map +1 -1
  12. package/dist/components/data-table/DataTableContext.js +1 -1
  13. package/dist/components/data-table/DataTableContext.js.map +1 -1
  14. package/dist/components/data-table/DataTableHead.js +1 -1
  15. package/dist/components/data-table/DataTableHeaderCell.js +1 -1
  16. package/dist/components/data-table/drag-and-drop/DragAndDropTable.js +1 -1
  17. package/dist/components/data-table/pagination/Pagination.js +1 -1
  18. package/dist/components/data-table/pagination/Pagination.js.map +1 -1
  19. package/dist/components/dialog/Dialog.d.ts +2 -2
  20. package/dist/components/dialog/DialogFooter.js +1 -1
  21. package/dist/components/dismissible/index.d.ts +2 -2
  22. package/dist/components/dismissible-group/index.d.ts +3 -3
  23. package/dist/components/index.d.ts +1 -0
  24. package/dist/components/keyboard-shortcut/index.d.ts +2 -2
  25. package/dist/components/loader/Loader.js +1 -1
  26. package/dist/components/markdown-content/components/MarkdownThematicBreak.js +1 -1
  27. package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts +162 -162
  28. package/dist/components/number-input/NumberInput.d.ts +1 -0
  29. package/dist/components/number-input/NumberInput.js +1 -1
  30. package/dist/components/number-input/NumberInput.js.map +1 -1
  31. package/dist/components/number-input/NumberInputStepper.d.ts +2 -1
  32. package/dist/components/number-input/NumberInputStepper.js +1 -1
  33. package/dist/components/number-input/NumberInputStepper.js.map +1 -1
  34. package/dist/components/pagination/PaginationPopover.js +1 -1
  35. package/dist/components/pagination/PaginationPopover.js.map +1 -1
  36. package/dist/components/password-field/PasswordField.js +1 -1
  37. package/dist/components/popover/Popover.d.ts +1 -0
  38. package/dist/components/popover/Popover.js +1 -1
  39. package/dist/components/popover/Popover.js.map +1 -1
  40. package/dist/components/search-input/SearchInput.js +1 -1
  41. package/dist/components/section-message/SectionMessage.js +1 -1
  42. package/dist/components/section-message/SectionMessage.js.map +1 -1
  43. package/dist/components/section-message/SectionMessageDescription.js +1 -1
  44. package/dist/components/section-message/SectionMessageDismiss.js +1 -1
  45. package/dist/components/section-message/SectionMessageIcon.js +1 -1
  46. package/dist/components/section-message/SectionMessageLayout.js +1 -1
  47. package/dist/components/segmented-control/SegmentedControl.d.ts +9 -9
  48. package/dist/components/side-bar/SideBarComponents.d.ts +1 -1
  49. package/dist/components/skeleton-loader/Skeleton.d.ts +5 -0
  50. package/dist/components/skeleton-loader/Skeleton.js +2 -0
  51. package/dist/components/skeleton-loader/Skeleton.js.map +1 -0
  52. package/dist/components/skeleton-loader/SkeletonButton.d.ts +5 -0
  53. package/dist/components/skeleton-loader/SkeletonButton.js +2 -0
  54. package/dist/components/skeleton-loader/SkeletonButton.js.map +1 -0
  55. package/dist/components/skeleton-loader/SkeletonHeading.d.ts +5 -0
  56. package/dist/components/skeleton-loader/SkeletonHeading.js +2 -0
  57. package/dist/components/skeleton-loader/SkeletonHeading.js.map +1 -0
  58. package/dist/components/skeleton-loader/SkeletonTabs.d.ts +6 -0
  59. package/dist/components/skeleton-loader/SkeletonTabs.js +2 -0
  60. package/dist/components/skeleton-loader/SkeletonTabs.js.map +1 -0
  61. package/dist/components/skeleton-loader/index.d.ts +4 -0
  62. package/dist/components/skeleton-loader/index.js +2 -0
  63. package/dist/components/skeleton-loader/index.js.map +1 -0
  64. package/dist/components/sortable/index.d.ts +3 -3
  65. package/dist/components/stepper/StepperStepLabel.d.ts +1 -1
  66. package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
  67. package/dist/components/tile-toggle-group/TileToggleGroupItem.js +1 -1
  68. package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map +1 -1
  69. package/dist/components/toggle-group/ToggleGroupItem.js +1 -1
  70. package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
  71. package/dist/components/tree/Tree.d.ts +243 -243
  72. package/dist/docgen.json +1 -1
  73. package/dist/index.cjs.js +1 -1
  74. package/dist/index.cjs.js.map +1 -1
  75. package/dist/index.js +1 -1
  76. package/dist/styled.js +1 -1
  77. package/package.json +1 -1
  78. package/src/index.css +14 -0
  79. package/src/responsive-variant-classes.css +1 -1
package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts CHANGED
@@ -10,68 +10,68 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
10
10
  as?: React.ElementType;
11
11
  }) => React.JSX.Element;
12
12
  Accordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
13
- children?: React.ReactNode;
14
- slot?: string | undefined | undefined;
13
+ children?: React.ReactNode | undefined;
14
+ slot?: string | undefined;
15
15
  style?: React.CSSProperties | undefined;
16
- title?: string | undefined | undefined;
16
+ title?: string | undefined;
17
17
  ref?: React.Ref<HTMLLIElement> | undefined;
18
- className?: string | undefined | undefined;
19
- color?: string | undefined | undefined;
20
- id?: string | undefined | undefined;
21
- lang?: string | undefined | undefined;
18
+ className?: string | undefined;
19
+ color?: string | undefined;
20
+ id?: string | undefined;
21
+ lang?: string | undefined;
22
22
  role?: React.AriaRole | undefined;
23
- tabIndex?: number | undefined | undefined;
24
- "aria-activedescendant"?: string | undefined | undefined;
23
+ tabIndex?: number | undefined;
24
+ "aria-activedescendant"?: string | undefined;
25
25
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
26
- "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
26
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
27
27
  "aria-busy"?: (boolean | "true" | "false") | undefined;
28
- "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
29
- "aria-colcount"?: number | undefined | undefined;
30
- "aria-colindex"?: number | undefined | undefined;
31
- "aria-colspan"?: number | undefined | undefined;
32
- "aria-controls"?: string | undefined | undefined;
33
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
34
- "aria-describedby"?: string | undefined | undefined;
35
- "aria-details"?: string | undefined | undefined;
28
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
29
+ "aria-colcount"?: number | undefined;
30
+ "aria-colindex"?: number | undefined;
31
+ "aria-colspan"?: number | undefined;
32
+ "aria-controls"?: string | undefined;
33
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
34
+ "aria-describedby"?: string | undefined;
35
+ "aria-details"?: string | undefined;
36
36
  "aria-disabled"?: (boolean | "true" | "false") | undefined;
37
- "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
38
- "aria-errormessage"?: string | undefined | undefined;
37
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
38
+ "aria-errormessage"?: string | undefined;
39
39
  "aria-expanded"?: (boolean | "true" | "false") | undefined;
40
- "aria-flowto"?: string | undefined | undefined;
40
+ "aria-flowto"?: string | undefined;
41
41
  "aria-grabbed"?: (boolean | "true" | "false") | undefined;
42
- "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
42
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
43
43
  "aria-hidden"?: (boolean | "true" | "false") | undefined;
44
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
45
- "aria-keyshortcuts"?: string | undefined | undefined;
46
- "aria-label"?: string | undefined | undefined;
47
- "aria-labelledby"?: string | undefined | undefined;
48
- "aria-level"?: number | undefined | undefined;
49
- "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
44
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
45
+ "aria-keyshortcuts"?: string | undefined;
46
+ "aria-label"?: string | undefined;
47
+ "aria-labelledby"?: string | undefined;
48
+ "aria-level"?: number | undefined;
49
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
50
50
  "aria-modal"?: (boolean | "true" | "false") | undefined;
51
51
  "aria-multiline"?: (boolean | "true" | "false") | undefined;
52
52
  "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
53
- "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
54
- "aria-owns"?: string | undefined | undefined;
55
- "aria-placeholder"?: string | undefined | undefined;
56
- "aria-posinset"?: number | undefined | undefined;
57
- "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
53
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
54
+ "aria-owns"?: string | undefined;
55
+ "aria-placeholder"?: string | undefined;
56
+ "aria-posinset"?: number | undefined;
57
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
58
58
  "aria-readonly"?: (boolean | "true" | "false") | undefined;
59
- "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
59
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
60
60
  "aria-required"?: (boolean | "true" | "false") | undefined;
61
- "aria-roledescription"?: string | undefined | undefined;
62
- "aria-rowcount"?: number | undefined | undefined;
63
- "aria-rowindex"?: number | undefined | undefined;
64
- "aria-rowspan"?: number | undefined | undefined;
61
+ "aria-roledescription"?: string | undefined;
62
+ "aria-rowcount"?: number | undefined;
63
+ "aria-rowindex"?: number | undefined;
64
+ "aria-rowspan"?: number | undefined;
65
65
  "aria-selected"?: (boolean | "true" | "false") | undefined;
66
- "aria-setsize"?: number | undefined | undefined;
67
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
68
- "aria-valuemax"?: number | undefined | undefined;
69
- "aria-valuemin"?: number | undefined | undefined;
70
- "aria-valuenow"?: number | undefined | undefined;
71
- "aria-valuetext"?: string | undefined | undefined;
66
+ "aria-setsize"?: number | undefined;
67
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
68
+ "aria-valuemax"?: number | undefined;
69
+ "aria-valuemin"?: number | undefined;
70
+ "aria-valuenow"?: number | undefined;
71
+ "aria-valuetext"?: string | undefined;
72
72
  dangerouslySetInnerHTML?: {
73
73
  __html: string | TrustedHTML;
74
- } | undefined | undefined;
74
+ } | undefined;
75
75
  onCopy?: React.ClipboardEventHandler<HTMLLIElement> | undefined;
76
76
  onCopyCapture?: React.ClipboardEventHandler<HTMLLIElement> | undefined;
77
77
  onCut?: React.ClipboardEventHandler<HTMLLIElement> | undefined;
@@ -233,46 +233,46 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
233
233
  onTransitionEnd?: React.TransitionEventHandler<HTMLLIElement> | undefined;
234
234
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLLIElement> | undefined;
235
235
  key?: React.Key | null | undefined;
236
- defaultChecked?: boolean | undefined | undefined;
236
+ defaultChecked?: boolean | undefined;
237
237
  defaultValue?: string | number | readonly string[] | undefined;
238
- suppressContentEditableWarning?: boolean | undefined | undefined;
239
- suppressHydrationWarning?: boolean | undefined | undefined;
240
- accessKey?: string | undefined | undefined;
241
- autoFocus?: boolean | undefined | undefined;
242
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
243
- contextMenu?: string | undefined | undefined;
244
- dir?: string | undefined | undefined;
238
+ suppressContentEditableWarning?: boolean | undefined;
239
+ suppressHydrationWarning?: boolean | undefined;
240
+ accessKey?: string | undefined;
241
+ autoFocus?: boolean | undefined;
242
+ contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
243
+ contextMenu?: string | undefined;
244
+ dir?: string | undefined;
245
245
  draggable?: (boolean | "true" | "false") | undefined;
246
- hidden?: boolean | undefined | undefined;
247
- nonce?: string | undefined | undefined;
248
- placeholder?: string | undefined | undefined;
246
+ hidden?: boolean | undefined;
247
+ nonce?: string | undefined;
248
+ placeholder?: string | undefined;
249
249
  spellCheck?: (boolean | "true" | "false") | undefined;
250
- translate?: "yes" | "no" | undefined | undefined;
251
- radioGroup?: string | undefined | undefined;
252
- about?: string | undefined | undefined;
253
- content?: string | undefined | undefined;
254
- datatype?: string | undefined | undefined;
250
+ translate?: "yes" | "no" | undefined;
251
+ radioGroup?: string | undefined;
252
+ about?: string | undefined;
253
+ content?: string | undefined;
254
+ datatype?: string | undefined;
255
255
  inlist?: any;
256
- prefix?: string | undefined | undefined;
257
- property?: string | undefined | undefined;
258
- rel?: string | undefined | undefined;
259
- resource?: string | undefined | undefined;
260
- rev?: string | undefined | undefined;
261
- typeof?: string | undefined | undefined;
262
- vocab?: string | undefined | undefined;
263
- autoCapitalize?: string | undefined | undefined;
264
- autoCorrect?: string | undefined | undefined;
265
- autoSave?: string | undefined | undefined;
266
- itemProp?: string | undefined | undefined;
267
- itemScope?: boolean | undefined | undefined;
268
- itemType?: string | undefined | undefined;
269
- itemID?: string | undefined | undefined;
270
- itemRef?: string | undefined | undefined;
271
- results?: number | undefined | undefined;
272
- security?: string | undefined | undefined;
273
- unselectable?: "on" | "off" | undefined | undefined;
274
- inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
275
- is?: string | undefined | undefined;
256
+ prefix?: string | undefined;
257
+ property?: string | undefined;
258
+ rel?: string | undefined;
259
+ resource?: string | undefined;
260
+ rev?: string | undefined;
261
+ typeof?: string | undefined;
262
+ vocab?: string | undefined;
263
+ autoCapitalize?: string | undefined;
264
+ autoCorrect?: string | undefined;
265
+ autoSave?: string | undefined;
266
+ itemProp?: string | undefined;
267
+ itemScope?: boolean | undefined;
268
+ itemType?: string | undefined;
269
+ itemID?: string | undefined;
270
+ itemRef?: string | undefined;
271
+ results?: number | undefined;
272
+ security?: string | undefined;
273
+ unselectable?: "on" | "off" | undefined;
274
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
275
+ is?: string | undefined;
276
276
  asChild?: boolean | undefined;
277
277
  }) => JSX.Element;
278
278
  AccordionContent: ({ children, ...rest }: import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, never> & {
@@ -284,68 +284,68 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
284
284
  as?: React.ElementType;
285
285
  }) => React.JSX.Element;
286
286
  Item: (props: {
287
- children?: React.ReactNode;
288
- slot?: string | undefined | undefined;
287
+ children?: React.ReactNode | undefined;
288
+ slot?: string | undefined;
289
289
  style?: React.CSSProperties | undefined;
290
- title?: string | undefined | undefined;
290
+ title?: string | undefined;
291
291
  ref?: React.Ref<HTMLLIElement> | undefined;
292
- className?: string | undefined | undefined;
293
- color?: string | undefined | undefined;
294
- id?: string | undefined | undefined;
295
- lang?: string | undefined | undefined;
292
+ className?: string | undefined;
293
+ color?: string | undefined;
294
+ id?: string | undefined;
295
+ lang?: string | undefined;
296
296
  role?: React.AriaRole | undefined;
297
- tabIndex?: number | undefined | undefined;
298
- "aria-activedescendant"?: string | undefined | undefined;
297
+ tabIndex?: number | undefined;
298
+ "aria-activedescendant"?: string | undefined;
299
299
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
300
- "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
300
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
301
301
  "aria-busy"?: (boolean | "true" | "false") | undefined;
302
- "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
303
- "aria-colcount"?: number | undefined | undefined;
304
- "aria-colindex"?: number | undefined | undefined;
305
- "aria-colspan"?: number | undefined | undefined;
306
- "aria-controls"?: string | undefined | undefined;
307
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
308
- "aria-describedby"?: string | undefined | undefined;
309
- "aria-details"?: string | undefined | undefined;
302
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
303
+ "aria-colcount"?: number | undefined;
304
+ "aria-colindex"?: number | undefined;
305
+ "aria-colspan"?: number | undefined;
306
+ "aria-controls"?: string | undefined;
307
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
308
+ "aria-describedby"?: string | undefined;
309
+ "aria-details"?: string | undefined;
310
310
  "aria-disabled"?: (boolean | "true" | "false") | undefined;
311
- "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
312
- "aria-errormessage"?: string | undefined | undefined;
311
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
312
+ "aria-errormessage"?: string | undefined;
313
313
  "aria-expanded"?: (boolean | "true" | "false") | undefined;
314
- "aria-flowto"?: string | undefined | undefined;
314
+ "aria-flowto"?: string | undefined;
315
315
  "aria-grabbed"?: (boolean | "true" | "false") | undefined;
316
- "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
316
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
317
317
  "aria-hidden"?: (boolean | "true" | "false") | undefined;
318
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
319
- "aria-keyshortcuts"?: string | undefined | undefined;
320
- "aria-label"?: string | undefined | undefined;
321
- "aria-labelledby"?: string | undefined | undefined;
322
- "aria-level"?: number | undefined | undefined;
323
- "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
318
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
319
+ "aria-keyshortcuts"?: string | undefined;
320
+ "aria-label"?: string | undefined;
321
+ "aria-labelledby"?: string | undefined;
322
+ "aria-level"?: number | undefined;
323
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
324
324
  "aria-modal"?: (boolean | "true" | "false") | undefined;
325
325
  "aria-multiline"?: (boolean | "true" | "false") | undefined;
326
326
  "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
327
- "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
328
- "aria-owns"?: string | undefined | undefined;
329
- "aria-placeholder"?: string | undefined | undefined;
330
- "aria-posinset"?: number | undefined | undefined;
331
- "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
327
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
328
+ "aria-owns"?: string | undefined;
329
+ "aria-placeholder"?: string | undefined;
330
+ "aria-posinset"?: number | undefined;
331
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
332
332
  "aria-readonly"?: (boolean | "true" | "false") | undefined;
333
- "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
333
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
334
334
  "aria-required"?: (boolean | "true" | "false") | undefined;
335
- "aria-roledescription"?: string | undefined | undefined;
336
- "aria-rowcount"?: number | undefined | undefined;
337
- "aria-rowindex"?: number | undefined | undefined;
338
- "aria-rowspan"?: number | undefined | undefined;
335
+ "aria-roledescription"?: string | undefined;
336
+ "aria-rowcount"?: number | undefined;
337
+ "aria-rowindex"?: number | undefined;
338
+ "aria-rowspan"?: number | undefined;
339
339
  "aria-selected"?: (boolean | "true" | "false") | undefined;
340
- "aria-setsize"?: number | undefined | undefined;
341
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
342
- "aria-valuemax"?: number | undefined | undefined;
343
- "aria-valuemin"?: number | undefined | undefined;
344
- "aria-valuenow"?: number | undefined | undefined;
345
- "aria-valuetext"?: string | undefined | undefined;
340
+ "aria-setsize"?: number | undefined;
341
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
342
+ "aria-valuemax"?: number | undefined;
343
+ "aria-valuemin"?: number | undefined;
344
+ "aria-valuenow"?: number | undefined;
345
+ "aria-valuetext"?: string | undefined;
346
346
  dangerouslySetInnerHTML?: {
347
347
  __html: string | TrustedHTML;
348
- } | undefined | undefined;
348
+ } | undefined;
349
349
  onCopy?: React.ClipboardEventHandler<HTMLLIElement> | undefined;
350
350
  onCopyCapture?: React.ClipboardEventHandler<HTMLLIElement> | undefined;
351
351
  onCut?: React.ClipboardEventHandler<HTMLLIElement> | undefined;
@@ -507,46 +507,46 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
507
507
  onTransitionEnd?: React.TransitionEventHandler<HTMLLIElement> | undefined;
508
508
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLLIElement> | undefined;
509
509
  key?: React.Key | null | undefined;
510
- defaultChecked?: boolean | undefined | undefined;
510
+ defaultChecked?: boolean | undefined;
511
511
  defaultValue?: string | number | readonly string[] | undefined;
512
- suppressContentEditableWarning?: boolean | undefined | undefined;
513
- suppressHydrationWarning?: boolean | undefined | undefined;
514
- accessKey?: string | undefined | undefined;
515
- autoFocus?: boolean | undefined | undefined;
516
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
517
- contextMenu?: string | undefined | undefined;
518
- dir?: string | undefined | undefined;
512
+ suppressContentEditableWarning?: boolean | undefined;
513
+ suppressHydrationWarning?: boolean | undefined;
514
+ accessKey?: string | undefined;
515
+ autoFocus?: boolean | undefined;
516
+ contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
517
+ contextMenu?: string | undefined;
518
+ dir?: string | undefined;
519
519
  draggable?: (boolean | "true" | "false") | undefined;
520
- hidden?: boolean | undefined | undefined;
521
- nonce?: string | undefined | undefined;
522
- placeholder?: string | undefined | undefined;
520
+ hidden?: boolean | undefined;
521
+ nonce?: string | undefined;
522
+ placeholder?: string | undefined;
523
523
  spellCheck?: (boolean | "true" | "false") | undefined;
524
- translate?: "yes" | "no" | undefined | undefined;
525
- radioGroup?: string | undefined | undefined;
526
- about?: string | undefined | undefined;
527
- content?: string | undefined | undefined;
528
- datatype?: string | undefined | undefined;
524
+ translate?: "yes" | "no" | undefined;
525
+ radioGroup?: string | undefined;
526
+ about?: string | undefined;
527
+ content?: string | undefined;
528
+ datatype?: string | undefined;
529
529
  inlist?: any;
530
- prefix?: string | undefined | undefined;
531
- property?: string | undefined | undefined;
532
- rel?: string | undefined | undefined;
533
- resource?: string | undefined | undefined;
534
- rev?: string | undefined | undefined;
535
- typeof?: string | undefined | undefined;
536
- vocab?: string | undefined | undefined;
537
- autoCapitalize?: string | undefined | undefined;
538
- autoCorrect?: string | undefined | undefined;
539
- autoSave?: string | undefined | undefined;
540
- itemProp?: string | undefined | undefined;
541
- itemScope?: boolean | undefined | undefined;
542
- itemType?: string | undefined | undefined;
543
- itemID?: string | undefined | undefined;
544
- itemRef?: string | undefined | undefined;
545
- results?: number | undefined | undefined;
546
- security?: string | undefined | undefined;
547
- unselectable?: "on" | "off" | undefined | undefined;
548
- inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
549
- is?: string | undefined | undefined;
530
+ prefix?: string | undefined;
531
+ property?: string | undefined;
532
+ rel?: string | undefined;
533
+ resource?: string | undefined;
534
+ rev?: string | undefined;
535
+ typeof?: string | undefined;
536
+ vocab?: string | undefined;
537
+ autoCapitalize?: string | undefined;
538
+ autoCorrect?: string | undefined;
539
+ autoSave?: string | undefined;
540
+ itemProp?: string | undefined;
541
+ itemScope?: boolean | undefined;
542
+ itemType?: string | undefined;
543
+ itemID?: string | undefined;
544
+ itemRef?: string | undefined;
545
+ results?: number | undefined;
546
+ security?: string | undefined;
547
+ unselectable?: "on" | "off" | undefined;
548
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
549
+ is?: string | undefined;
550
550
  asChild?: boolean | undefined;
551
551
  }) => JSX.Element;
552
552
  ItemContent: ({ children, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
package/dist/components/number-input/NumberInput.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface NumberInputProps {
10
10
  readonly?: boolean;
11
11
  size?: 'sm' | 'md' | 'lg';
12
12
  appearance?: 'standard' | 'modern';
13
+ emphasis?: 'bold';
13
14
  onValueChange?: (value: number) => void;
14
15
  stepperButtonLabels?: {
15
16
  increment?: string;
package/dist/components/number-input/NumberInput.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Minus as H,Plus as K}from"@atom-learning/icons";import L from"clsx";import*as n from"react";import{styled as V}from"../../styled.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as _}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as B}from"../flex/Flex.js";import{Input as O}from"../input/Input.js";import{NumberInputStepper as A}from"./NumberInputStepper.js";const P=V(B,{base:[],variants:{appearance:{standard:[],modern:["gap-px"]}}}),I=n.forwardRef(({value:u,defaultValue:x=0,onValueChange:N,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:i=!1,readonly:m=!1,size:w="md",stepperButtonLabels:M,disabledTooltipContent:T,className:z,appearance:d="standard",...D},R)=>{const[t,E]=n.useState(u||x);n.useEffect(()=>{typeof u<"u"&&E(u)},[u]);const s=n.useRef(null);n.useImperativeHandle(R,()=>s.current);const y=n.useMemo(()=>_(w),[w]),g={increment:"increment",decrement:"decrement",...M},k={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...T},p=t>=o,b=t<=r,f=n.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),a=n.useCallback(e=>{N==null||N(e),E(e)},[N]),S=n.useCallback(e=>{const l=Number(e.target.value.replace(/\D/g,""));a(l)},[a]),v=n.useCallback(()=>{var e;if(p||m)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(t)+c;a(f(l))},[f,p,m,c,a,t]),C=n.useCallback(()=>{var e;if(b||m)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(t)-c;a(f(l))},[f,b,m,r,c,a,t]),F=n.useCallback(e=>{if(e.nativeEvent.isComposing)return;const l=e.key,h={ArrowUp:v,ArrowRight:v,ArrowDown:C,ArrowLeft:C,Home:()=>a(r),End:()=>a(o)}[l];h&&(e.preventDefault(),h(e))},[v,C,a,r,o]),G={type:"number",value:t,...D,onChange:S,onKeyDown:F,size:w,appearance:d,className:L("rounded-none","w-16","disabled:opacity-30","disabled:pointer-events-none"),ref:s,readOnly:m,disabled:i,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":t,role:"spinbutton"};return n.createElement(P,{appearance:d,className:z},n.createElement(A,{onClick:C,icon:H,size:y,fieldAppearance:d,disabled:b||i,showTooltip:b&&!i,disabledTooltipContent:k.decrement,label:g.decrement,className:"border-r-none rounded-r-none"}),n.createElement(O,{...G}),n.createElement(A,{onClick:v,icon:K,size:y,fieldAppearance:d,disabled:p||i,showTooltip:p&&!i,disabledTooltipContent:k.increment,label:g.increment,className:"border-l-none rounded-l-none"}))});I.displayName="NumberInput";export{I as NumberInput};
1
+ import{Minus as X,Plus as G}from"@atom-learning/icons";import y from"clsx";import*as a from"react";import{styled as O}from"../../styled.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as P}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as U}from"../flex/Flex.js";import{Input as j}from"../input/Input.js";import{NumberInputStepper as _}from"./NumberInputStepper.js";const q=O(U,{base:[],variants:{appearance:{standard:[],modern:["gap-px"]},emphasis:{bold:["gap-0"]}}}),T=a.forwardRef(({value:p,defaultValue:z=0,onValueChange:w,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:d=!1,readonly:u=!1,size:N="md",stepperButtonLabels:M,disabledTooltipContent:D,className:F,appearance:m="standard",emphasis:l,...R},S)=>{const[n,E]=a.useState(p||z);a.useEffect(()=>{typeof p<"u"&&E(p)},[p]);const s=a.useRef(null);a.useImperativeHandle(S,()=>s.current);const g=a.useMemo(()=>P(N),[N]),k={increment:"increment",decrement:"decrement",...M},x={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...D},b=n>=o,f=n<=r,v=a.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),t=a.useCallback(e=>{w==null||w(e),E(e)},[w]),V=a.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),h=a.useCallback(()=>{var e;if(b||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)+c;t(v(i))},[v,b,u,c,t,n]),C=a.useCallback(()=>{var e;if(f||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)-c;t(v(i))},[v,f,u,r,c,t,n]),$=a.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,I={ArrowUp:h,ArrowRight:h,ArrowDown:C,ArrowLeft:C,Home:()=>t(r),End:()=>t(o)}[i];I&&(e.preventDefault(),I(e))},[h,C,t,r,o]),A=n<r||n>o,{state:B,"aria-invalid":H,...K}=R,L={type:"number",value:n,...K,onChange:V,onKeyDown:$,size:N,appearance:m,state:B||(A?"error":void 0),"aria-invalid":H||A||void 0,className:y("rounded-none","w-16","[&_>_input]:text-center","disabled:opacity-30","disabled:pointer-events-none",l==="bold"&&["rounded-1","[&_>_input[aria-invalid=true]]:text-danger","focus-within:[&_>_input]:text-grey-1000"],l==="bold"&&m==="standard"&&["border-none","[&:has([aria-invalid=true])]:border-2","[&:has([aria-invalid=true])]:border-danger","focus-within:border-2","focus-within:border-blue-800"]),ref:s,readOnly:u,disabled:d,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":n,role:"spinbutton"};return a.createElement(q,{appearance:m,emphasis:l,className:F},a.createElement(_,{onClick:C,icon:X,className:y(l!=="bold"&&"border-r-none rounded-r-none"),size:g,fieldAppearance:m,emphasis:l,disabled:f||d,showTooltip:f&&!d,disabledTooltipContent:x.decrement,label:k.decrement}),a.createElement(j,{...L}),a.createElement(_,{onClick:h,icon:G,className:y(l!=="bold"&&"border-l-none rounded-l-none"),size:g,fieldAppearance:m,emphasis:l,disabled:b||d,showTooltip:b&&!d,disabledTooltipContent:x.increment,label:k.increment}))});T.displayName="NumberInput";export{T as NumberInput};
2
2
  //# sourceMappingURL=NumberInput.js.map
package/dist/components/number-input/NumberInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n className?: string\n}\n\nconst NumberInputContainer = styled(Flex, {\n base: [],\n variants: {\n appearance: {\n standard: [],\n modern: ['gap-px']\n }\n }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n className,\n appearance = 'standard',\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value || defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /**\n * Keyboard Accessibility\n *\n * We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n *\n * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...rest,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n className: clsx(\n 'rounded-none',\n 'w-16',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ),\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <NumberInputContainer appearance={appearance} className={className}>\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n size={iconSize}\n fieldAppearance={appearance}\n disabled={isAtMin || isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n className=\"border-r-none rounded-r-none\"\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n size={iconSize}\n fieldAppearance={appearance}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n className=\"border-l-none rounded-l-none\"\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","clsx","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
1
+ {"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n emphasis?: 'bold'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n className?: string\n}\n\nconst NumberInputContainer = styled(Flex, {\n base: [],\n variants: {\n appearance: {\n standard: [],\n modern: ['gap-px']\n },\n emphasis: {\n bold: ['gap-0']\n }\n }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n className,\n appearance = 'standard',\n emphasis,\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value || defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /**\n * Keyboard Accessibility\n *\n * We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n *\n * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const hasError = internalValue < min || internalValue > max\n const {\n state: externalState,\n 'aria-invalid': externalAriaInvalid,\n ...restProps\n } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...restProps,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n state: externalState || (hasError ? 'error' : undefined),\n 'aria-invalid': externalAriaInvalid || hasError || undefined,\n className: clsx(\n 'rounded-none',\n 'w-16',\n '[&_>_input]:text-center',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none',\n emphasis === 'bold' && [\n 'rounded-1',\n '[&_>_input[aria-invalid=true]]:text-danger',\n 'focus-within:[&_>_input]:text-grey-1000'\n ],\n emphasis === 'bold' &&\n appearance === 'standard' && [\n 'border-none',\n '[&:has([aria-invalid=true])]:border-2',\n '[&:has([aria-invalid=true])]:border-danger',\n 'focus-within:border-2',\n 'focus-within:border-blue-800'\n ]\n ),\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <NumberInputContainer\n appearance={appearance}\n emphasis={emphasis}\n className={className}\n >\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n className={clsx(\n emphasis !== 'bold' && 'border-r-none rounded-r-none'\n )}\n size={iconSize}\n fieldAppearance={appearance}\n emphasis={emphasis}\n disabled={isAtMin || isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n className={clsx(\n emphasis !== 'bold' && 'border-l-none rounded-l-none'\n )}\n size={iconSize}\n fieldAppearance={appearance}\n emphasis={emphasis}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","emphasis","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","hasError","externalState","externalAriaInvalid","restProps","inputProps","clsx","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
package/dist/components/number-input/NumberInputStepper.d.ts CHANGED
@@ -12,8 +12,9 @@ declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
12
12
  }, "children" | "label" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
13
13
  children: React.ReactNode;
14
14
  label: string;
15
- } & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "fieldAppearance"> & {
15
+ } & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance"> & {
16
16
  fieldAppearance?: "standard" | "modern" | undefined;
17
+ emphasis?: "bold" | undefined;
17
18
  } & {
18
19
  as?: React.ElementType;
19
20
  }>;
package/dist/components/number-input/NumberInputStepper.js CHANGED
@@ -1,2 +1,2 @@
1
- import*as e from"react";import{styled as r}from"../../styled.js";import{ActionIcon as s}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{Tooltip as t}from"../tooltip/Tooltip.js";const m=r("span",{base:["z-1"]}),g=r(s,{base:["rounded-md","z-1","h-full!","hover:[&_svg]:text-grey-800","hover:bg-grey-100","[&_svg]:text-grey-700","active:[&_svg]:text-grey-900","active:bg-grey-200","disabled:opacity-30","disabled:pointer-events-none"],variants:{fieldAppearance:{standard:["bg-white","border-grey-800!"],modern:["bg-grey-100","border-grey-100!"]}}}),b=e.forwardRef((o,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:d,fieldAppearance:l="standard",...p}=o;return e.createElement(t,null,e.createElement(t.Trigger,{asChild:!0},e.createElement(m,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:l,ref:n,...p},e.createElement(c,{is:a})))),d&&e.createElement(t.Content,null,i))});export{b as NumberInputStepper};
1
+ import*as e from"react";import{styled as t}from"../../styled.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as r}from"../tooltip/Tooltip.js";const g=t("span",{base:["z-1"]}),c=t(l,{base:["rounded-md","z-1","h-full!","hover:[&_svg]:text-grey-800","hover:bg-grey-100","[&_svg]:text-grey-700","active:[&_svg]:text-grey-900","active:bg-grey-200","disabled:opacity-30","disabled:pointer-events-none"],variants:{fieldAppearance:{standard:["bg-white","border-grey-800!"],modern:["bg-grey-100","border-grey-100!","hover:bg-grey-200!"]},emphasis:{bold:["[&_svg]:text-primary-700","hover:bg-primary-100!","hover:[&_svg]:text-primary-800!","active:bg-primary-200!","active:[&_svg]:text-primary-900!"]}},compoundVariants:[{fieldAppearance:"standard",emphasis:"bold",class:["bg-white","border-primary-800!"]},{fieldAppearance:"modern",emphasis:"bold",class:["bg-white!","hover:bg-primary-100!"]}]}),b=e.forwardRef((a,o)=>{const{icon:i,disabledTooltipContent:n,showTooltip:p,fieldAppearance:s="standard",...d}=a;return e.createElement(r,null,e.createElement(r.Trigger,{asChild:!0},e.createElement(g,{tabIndex:-1},e.createElement(c,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:s,ref:o,...d},e.createElement(m,{is:i})))),p&&e.createElement(r.Content,null,n))});export{b as NumberInputStepper};
2
2
  //# sourceMappingURL=NumberInputStepper.js.map
package/dist/components/number-input/NumberInputStepper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', {\n base: ['z-1']\n})\n\nconst StyledStepperButton = styled(ActionIcon, {\n base: [\n 'rounded-md',\n 'z-1',\n 'h-full!',\n 'hover:[&_svg]:text-grey-800',\n 'hover:bg-grey-100',\n '[&_svg]:text-grey-700',\n 'active:[&_svg]:text-grey-900',\n 'active:bg-grey-200',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n fieldAppearance: {\n standard: ['bg-white', 'border-grey-800!'],\n modern: ['bg-grey-100', 'border-grey-100!']\n }\n }\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper = React.forwardRef<\n HTMLButtonElement,\n NumberInputStepperProps\n>((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n})\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"kNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAChC,KAAM,CAAC,KAAK,CACd,CAAC,EAEKC,EAAsBD,EAAOE,EAAY,CAC7C,KAAM,CACJ,aACA,MACA,UACA,8BACA,oBACA,wBACA,+BACA,qBACA,sBACA,8BACF,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CAAC,WAAY,kBAAkB,EACzC,OAAQ,CAAC,cAAe,kBAAkB,CAC5C,CACF,CACF,CAAC,EAYYC,EAAqBC,EAAM,WAGtC,CAACC,EAAOC,IAAiB,CACzB,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,WAClB,GAAGC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAM,CAAA,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}
1
+ {"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', {\n base: ['z-1']\n})\n\nconst StyledStepperButton = styled(ActionIcon, {\n base: [\n 'rounded-md',\n 'z-1',\n 'h-full!',\n 'hover:[&_svg]:text-grey-800',\n 'hover:bg-grey-100',\n '[&_svg]:text-grey-700',\n 'active:[&_svg]:text-grey-900',\n 'active:bg-grey-200',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n fieldAppearance: {\n standard: ['bg-white', 'border-grey-800!'],\n modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n },\n emphasis: {\n bold: [\n '[&_svg]:text-primary-700',\n 'hover:bg-primary-100!',\n 'hover:[&_svg]:text-primary-800!',\n 'active:bg-primary-200!',\n 'active:[&_svg]:text-primary-900!'\n ]\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n class: ['bg-white', 'border-primary-800!']\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n class: ['bg-white!', 'hover:bg-primary-100!']\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper = React.forwardRef<\n HTMLButtonElement,\n NumberInputStepperProps\n>((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n})\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"kNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAChC,KAAM,CAAC,KAAK,CACd,CAAC,EAEKC,EAAsBD,EAAOE,EAAY,CAC7C,KAAM,CACJ,aACA,MACA,UACA,8BACA,oBACA,wBACA,+BACA,qBACA,sBACA,8BACF,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CAAC,WAAY,kBAAkB,EACzC,OAAQ,CAAC,cAAe,mBAAoB,oBAAoB,CAClE,EACA,SAAU,CACR,KAAM,CACJ,2BACA,wBACA,kCACA,yBACA,kCACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,gBAAiB,WACjB,SAAU,OACV,MAAO,CAAC,WAAY,qBAAqB,CAC3C,EACA,CACE,gBAAiB,SACjB,SAAU,OACV,MAAO,CAAC,YAAa,uBAAuB,CAC9C,CACF,CACF,CAAC,EAYYC,EAAqBC,EAAM,WAGtC,CAACC,EAAOC,IAAiB,CACzB,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,WAClB,GAAGC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,IACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,IACpBK,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAAA,CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}
package/dist/components/pagination/PaginationPopover.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../form/useFormCustomContext.js";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"clsx";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:a,labels:i}=d(),p=Array.from({length:a},(o,l)=>l+1),[n,m]=t.useState(!1);return t.createElement(r,{open:n,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,className:"p-0"},t.createElement(g,{className:"flex flex-wrap justify-center gap-1 p-4"},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
1
+ import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../form/useFormCustomContext.js";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../skeleton-loader/Skeleton.js";import"clsx";import"../tile/Tile.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:a,labels:i}=d(),p=Array.from({length:a},(o,l)=>l+1),[n,m]=t.useState(!1);return t.createElement(r,{open:n,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,className:"p-0"},t.createElement(g,{className:"flex flex-wrap justify-center gap-1 p-4"},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
2
2
  //# sourceMappingURL=PaginationPopover.js.map
package/dist/components/pagination/PaginationPopover.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n <Flex className=\"flex flex-wrap justify-center gap-1 p-4\">\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"goIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAAA,EAC3DC,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,IACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,UAAU,KAAA,EAC3DD,EAAA,cAACK,EAAA,CAAK,UAAU,yCACbV,EAAAA,GAAA,YAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,CAAA,CAChC,CAGN,CAAA,CACF,CACF,CAEJ"}
1
+ {"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n <Flex className=\"flex flex-wrap justify-center gap-1 p-4\">\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"uqIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAAA,EAC3DC,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,IACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,UAAU,KAAA,EAC3DD,EAAA,cAACK,EAAA,CAAK,UAAU,yCACbV,EAAAA,GAAA,YAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,CAAA,CAChC,CAGN,CAAA,CACF,CACF,CAEJ"}
package/dist/components/password-field/PasswordField.js CHANGED
@@ -1,2 +1,2 @@
1
- import v from"clsx";import*as p from"react";import{useFormContext as w}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as C}from"../form/useFieldError.js";import{useFormCustomContext as P}from"../form/useFormCustomContext.js";import{PasswordInput as x}from"../password-input/PasswordInput.js";const m=({className:s,hideLabel:d,label:l="Password",name:r,prompt:n=void 0,description:c,validation:e,appearance:u,...f})=>{const{register:o}=w(),a=P(),{error:t}=C(r),F=e?o(e):o,i=(a==null?void 0:a.appearance)||u;return p.createElement(b,{description:c,error:t,fieldId:r,hideLabel:d,label:l,prompt:n,required:!!(e!=null&&e.required),appearance:i,className:v(s,"relative")},p.createElement(x,{autoComplete:"current-password",name:r,id:r,ref:F,appearance:i,...t!==void 0&&{state:"error"},...f}))};m.displayName="PasswordField";export{m as PasswordField};
1
+ import v from"clsx";import*as p from"react";import{useFormContext as w}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as C}from"../form/useFieldError.js";import{useFormCustomContext as P}from"../form/useFormCustomContext.js";import{PasswordInput as x}from"../password-input/PasswordInput.js";const m=({className:s,hideLabel:d,label:l="Password",name:e,prompt:n=void 0,description:c,validation:r,appearance:u,...f})=>{const{register:o}=w(),a=P(),{error:t}=C(e),F=r?o(r):o,i=(a==null?void 0:a.appearance)||u;return p.createElement(b,{description:c,error:t,fieldId:e,hideLabel:d,label:l,prompt:n,required:!!(r!=null&&r.required),appearance:i,className:v(s,"relative")},p.createElement(x,{autoComplete:"current-password",name:e,id:e,ref:F,appearance:i,...t!==void 0&&{state:"error"},...f}))};m.displayName="PasswordField";export{m as PasswordField};
2
2
  //# sourceMappingURL=PasswordField.js.map