@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (276) hide show
  1. package/QUICKSTART.md +18 -0
  2. package/README.md +19 -24
  3. package/components.json +240 -5694
  4. package/dist/accordion.d.ts +11 -0
  5. package/dist/accordion.js +4 -0
  6. package/dist/alert.d.ts +3 -0
  7. package/dist/alert.js +4 -0
  8. package/dist/attachment-list.d.ts +15 -0
  9. package/dist/attachment-list.js +14 -0
  10. package/dist/avatar-group.d.ts +12 -0
  11. package/dist/avatar-group.js +7 -0
  12. package/dist/avatar.d.ts +6 -0
  13. package/dist/avatar.js +5 -0
  14. package/dist/badge.d.ts +3 -0
  15. package/dist/badge.js +4 -0
  16. package/dist/breadcrumb.d.ts +10 -0
  17. package/dist/breadcrumb.js +9 -0
  18. package/dist/button-group.d.ts +6 -0
  19. package/dist/button-group.js +4 -0
  20. package/dist/button.d.ts +3 -0
  21. package/dist/button.js +4 -0
  22. package/dist/card.d.ts +3 -0
  23. package/dist/card.js +4 -0
  24. package/dist/carousel.d.ts +11 -0
  25. package/dist/carousel.js +6 -0
  26. package/dist/checkbox.d.ts +3 -0
  27. package/dist/checkbox.js +4 -0
  28. package/dist/combobox.d.ts +9 -0
  29. package/dist/combobox.js +6 -0
  30. package/dist/command-bar.d.ts +6 -0
  31. package/dist/command-bar.js +4 -0
  32. package/dist/copy-button.d.ts +7 -0
  33. package/dist/copy-button.js +19 -0
  34. package/dist/data-grid.d.ts +25 -0
  35. package/dist/data-grid.js +39 -0
  36. package/dist/date-range-picker.d.ts +12 -0
  37. package/dist/date-range-picker.js +4 -0
  38. package/dist/dialog.d.ts +9 -0
  39. package/dist/dialog.js +21 -0
  40. package/dist/divider.d.ts +3 -0
  41. package/dist/divider.js +4 -0
  42. package/dist/drawer.d.ts +6 -0
  43. package/dist/drawer.js +5 -0
  44. package/dist/empty-state.d.ts +7 -0
  45. package/dist/empty-state.js +5 -0
  46. package/dist/field.d.ts +15 -0
  47. package/dist/field.js +11 -0
  48. package/dist/file-dropzone.d.ts +15 -0
  49. package/dist/file-dropzone.js +21 -0
  50. package/dist/filter-bar.d.ts +9 -0
  51. package/dist/filter-bar.js +9 -0
  52. package/dist/image.d.ts +5 -0
  53. package/dist/image.js +4 -0
  54. package/dist/index.d.ts +68 -76
  55. package/dist/index.js +60 -66
  56. package/dist/input.d.ts +3 -0
  57. package/dist/input.js +4 -0
  58. package/dist/label.d.ts +3 -0
  59. package/dist/label.js +4 -0
  60. package/dist/link.d.ts +3 -0
  61. package/dist/link.js +9 -0
  62. package/dist/list-view.d.ts +29 -0
  63. package/dist/list-view.js +14 -0
  64. package/dist/list.d.ts +6 -0
  65. package/dist/list.js +5 -0
  66. package/dist/lookup-picker.d.ts +12 -0
  67. package/dist/lookup-picker.js +4 -0
  68. package/dist/menu.d.ts +6 -0
  69. package/dist/menu.js +4 -0
  70. package/dist/nav.d.ts +12 -0
  71. package/dist/nav.js +4 -0
  72. package/dist/pagination.d.ts +11 -0
  73. package/dist/pagination.js +5 -0
  74. package/dist/person-picker.d.ts +13 -0
  75. package/dist/person-picker.js +4 -0
  76. package/dist/persona.d.ts +7 -0
  77. package/dist/persona.js +5 -0
  78. package/dist/popover.d.ts +6 -0
  79. package/dist/popover.js +4 -0
  80. package/dist/progress-bar.d.ts +5 -0
  81. package/dist/progress-bar.js +5 -0
  82. package/dist/radio-group.d.ts +6 -0
  83. package/dist/radio-group.js +4 -0
  84. package/dist/radio.d.ts +3 -0
  85. package/dist/radio.js +4 -0
  86. package/dist/rating.d.ts +8 -0
  87. package/dist/rating.js +5 -0
  88. package/dist/react.d.ts +1 -4583
  89. package/dist/react.js +1 -6837
  90. package/dist/select.d.ts +3 -0
  91. package/dist/select.js +4 -0
  92. package/dist/sharepoint-field.d.ts +18 -0
  93. package/dist/sharepoint-field.js +54 -0
  94. package/dist/skeleton.d.ts +6 -0
  95. package/dist/skeleton.js +9 -0
  96. package/dist/spinner.d.ts +5 -0
  97. package/dist/spinner.js +4 -0
  98. package/dist/swatch-picker.d.ts +17 -0
  99. package/dist/swatch-picker.js +11 -0
  100. package/dist/switch.d.ts +3 -0
  101. package/dist/switch.js +4 -0
  102. package/dist/table.d.ts +6 -0
  103. package/dist/table.js +4 -0
  104. package/dist/tabs.d.ts +14 -0
  105. package/dist/tabs.js +30 -0
  106. package/dist/tag-group.d.ts +6 -0
  107. package/dist/tag-group.js +4 -0
  108. package/dist/tag-picker.d.ts +12 -0
  109. package/dist/tag-picker.js +4 -0
  110. package/dist/tag.d.ts +7 -0
  111. package/dist/tag.js +5 -0
  112. package/dist/text.d.ts +5 -0
  113. package/dist/text.js +4 -0
  114. package/dist/textarea.d.ts +3 -0
  115. package/dist/textarea.js +4 -0
  116. package/dist/theme.d.ts +15 -167
  117. package/dist/theme.js +36 -162
  118. package/dist/toast.d.ts +9 -0
  119. package/dist/toast.js +12 -0
  120. package/dist/tree.d.ts +13 -0
  121. package/dist/tree.js +9 -0
  122. package/dist/view-card.d.ts +8 -0
  123. package/dist/view-card.js +4 -0
  124. package/dist/view-switcher.d.ts +13 -0
  125. package/dist/view-switcher.js +7 -0
  126. package/dist/virtual-list.d.ts +11 -0
  127. package/dist/virtual-list.js +25 -0
  128. package/measurements.json +365 -0
  129. package/package.json +19 -42
  130. package/src/theme.css +125 -0
  131. package/AGENTS.md +0 -211
  132. package/dist/appearance.d.ts +0 -6
  133. package/dist/appearance.js +0 -217
  134. package/dist/elements/accordion.d.ts +0 -9
  135. package/dist/elements/accordion.js +0 -338
  136. package/dist/elements/alert.d.ts +0 -2
  137. package/dist/elements/alert.js +0 -62
  138. package/dist/elements/avatar-group-primitives.d.ts +0 -3
  139. package/dist/elements/avatar-group-primitives.js +0 -189
  140. package/dist/elements/avatar-group.d.ts +0 -2
  141. package/dist/elements/avatar-group.js +0 -110
  142. package/dist/elements/avatar.d.ts +0 -4
  143. package/dist/elements/avatar.js +0 -251
  144. package/dist/elements/badge.d.ts +0 -8
  145. package/dist/elements/badge.js +0 -182
  146. package/dist/elements/breadcrumb.d.ts +0 -4
  147. package/dist/elements/breadcrumb.js +0 -233
  148. package/dist/elements/button-group.d.ts +0 -1
  149. package/dist/elements/button-group.js +0 -20
  150. package/dist/elements/button-variants.d.ts +0 -6
  151. package/dist/elements/button-variants.js +0 -339
  152. package/dist/elements/button.d.ts +0 -5
  153. package/dist/elements/button.js +0 -233
  154. package/dist/elements/card-primitives.d.ts +0 -3
  155. package/dist/elements/card-primitives.js +0 -83
  156. package/dist/elements/card.d.ts +0 -5
  157. package/dist/elements/card.js +0 -213
  158. package/dist/elements/carousel.d.ts +0 -92
  159. package/dist/elements/carousel.js +0 -1112
  160. package/dist/elements/color-picker.d.ts +0 -24
  161. package/dist/elements/color-picker.js +0 -1004
  162. package/dist/elements/combobox.d.ts +0 -1
  163. package/dist/elements/combobox.js +0 -1012
  164. package/dist/elements/data-grid-model.d.ts +0 -117
  165. package/dist/elements/data-grid-model.js +0 -294
  166. package/dist/elements/data-grid.d.ts +0 -29
  167. package/dist/elements/data-grid.js +0 -1567
  168. package/dist/elements/date-picker.d.ts +0 -1
  169. package/dist/elements/date-picker.js +0 -486
  170. package/dist/elements/dialog.d.ts +0 -23
  171. package/dist/elements/dialog.js +0 -409
  172. package/dist/elements/divider.d.ts +0 -2
  173. package/dist/elements/divider.js +0 -66
  174. package/dist/elements/drawer.d.ts +0 -3
  175. package/dist/elements/drawer.js +0 -308
  176. package/dist/elements/field-composition.d.ts +0 -26
  177. package/dist/elements/field-composition.js +0 -133
  178. package/dist/elements/field.d.ts +0 -1
  179. package/dist/elements/field.js +0 -67
  180. package/dist/elements/file-upload.d.ts +0 -6
  181. package/dist/elements/file-upload.js +0 -211
  182. package/dist/elements/floating-position.d.ts +0 -26
  183. package/dist/elements/floating-position.js +0 -39
  184. package/dist/elements/image.d.ts +0 -28
  185. package/dist/elements/image.js +0 -38
  186. package/dist/elements/info.d.ts +0 -9
  187. package/dist/elements/info.js +0 -102
  188. package/dist/elements/input.d.ts +0 -5
  189. package/dist/elements/input.js +0 -255
  190. package/dist/elements/label.d.ts +0 -15
  191. package/dist/elements/label.js +0 -56
  192. package/dist/elements/link.d.ts +0 -1
  193. package/dist/elements/link.js +0 -92
  194. package/dist/elements/list.d.ts +0 -19
  195. package/dist/elements/list.js +0 -297
  196. package/dist/elements/menu.d.ts +0 -33
  197. package/dist/elements/menu.js +0 -1103
  198. package/dist/elements/message-bar.d.ts +0 -10
  199. package/dist/elements/message-bar.js +0 -299
  200. package/dist/elements/nav.d.ts +0 -32
  201. package/dist/elements/nav.js +0 -791
  202. package/dist/elements/overflow.d.ts +0 -9
  203. package/dist/elements/overflow.js +0 -218
  204. package/dist/elements/persona.d.ts +0 -3
  205. package/dist/elements/persona.js +0 -125
  206. package/dist/elements/popover.d.ts +0 -77
  207. package/dist/elements/popover.js +0 -840
  208. package/dist/elements/progress-bar.d.ts +0 -4
  209. package/dist/elements/progress-bar.js +0 -82
  210. package/dist/elements/radio-group.d.ts +0 -1
  211. package/dist/elements/radio-group.js +0 -303
  212. package/dist/elements/rating-display.d.ts +0 -2
  213. package/dist/elements/rating-display.js +0 -125
  214. package/dist/elements/rating.d.ts +0 -2
  215. package/dist/elements/rating.js +0 -206
  216. package/dist/elements/rich-text-editor.d.ts +0 -18
  217. package/dist/elements/rich-text-editor.js +0 -508
  218. package/dist/elements/search.d.ts +0 -3
  219. package/dist/elements/search.js +0 -207
  220. package/dist/elements/select.d.ts +0 -6
  221. package/dist/elements/select.js +0 -291
  222. package/dist/elements/shared.d.ts +0 -19
  223. package/dist/elements/shared.js +0 -396
  224. package/dist/elements/skeleton.d.ts +0 -6
  225. package/dist/elements/skeleton.js +0 -91
  226. package/dist/elements/slider.d.ts +0 -1
  227. package/dist/elements/slider.js +0 -248
  228. package/dist/elements/spin-button.d.ts +0 -7
  229. package/dist/elements/spin-button.js +0 -499
  230. package/dist/elements/spinner.d.ts +0 -4
  231. package/dist/elements/spinner.js +0 -124
  232. package/dist/elements/swatch-picker.d.ts +0 -5
  233. package/dist/elements/swatch-picker.js +0 -363
  234. package/dist/elements/table.d.ts +0 -21
  235. package/dist/elements/table.js +0 -261
  236. package/dist/elements/tabs.d.ts +0 -1
  237. package/dist/elements/tabs.js +0 -276
  238. package/dist/elements/tag-picker.d.ts +0 -29
  239. package/dist/elements/tag-picker.js +0 -697
  240. package/dist/elements/tags.d.ts +0 -21
  241. package/dist/elements/tags.js +0 -421
  242. package/dist/elements/teaching-popover.d.ts +0 -32
  243. package/dist/elements/teaching-popover.js +0 -412
  244. package/dist/elements/text.d.ts +0 -9
  245. package/dist/elements/text.js +0 -75
  246. package/dist/elements/textarea.d.ts +0 -1
  247. package/dist/elements/textarea.js +0 -182
  248. package/dist/elements/toast.d.ts +0 -25
  249. package/dist/elements/toast.js +0 -337
  250. package/dist/elements/toaster.d.ts +0 -6
  251. package/dist/elements/toaster.js +0 -356
  252. package/dist/elements/toggle.d.ts +0 -2
  253. package/dist/elements/toggle.js +0 -246
  254. package/dist/elements/toolbar.d.ts +0 -12
  255. package/dist/elements/toolbar.js +0 -381
  256. package/dist/elements/tooltip.d.ts +0 -76
  257. package/dist/elements/tooltip.js +0 -510
  258. package/dist/elements/tree-model.d.ts +0 -19
  259. package/dist/elements/tree-model.js +0 -34
  260. package/dist/elements/tree.d.ts +0 -5
  261. package/dist/elements/tree.js +0 -273
  262. package/dist/elements/view-card.d.ts +0 -2
  263. package/dist/elements/view-card.js +0 -78
  264. package/dist/elements/virtual-list.d.ts +0 -41
  265. package/dist/elements/virtual-list.js +0 -369
  266. package/dist/elements.d.ts +0 -72
  267. package/dist/elements.js +0 -207
  268. package/dist/virtualizer-hooks.d.ts +0 -80
  269. package/dist/virtualizer-hooks.js +0 -253
  270. package/scripts/generate-token-index.mjs +0 -43
  271. package/scripts/sync-component-catalog-signatures.mjs +0 -55
  272. package/scripts/validate-component-catalog.mjs +0 -44
  273. package/skills/sharepoint-ui/SKILL.md +0 -12
  274. package/skills/sharepoint-ui/references/choosing-components.md +0 -20
  275. package/skills/sharepoint-ui/references/sharepoint-patterns.md +0 -17
  276. package/tokens.json +0 -3777
package/dist/react.d.ts CHANGED
@@ -1,4583 +1 @@
1
- import * as React from "react";
2
- import { type ButtonAppearance, type ButtonShape, type ButtonSize } from "./elements/button-variants.js";
3
- import { type InputAppearance, type InputSize, type InputType } from "./elements/input.js";
4
- import { type FileUploadError } from "./elements/file-upload.js";
5
- import { type ImageFit, type ImageShape } from "./elements/image.js";
6
- import { type FieldOrientation, type FieldValidationState } from "./elements/field-composition.js";
7
- import { type CardAppearance, type CardFocusMode, type CardOrientation, type CardSize } from "./elements/card.js";
8
- import { type BadgeAppearance, type BadgeColor, type BadgeShape, type BadgeSize, type PresenceBadgeStatus } from "./elements/badge.js";
9
- import { type SpinnerAppearance, type SpinnerLabelPosition, type SpinnerSize } from "./elements/spinner.js";
10
- export type { SpinnerAppearance, SpinnerLabelPosition, SpinnerSize } from "./elements/spinner.js";
11
- import { type MessageBarGroupAnimation, type MessageBarIntent, type MessageBarLayout, type MessageBarPoliteness, type MessageBarShape } from "./elements/message-bar.js";
12
- export type { DialogOpenChangeData } from "./elements/dialog.js";
13
- export type DialogOpenChangeEvent = React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>;
14
- export type DialogOnOpenChangeData = {
15
- type: "escapeKeyDown";
16
- open: boolean;
17
- event: React.KeyboardEvent<HTMLElement>;
18
- } | {
19
- type: "backdropClick" | "triggerClick";
20
- open: boolean;
21
- event: React.MouseEvent<HTMLElement>;
22
- };
23
- import { type ProgressBarColor, type ProgressBarShape, type ProgressBarThickness } from "./elements/progress-bar.js";
24
- export type { ProgressBarColor, ProgressBarShape, ProgressBarThickness } from "./elements/progress-bar.js";
25
- export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from "./elements/spin-button.js";
26
- import { type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
27
- import { type DividerAppearance } from "./elements/divider.js";
28
- export type { DividerAppearance } from "./elements/divider.js";
29
- import { type AccordionItemValue, type AccordionNavigation } from "./elements/accordion.js";
30
- import { type AvatarColor } from "./elements/avatar.js";
31
- import { type PersonaPresence, type PersonaSize } from "./elements/persona.js";
32
- import { type VirtualListDataSource } from "./elements/virtual-list.js";
33
- import { type DataGridCellEdit, type DataGridColumn, type DataGridDataSource, type DataGridDataSourceRow, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridEditValue, type DataGridFocusMode, type DataGridSelectionAppearance, type DataGridSelectionModel, type DataGridSort } from "./elements/data-grid-model.js";
34
- import { type TreeNode } from "./elements/tree-model.js";
35
- import { type InteractionTagSelectData, type TagAppearance, type TagGroupSelectData, type TagSize } from "./elements/tags.js";
36
- import { type TagPickerOpenChangeType } from "./elements/tag-picker.js";
37
- export type { TagPickerOpenChangeType, TagPickerOnOpenChangeData, TagPickerOnOptionSelectData } from "./elements/tag-picker.js";
38
- import { type ListItemValue, type ListNavigationMode, type ListSelectionMode } from "./elements/list.js";
39
- export type { ListItemActionData, ListItemActionEvent, ListSelectionChangeData } from "./elements/list.js";
40
- import { type TooltipAppearance, type TooltipPositioning, type TooltipRelationship, type TooltipVisibleChangeData } from "./elements/tooltip.js";
41
- export type { TooltipPositioning, TooltipPositioningBoundary, TooltipPositioningEndData, TooltipPositioningImperativeRef, TooltipPositioningOffset, TooltipPositioningOffsetParams, TooltipPositioningOptions, TooltipPositioningPlacement, TooltipPositioningRect, TooltipPositioningRef, TooltipPositioningShorthand, TooltipPositioningTarget, TooltipPositioningTargetRect } from "./elements/tooltip.js";
42
- import { type PopoverOpenChangeData, type PopoverPositioning } from "./elements/popover.js";
43
- export type { PopoverAlignment, PopoverAutoSize, PopoverBoundary, PopoverBoundaryPadding, PopoverBoundaryRect, PopoverOffset, PopoverOffsetParams, PopoverOpenChangeData, PopoverPosition, PopoverPositioning, PopoverPositioningEndData, PopoverPositioningImperativeRef, PopoverPositioningOptions, PopoverPositioningPlacement, PopoverPositioningRef, PopoverPositioningTargetRect, PopoverTarget } from "./elements/popover.js";
44
- import { type TeachingPopoverCarouselValueChangeType } from "./elements/teaching-popover.js";
45
- export type { TeachingPopoverCarouselValueChangeType, TeachingPopoverCarouselValueChangeDetail, TeachingPopoverFinishDetail } from "./elements/teaching-popover.js";
46
- import { type MenuOpenChangeData } from "./elements/menu.js";
47
- export type { MenuOpenChangeData, MenuOpenChangeType } from "./elements/menu.js";
48
- import { type TextFont, type TextSize, type TextTag, type TextWeight } from "./elements/text.js";
49
- import { type ToastIntent, type ToastPoliteness } from "./elements/toast.js";
50
- import { type ToastAnnounce, type ToastPosition } from "./elements/toaster.js";
51
- export type { ToastAnnounce, ToastAnnounceOptions } from "./elements/toaster.js";
52
- export type { ToastAppearance } from "./elements/toast.js";
53
- import { type SearchAppearance, type SearchSize } from "./elements/search.js";
54
- import { type ColorPickerFormat, type ColorPickerHsvColor, type ColorPickerShape, type ColorPickerSize, type ColorSliderChannel } from "./elements/color-picker.js";
55
- export type { ColorPickerHsvColor } from "./elements/color-picker.js";
56
- import { type ToolbarCheckedValues } from "./elements/toolbar.js";
57
- import { type NavItemSelectData, type NavCategoryToggleData } from "./elements/nav.js";
58
- export type { NavItemSelectData, NavCategoryToggleData } from "./elements/nav.js";
59
- export type NavReactItemSelectData = Omit<NavItemSelectData, "event" | "type"> & ({
60
- type: undefined;
61
- event: SharePointUIEvent;
62
- } | {
63
- type: "click";
64
- event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
65
- });
66
- export type NavReactCategoryToggleData = Omit<NavCategoryToggleData, "event" | "type"> & ({
67
- type: undefined;
68
- event: SharePointUIEvent;
69
- } | {
70
- type: "click";
71
- event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
72
- });
73
- import { type LabelSize, type LabelWeight } from "./elements/label.js";
74
- import { type InfoPlacement } from "./elements/info.js";
75
- import { type CarouselAlign, type CarouselAppearance, type CarouselMotion } from "./elements/carousel.js";
76
- export type { CarouselIndexChangeData } from "./elements/carousel.js";
77
- export type { CarouselAlign, CarouselAppearance, CarouselMotion } from "./elements/carousel.js";
78
- import { type OverflowAxis, type OverflowState } from "./elements/overflow.js";
79
- export type { OverflowAxis, OverflowState } from "./elements/overflow.js";
80
- import { type SharePointUIAppearance, type SharePointUIBaseAppearance, type SharePointUIDensity, type SharePointUIStyleTokens } from "./appearance.js";
81
- import { type FluentThemeTokens, type SharePointUIDesignTheme } from "./theme.js";
82
- export { createResizeObserverFromDocument, getRTLRootMargin, scrollToItemDynamic, scrollToItemStatic, useDynamicVirtualizerMeasure, useIntersectionObserver, useMeasureList, useResizeObserverRef_unstable, useStaticVirtualizerMeasure } from "./virtualizer-hooks.js";
83
- export type { IndexedResizeCallbackElement, ResizeCallbackWithRef, ScrollToItemDynamicParams, ScrollToItemStaticParams, VirtualizerContextMeasureProps, VirtualizerMeasureDynamicProps, VirtualizerMeasureProps } from "./virtualizer-hooks.js";
84
- export { composeSharePointUIDesignThemes } from "./theme.js";
85
- export type { FluentThemeTokens, SharePointUIDesignTheme } from "./theme.js";
86
- export type { AvatarColor, AvatarNamedColor } from "./elements/avatar.js";
87
- export type { SharePointUIDensity } from "./appearance.js";
88
- export type SharePointUIEvent = Event | React.SyntheticEvent;
89
- type MenuEventData<T> = T extends {
90
- type: infer Type;
91
- event: infer E;
92
- } ? Type extends "clickOutside" | "scrollOutside" | "menuMouseEnter" ? Omit<T, "event"> & {
93
- event: E;
94
- } : Type extends "menuSafeZoneMouseEnter" ? Omit<T, "event"> & {
95
- event: React.MouseEvent<Element>;
96
- } : Omit<T, "event"> & {
97
- event: E extends MouseEvent ? React.MouseEvent<HTMLElement> : E extends KeyboardEvent ? React.KeyboardEvent<HTMLElement> : E;
98
- } : never;
99
- type MenuReactOpenChangeData = MenuOpenChangeData extends infer T ? T extends MenuOpenChangeData ? MenuEventData<T> : never : never;
100
- type MenuReactOpenChangeEvent = MenuReactOpenChangeData["event"];
101
- type ElementProps = React.HTMLAttributes<HTMLElement> & {
102
- [attribute: `data-${string}`]: string | number | boolean | undefined;
103
- };
104
- export type FieldControlProps = Pick<React.HTMLAttributes<HTMLElement>, "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-description" | "aria-invalid" | "aria-required">;
105
- export type FieldControlOptions = {
106
- supportsLabelFor?: boolean;
107
- supportsRequired?: boolean;
108
- supportsSize?: boolean;
109
- };
110
- export type FieldContextValue = Readonly<{
111
- generatedControlId: string;
112
- labelText?: string;
113
- descriptionText?: string;
114
- orientation: FieldOrientation;
115
- required: boolean;
116
- size: LabelSize;
117
- validationState: FieldValidationState;
118
- labelFor?: string;
119
- labelId?: string;
120
- validationMessageId?: string;
121
- hintId?: string;
122
- disabled?: boolean;
123
- }>;
124
- /** Merge Field context into a form control or custom control's prop set. */
125
- export declare function useFieldControlProps_unstable<T extends object>(props: T, options?: FieldControlOptions): T & FieldControlProps;
126
- export type ToastDispatchOptions = {
127
- id?: string;
128
- toastId?: string;
129
- title?: React.ReactNode;
130
- priority?: number;
131
- intent?: ToastIntent;
132
- appearance?: "brand" | "inverted";
133
- politeness?: ToastPoliteness;
134
- timeout?: number;
135
- dismissLabel?: string;
136
- pauseOnHover?: boolean;
137
- pauseOnWindowBlur?: boolean;
138
- action?: React.ReactNode;
139
- onAction?: (id: string) => void;
140
- };
141
- export type SharePointUIStrings = {
142
- loading: string;
143
- close: string;
144
- dialogLabel?: string;
145
- richTextEditorLabel?: string;
146
- dismiss: string;
147
- notifications?: string;
148
- clear: string;
149
- spinButtonIncrement?: string;
150
- spinButtonDecrement?: string;
151
- remove: string;
152
- noResults: string;
153
- selectedOptionsLabel?: string;
154
- required: string;
155
- invalidValue: string;
156
- moreInformation: string;
157
- people?: string;
158
- showMorePeople?: string;
159
- showFewerPeople?: string;
160
- navigationMenu?: string;
161
- navigationClose?: string;
162
- navigationExpand?: string;
163
- navigationCollapse?: string;
164
- treeLabel?: string;
165
- treeToggleLabel?: string;
166
- treeEmptyMessage?: string;
167
- splitButtonMenuLabel?: string;
168
- navigationToggle?: string;
169
- splitNavItemActionLabel?: string;
170
- virtualizerLabel?: string;
171
- dataGridLabel?: string;
172
- dataGridFilterLabel?: string;
173
- dataGridSelectRow?: string;
174
- dataGridSelectAll?: string;
175
- dataGridRowLabel?: string;
176
- dataGridLoadingLabel?: string;
177
- dataGridEmptyLabel?: string;
178
- dataGridSortPriority?: string;
179
- dataGridResizeLabel?: string;
180
- dataGridReorderLabel?: string;
181
- dataGridEmptyGroupLabel?: string;
182
- dataGridExpandGroupLabel?: string;
183
- dataGridCollapseGroupLabel?: string;
184
- dataGridGroupCountLabel?: string;
185
- dataGridEditHint?: string;
186
- dataGridSelectionCopied?: string;
187
- dataGridCopyFailed?: string;
188
- dataGridPasteOne?: string;
189
- dataGridPasteMany?: string;
190
- dataGridPasteFailed?: string;
191
- dataGridColumnReordered?: string;
192
- tableResizeHandle?: string;
193
- toolbarLabel?: string;
194
- breadcrumbLabel?: string;
195
- menuBarLabel?: string;
196
- drawerExpand?: string;
197
- drawerRestore?: string;
198
- drawerLabel?: string;
199
- drawerNavigation?: string;
200
- tableResizeColumn?: string;
201
- ratingValue: string;
202
- colorChoose: string;
203
- colorHex: string;
204
- colorHue?: string;
205
- colorArea?: string;
206
- colorAreaValue?: string;
207
- colorSaturation?: string;
208
- colorValue?: string;
209
- colorFormat?: string;
210
- colorRgb?: string;
211
- colorRed?: string;
212
- colorGreen?: string;
213
- colorBlue?: string;
214
- colorOpacity: string;
215
- colorSwatches: string;
216
- colorAdd?: string;
217
- colorSwatch: string;
218
- colorInvalid: string;
219
- richTextBold: string;
220
- richTextItalic: string;
221
- richTextUnderline: string;
222
- richTextBulletList: string;
223
- richTextNumberList: string;
224
- richTextLink: string;
225
- richTextToolbar: string;
226
- richTextLinkPrompt: string;
227
- richTextRequired?: string;
228
- richTextChooseImage?: string;
229
- richTextUndo?: string;
230
- richTextRedo?: string;
231
- richTextInsertTable?: string;
232
- richTextInsertImage?: string;
233
- richTextInsertRowAbove?: string;
234
- richTextInsertRowBelow?: string;
235
- richTextInsertColumnBefore?: string;
236
- richTextInsertColumnAfter?: string;
237
- richTextDeleteRow?: string;
238
- richTextDeleteColumn?: string;
239
- richTextDeleteTable?: string;
240
- fileUploadBrowse?: string;
241
- fileUploadDrop?: string;
242
- fileUploadRemove?: string;
243
- fileUploadSelected?: string;
244
- fileUploadRequired?: string;
245
- fileUploadTypeError?: string;
246
- fileUploadSizeError?: string;
247
- fileUploadLimitError?: string;
248
- datePickerCalendar?: string;
249
- datePickerPreviousMonth?: string;
250
- datePickerNextMonth?: string;
251
- datePickerInvalid?: string;
252
- datePickerRequired?: string;
253
- carouselDescription?: string;
254
- carouselPrevious?: string;
255
- carouselNext?: string;
256
- carouselSlide?: string;
257
- carouselRoleDescription?: string;
258
- carouselSlides?: string;
259
- carouselNavigation?: string;
260
- carouselPlay?: string;
261
- carouselPause?: string;
262
- teachingPopoverLabel?: string;
263
- teachingPopoverDismiss?: string;
264
- teachingPopoverPrevious?: string;
265
- teachingPopoverNext?: string;
266
- teachingPopoverFinish?: string;
267
- teachingPopoverSteps?: string;
268
- teachingPopoverPageCount?: string;
269
- teachingPopoverPageLabel?: string;
270
- overflowDescription?: string;
271
- overflowMenuLabel?: string;
272
- };
273
- export type AvatarGroupContextValue = {
274
- size: number;
275
- layout: "stack" | "spread" | "pie";
276
- isOverflow?: boolean;
277
- };
278
- type BreadcrumbSize = "small" | "medium" | "large";
279
- export type MenuCheckedValues = Record<string, string[]>;
280
- export type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;
281
- export type MenuCheckedValueChangeData = {
282
- name: string;
283
- checkedItems: string[];
284
- };
285
- export type ToastControllerUpdateOptions = Omit<ToastDispatchOptions, "id" | "toastId"> & {
286
- toastId: string;
287
- content?: React.ReactNode;
288
- };
289
- type ToastControllerUpdate = {
290
- (id: string, update: {
291
- content?: React.ReactNode;
292
- options?: ToastDispatchOptions;
293
- }): void;
294
- (options: ToastControllerUpdateOptions): void;
295
- };
296
- type ToastControllerValue = {
297
- dispatchToast: (content: React.ReactNode, options?: ToastDispatchOptions) => string;
298
- updateToast: ToastControllerUpdate;
299
- dismissToast: (id: string) => void;
300
- dismissAllToasts: () => void;
301
- pauseToast: (id: string) => boolean;
302
- playToast: (id: string) => boolean;
303
- focusNewest: () => boolean;
304
- };
305
- export type CarouselContextValue = {
306
- activeIndex: number;
307
- appearance?: CarouselAppearance;
308
- circular: boolean;
309
- selectPageByElement: (event: React.FocusEvent, element: HTMLElement, jump?: boolean) => number;
310
- selectPageByDirection: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, direction: "next" | "prev") => number;
311
- selectPageByIndex: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, value: number, jump?: boolean) => void;
312
- subscribeForValues: (listener: (data: {
313
- activeIndex: number;
314
- navItemsCount: number;
315
- groupIndexList: number[][];
316
- slideNodes: HTMLElement[];
317
- canLoop?: boolean;
318
- }) => void) => () => void;
319
- enableAutoplay: (autoplay: boolean, temporary?: boolean) => void;
320
- resetAutoplay: () => void;
321
- containerRef?: React.RefObject<HTMLDivElement | null>;
322
- viewportRef?: React.RefObject<HTMLDivElement | null>;
323
- };
324
- export type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;
325
- type DividerWrapper = React.ReactElement | React.HTMLAttributes<HTMLDivElement>;
326
- type NativeMousePointerEventProps<T extends Element> = Pick<React.DOMAttributes<T>, "onAuxClick" | "onAuxClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture">;
327
- type NativeAdditionalEventProps<T extends Element> = Pick<React.DOMAttributes<T>, "onInvalid" | "onInvalidCapture" | "onChange" | "onChangeCapture" | "onScroll" | "onScrollCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture">;
328
- type NativeRootEventProps<T extends Element> = Pick<React.DOMAttributes<T>, "onKeyDown" | "onKeyDownCapture" | "onKeyUp" | "onKeyUpCapture" | "onKeyPress" | "onKeyPressCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture"> & NativeMousePointerEventProps<T> & NativeAdditionalEventProps<T>;
329
- export declare function SharePointUIProvider({ children, lang, dir, appearance, baseAppearance, density, theme, tokens, fluentTokens, strings }: React.PropsWithChildren<{
330
- lang?: string;
331
- dir?: "ltr" | "rtl" | "auto";
332
- appearance?: SharePointUIAppearance;
333
- baseAppearance?: SharePointUIBaseAppearance;
334
- density?: SharePointUIDensity;
335
- theme?: SharePointUIDesignTheme;
336
- tokens?: Partial<SharePointUIStyleTokens>;
337
- fluentTokens?: FluentThemeTokens;
338
- strings?: Partial<SharePointUIStrings>;
339
- }>): React.ReactElement;
340
- export type TextProps = ElementProps & {
341
- as?: TextTag;
342
- size?: TextSize;
343
- weight?: TextWeight;
344
- font?: TextFont;
345
- align?: "start" | "center" | "end" | "justify";
346
- italic?: boolean;
347
- underline?: boolean;
348
- strikethrough?: boolean;
349
- truncate?: boolean;
350
- wrap?: boolean;
351
- block?: boolean;
352
- children?: React.ReactNode;
353
- };
354
- export declare const Text: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
355
- [attribute: `data-${string}`]: string | number | boolean | undefined;
356
- } & {
357
- as?: TextTag;
358
- size?: TextSize;
359
- weight?: TextWeight;
360
- font?: TextFont;
361
- align?: "start" | "center" | "end" | "justify";
362
- italic?: boolean;
363
- underline?: boolean;
364
- strikethrough?: boolean;
365
- truncate?: boolean;
366
- wrap?: boolean;
367
- block?: boolean;
368
- children?: React.ReactNode;
369
- } & React.RefAttributes<HTMLElement>>;
370
- export type TextPresetProps = Omit<Parameters<typeof Text>[0], "size" | "weight" | "font">;
371
- export declare function Body1(props: TextPresetProps): React.ReactElement;
372
- export declare function Body1Strong(props: TextPresetProps): React.ReactElement;
373
- export declare function Body1Stronger(props: TextPresetProps): React.ReactElement;
374
- export declare function Body2(props: TextPresetProps): React.ReactElement;
375
- export declare function Caption1(props: TextPresetProps): React.ReactElement;
376
- export declare function Caption1Strong(props: TextPresetProps): React.ReactElement;
377
- export declare function Caption1Stronger(props: TextPresetProps): React.ReactElement;
378
- export declare function Caption2(props: TextPresetProps): React.ReactElement;
379
- export declare function Caption2Strong(props: TextPresetProps): React.ReactElement;
380
- export declare function Display(props: TextPresetProps): React.ReactElement;
381
- export declare function LargeTitle(props: TextPresetProps): React.ReactElement;
382
- export declare function Subtitle1(props: TextPresetProps): React.ReactElement;
383
- export declare function Subtitle2(props: TextPresetProps): React.ReactElement;
384
- export declare function Subtitle2Stronger(props: TextPresetProps): React.ReactElement;
385
- export declare function Title1(props: TextPresetProps): React.ReactElement;
386
- export declare function Title2(props: TextPresetProps): React.ReactElement;
387
- export declare function Title3(props: TextPresetProps): React.ReactElement;
388
- export type LabelRequiredSlotProps = React.HTMLAttributes<HTMLSpanElement> & {
389
- children?: React.ReactNode;
390
- };
391
- export type LabelRequired = boolean | React.ReactNode | LabelRequiredSlotProps;
392
- export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
393
- size?: LabelSize;
394
- weight?: LabelWeight;
395
- required?: LabelRequired;
396
- disabled?: boolean;
397
- };
398
- export declare const Label: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
399
- size?: LabelSize;
400
- weight?: LabelWeight;
401
- required?: LabelRequired;
402
- disabled?: boolean;
403
- } & React.RefAttributes<HTMLLabelElement>>;
404
- export type InfoButtonPopoverProps = {
405
- label?: string;
406
- placement?: InfoPlacement;
407
- arrow?: boolean;
408
- trapFocus?: boolean;
409
- };
410
- export declare const InfoButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
411
- [attribute: `data-${string}`]: string | number | boolean | undefined;
412
- } & {
413
- info?: React.ReactNode;
414
- children?: React.ReactNode;
415
- label?: string;
416
- placement?: InfoPlacement;
417
- size?: "small" | "medium" | "large";
418
- inline?: boolean;
419
- popover?: InfoButtonPopoverProps;
420
- open?: boolean;
421
- onOpenChange?: (open: boolean) => void;
422
- } & React.RefAttributes<HTMLElement>>;
423
- export type InfoLabelLabelSlot = React.ReactElement<any> | Omit<Parameters<typeof Label>[0], "children">;
424
- export type InfoLabelButtonSlot = React.ReactElement<any> | Omit<Parameters<typeof InfoButton>[0], "children" | "info">;
425
- export type InfoLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
426
- children?: React.ReactNode;
427
- info: React.ReactNode;
428
- htmlFor?: string;
429
- size?: LabelSize;
430
- weight?: LabelWeight;
431
- required?: LabelRequired;
432
- disabled?: boolean;
433
- infoButtonLabel?: string;
434
- placement?: InfoPlacement;
435
- label?: InfoLabelLabelSlot;
436
- infoButton?: InfoLabelButtonSlot | null;
437
- };
438
- export declare const InfoLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
439
- children?: React.ReactNode;
440
- info: React.ReactNode;
441
- htmlFor?: string;
442
- size?: LabelSize;
443
- weight?: LabelWeight;
444
- required?: LabelRequired;
445
- disabled?: boolean;
446
- infoButtonLabel?: string;
447
- placement?: InfoPlacement;
448
- label?: InfoLabelLabelSlot;
449
- infoButton?: InfoLabelButtonSlot | null;
450
- } & React.RefAttributes<HTMLSpanElement>>;
451
- export type ButtonContextValue = {
452
- size?: ButtonSize;
453
- };
454
- export declare const ButtonContextProvider: React.Provider<ButtonContextValue | undefined>;
455
- export declare function useButtonContext(): ButtonContextValue;
456
- type NativeClickHostProps<T extends Element> = Omit<ElementProps, keyof NativeRootEventProps<T> | "onClick" | "onClickCapture"> & NativeRootEventProps<T> & {
457
- onClick?: React.MouseEventHandler<T>;
458
- onClickCapture?: React.MouseEventHandler<T>;
459
- };
460
- type NativeButtonHostProps = NativeClickHostProps<HTMLButtonElement>;
461
- export type ButtonProps = NativeClickHostProps<HTMLButtonElement | HTMLAnchorElement> & {
462
- as?: "button" | "a";
463
- href?: string;
464
- target?: string;
465
- rel?: string;
466
- download?: string | boolean;
467
- hrefLang?: string;
468
- referrerPolicy?: string;
469
- form?: string;
470
- formAction?: string;
471
- formEncType?: string;
472
- formMethod?: string;
473
- formNoValidate?: boolean;
474
- formTarget?: string;
475
- name?: string;
476
- value?: string | number | readonly string[];
477
- type?: "button" | "submit" | "reset";
478
- variant?: "primary" | "default";
479
- appearance?: ButtonAppearance;
480
- size?: ButtonSize;
481
- shape?: ButtonShape;
482
- iconOnly?: boolean;
483
- disabled?: boolean;
484
- disabledFocusable?: boolean;
485
- vertical?: boolean;
486
- icon?: React.ReactNode;
487
- iconPosition?: "before" | "after";
488
- };
489
- export declare const Button: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement> & {
490
- onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
491
- onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
492
- } & {
493
- as?: "button" | "a";
494
- href?: string;
495
- target?: string;
496
- rel?: string;
497
- download?: string | boolean;
498
- hrefLang?: string;
499
- referrerPolicy?: string;
500
- form?: string;
501
- formAction?: string;
502
- formEncType?: string;
503
- formMethod?: string;
504
- formNoValidate?: boolean;
505
- formTarget?: string;
506
- name?: string;
507
- value?: string | number | readonly string[];
508
- type?: "button" | "submit" | "reset";
509
- variant?: "primary" | "default";
510
- appearance?: ButtonAppearance;
511
- size?: ButtonSize;
512
- shape?: ButtonShape;
513
- iconOnly?: boolean;
514
- disabled?: boolean;
515
- disabledFocusable?: boolean;
516
- vertical?: boolean;
517
- icon?: React.ReactNode;
518
- iconPosition?: "before" | "after";
519
- } & React.RefAttributes<HTMLElement>>;
520
- /** A themed menu trigger. Compose it as Menu's trigger; Menu owns open state, focus, and dismissal. */
521
- export declare const MenuButton: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
522
- onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
523
- onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
524
- } & {
525
- children?: React.ReactNode;
526
- icon?: React.ReactNode;
527
- menuIcon?: React.ReactNode;
528
- appearance?: ButtonAppearance;
529
- size?: ButtonSize;
530
- shape?: ButtonShape;
531
- disabled?: boolean;
532
- disabledFocusable?: boolean;
533
- type?: "button" | "submit" | "reset";
534
- } & React.RefAttributes<HTMLElement>>;
535
- export declare const ButtonGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
536
- [attribute: `data-${string}`]: string | number | boolean | undefined;
537
- } & {
538
- children?: React.ReactNode;
539
- orientation?: "horizontal" | "vertical";
540
- label?: string;
541
- } & React.RefAttributes<HTMLElement>>;
542
- export declare const CompoundButton: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
543
- onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
544
- onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
545
- } & {
546
- children?: React.ReactNode;
547
- secondaryContent?: React.ReactNode;
548
- contentContainer?: React.ReactElement;
549
- icon?: React.ReactNode;
550
- iconPosition?: "before" | "after";
551
- appearance?: ButtonAppearance;
552
- size?: ButtonSize;
553
- shape?: ButtonShape;
554
- disabled?: boolean;
555
- disabledFocusable?: boolean;
556
- } & React.RefAttributes<HTMLElement>>;
557
- export declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
558
- onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
559
- onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
560
- } & {
561
- children?: React.ReactNode;
562
- pressed?: boolean;
563
- defaultPressed?: boolean;
564
- checked?: boolean;
565
- defaultChecked?: boolean;
566
- isAccessible?: boolean;
567
- onPressedChange?: (pressed: boolean) => void;
568
- onCheckedChange?: (checked: boolean) => void;
569
- appearance?: ButtonAppearance;
570
- size?: ButtonSize;
571
- shape?: ButtonShape;
572
- disabled?: boolean;
573
- disabledFocusable?: boolean;
574
- icon?: React.ReactNode;
575
- iconPosition?: "before" | "after";
576
- name?: string;
577
- value?: string;
578
- } & React.RefAttributes<HTMLElement>>;
579
- export declare const SplitButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
580
- [attribute: `data-${string}`]: string | number | boolean | undefined;
581
- } & {
582
- children: React.ReactNode;
583
- menuItems: React.ReactNode;
584
- menuLabel?: string;
585
- appearance?: ButtonAppearance;
586
- size?: ButtonSize;
587
- shape?: ButtonShape;
588
- disabled?: boolean;
589
- disabledFocusable?: boolean;
590
- icon?: React.ReactNode;
591
- iconPosition?: "before" | "after";
592
- menuIcon?: React.ReactNode;
593
- onClick?: React.MouseEventHandler<HTMLElement>;
594
- primaryActionButton?: React.ReactElement | Partial<React.ComponentProps<typeof Button>>;
595
- menuButton?: React.ReactElement | Partial<React.ComponentProps<typeof MenuButton>>;
596
- } & React.RefAttributes<HTMLElement>>;
597
- export type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;
598
- export type ToolbarCheckedValueChangeData = {
599
- name: string;
600
- checkedItems: string[];
601
- };
602
- export type ToolbarProps = NativeClickHostProps<HTMLDivElement> & {
603
- children?: React.ReactNode;
604
- label?: string;
605
- orientation?: "horizontal" | "vertical";
606
- vertical?: boolean;
607
- loop?: boolean;
608
- size?: "small" | "medium" | "large";
609
- checkedValues?: ToolbarCheckedValues;
610
- defaultCheckedValues?: ToolbarCheckedValues;
611
- onCheckedValueChange?: (event: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
612
- };
613
- export declare const Toolbar: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
614
- onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
615
- onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
616
- } & {
617
- children?: React.ReactNode;
618
- label?: string;
619
- orientation?: "horizontal" | "vertical";
620
- vertical?: boolean;
621
- loop?: boolean;
622
- size?: "small" | "medium" | "large";
623
- checkedValues?: ToolbarCheckedValues;
624
- defaultCheckedValues?: ToolbarCheckedValues;
625
- onCheckedValueChange?: (event: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
626
- } & React.RefAttributes<HTMLElement>>;
627
- export declare const ToolbarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
628
- [attribute: `data-${string}`]: string | number | boolean | undefined;
629
- } & {
630
- children?: React.ReactNode;
631
- label?: string;
632
- } & React.RefAttributes<HTMLElement>>;
633
- export declare const ToolbarSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
634
- [attribute: `data-${string}`]: string | number | boolean | undefined;
635
- } & React.RefAttributes<HTMLElement>>;
636
- export declare function ToolbarButton({ children, icon, appearance, size, shape, vertical, ...props }: ElementProps & {
637
- children?: React.ReactNode;
638
- icon?: React.ReactNode;
639
- appearance?: "primary" | "secondary" | "outline" | "subtle" | "transparent";
640
- size?: "small" | "medium" | "large";
641
- shape?: "rounded" | "circular" | "square";
642
- vertical?: boolean;
643
- }): React.ReactElement;
644
- export declare function ToolbarToggleButton({ children, icon, name, value, appearance, size, shape, ...props }: ElementProps & {
645
- children?: React.ReactNode;
646
- icon?: React.ReactNode;
647
- name: string;
648
- value: string;
649
- appearance?: "primary" | "secondary" | "outline" | "subtle" | "transparent";
650
- size?: "small" | "medium" | "large";
651
- shape?: "rounded" | "circular" | "square";
652
- pressed?: boolean;
653
- defaultPressed?: boolean;
654
- onPressedChange?: (pressed: boolean) => void;
655
- }): React.ReactElement;
656
- export declare const ToolbarRadioGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
657
- [attribute: `data-${string}`]: string | number | boolean | undefined;
658
- } & {
659
- children?: React.ReactNode;
660
- label?: string;
661
- } & React.RefAttributes<HTMLElement>>;
662
- export declare const ToolbarRadioButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
663
- [attribute: `data-${string}`]: string | number | boolean | undefined;
664
- } & {
665
- children?: React.ReactNode;
666
- icon?: React.ReactNode;
667
- name: string;
668
- value: string;
669
- appearance?: "primary" | "subtle" | "transparent";
670
- size?: "small" | "medium" | "large";
671
- disabled?: boolean;
672
- } & React.RefAttributes<HTMLElement>>;
673
- export declare const ToolbarDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
674
- [attribute: `data-${string}`]: string | number | boolean | undefined;
675
- } & {
676
- vertical?: boolean;
677
- wrapper?: DividerWrapper;
678
- } & React.RefAttributes<HTMLElement>>;
679
- type OverflowItemBaseProps = ElementProps & {
680
- id: string;
681
- groupId?: string;
682
- overflowLabel?: string;
683
- overflowContent?: React.ReactNode;
684
- children?: React.ReactNode;
685
- };
686
- export type OverflowItemProps = OverflowItemBaseProps & ({
687
- pinned: true;
688
- priority?: never;
689
- } | {
690
- pinned?: false;
691
- priority?: number;
692
- });
693
- export declare const OverflowItem: React.ForwardRefExoticComponent<OverflowItemProps & React.RefAttributes<HTMLElement>>;
694
- export declare const OverflowDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
695
- [attribute: `data-${string}`]: string | number | boolean | undefined;
696
- } & {
697
- groupId: string;
698
- children?: React.ReactNode;
699
- } & React.RefAttributes<HTMLElement>>;
700
- /** The native Overflow engine already observes child-list changes; this renderless marker is only needed by other implementations. */
701
- export declare function OverflowReorderObserver(_props?: Record<string, never>): null;
702
- export type OverflowGroupState = OverflowState["groupVisibility"][string];
703
- export type OverflowItemEntry = {
704
- element: HTMLElement;
705
- id: string;
706
- priority: number;
707
- groupId?: string;
708
- pinned?: boolean;
709
- };
710
- export type OverflowDividerEntry = {
711
- element: HTMLElement;
712
- groupId: string;
713
- };
714
- export type OverflowSnapshot = {
715
- itemVisibility: Record<string, boolean>;
716
- groupVisibility: Record<string, OverflowGroupState>;
717
- invisibleItemCount: number;
718
- };
719
- export type OverflowContextValue = OverflowState & {
720
- registerItem: (item: OverflowItemEntry) => () => void;
721
- registerOverflowMenu: (element: HTMLElement) => () => void;
722
- updateOverflow: (padding?: number) => void;
723
- forceUpdateOverflow: () => void;
724
- registerDivider: (divider: OverflowDividerEntry) => () => void;
725
- containerRef?: React.RefObject<HTMLElement | null>;
726
- getSnapshot: () => OverflowSnapshot;
727
- subscribe: (listener: () => void) => () => void;
728
- };
729
- export declare function OverflowProvider({ value, children }: {
730
- value: OverflowContextValue;
731
- children?: React.ReactNode;
732
- }): React.ReactElement;
733
- export declare function useIsOverflowItemVisible(id: string): boolean;
734
- export declare function useIsOverflowGroupVisible(id: string): OverflowGroupState;
735
- export declare function useOverflowCount(): number;
736
- export declare function useOverflowVisibility(): Pick<OverflowState, "itemVisibility" | "groupVisibility">;
737
- /** Subscribe to a selected value from the latest overflow snapshot. */
738
- export declare function useOverflowSnapshot<TSelected>(selector: (snapshot: OverflowSnapshot) => TSelected): TSelected;
739
- export declare function useOverflowItem<TElement extends HTMLElement = HTMLElement>(id: string, priority?: number, groupId?: string, pinned?: boolean): React.RefObject<TElement | null>;
740
- export declare function useOverflowDivider<TElement extends HTMLElement = HTMLElement>(groupId?: string): React.RefObject<TElement | null>;
741
- export declare function useOverflowMenu<TElement extends HTMLElement = HTMLElement>(id?: string): {
742
- ref: React.MutableRefObject<TElement | null>;
743
- overflowCount: number;
744
- isOverflowing: boolean;
745
- };
746
- export declare function Overflow({ children, label, minimumVisible, overflowDirection, overflowAxis, hasHiddenItems, overflowContent, padding, onOverflowChange, onOverflowItemSelect, ...props }: ElementProps & {
747
- children?: React.ReactNode;
748
- label?: string;
749
- minimumVisible?: number;
750
- overflowDirection?: "start" | "end";
751
- overflowAxis?: OverflowAxis;
752
- hasHiddenItems?: boolean;
753
- overflowContent?: React.ReactNode;
754
- padding?: number;
755
- onOverflowChange?: (event: null, data: OverflowState) => void;
756
- onOverflowItemSelect?: (id: string) => void;
757
- }): React.ReactElement;
758
- export type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;
759
- export type CardProps = NativeClickHostProps<HTMLDivElement> & {
760
- appearance?: CardAppearance;
761
- orientation?: CardOrientation;
762
- size?: CardSize;
763
- focusMode?: CardFocusMode;
764
- selected?: boolean;
765
- defaultSelected?: boolean;
766
- disabled?: boolean;
767
- selectionLabel?: string;
768
- checkbox?: React.ReactElement<HTMLInputElement>;
769
- floatingAction?: React.ReactNode;
770
- onSelectionChange?: (event: CardOnSelectionChangeEvent, data: {
771
- selected: boolean;
772
- }) => void;
773
- };
774
- export declare const Card: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
775
- onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
776
- onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
777
- } & {
778
- appearance?: CardAppearance;
779
- orientation?: CardOrientation;
780
- size?: CardSize;
781
- focusMode?: CardFocusMode;
782
- selected?: boolean;
783
- defaultSelected?: boolean;
784
- disabled?: boolean;
785
- selectionLabel?: string;
786
- checkbox?: React.ReactElement<HTMLInputElement>;
787
- floatingAction?: React.ReactNode;
788
- onSelectionChange?: (event: CardOnSelectionChangeEvent, data: {
789
- selected: boolean;
790
- }) => void;
791
- } & React.RefAttributes<HTMLElement>>;
792
- export declare const SharePointCard: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
793
- onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
794
- onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
795
- } & {
796
- appearance?: CardAppearance;
797
- orientation?: CardOrientation;
798
- size?: CardSize;
799
- focusMode?: CardFocusMode;
800
- selected?: boolean;
801
- defaultSelected?: boolean;
802
- disabled?: boolean;
803
- selectionLabel?: string;
804
- checkbox?: React.ReactElement<HTMLInputElement>;
805
- floatingAction?: React.ReactNode;
806
- onSelectionChange?: (event: CardOnSelectionChangeEvent, data: {
807
- selected: boolean;
808
- }) => void;
809
- } & React.RefAttributes<HTMLElement>>;
810
- export type { CardAppearance, CardFocusMode, CardOrientation, CardSize };
811
- export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
812
- [attribute: `data-${string}`]: string | number | boolean | undefined;
813
- } & {
814
- image?: React.ReactNode;
815
- header?: React.ReactNode;
816
- description?: React.ReactNode;
817
- action?: React.ReactNode;
818
- } & React.RefAttributes<HTMLElement>>;
819
- export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
820
- [attribute: `data-${string}`]: string | number | boolean | undefined;
821
- } & {
822
- action?: React.ReactNode;
823
- } & React.RefAttributes<HTMLElement>>;
824
- export declare const CardPreview: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
825
- [attribute: `data-${string}`]: string | number | boolean | undefined;
826
- } & {
827
- logo?: React.ReactNode;
828
- } & React.RefAttributes<HTMLElement>>;
829
- export declare const ViewCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
830
- [attribute: `data-${string}`]: string | number | boolean | undefined;
831
- } & {
832
- kind: "document" | "person" | "task" | "approval" | "list-item";
833
- title: string;
834
- subtitle?: string;
835
- description?: string;
836
- } & React.RefAttributes<HTMLElement>>;
837
- export type PresenceMotionSlotProps = {
838
- visible: boolean;
839
- appear?: boolean;
840
- unmountOnExit?: boolean;
841
- slot?: string;
842
- children?: React.ReactNode;
843
- };
844
- export type DrawerSurfaceMotionSlotProps = PresenceMotionSlotProps & {
845
- position: "start" | "end" | "top" | "bottom";
846
- size: "small" | "medium" | "large" | "full";
847
- dir: "ltr" | "rtl";
848
- };
849
- export type DrawerBackdropMotionSlotProps = PresenceMotionSlotProps & {
850
- size: "small" | "medium" | "large" | "full";
851
- };
852
- export type PortalMountNode = HTMLElement | null | {
853
- element?: HTMLElement | null;
854
- className?: string;
855
- };
856
- export declare const Dialog: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
857
- [attribute: `data-${string}`]: string | number | boolean | undefined;
858
- } & {
859
- open?: boolean;
860
- defaultOpen?: boolean;
861
- title?: string;
862
- dialogLabel?: string;
863
- modal?: boolean;
864
- modalType?: "modal" | "non-modal" | "alert";
865
- inertTrapFocus?: boolean;
866
- dismissible?: boolean;
867
- closeLabel?: string;
868
- unmountOnClose?: boolean;
869
- surfaceMotion?: React.ComponentType<PresenceMotionSlotProps>;
870
- actions?: React.ReactNode;
871
- onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOnOpenChangeData) => void;
872
- children?: React.ReactNode;
873
- } & React.RefAttributes<HTMLElement>>;
874
- export type DialogBackdropSlotProps = React.ReactElement | (React.HTMLAttributes<HTMLDivElement> & {
875
- appearance?: "dimmed" | "transparent";
876
- });
877
- export type DialogSurfaceProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
878
- children?: React.ReactNode;
879
- backdrop?: DialogBackdropSlotProps;
880
- backdropMotion?: React.ComponentType<PresenceMotionSlotProps>;
881
- mountNode?: PortalMountNode;
882
- };
883
- export declare const DialogSurface: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
884
- children?: React.ReactNode;
885
- backdrop?: DialogBackdropSlotProps;
886
- backdropMotion?: React.ComponentType<PresenceMotionSlotProps>;
887
- mountNode?: PortalMountNode;
888
- } & React.RefAttributes<HTMLDivElement>>;
889
- export type DialogTitleProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, "children"> & {
890
- children?: React.ReactNode;
891
- action?: React.ReactNode;
892
- };
893
- export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "children"> & {
894
- children?: React.ReactNode;
895
- action?: React.ReactNode;
896
- } & React.RefAttributes<HTMLHeadingElement>>;
897
- export type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & {
898
- [attribute: `data-${string}`]: string | number | boolean | undefined;
899
- as?: React.ElementType;
900
- children?: React.ReactNode;
901
- };
902
- export declare const DialogContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
903
- [attribute: `data-${string}`]: string | number | boolean | undefined;
904
- as?: React.ElementType;
905
- children?: React.ReactNode;
906
- } & React.RefAttributes<HTMLElement>>;
907
- export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement> & {
908
- [attribute: `data-${string}`]: string | number | boolean | undefined;
909
- as?: React.ElementType;
910
- children?: React.ReactNode;
911
- };
912
- export declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
913
- [attribute: `data-${string}`]: string | number | boolean | undefined;
914
- as?: React.ElementType;
915
- children?: React.ReactNode;
916
- } & React.RefAttributes<HTMLElement>>;
917
- export type DialogActionsProps = React.HTMLAttributes<HTMLDivElement> & {
918
- [attribute: `data-${string}`]: string | number | boolean | undefined;
919
- children?: React.ReactNode;
920
- fluid?: boolean;
921
- position?: "start" | "end";
922
- };
923
- export declare const DialogActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
924
- [attribute: `data-${string}`]: string | number | boolean | undefined;
925
- children?: React.ReactNode;
926
- fluid?: boolean;
927
- position?: "start" | "end";
928
- } & React.RefAttributes<HTMLDivElement>>;
929
- export type DialogTriggerChildProps = React.HTMLAttributes<HTMLElement> & {
930
- slot?: string;
931
- "aria-haspopup"?: React.AriaAttributes["aria-haspopup"];
932
- };
933
- export type DialogTriggerProps = Omit<ElementProps, "children"> & {
934
- children?: React.ReactElement | ((props: DialogTriggerChildProps) => React.ReactElement | null) | null;
935
- action?: "open" | "close";
936
- disableButtonEnhancement?: boolean;
937
- };
938
- export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<ElementProps, "children"> & {
939
- children?: React.ReactElement | ((props: DialogTriggerChildProps) => React.ReactElement | null) | null;
940
- action?: "open" | "close";
941
- disableButtonEnhancement?: boolean;
942
- } & React.RefAttributes<HTMLElement>>;
943
- export type DrawerProps = ElementProps & {
944
- type?: "overlay" | "inline";
945
- open?: boolean;
946
- defaultOpen?: boolean;
947
- unmountOnClose?: boolean;
948
- separator?: boolean;
949
- title?: string;
950
- modal?: boolean;
951
- modalType?: "modal" | "non-modal" | "alert";
952
- inertTrapFocus?: boolean;
953
- dismissible?: boolean;
954
- position?: "start" | "end" | "top" | "bottom";
955
- size?: "small" | "medium" | "large" | "full";
956
- expandable?: boolean;
957
- expanded?: boolean;
958
- surfaceMotion?: React.ComponentType<DrawerSurfaceMotionSlotProps>;
959
- backdropMotion?: React.ComponentType<DrawerBackdropMotionSlotProps>;
960
- closeLabel?: string;
961
- expandLabel?: string;
962
- restoreLabel?: string;
963
- actions?: React.ReactNode;
964
- onOpenChange?: (open: boolean) => void;
965
- onExpandedChange?: (expanded: boolean) => void;
966
- onDismiss?: () => void;
967
- children?: React.ReactNode;
968
- };
969
- export declare const Drawer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
970
- [attribute: `data-${string}`]: string | number | boolean | undefined;
971
- } & {
972
- type?: "overlay" | "inline";
973
- open?: boolean;
974
- defaultOpen?: boolean;
975
- unmountOnClose?: boolean;
976
- separator?: boolean;
977
- title?: string;
978
- modal?: boolean;
979
- modalType?: "modal" | "non-modal" | "alert";
980
- inertTrapFocus?: boolean;
981
- dismissible?: boolean;
982
- position?: "start" | "end" | "top" | "bottom";
983
- size?: "small" | "medium" | "large" | "full";
984
- expandable?: boolean;
985
- expanded?: boolean;
986
- surfaceMotion?: React.ComponentType<DrawerSurfaceMotionSlotProps>;
987
- backdropMotion?: React.ComponentType<DrawerBackdropMotionSlotProps>;
988
- closeLabel?: string;
989
- expandLabel?: string;
990
- restoreLabel?: string;
991
- actions?: React.ReactNode;
992
- onOpenChange?: (open: boolean) => void;
993
- onExpandedChange?: (expanded: boolean) => void;
994
- onDismiss?: () => void;
995
- children?: React.ReactNode;
996
- } & React.RefAttributes<HTMLElement>>;
997
- export declare function DrawerHeader({ children }: {
998
- children?: React.ReactNode;
999
- }): React.ReactElement;
1000
- export type DrawerHeaderNavigationProps = ElementProps & {
1001
- children?: React.ReactNode;
1002
- label?: string;
1003
- };
1004
- export declare const DrawerHeaderNavigation: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1005
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1006
- } & {
1007
- children?: React.ReactNode;
1008
- label?: string;
1009
- } & React.RefAttributes<HTMLElement>>;
1010
- export type DrawerHeaderTitleHeadingSlot = React.ReactElement<any> | Omit<React.HTMLAttributes<HTMLElement>, "children">;
1011
- export declare function DrawerHeaderTitle({ children, action, heading, ...props }: ElementProps & {
1012
- children?: React.ReactNode;
1013
- action?: React.ReactNode;
1014
- heading?: DrawerHeaderTitleHeadingSlot;
1015
- }): React.ReactElement;
1016
- export type DrawerBodyProps = ElementProps & {
1017
- children?: React.ReactNode;
1018
- };
1019
- export declare const DrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1020
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1021
- } & {
1022
- children?: React.ReactNode;
1023
- } & React.RefAttributes<HTMLDivElement>>;
1024
- export type DrawerFooterProps = ElementProps & {
1025
- children?: React.ReactNode;
1026
- };
1027
- export declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1028
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1029
- } & {
1030
- children?: React.ReactNode;
1031
- } & React.RefAttributes<HTMLDivElement>>;
1032
- export type InlineDrawerProps = ElementProps & {
1033
- open?: boolean;
1034
- title?: string;
1035
- position?: "start" | "end" | "top" | "bottom";
1036
- size?: "small" | "medium" | "large" | "full";
1037
- separator?: boolean;
1038
- unmountOnClose?: boolean;
1039
- surfaceMotion?: React.ComponentType<DrawerSurfaceMotionSlotProps>;
1040
- actions?: React.ReactNode;
1041
- children?: React.ReactNode;
1042
- };
1043
- export declare const InlineDrawer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1044
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1045
- } & {
1046
- open?: boolean;
1047
- title?: string;
1048
- position?: "start" | "end" | "top" | "bottom";
1049
- size?: "small" | "medium" | "large" | "full";
1050
- separator?: boolean;
1051
- unmountOnClose?: boolean;
1052
- surfaceMotion?: React.ComponentType<DrawerSurfaceMotionSlotProps>;
1053
- actions?: React.ReactNode;
1054
- children?: React.ReactNode;
1055
- } & React.RefAttributes<HTMLElement>>;
1056
- export type OverlayDrawerProps = Omit<Parameters<typeof Drawer>[0], "type" | "open" | "modal" | "modalType" | "inertTrapFocus" | "position" | "size" | "onOpenChange"> & {
1057
- open?: boolean;
1058
- defaultOpen?: boolean;
1059
- modalType?: "modal" | "non-modal" | "alert";
1060
- inertTrapFocus?: boolean;
1061
- position?: "start" | "end" | "bottom";
1062
- size?: "small" | "medium" | "large" | "full";
1063
- onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOnOpenChangeData) => void;
1064
- };
1065
- export declare function OverlayDrawer({ open, defaultOpen, modalType, inertTrapFocus, position, size, onOpenChange, ...props }: OverlayDrawerProps): React.ReactElement;
1066
- export declare const ProgressBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1067
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1068
- } & {
1069
- value?: number;
1070
- max?: number;
1071
- label?: string;
1072
- color?: ProgressBarColor;
1073
- shape?: ProgressBarShape;
1074
- thickness?: ProgressBarThickness;
1075
- bar?: React.ReactNode;
1076
- indeterminateMotion?: React.ReactNode;
1077
- } & React.RefAttributes<HTMLElement>>;
1078
- export type SelectChangeEvent = React.ChangeEvent<HTMLSelectElement>;
1079
- export type { SelectAppearance, SelectSize, SelectChangeData } from "./elements/select.js";
1080
- export type SelectProps = Omit<NativeClickHostProps<HTMLSelectElement>, "onChange"> & {
1081
- label?: string;
1082
- value?: string | number | readonly string[];
1083
- defaultValue?: string | number | readonly string[];
1084
- autoComplete?: string;
1085
- required?: boolean;
1086
- disabled?: boolean;
1087
- name?: string;
1088
- form?: string;
1089
- multiple?: boolean;
1090
- size?: "small" | "medium" | "large";
1091
- appearance?: "outline" | "underline" | "filled-darker" | "filled-lighter";
1092
- icon?: React.ReactNode;
1093
- select?: React.ReactElement<React.SelectHTMLAttributes<HTMLSelectElement>> | React.SelectHTMLAttributes<HTMLSelectElement>;
1094
- onValueChange?: (value: string) => void;
1095
- onChange?: (event: SelectChangeEvent, data: {
1096
- value: string;
1097
- }) => void;
1098
- children?: React.ReactNode;
1099
- };
1100
- export declare const Select: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLSelectElement>, "onChange"> & {
1101
- label?: string;
1102
- value?: string | number | readonly string[];
1103
- defaultValue?: string | number | readonly string[];
1104
- autoComplete?: string;
1105
- required?: boolean;
1106
- disabled?: boolean;
1107
- name?: string;
1108
- form?: string;
1109
- multiple?: boolean;
1110
- size?: "small" | "medium" | "large";
1111
- appearance?: "outline" | "underline" | "filled-darker" | "filled-lighter";
1112
- icon?: React.ReactNode;
1113
- select?: React.ReactElement<React.SelectHTMLAttributes<HTMLSelectElement>> | React.SelectHTMLAttributes<HTMLSelectElement>;
1114
- onValueChange?: (value: string) => void;
1115
- onChange?: (event: SelectChangeEvent, data: {
1116
- value: string;
1117
- }) => void;
1118
- children?: React.ReactNode;
1119
- } & React.RefAttributes<HTMLElement>>;
1120
- export type RadioGroupProps = Omit<NativeClickHostProps<HTMLDivElement>, "onChange"> & {
1121
- label?: string;
1122
- value?: string;
1123
- defaultValue?: string;
1124
- name?: string;
1125
- form?: string;
1126
- required?: boolean;
1127
- disabled?: boolean;
1128
- layout?: "vertical" | "horizontal" | "horizontal-stacked";
1129
- orientation?: "vertical" | "horizontal";
1130
- onValueChange?: (value: string) => void;
1131
- onChange?: (event: React.FormEvent<HTMLDivElement>, data: {
1132
- value: string;
1133
- }) => void;
1134
- };
1135
- export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLDivElement>, "onChange"> & {
1136
- label?: string;
1137
- value?: string;
1138
- defaultValue?: string;
1139
- name?: string;
1140
- form?: string;
1141
- required?: boolean;
1142
- disabled?: boolean;
1143
- layout?: "vertical" | "horizontal" | "horizontal-stacked";
1144
- orientation?: "vertical" | "horizontal";
1145
- onValueChange?: (value: string) => void;
1146
- onChange?: (event: React.FormEvent<HTMLDivElement>, data: {
1147
- value: string;
1148
- }) => void;
1149
- } & React.RefAttributes<HTMLElement>>;
1150
- export type RadioInputSlot = React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1151
- export type RadioIndicatorSlot = React.ReactElement<React.HTMLAttributes<HTMLSpanElement>> | React.HTMLAttributes<HTMLSpanElement>;
1152
- export type RadioProps = Omit<ElementProps, "onChange"> & {
1153
- value?: string;
1154
- label?: React.ReactNode;
1155
- labelPosition?: "after" | "below";
1156
- disabled?: boolean;
1157
- input?: RadioInputSlot;
1158
- indicator?: RadioIndicatorSlot;
1159
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
1160
- value: string;
1161
- }) => void;
1162
- children?: React.ReactNode;
1163
- };
1164
- export declare const Radio: React.ForwardRefExoticComponent<Omit<ElementProps, "onChange"> & {
1165
- value?: string;
1166
- label?: React.ReactNode;
1167
- labelPosition?: "after" | "below";
1168
- disabled?: boolean;
1169
- input?: RadioInputSlot;
1170
- indicator?: RadioIndicatorSlot;
1171
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
1172
- value: string;
1173
- }) => void;
1174
- children?: React.ReactNode;
1175
- } & React.RefAttributes<HTMLElement>>;
1176
- export type SpinButtonChangeEvent = React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>;
1177
- export type SpinButtonOnChangeData = {
1178
- value?: number | null;
1179
- displayValue?: string;
1180
- };
1181
- export type SpinButtonProps = Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
1182
- label?: string;
1183
- value?: number | null;
1184
- defaultValue?: number | null;
1185
- displayValue?: string;
1186
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1187
- incrementButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
1188
- decrementButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
1189
- min?: number;
1190
- max?: number;
1191
- step?: number;
1192
- stepPage?: number;
1193
- precision?: number;
1194
- appearance?: "outline" | "underline" | "filled-darker" | "filled-lighter";
1195
- size?: "small" | "medium";
1196
- incrementLabel?: string;
1197
- decrementLabel?: string;
1198
- name?: string;
1199
- form?: string;
1200
- required?: boolean;
1201
- disabled?: boolean;
1202
- readOnly?: boolean;
1203
- onValueChange?: (value: number | undefined) => void;
1204
- onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
1205
- };
1206
- export declare const SpinButton: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
1207
- label?: string;
1208
- value?: number | null;
1209
- defaultValue?: number | null;
1210
- displayValue?: string;
1211
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1212
- incrementButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
1213
- decrementButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
1214
- min?: number;
1215
- max?: number;
1216
- step?: number;
1217
- stepPage?: number;
1218
- precision?: number;
1219
- appearance?: "outline" | "underline" | "filled-darker" | "filled-lighter";
1220
- size?: "small" | "medium";
1221
- incrementLabel?: string;
1222
- decrementLabel?: string;
1223
- name?: string;
1224
- form?: string;
1225
- required?: boolean;
1226
- disabled?: boolean;
1227
- readOnly?: boolean;
1228
- onValueChange?: (value: number | undefined) => void;
1229
- onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
1230
- } & React.RefAttributes<HTMLElement>>;
1231
- export type SliderOnChangeData = {
1232
- value: number;
1233
- };
1234
- export type SliderProps = Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
1235
- label?: string;
1236
- value?: number;
1237
- defaultValue?: number;
1238
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1239
- rail?: React.ReactNode;
1240
- thumb?: React.ReactNode;
1241
- min?: number;
1242
- max?: number;
1243
- step?: number;
1244
- size?: "small" | "medium";
1245
- vertical?: boolean;
1246
- name?: string;
1247
- form?: string;
1248
- disabled?: boolean;
1249
- valueText?: string;
1250
- onValueChange?: (value: number) => void;
1251
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
1252
- };
1253
- export declare const Slider: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
1254
- label?: string;
1255
- value?: number;
1256
- defaultValue?: number;
1257
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1258
- rail?: React.ReactNode;
1259
- thumb?: React.ReactNode;
1260
- min?: number;
1261
- max?: number;
1262
- step?: number;
1263
- size?: "small" | "medium";
1264
- vertical?: boolean;
1265
- name?: string;
1266
- form?: string;
1267
- disabled?: boolean;
1268
- valueText?: string;
1269
- onValueChange?: (value: number) => void;
1270
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
1271
- } & React.RefAttributes<HTMLElement>>;
1272
- export type DatePickerProps = NativeClickHostProps<HTMLDivElement> & {
1273
- label?: string;
1274
- value?: string;
1275
- defaultValue?: string;
1276
- min?: string;
1277
- max?: string;
1278
- name?: string;
1279
- form?: string;
1280
- placeholder?: string;
1281
- required?: boolean;
1282
- disabled?: boolean;
1283
- readOnly?: boolean;
1284
- calendarLabel?: string;
1285
- previousMonthLabel?: string;
1286
- nextMonthLabel?: string;
1287
- invalidDateMessage?: string;
1288
- requiredMessage?: string;
1289
- onValueChange?: (value: string) => void;
1290
- };
1291
- export declare const DatePicker: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
1292
- onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
1293
- onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
1294
- } & {
1295
- label?: string;
1296
- value?: string;
1297
- defaultValue?: string;
1298
- min?: string;
1299
- max?: string;
1300
- name?: string;
1301
- form?: string;
1302
- placeholder?: string;
1303
- required?: boolean;
1304
- disabled?: boolean;
1305
- readOnly?: boolean;
1306
- calendarLabel?: string;
1307
- previousMonthLabel?: string;
1308
- nextMonthLabel?: string;
1309
- invalidDateMessage?: string;
1310
- requiredMessage?: string;
1311
- onValueChange?: (value: string) => void;
1312
- } & React.RefAttributes<HTMLElement>>;
1313
- export type ComboboxPositioning = "above" | "below" | "above-start" | "above-end" | "below-start" | "below-end" | {
1314
- position?: "above" | "below";
1315
- align?: "start" | "center" | "end";
1316
- };
1317
- export type ComboboxSelectionEvent = React.ChangeEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>;
1318
- export type ComboboxOpenChangeEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
1319
- export type ComboboxActiveOptionChangeData = {
1320
- event: React.SyntheticEvent | Event;
1321
- type: undefined;
1322
- previousOption: ComboboxOptionValue | null | undefined;
1323
- nextOption: ComboboxOptionValue | null | undefined;
1324
- } | {
1325
- event: CustomEvent<{
1326
- id: string;
1327
- previousId: string | null;
1328
- }>;
1329
- type: "change";
1330
- previousOption: ComboboxOptionValue | null | undefined;
1331
- nextOption: ComboboxOptionValue | null | undefined;
1332
- };
1333
- export type ComboBoxProps = NativeClickHostProps<HTMLInputElement> & {
1334
- label?: string;
1335
- selectedLabel?: string;
1336
- value?: string;
1337
- defaultValue?: string;
1338
- selectedValue?: string;
1339
- selectedOptions?: readonly string[];
1340
- defaultSelectedOptions?: readonly string[];
1341
- multiselect?: boolean;
1342
- name?: string;
1343
- form?: string;
1344
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1345
- listbox?: React.ReactElement;
1346
- mountNode?: PortalMountNode;
1347
- placeholder?: string;
1348
- required?: boolean;
1349
- disabled?: boolean;
1350
- freeform?: boolean;
1351
- allowFreeform?: boolean;
1352
- noResults?: string;
1353
- clearable?: boolean;
1354
- clearIcon?: React.ReactNode;
1355
- expandIcon?: React.ReactNode;
1356
- defaultOpen?: boolean;
1357
- disableAutoFocus?: boolean;
1358
- inlinePopup?: boolean;
1359
- open?: boolean;
1360
- appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1361
- size?: "small" | "medium" | "large";
1362
- positioning?: ComboboxPositioning;
1363
- children?: React.ReactNode;
1364
- onValueChange?: (value: string) => void;
1365
- onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1366
- onSelectedOptionsChange?: (selectedOptions: string[]) => void;
1367
- onOpenChange?: (event: ComboboxOpenChangeEvent, data: {
1368
- open: boolean;
1369
- }) => void;
1370
- onActiveOptionChange?: (event: React.SyntheticEvent | Event, data: ComboboxActiveOptionChangeData) => void;
1371
- };
1372
- export declare const ComboBox: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLInputElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLInputElement> & NativeAdditionalEventProps<HTMLInputElement> & {
1373
- onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
1374
- onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
1375
- } & {
1376
- label?: string;
1377
- selectedLabel?: string;
1378
- value?: string;
1379
- defaultValue?: string;
1380
- selectedValue?: string;
1381
- selectedOptions?: readonly string[];
1382
- defaultSelectedOptions?: readonly string[];
1383
- multiselect?: boolean;
1384
- name?: string;
1385
- form?: string;
1386
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1387
- listbox?: React.ReactElement;
1388
- mountNode?: PortalMountNode;
1389
- placeholder?: string;
1390
- required?: boolean;
1391
- disabled?: boolean;
1392
- freeform?: boolean;
1393
- allowFreeform?: boolean;
1394
- noResults?: string;
1395
- clearable?: boolean;
1396
- clearIcon?: React.ReactNode;
1397
- expandIcon?: React.ReactNode;
1398
- defaultOpen?: boolean;
1399
- disableAutoFocus?: boolean;
1400
- inlinePopup?: boolean;
1401
- open?: boolean;
1402
- appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1403
- size?: "small" | "medium" | "large";
1404
- positioning?: ComboboxPositioning;
1405
- children?: React.ReactNode;
1406
- onValueChange?: (value: string) => void;
1407
- onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1408
- onSelectedOptionsChange?: (selectedOptions: string[]) => void;
1409
- onOpenChange?: (event: ComboboxOpenChangeEvent, data: {
1410
- open: boolean;
1411
- }) => void;
1412
- onActiveOptionChange?: (event: React.SyntheticEvent | Event, data: ComboboxActiveOptionChangeData) => void;
1413
- } & React.RefAttributes<HTMLElement>>;
1414
- export declare const ComboOption: React.ForwardRefExoticComponent<{
1415
- value: string;
1416
- label?: string;
1417
- disabled?: boolean;
1418
- children?: React.ReactNode;
1419
- } & React.RefAttributes<HTMLElement>>;
1420
- export type ComboboxOptionSelectData = {
1421
- optionValue: string | undefined;
1422
- optionText: string | undefined;
1423
- selectedOptions: string[];
1424
- };
1425
- export type ComboboxOptionValue = {
1426
- disabled?: boolean;
1427
- id: string;
1428
- text: string;
1429
- value: string;
1430
- };
1431
- export type ComboboxContextValue = {
1432
- activeOption?: ComboboxOptionValue;
1433
- appearance: NonNullable<DropdownProps["appearance"]>;
1434
- focusVisible: boolean;
1435
- open: boolean;
1436
- registerOption: (option: ComboboxOptionValue, element: HTMLElement) => () => void;
1437
- selectedOptions: string[];
1438
- selectOption: (event: ComboboxSelectionEvent, option: ComboboxOptionValue) => void;
1439
- setActiveOption: React.Dispatch<React.SetStateAction<ComboboxOptionValue | undefined>>;
1440
- setOpen: (event: ComboboxOpenChangeEvent, open: boolean) => void;
1441
- size: NonNullable<DropdownProps["size"]>;
1442
- };
1443
- export type ComboboxProviderValue = Partial<Omit<ComboboxContextValue, "selectedOptions">> & {
1444
- value?: string;
1445
- selectedOptions?: readonly string[];
1446
- setValue?: (value: string | undefined) => void;
1447
- onValueChange?: (value: string) => void;
1448
- onOpenChange?: (open: boolean) => void;
1449
- onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1450
- };
1451
- /** Supply shared value and selection callbacks to composed options. */
1452
- export declare function ComboboxProvider({ value, children }: {
1453
- value: ComboboxProviderValue;
1454
- children?: React.ReactNode;
1455
- }): React.ReactElement;
1456
- export type DropdownProps = NativeClickHostProps<HTMLInputElement> & {
1457
- label?: string;
1458
- button?: React.ReactNode;
1459
- appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1460
- clearable?: boolean;
1461
- clearButton?: React.ReactNode;
1462
- defaultOpen?: boolean;
1463
- defaultValue?: string;
1464
- disableAutoFocus?: boolean;
1465
- defaultSelectedOptions?: string[];
1466
- inlinePopup?: boolean;
1467
- listbox?: React.ReactElement;
1468
- mountNode?: PortalMountNode;
1469
- multiselect?: boolean;
1470
- form?: string;
1471
- onOpenChange?: (event: ComboboxOpenChangeEvent, data: {
1472
- open: boolean;
1473
- }) => void;
1474
- onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1475
- onActiveOptionChange?: (event: React.SyntheticEvent | Event, data: ComboboxActiveOptionChangeData) => void;
1476
- expandIcon?: React.ReactNode;
1477
- open?: boolean;
1478
- placeholder?: string;
1479
- positioning?: ComboboxPositioning;
1480
- selectedOptions?: string[];
1481
- size?: "small" | "medium" | "large";
1482
- value?: string;
1483
- disabled?: boolean;
1484
- children?: React.ReactNode;
1485
- };
1486
- /** Selection-only combobox that shares the theme, form, and keyboard engine with ComboBox. */
1487
- export declare const Dropdown: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLInputElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLInputElement> & NativeAdditionalEventProps<HTMLInputElement> & {
1488
- onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
1489
- onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
1490
- } & {
1491
- label?: string;
1492
- button?: React.ReactNode;
1493
- appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1494
- clearable?: boolean;
1495
- clearButton?: React.ReactNode;
1496
- defaultOpen?: boolean;
1497
- defaultValue?: string;
1498
- disableAutoFocus?: boolean;
1499
- defaultSelectedOptions?: string[];
1500
- inlinePopup?: boolean;
1501
- listbox?: React.ReactElement;
1502
- mountNode?: PortalMountNode;
1503
- multiselect?: boolean;
1504
- form?: string;
1505
- onOpenChange?: (event: ComboboxOpenChangeEvent, data: {
1506
- open: boolean;
1507
- }) => void;
1508
- onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1509
- onActiveOptionChange?: (event: React.SyntheticEvent | Event, data: ComboboxActiveOptionChangeData) => void;
1510
- expandIcon?: React.ReactNode;
1511
- open?: boolean;
1512
- placeholder?: string;
1513
- positioning?: ComboboxPositioning;
1514
- selectedOptions?: string[];
1515
- size?: "small" | "medium" | "large";
1516
- value?: string;
1517
- disabled?: boolean;
1518
- children?: React.ReactNode;
1519
- } & React.RefAttributes<HTMLElement>>;
1520
- export type ListboxProps = ElementProps & {
1521
- children?: React.ReactNode;
1522
- selectedOptions?: string[];
1523
- defaultSelectedOptions?: string[];
1524
- multiselect?: boolean;
1525
- disableAutoFocus?: boolean;
1526
- onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1527
- };
1528
- /** Standalone keyboard-operable listbox for composing selectable Option elements. */
1529
- export declare const Listbox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1530
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1531
- } & {
1532
- children?: React.ReactNode;
1533
- selectedOptions?: string[];
1534
- defaultSelectedOptions?: string[];
1535
- multiselect?: boolean;
1536
- disableAutoFocus?: boolean;
1537
- onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1538
- } & React.RefAttributes<HTMLDivElement>>;
1539
- export type OptionProps = ElementProps & {
1540
- value?: string;
1541
- text?: string;
1542
- disabled?: boolean;
1543
- checkIcon?: React.ReactNode;
1544
- children?: React.ReactNode;
1545
- };
1546
- /** Option for Dropdown/ComboBox or a standalone Listbox. */
1547
- export declare const Option: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1548
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1549
- } & {
1550
- value?: string;
1551
- text?: string;
1552
- disabled?: boolean;
1553
- checkIcon?: React.ReactNode;
1554
- children?: React.ReactNode;
1555
- } & React.RefAttributes<HTMLElement>>;
1556
- export type OptionGroupProps = ElementProps & {
1557
- label?: string;
1558
- children?: React.ReactNode;
1559
- };
1560
- /** Group related options under an accessible label. */
1561
- export declare const OptionGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1562
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1563
- } & {
1564
- label?: string;
1565
- children?: React.ReactNode;
1566
- } & React.RefAttributes<HTMLElement>>;
1567
- export type RichTextEditorProps = NativeClickHostProps<HTMLDivElement> & {
1568
- label?: string;
1569
- editorLabel?: string;
1570
- value?: string;
1571
- defaultValue?: string;
1572
- placeholder?: string;
1573
- disabled?: boolean;
1574
- readOnly?: boolean;
1575
- required?: boolean;
1576
- name?: string;
1577
- form?: string;
1578
- onValueChange?: (html: string) => void;
1579
- onImageUpload?: (file: File) => Promise<string>;
1580
- };
1581
- export declare const RichTextEditor: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
1582
- onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
1583
- onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
1584
- } & {
1585
- label?: string;
1586
- editorLabel?: string;
1587
- value?: string;
1588
- defaultValue?: string;
1589
- placeholder?: string;
1590
- disabled?: boolean;
1591
- readOnly?: boolean;
1592
- required?: boolean;
1593
- name?: string;
1594
- form?: string;
1595
- onValueChange?: (html: string) => void;
1596
- onImageUpload?: (file: File) => Promise<string>;
1597
- } & React.RefAttributes<HTMLElement>>;
1598
- export type BadgeProps = ElementProps & {
1599
- children?: React.ReactNode;
1600
- icon?: React.ReactNode;
1601
- appearance?: BadgeAppearance;
1602
- color?: BadgeColor;
1603
- iconPosition?: "before" | "after";
1604
- shape?: BadgeShape;
1605
- size?: BadgeSize;
1606
- };
1607
- export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1608
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1609
- } & {
1610
- children?: React.ReactNode;
1611
- icon?: React.ReactNode;
1612
- appearance?: BadgeAppearance;
1613
- color?: BadgeColor;
1614
- iconPosition?: "before" | "after";
1615
- shape?: BadgeShape;
1616
- size?: BadgeSize;
1617
- } & React.RefAttributes<HTMLElement>>;
1618
- export declare const CounterBadge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1619
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1620
- } & {
1621
- count?: number;
1622
- dot?: boolean;
1623
- overflowCount?: number;
1624
- showZero?: boolean;
1625
- appearance?: "filled" | "ghost";
1626
- color?: Extract<BadgeColor, "brand" | "danger" | "important" | "informative">;
1627
- shape?: "circular" | "rounded";
1628
- size?: BadgeSize;
1629
- icon?: React.ReactNode;
1630
- iconPosition?: "before" | "after";
1631
- } & React.RefAttributes<HTMLElement>>;
1632
- export declare const PresenceBadge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1633
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1634
- } & {
1635
- status?: PresenceBadgeStatus;
1636
- outOfOffice?: boolean;
1637
- size?: BadgeSize;
1638
- icon?: React.ReactNode;
1639
- } & React.RefAttributes<HTMLElement>>;
1640
- export type TagProps = ElementProps & {
1641
- children?: React.ReactNode;
1642
- appearance?: "filled" | "outline" | "brand";
1643
- size?: "extra-small" | "small" | "medium" | "large";
1644
- shape?: "rounded" | "circular";
1645
- color?: "neutral" | "success" | "warning" | "danger" | "informative";
1646
- value?: string;
1647
- label?: string;
1648
- disabled?: boolean;
1649
- selected?: boolean;
1650
- dismissible?: boolean;
1651
- dismissLabel?: string;
1652
- onDismiss?: (value: string, label: string) => void;
1653
- media?: React.ReactNode;
1654
- icon?: React.ReactNode;
1655
- primaryText?: React.ReactNode;
1656
- secondaryText?: React.ReactNode;
1657
- dismissIcon?: React.ReactNode;
1658
- };
1659
- export declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1660
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1661
- } & {
1662
- children?: React.ReactNode;
1663
- appearance?: "filled" | "outline" | "brand";
1664
- size?: "extra-small" | "small" | "medium" | "large";
1665
- shape?: "rounded" | "circular";
1666
- color?: "neutral" | "success" | "warning" | "danger" | "informative";
1667
- value?: string;
1668
- label?: string;
1669
- disabled?: boolean;
1670
- selected?: boolean;
1671
- dismissible?: boolean;
1672
- dismissLabel?: string;
1673
- onDismiss?: (value: string, label: string) => void;
1674
- media?: React.ReactNode;
1675
- icon?: React.ReactNode;
1676
- primaryText?: React.ReactNode;
1677
- secondaryText?: React.ReactNode;
1678
- dismissIcon?: React.ReactNode;
1679
- } & React.RefAttributes<HTMLElement>>;
1680
- export declare const InteractionTag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1681
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1682
- } & {
1683
- children?: React.ReactNode;
1684
- appearance?: "filled" | "outline" | "brand";
1685
- size?: "extra-small" | "small" | "medium";
1686
- shape?: "rounded" | "circular";
1687
- value?: string;
1688
- label?: string;
1689
- disabled?: boolean;
1690
- selected?: boolean;
1691
- onTagSelect?: (event: Event, data: InteractionTagSelectData) => void;
1692
- onDismiss?: (event: TagDismissEvent, data: {
1693
- value: string;
1694
- }) => void;
1695
- } & React.RefAttributes<HTMLElement>>;
1696
- export declare const InteractionTagPrimary: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1697
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1698
- } & {
1699
- children?: React.ReactNode;
1700
- media?: React.ReactNode;
1701
- icon?: React.ReactNode;
1702
- primaryText?: React.ReactNode;
1703
- secondaryText?: React.ReactNode;
1704
- hasSecondaryAction?: boolean;
1705
- } & React.RefAttributes<HTMLElement>>;
1706
- export declare const InteractionTagSecondary: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1707
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1708
- } & {
1709
- children?: React.ReactNode;
1710
- label?: string;
1711
- } & React.RefAttributes<HTMLElement>>;
1712
- export type TagDismissEvent = React.MouseEvent | React.KeyboardEvent;
1713
- export type TagGroupReactSelectData = Omit<TagGroupSelectData, "event" | "type"> & ({
1714
- event: SharePointUIEvent;
1715
- type: undefined;
1716
- } | {
1717
- event: React.MouseEvent<HTMLButtonElement>;
1718
- type: "click";
1719
- });
1720
- export declare const TagGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1721
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1722
- } & {
1723
- children?: React.ReactNode;
1724
- orientation?: "horizontal" | "vertical";
1725
- label?: string;
1726
- appearance?: TagAppearance;
1727
- size?: TagSize;
1728
- disabled?: boolean;
1729
- dismissible?: boolean;
1730
- selectedValues?: string[];
1731
- defaultSelectedValues?: string[];
1732
- onTagSelect?: (event: SharePointUIEvent, data: TagGroupReactSelectData) => void;
1733
- onDismiss?: (event: TagDismissEvent, data: {
1734
- value: string;
1735
- }) => void;
1736
- } & React.RefAttributes<HTMLElement>>;
1737
- type TagPickerReactOpenChangeData = {
1738
- open: boolean;
1739
- reason: string;
1740
- } & ({
1741
- type: undefined;
1742
- event: SharePointUIEvent;
1743
- } | {
1744
- type: "click";
1745
- event: React.MouseEvent<HTMLDivElement>;
1746
- } | {
1747
- type: "keydown";
1748
- event: React.KeyboardEvent<HTMLDivElement>;
1749
- } | {
1750
- type: Exclude<TagPickerOpenChangeType, "click" | "keydown" | "programmatic">;
1751
- event: SharePointUIEvent;
1752
- } | {
1753
- type: "programmatic";
1754
- event: Event;
1755
- });
1756
- type TagPickerReactOptionSelectData = {
1757
- value: string;
1758
- selectedOptions: string[];
1759
- } & ({
1760
- type: undefined;
1761
- event: SharePointUIEvent;
1762
- } | {
1763
- type: "click";
1764
- event: React.MouseEvent<HTMLDivElement>;
1765
- } | {
1766
- type: "keydown";
1767
- event: React.KeyboardEvent<HTMLDivElement>;
1768
- });
1769
- export type TagPickerProps = Omit<ElementProps, "onChange"> & {
1770
- children?: React.ReactNode;
1771
- label?: string;
1772
- selectedLabel?: string;
1773
- form?: string;
1774
- disabled?: boolean;
1775
- selectedOptions?: readonly string[];
1776
- defaultSelectedOptions?: readonly string[];
1777
- selectedValues?: readonly string[];
1778
- defaultSelectedValues?: readonly string[];
1779
- inputValue?: string;
1780
- open?: boolean;
1781
- defaultOpen?: boolean;
1782
- positioning?: TooltipPositioning;
1783
- disableAutoFocus?: boolean;
1784
- inline?: boolean;
1785
- noPopover?: boolean;
1786
- onOpenChange?: (event: SharePointUIEvent, data: TagPickerReactOpenChangeData) => void;
1787
- onOptionSelect?: (event: SharePointUIEvent, data: TagPickerReactOptionSelectData) => void;
1788
- onInputValueChange?: (value: string) => void;
1789
- onChange?: (values: string[]) => void;
1790
- };
1791
- export declare const TagPicker: React.ForwardRefExoticComponent<Omit<ElementProps, "onChange"> & {
1792
- children?: React.ReactNode;
1793
- label?: string;
1794
- selectedLabel?: string;
1795
- form?: string;
1796
- disabled?: boolean;
1797
- selectedOptions?: readonly string[];
1798
- defaultSelectedOptions?: readonly string[];
1799
- selectedValues?: readonly string[];
1800
- defaultSelectedValues?: readonly string[];
1801
- inputValue?: string;
1802
- open?: boolean;
1803
- defaultOpen?: boolean;
1804
- positioning?: TooltipPositioning;
1805
- disableAutoFocus?: boolean;
1806
- inline?: boolean;
1807
- noPopover?: boolean;
1808
- onOpenChange?: (event: SharePointUIEvent, data: TagPickerReactOpenChangeData) => void;
1809
- onOptionSelect?: (event: SharePointUIEvent, data: TagPickerReactOptionSelectData) => void;
1810
- onInputValueChange?: (value: string) => void;
1811
- onChange?: (values: string[]) => void;
1812
- } & React.RefAttributes<HTMLElement>>;
1813
- export declare function TagPickerControl({ children, secondaryAction, expandIcon }: ElementProps & {
1814
- children?: React.ReactNode;
1815
- secondaryAction?: React.ReactNode;
1816
- expandIcon?: React.ReactNode;
1817
- }): React.ReactElement;
1818
- export declare const TagPickerGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1819
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1820
- } & {
1821
- children?: React.ReactNode;
1822
- label?: string;
1823
- } & React.RefAttributes<HTMLElement>>;
1824
- export declare const TagPickerInput: React.ForwardRefExoticComponent<Omit<ElementProps, "children"> & {
1825
- value?: string;
1826
- placeholder?: string;
1827
- disabled?: boolean;
1828
- clearable?: boolean;
1829
- appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1830
- onValueChange?: (value: string) => void;
1831
- } & React.RefAttributes<HTMLElement>>;
1832
- export declare function TagPickerList({ children }: ElementProps & {
1833
- children?: React.ReactNode;
1834
- disableAutoFocus?: boolean;
1835
- }): React.ReactElement;
1836
- export type TagPickerButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "type"> & {
1837
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1838
- children?: React.ReactNode;
1839
- appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1840
- size?: "small" | "medium" | "large";
1841
- disabled?: boolean;
1842
- };
1843
- export declare const TagPickerButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "type"> & {
1844
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1845
- children?: React.ReactNode;
1846
- appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1847
- size?: "small" | "medium" | "large";
1848
- disabled?: boolean;
1849
- } & React.RefAttributes<HTMLButtonElement>>;
1850
- export declare const TagPickerOption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1851
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1852
- } & {
1853
- value: string;
1854
- text?: string;
1855
- label?: string;
1856
- group?: string;
1857
- media?: React.ReactNode;
1858
- secondaryContent?: React.ReactNode;
1859
- disabled?: boolean;
1860
- children?: React.ReactNode;
1861
- } & React.RefAttributes<HTMLElement>>;
1862
- export declare const TagPickerOptionGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1863
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1864
- } & {
1865
- children?: React.ReactNode;
1866
- label: string;
1867
- disabled?: boolean;
1868
- } & React.RefAttributes<HTMLElement>>;
1869
- export type RatingOnChangeData = {
1870
- value: number;
1871
- } & ({
1872
- event: SharePointUIEvent;
1873
- type: undefined;
1874
- } | {
1875
- event: React.FormEvent<HTMLDivElement>;
1876
- type: "change";
1877
- });
1878
- export type RatingInputSlot = React.ReactElement<any> | Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "value" | "checked" | "disabled" | "required">;
1879
- export type RatingProps = Omit<ElementProps, "onChange"> & {
1880
- value?: number;
1881
- defaultValue?: number;
1882
- max?: number;
1883
- step?: 0.5 | 1;
1884
- size?: "small" | "medium" | "large" | "extra-large";
1885
- color?: "brand" | "marigold" | "neutral";
1886
- label?: string;
1887
- itemLabel?: (rating: number) => string;
1888
- iconFilled?: React.ElementType;
1889
- iconOutline?: React.ElementType;
1890
- fullValueInput?: RatingInputSlot;
1891
- halfValueInput?: RatingInputSlot;
1892
- name?: string;
1893
- form?: string;
1894
- disabled?: boolean;
1895
- readOnly?: boolean;
1896
- required?: boolean;
1897
- onChange?: (event: SharePointUIEvent, data: RatingOnChangeData) => void;
1898
- };
1899
- export declare const Rating: React.ForwardRefExoticComponent<Omit<ElementProps, "onChange"> & {
1900
- value?: number;
1901
- defaultValue?: number;
1902
- max?: number;
1903
- step?: 0.5 | 1;
1904
- size?: "small" | "medium" | "large" | "extra-large";
1905
- color?: "brand" | "marigold" | "neutral";
1906
- label?: string;
1907
- itemLabel?: (rating: number) => string;
1908
- iconFilled?: React.ElementType;
1909
- iconOutline?: React.ElementType;
1910
- fullValueInput?: RatingInputSlot;
1911
- halfValueInput?: RatingInputSlot;
1912
- name?: string;
1913
- form?: string;
1914
- disabled?: boolean;
1915
- readOnly?: boolean;
1916
- required?: boolean;
1917
- onChange?: (event: SharePointUIEvent, data: RatingOnChangeData) => void;
1918
- } & React.RefAttributes<HTMLElement>>;
1919
- export declare const RatingItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1920
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1921
- } & {
1922
- value?: number;
1923
- selectedIcon?: React.ReactNode;
1924
- unselectedIcon?: React.ReactNode;
1925
- } & React.RefAttributes<HTMLElement>>;
1926
- export declare const RatingDisplay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1927
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1928
- } & {
1929
- value?: number;
1930
- max?: number;
1931
- count?: number;
1932
- compact?: boolean;
1933
- color?: "brand" | "marigold" | "neutral";
1934
- size?: "small" | "medium" | "large" | "extra-large";
1935
- icon?: React.ElementType;
1936
- label?: string;
1937
- valueText?: React.ReactNode;
1938
- countText?: React.ReactNode;
1939
- children?: React.ReactNode;
1940
- } & React.RefAttributes<HTMLElement>>;
1941
- export type ListOnSelectionChangeData = {
1942
- event: SharePointUIEvent;
1943
- type: undefined;
1944
- selectedItems: ListItemValue[];
1945
- } | {
1946
- event: React.SyntheticEvent;
1947
- type: "change";
1948
- selectedItems: ListItemValue[];
1949
- };
1950
- export declare const List: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1951
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1952
- } & {
1953
- navigationMode?: ListNavigationMode;
1954
- selectionMode?: ListSelectionMode;
1955
- selectedItems?: ListItemValue[];
1956
- defaultSelectedItems?: ListItemValue[];
1957
- onSelectionChange?: (event: SharePointUIEvent, data: ListOnSelectionChangeData) => void;
1958
- children?: React.ReactNode;
1959
- } & React.RefAttributes<HTMLElement>>;
1960
- export type ListItemReactActionEvent = CustomEvent<{
1961
- originalEvent: React.MouseEvent | React.KeyboardEvent;
1962
- }>;
1963
- export type ListItemReactActionData = {
1964
- event: SharePointUIEvent;
1965
- type: undefined;
1966
- value: ListItemValue;
1967
- } | {
1968
- event: ListItemReactActionEvent;
1969
- type: "ListItemAction";
1970
- value: ListItemValue;
1971
- };
1972
- export declare const ListItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1973
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1974
- } & {
1975
- value?: ListItemValue;
1976
- disabledSelection?: boolean;
1977
- checkmark?: React.ReactNode;
1978
- onAction?: (event: SharePointUIEvent, data: ListItemReactActionData) => void;
1979
- children?: React.ReactNode;
1980
- } & React.RefAttributes<HTMLElement>>;
1981
- export declare const CarouselCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1982
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1983
- } & {
1984
- children?: React.ReactNode;
1985
- autoSize?: boolean;
1986
- } & React.RefAttributes<HTMLElement>>;
1987
- export declare const CarouselNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1988
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1989
- } & {
1990
- children?: React.ReactNode;
1991
- label?: string;
1992
- appearance?: "brand";
1993
- slot?: string;
1994
- } & React.RefAttributes<HTMLElement>>;
1995
- export declare const CarouselNavButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1996
- [attribute: `data-${string}`]: string | number | boolean | undefined;
1997
- } & {
1998
- children?: React.ReactNode;
1999
- index: number;
2000
- label?: string;
2001
- selected?: boolean;
2002
- disabled?: boolean;
2003
- } & React.RefAttributes<HTMLElement>>;
2004
- export declare const CarouselNavImageButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2005
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2006
- } & {
2007
- index: number;
2008
- src: string;
2009
- alt: string;
2010
- label?: string;
2011
- image?: React.ReactElement;
2012
- selected?: boolean;
2013
- disabled?: boolean;
2014
- } & React.RefAttributes<HTMLElement>>;
2015
- export declare const CarouselButton: React.ForwardRefExoticComponent<Omit<ElementProps, "slot"> & {
2016
- children?: React.ReactNode;
2017
- icon?: React.ReactNode;
2018
- navType?: "prev" | "next";
2019
- label?: string;
2020
- slot?: string | null;
2021
- } & React.RefAttributes<HTMLElement>>;
2022
- export type CarouselAutoplayChangeData = {
2023
- checked: boolean;
2024
- } & ({
2025
- event: SharePointUIEvent;
2026
- type: undefined;
2027
- } | {
2028
- event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
2029
- type: "click";
2030
- });
2031
- export type CarouselAutoplayButtonProps = Omit<ElementProps, "slot"> & {
2032
- icon?: React.ReactNode;
2033
- appearance?: ButtonAppearance;
2034
- checked?: boolean;
2035
- defaultChecked?: boolean;
2036
- disabled?: boolean;
2037
- disabledFocusable?: boolean;
2038
- iconPosition?: "before" | "after";
2039
- isAccessible?: boolean;
2040
- shape?: ButtonShape;
2041
- size?: ButtonSize;
2042
- playLabel?: string;
2043
- pauseLabel?: string;
2044
- onCheckedChange?: (event: SharePointUIEvent, data: CarouselAutoplayChangeData) => void;
2045
- slot?: string | null;
2046
- };
2047
- export declare const CarouselAutoplayButton: React.ForwardRefExoticComponent<Omit<ElementProps, "slot"> & {
2048
- icon?: React.ReactNode;
2049
- appearance?: ButtonAppearance;
2050
- checked?: boolean;
2051
- defaultChecked?: boolean;
2052
- disabled?: boolean;
2053
- disabledFocusable?: boolean;
2054
- iconPosition?: "before" | "after";
2055
- isAccessible?: boolean;
2056
- shape?: ButtonShape;
2057
- size?: ButtonSize;
2058
- playLabel?: string;
2059
- pauseLabel?: string;
2060
- onCheckedChange?: (event: SharePointUIEvent, data: CarouselAutoplayChangeData) => void;
2061
- slot?: string | null;
2062
- } & React.RefAttributes<HTMLElement>>;
2063
- export type CarouselNavButtonSlotProps = React.ReactElement | Omit<Parameters<typeof CarouselButton>[0], "navType" | "slot">;
2064
- export type CarouselAutoplaySlotProps = React.ReactElement | Omit<Parameters<typeof CarouselAutoplayButton>[0], "slot"> | boolean;
2065
- export type CarouselTooltipSlotProps = React.ReactElement | Omit<Parameters<typeof Tooltip>[0], "children" | "slot">;
2066
- export type CarouselReactIndexChangeData = {
2067
- index: number;
2068
- } & ({
2069
- event: SharePointUIEvent;
2070
- type: undefined;
2071
- } | {
2072
- event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
2073
- type: "click";
2074
- } | {
2075
- event: React.FocusEvent<Element>;
2076
- type: "focus";
2077
- } | {
2078
- event: PointerEvent | MouseEvent;
2079
- type: "drag";
2080
- } | {
2081
- event: Event;
2082
- type: "autoplay" | "scroll" | "programmatic";
2083
- } | {
2084
- event: React.KeyboardEvent<HTMLElement>;
2085
- type: "keydown";
2086
- });
2087
- export declare const CarouselNavContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2088
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2089
- } & {
2090
- children?: React.ReactNode;
2091
- prev?: CarouselNavButtonSlotProps | null;
2092
- next?: CarouselNavButtonSlotProps | null;
2093
- autoplay?: CarouselAutoplaySlotProps | null;
2094
- prevTooltip?: CarouselTooltipSlotProps | null;
2095
- nextTooltip?: CarouselTooltipSlotProps | null;
2096
- autoplayTooltip?: CarouselTooltipSlotProps | null;
2097
- layout?: "inline" | "inline-wide" | "overlay" | "overlay-wide" | "overlay-expanded";
2098
- } & React.RefAttributes<HTMLElement>>;
2099
- export declare function CarouselProvider({ value, children }: {
2100
- value: CarouselContextValue | undefined;
2101
- children?: React.ReactNode;
2102
- }): React.ReactElement;
2103
- export declare function useCarouselContext(): CarouselContextValue | undefined;
2104
- export declare const CarouselSlider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2105
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2106
- } & {
2107
- children?: React.ReactNode;
2108
- cardFocus?: boolean;
2109
- } & React.RefAttributes<HTMLElement>>;
2110
- export declare const CarouselViewport: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2111
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2112
- } & {
2113
- children?: React.ReactNode;
2114
- } & React.RefAttributes<HTMLElement>>;
2115
- export declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2116
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2117
- } & {
2118
- children?: React.ReactNode;
2119
- label?: string;
2120
- roleDescription?: string;
2121
- previousLabel?: string;
2122
- nextLabel?: string;
2123
- slideLabel?: string;
2124
- slideGroupLabel?: string;
2125
- navigationLabel?: string;
2126
- playLabel?: string;
2127
- pauseLabel?: string;
2128
- slideWidth?: string;
2129
- align?: CarouselAlign;
2130
- appearance?: CarouselAppearance;
2131
- motion?: CarouselMotion;
2132
- motionDuration?: number;
2133
- autoplay?: boolean;
2134
- autoplayInterval?: number;
2135
- selectedIndex?: number;
2136
- activeIndex?: number;
2137
- defaultSelectedIndex?: number;
2138
- defaultActiveIndex?: number;
2139
- wrap?: boolean;
2140
- circular?: boolean;
2141
- groupSize?: number | "auto";
2142
- draggable?: boolean;
2143
- whitespace?: boolean;
2144
- announcement?: CarouselAnnouncerFunction;
2145
- onIndexChange?: (index: number) => void;
2146
- onActiveIndexChange?: (event: SharePointUIEvent, data: CarouselReactIndexChangeData) => void;
2147
- } & React.RefAttributes<HTMLElement>>;
2148
- export declare const Breadcrumb: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2149
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2150
- } & {
2151
- children?: React.ReactNode;
2152
- label?: string;
2153
- focusMode?: "tab" | "arrow";
2154
- size?: "small" | "medium" | "large";
2155
- separator?: string;
2156
- list?: React.ReactElement;
2157
- } & React.RefAttributes<HTMLElement>>;
2158
- export declare const BreadcrumbItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2159
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2160
- } & {
2161
- children?: React.ReactNode;
2162
- current?: boolean;
2163
- size?: BreadcrumbSize;
2164
- } & React.RefAttributes<HTMLElement>>;
2165
- export declare const BreadcrumbButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2166
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2167
- } & {
2168
- children?: React.ReactNode;
2169
- icon?: React.ReactNode;
2170
- href?: string;
2171
- target?: string;
2172
- rel?: string;
2173
- type?: "button" | "submit" | "reset";
2174
- current?: boolean;
2175
- disabled?: boolean;
2176
- disabledFocusable?: boolean;
2177
- size?: BreadcrumbSize;
2178
- } & React.RefAttributes<HTMLElement>>;
2179
- export declare const BreadcrumbDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2180
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2181
- } & {
2182
- children?: React.ReactNode;
2183
- } & React.RefAttributes<HTMLElement>>;
2184
- export declare const Nav: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onClickCapture" | "onSelect"> & {
2185
- onClick?: React.MouseEventHandler<HTMLElement>;
2186
- onClickCapture?: React.MouseEventHandler<HTMLElement>;
2187
- children?: React.ReactNode;
2188
- label?: string;
2189
- selectedValue?: string | null;
2190
- defaultSelectedValue?: string | null;
2191
- selectedCategoryValue?: string | null;
2192
- defaultSelectedCategoryValue?: string | null;
2193
- openCategories?: readonly string[];
2194
- defaultOpenCategories?: readonly string[];
2195
- open?: boolean;
2196
- defaultOpen?: boolean;
2197
- collapsed?: boolean;
2198
- defaultCollapsed?: boolean;
2199
- collapsible?: boolean;
2200
- multiple?: boolean;
2201
- density?: "small" | "medium" | "large";
2202
- tabbable?: boolean | "true" | "false";
2203
- openLabel?: string;
2204
- closeLabel?: string;
2205
- onItemSelect?: (value: string, href: string | null, label: string) => void;
2206
- onCategoryToggle?: (value: string, open: boolean, openCategories: string[]) => void;
2207
- onNavItemSelect?: (event: SharePointUIEvent, data: NavReactItemSelectData) => void;
2208
- onNavCategoryItemToggle?: (event: SharePointUIEvent, data: NavReactCategoryToggleData) => void;
2209
- onOpenChange?: (open: boolean) => void;
2210
- onCollapsedChange?: (collapsed: boolean) => void;
2211
- } & React.RefAttributes<HTMLElement>>;
2212
- export declare const NavItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement> & {
2213
- onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2214
- onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2215
- } & {
2216
- children?: React.ReactNode;
2217
- value: string;
2218
- href?: string;
2219
- disabled?: boolean;
2220
- icon?: React.ReactNode;
2221
- avatar?: React.ReactElement;
2222
- } & React.RefAttributes<HTMLElement>>;
2223
- export declare const NavCategory: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2224
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2225
- } & {
2226
- children?: React.ReactNode;
2227
- value: string;
2228
- disabled?: boolean;
2229
- } & React.RefAttributes<HTMLElement>>;
2230
- export declare const NavCategoryItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
2231
- onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
2232
- onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
2233
- } & {
2234
- children?: React.ReactNode;
2235
- icon?: React.ReactNode;
2236
- avatar?: React.ReactElement;
2237
- expandIcon?: React.ReactNode;
2238
- expandIconMotion?: React.ComponentType<PresenceMotionSlotProps>;
2239
- } & React.RefAttributes<HTMLElement>>;
2240
- export declare const NavSubItemGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2241
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2242
- } & {
2243
- children?: React.ReactNode;
2244
- collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
2245
- } & React.RefAttributes<HTMLElement>>;
2246
- export declare const NavSubItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement> & {
2247
- onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2248
- onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2249
- } & {
2250
- children?: React.ReactNode;
2251
- value: string;
2252
- href?: string;
2253
- disabled?: boolean;
2254
- icon?: React.ReactNode;
2255
- avatar?: React.ReactElement;
2256
- } & React.RefAttributes<HTMLElement>>;
2257
- export type NavDividerProps = ElementProps & {
2258
- wrapper?: DividerWrapper;
2259
- alignContent?: "start" | "center" | "end";
2260
- appearance?: DividerAppearance;
2261
- inset?: boolean;
2262
- vertical?: boolean;
2263
- };
2264
- export declare const NavDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2265
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2266
- } & {
2267
- wrapper?: DividerWrapper;
2268
- alignContent?: "start" | "center" | "end";
2269
- appearance?: DividerAppearance;
2270
- inset?: boolean;
2271
- vertical?: boolean;
2272
- } & React.RefAttributes<HTMLElement>>;
2273
- export declare const NavSectionHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2274
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2275
- } & {
2276
- children?: React.ReactNode;
2277
- } & React.RefAttributes<HTMLElement>>;
2278
- export declare const AppItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement> & {
2279
- onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2280
- onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2281
- } & {
2282
- children?: React.ReactNode;
2283
- value: string;
2284
- href?: string;
2285
- disabled?: boolean;
2286
- icon?: React.ReactNode;
2287
- avatar?: React.ReactElement;
2288
- } & React.RefAttributes<HTMLElement>>;
2289
- export declare const AppItemStatic: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2290
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2291
- } & {
2292
- children?: React.ReactNode;
2293
- icon?: React.ReactNode;
2294
- } & React.RefAttributes<HTMLElement>>;
2295
- export type HamburgerProps = NativeButtonHostProps & {
2296
- children?: React.ReactNode;
2297
- icon?: React.ReactNode;
2298
- open?: boolean;
2299
- label?: string;
2300
- disabled?: boolean;
2301
- disabledFocusable?: boolean;
2302
- appearance?: ButtonAppearance;
2303
- iconPosition?: "before" | "after";
2304
- shape?: ButtonShape;
2305
- size?: ButtonSize;
2306
- };
2307
- export declare const Hamburger: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
2308
- onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
2309
- onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
2310
- } & {
2311
- children?: React.ReactNode;
2312
- icon?: React.ReactNode;
2313
- open?: boolean;
2314
- label?: string;
2315
- disabled?: boolean;
2316
- disabledFocusable?: boolean;
2317
- appearance?: ButtonAppearance;
2318
- iconPosition?: "before" | "after";
2319
- shape?: ButtonShape;
2320
- size?: ButtonSize;
2321
- } & React.RefAttributes<HTMLElement>>;
2322
- export type NavDrawerProps = Omit<React.ComponentProps<typeof Nav>, "children" | "open" | "defaultOpen" | "onOpenChange"> & {
2323
- children?: React.ReactNode;
2324
- type?: "overlay" | "inline";
2325
- open?: boolean;
2326
- defaultOpen?: boolean;
2327
- modal?: boolean;
2328
- dismissible?: boolean;
2329
- position?: "start" | "end" | "top" | "bottom";
2330
- size?: "small" | "medium" | "large" | "full";
2331
- expandable?: boolean;
2332
- expanded?: boolean;
2333
- unmountOnClose?: boolean;
2334
- separator?: boolean;
2335
- closeLabel?: string;
2336
- onOpenChange?: (open: boolean) => void;
2337
- onDismiss?: () => void;
2338
- onExpandedChange?: (expanded: boolean) => void;
2339
- tabbable?: boolean;
2340
- };
2341
- export declare const NavDrawer: React.ForwardRefExoticComponent<Omit<NavDrawerProps, "ref"> & React.RefAttributes<HTMLElement>>;
2342
- export declare const NavDrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2343
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2344
- } & {
2345
- children?: React.ReactNode;
2346
- } & React.RefAttributes<HTMLElement>>;
2347
- export declare const NavDrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2348
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2349
- } & {
2350
- children?: React.ReactNode;
2351
- } & React.RefAttributes<HTMLElement>>;
2352
- export declare const NavDrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2353
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2354
- } & {
2355
- children?: React.ReactNode;
2356
- } & React.RefAttributes<HTMLElement>>;
2357
- export declare const SplitNavItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2358
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2359
- } & {
2360
- children?: React.ReactNode;
2361
- value: string;
2362
- href?: string;
2363
- disabled?: boolean;
2364
- icon?: React.ReactNode;
2365
- action?: React.ReactNode;
2366
- actionLabel?: string;
2367
- onAction?: React.MouseEventHandler<HTMLButtonElement>;
2368
- navItem?: React.ReactElement;
2369
- actionButton?: React.ReactElement;
2370
- actionButtonTooltip?: React.ReactElement;
2371
- menuButton?: React.ReactElement;
2372
- menuButtonTooltip?: React.ReactElement;
2373
- toggleButton?: React.ReactElement;
2374
- toggleButtonTooltip?: React.ReactElement;
2375
- } & React.RefAttributes<HTMLElement>>;
2376
- export type TabValue = unknown;
2377
- export declare const Tabs: <T = string>(props: ElementProps & {
2378
- children?: React.ReactNode;
2379
- selectedValue?: T;
2380
- defaultSelectedValue?: T;
2381
- disabled?: boolean;
2382
- onTabSelect?: (value: T) => void;
2383
- } & React.RefAttributes<HTMLElement>) => React.ReactElement;
2384
- export type TabSelectData = {
2385
- value: TabValue;
2386
- };
2387
- export type TabSelectEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
2388
- export type TabRegisterData = {
2389
- value: TabValue;
2390
- ref: React.RefObject<HTMLElement | null>;
2391
- };
2392
- export type TabListProviderValue = {
2393
- onTabSelect?: (event: TabSelectEvent, data: TabSelectData) => void;
2394
- selectTabOnFocus?: boolean;
2395
- selectedValue?: TabValue;
2396
- reserveSelectedTabSpace?: boolean;
2397
- appearance: "transparent" | "subtle" | "subtle-circular" | "filled-circular";
2398
- disabled: boolean;
2399
- size: "small" | "medium" | "large";
2400
- vertical: boolean;
2401
- onRegister: (data: TabRegisterData) => void;
2402
- onUnregister: (data: TabRegisterData) => void;
2403
- onSelect: (event: TabSelectEvent, data: TabSelectData) => void;
2404
- getRegisteredTabs: () => {
2405
- selectedValue?: TabValue;
2406
- previousSelectedValue?: TabValue;
2407
- registeredTabs: Record<string, TabRegisterData>;
2408
- };
2409
- };
2410
- export declare function TabListProvider({ value, children }: {
2411
- value: TabListProviderValue;
2412
- children?: React.ReactNode;
2413
- }): React.ReactElement;
2414
- export type TabListProps = ElementProps & {
2415
- children?: React.ReactNode;
2416
- selectedValue?: TabValue;
2417
- defaultSelectedValue?: TabValue;
2418
- selectTabOnFocus?: boolean;
2419
- reserveSelectedTabSpace?: boolean;
2420
- vertical?: boolean;
2421
- disabled?: boolean;
2422
- appearance?: "transparent" | "subtle" | "subtle-circular" | "filled-circular";
2423
- size?: "small" | "medium" | "large";
2424
- onTabSelect?: (event: TabSelectEvent, data: TabSelectData) => void;
2425
- };
2426
- export declare const TabList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2427
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2428
- } & {
2429
- children?: React.ReactNode;
2430
- selectedValue?: TabValue;
2431
- defaultSelectedValue?: TabValue;
2432
- selectTabOnFocus?: boolean;
2433
- reserveSelectedTabSpace?: boolean;
2434
- vertical?: boolean;
2435
- disabled?: boolean;
2436
- appearance?: "transparent" | "subtle" | "subtle-circular" | "filled-circular";
2437
- size?: "small" | "medium" | "large";
2438
- onTabSelect?: (event: TabSelectEvent, data: TabSelectData) => void;
2439
- } & React.RefAttributes<HTMLElement>>;
2440
- export declare const Tab: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2441
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2442
- } & {
2443
- value: TabValue;
2444
- disabled?: boolean;
2445
- icon?: React.ReactNode;
2446
- content?: React.ReactNode;
2447
- children?: React.ReactNode;
2448
- } & React.RefAttributes<HTMLElement>>;
2449
- export declare const TabPanel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2450
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2451
- } & {
2452
- value: TabValue;
2453
- children?: React.ReactNode;
2454
- } & React.RefAttributes<HTMLElement>>;
2455
- export type TooltipVisibleChangeEvent = React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined;
2456
- export type TooltipProps = ElementProps & {
2457
- children?: React.ReactNode;
2458
- content?: React.ReactNode;
2459
- mountNode?: PortalMountNode;
2460
- placement?: "top" | "bottom" | "start" | "end" | "left" | "right";
2461
- positioning?: TooltipPositioning;
2462
- align?: "start" | "center" | "end";
2463
- offset?: number;
2464
- appearance?: TooltipAppearance;
2465
- relationship?: TooltipRelationship;
2466
- disabled?: boolean;
2467
- open?: boolean;
2468
- visible?: boolean;
2469
- delay?: number;
2470
- showDelay?: number;
2471
- hideDelay?: number;
2472
- withArrow?: boolean;
2473
- onOpenChange?: (open: boolean) => void;
2474
- onVisibleChange?: (event: TooltipVisibleChangeEvent, data: TooltipVisibleChangeData) => void;
2475
- };
2476
- export declare const Tooltip: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2477
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2478
- } & {
2479
- children?: React.ReactNode;
2480
- content?: React.ReactNode;
2481
- mountNode?: PortalMountNode;
2482
- placement?: "top" | "bottom" | "start" | "end" | "left" | "right";
2483
- positioning?: TooltipPositioning;
2484
- align?: "start" | "center" | "end";
2485
- offset?: number;
2486
- appearance?: TooltipAppearance;
2487
- relationship?: TooltipRelationship;
2488
- disabled?: boolean;
2489
- open?: boolean;
2490
- visible?: boolean;
2491
- delay?: number;
2492
- showDelay?: number;
2493
- hideDelay?: number;
2494
- withArrow?: boolean;
2495
- onOpenChange?: (open: boolean) => void;
2496
- onVisibleChange?: (event: TooltipVisibleChangeEvent, data: TooltipVisibleChangeData) => void;
2497
- } & React.RefAttributes<HTMLElement>>;
2498
- export type PopoverContextValue = {
2499
- open: boolean;
2500
- toggleOpen: (event: Event) => void;
2501
- setOpen: (event: Event, open: boolean) => void;
2502
- triggerRef: React.MutableRefObject<HTMLElement | null>;
2503
- contentRef: React.MutableRefObject<HTMLElement | null>;
2504
- openOnHover: boolean;
2505
- openOnContext: boolean;
2506
- mountNode?: PortalMountNode;
2507
- withArrow: boolean;
2508
- arrowRef: React.MutableRefObject<HTMLDivElement | null>;
2509
- size: "small" | "medium" | "large";
2510
- appearance?: "brand" | "inverted";
2511
- trapFocus: boolean;
2512
- inertTrapFocus?: boolean;
2513
- inline: boolean;
2514
- };
2515
- export declare function PopoverProvider({ value, children }: {
2516
- value: PopoverContextValue;
2517
- children?: React.ReactNode;
2518
- }): React.ReactElement;
2519
- export type PopoverOpenChangeEvent = MouseEvent | TouchEvent | FocusEvent | React.FocusEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>;
2520
- export declare const Popover: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2521
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2522
- } & {
2523
- children?: React.ReactNode;
2524
- trigger?: React.ReactElement;
2525
- label?: string;
2526
- placement?: "top" | "bottom" | "start" | "end";
2527
- positioning?: PopoverPositioning;
2528
- open?: boolean;
2529
- defaultOpen?: boolean;
2530
- openOnContext?: boolean;
2531
- openOnHover?: boolean;
2532
- mouseLeaveDelay?: number;
2533
- closeOnIframeFocus?: boolean;
2534
- onOpenChange?: (event: PopoverOpenChangeEvent, data: PopoverOpenChangeData) => void;
2535
- inline?: boolean;
2536
- trapFocus?: boolean;
2537
- inertTrapFocus?: boolean;
2538
- legacyTrapFocus?: boolean;
2539
- unstable_disableAutoFocus?: boolean;
2540
- arrow?: boolean;
2541
- withArrow?: boolean;
2542
- appearance?: "brand" | "inverted";
2543
- size?: "small" | "medium" | "large";
2544
- closeOnScroll?: boolean;
2545
- surfaceMotion?: React.ComponentType<PresenceMotionSlotProps>;
2546
- mountNode?: PortalMountNode;
2547
- } & React.RefAttributes<HTMLElement>>;
2548
- export declare const PopoverTrigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2549
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2550
- } & {
2551
- children?: React.ReactNode;
2552
- disableButtonEnhancement?: boolean;
2553
- } & React.RefAttributes<HTMLElement>>;
2554
- export declare const PopoverSurface: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2555
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2556
- } & {
2557
- children?: React.ReactNode;
2558
- } & React.RefAttributes<HTMLElement>>;
2559
- type TeachingPopoverCarouselEventData<TType extends string> = {
2560
- type: undefined;
2561
- event: Event | React.SyntheticEvent;
2562
- } | (TType extends "click" ? {
2563
- type: TType;
2564
- event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
2565
- } : TType extends "keydown" ? {
2566
- type: TType;
2567
- event: React.KeyboardEvent<HTMLElement>;
2568
- } : {
2569
- type: TType;
2570
- event: Event;
2571
- });
2572
- export type TeachingPopoverCarouselValueChangeData = TeachingPopoverCarouselEventData<TeachingPopoverCarouselValueChangeType> & {
2573
- value?: string;
2574
- };
2575
- export type TeachingPopoverCarouselFinishData = TeachingPopoverCarouselEventData<"click"> & {
2576
- value?: string;
2577
- };
2578
- export type TeachingPopoverCarouselChangeEvent = Event | React.SyntheticEvent;
2579
- export type TeachingPopoverProps = React.ComponentProps<typeof Popover>;
2580
- /** Guided, keyboard-contained help surface. Its parts use native React composition and add no runtime dependency. */
2581
- export declare function TeachingPopover({ children, trigger, trapFocus, withArrow, ...props }: TeachingPopoverProps): React.ReactElement;
2582
- export declare const TeachingPopoverTrigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2583
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2584
- } & {
2585
- children?: React.ReactNode;
2586
- disableButtonEnhancement?: boolean;
2587
- } & React.RefAttributes<HTMLElement>>;
2588
- export declare function TeachingPopoverSurface({ children, ...props }: ElementProps & {
2589
- children?: React.ReactNode;
2590
- }): React.ReactElement;
2591
- export type TeachingPopoverButtonSlot = React.ReactNode | Parameters<typeof Button>[0];
2592
- export declare function TeachingPopoverHeader({ children, icon, dismissButton, onDismiss, dismissLabel, style, ...props }: ElementProps & {
2593
- children?: React.ReactNode;
2594
- icon?: React.ReactNode;
2595
- dismissButton?: TeachingPopoverButtonSlot;
2596
- onDismiss?: () => void;
2597
- dismissLabel?: string;
2598
- }): React.ReactElement;
2599
- export declare function TeachingPopoverTitle({ children, dismissButton, ...props }: ElementProps & {
2600
- children?: React.ReactNode;
2601
- dismissButton?: TeachingPopoverButtonSlot;
2602
- }): React.ReactElement;
2603
- export declare function TeachingPopoverBody({ children, media, mediaLength, ...props }: ElementProps & {
2604
- children?: React.ReactNode;
2605
- media?: React.ReactNode;
2606
- mediaLength?: "short" | "medium" | "tall";
2607
- }): React.ReactElement;
2608
- export declare const TeachingPopoverFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2609
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2610
- } & {
2611
- children?: React.ReactNode;
2612
- primary: React.ReactNode | Parameters<typeof Button>[0];
2613
- secondary?: React.ReactNode | Parameters<typeof Button>[0];
2614
- footerLayout?: "horizontal" | "vertical";
2615
- } & React.RefAttributes<HTMLElement>>;
2616
- export declare function TeachingPopoverCarousel({ children, defaultValue, value, onValueChange, onAnnouncement, announcement, onFinish, ...props }: ElementProps & {
2617
- children?: React.ReactNode;
2618
- value?: string;
2619
- defaultValue?: string;
2620
- onValueChange?: (event: TeachingPopoverCarouselChangeEvent, data: TeachingPopoverCarouselValueChangeData) => void;
2621
- onAnnouncement?: (message: string) => void;
2622
- announcement?: (newValue: string) => string;
2623
- onFinish?: (event: TeachingPopoverCarouselChangeEvent, data: TeachingPopoverCarouselFinishData) => void;
2624
- }): React.ReactElement;
2625
- export declare function TeachingPopoverCarouselCard({ value: _value, children, ...props }: ElementProps & {
2626
- value: string;
2627
- children?: React.ReactNode;
2628
- }): React.ReactElement;
2629
- export declare function TeachingPopoverCarouselFooter({ children, previous, next, layout, initialStepText, finalStepText, ...props }: ElementProps & {
2630
- children?: React.ReactNode;
2631
- previous?: React.ReactNode;
2632
- next?: React.ReactNode;
2633
- layout?: "centered" | "offset";
2634
- initialStepText?: string;
2635
- finalStepText?: string;
2636
- }): React.ReactElement;
2637
- export type TeachingPopoverCarouselFooterButtonProps = Omit<ButtonProps, "children"> & {
2638
- navType: "next" | "prev" | "previous" | "dismiss";
2639
- altText?: React.ReactNode;
2640
- children?: React.ReactNode;
2641
- };
2642
- export declare function TeachingPopoverCarouselFooterButton({ navType, altText, children, onClick, appearance, size, shape, icon, iconPosition, ...props }: TeachingPopoverCarouselFooterButtonProps): React.ReactElement;
2643
- export declare function TeachingPopoverCarouselNav({ children, onKeyDown, ...props }: ElementProps & {
2644
- children?: React.ReactNode;
2645
- }): React.ReactElement;
2646
- export declare function TeachingPopoverCarouselNavButton({ value, children, onClick, ...props }: ElementProps & {
2647
- value: string;
2648
- children?: React.ReactNode;
2649
- }): React.ReactElement;
2650
- export declare function TeachingPopoverCarouselPageCount({ children, ...props }: ElementProps & {
2651
- children?: React.ReactNode | ((currentPage: number, totalPages: number) => React.ReactNode);
2652
- }): React.ReactElement;
2653
- export type MenuPositioning = "top" | "bottom" | "start" | "end" | "above" | "below" | "before" | "after" | "above-start" | "above-end" | "below-start" | "below-end";
2654
- export type MenuPositioningOptions = {
2655
- placement?: MenuPositioning;
2656
- align?: "start" | "end";
2657
- offset?: number;
2658
- };
2659
- export type MenuProps = Omit<ElementProps, "onSelect" | "contextMenu"> & {
2660
- children?: React.ReactNode;
2661
- trigger?: React.ReactElement;
2662
- label?: string;
2663
- placement?: MenuPositioning;
2664
- positioning?: MenuPositioning | MenuPositioningOptions;
2665
- open?: boolean;
2666
- defaultOpen?: boolean;
2667
- contextMenu?: boolean;
2668
- openOnContext?: boolean;
2669
- openOnHover?: boolean;
2670
- hoverDelay?: number;
2671
- closeOnScroll?: boolean;
2672
- inline?: boolean;
2673
- persistOnItemClick?: boolean;
2674
- checkedValues?: MenuCheckedValues;
2675
- defaultCheckedValues?: MenuCheckedValues;
2676
- hasCheckmarks?: boolean;
2677
- hasIcons?: boolean;
2678
- surfaceMotion?: React.ComponentType<PresenceMotionSlotProps>;
2679
- mountNode?: PortalMountNode;
2680
- onCheckedValueChange?: (event: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
2681
- onOpenChange?: (event: MenuReactOpenChangeEvent, data: MenuReactOpenChangeData) => void;
2682
- onSelect?: (value: string, label: string, checked: boolean) => void;
2683
- };
2684
- export declare function Menu({ children, trigger, label, placement, positioning, open, defaultOpen, contextMenu, openOnContext, openOnHover, hoverDelay, closeOnScroll, inline, persistOnItemClick, checkedValues, defaultCheckedValues, hasCheckmarks, hasIcons, surfaceMotion, mountNode, onCheckedValueChange, onOpenChange, onSelect, ...props }: MenuProps): React.ReactElement;
2685
- /** Open a command menu from a right-click, the Context Menu key, or Shift+F10. */
2686
- export declare function ContextMenu(props: MenuProps): React.ReactElement;
2687
- export declare const MenuBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2688
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2689
- } & {
2690
- children?: React.ReactNode;
2691
- label?: string;
2692
- } & React.RefAttributes<HTMLElement>>;
2693
- export declare const MenuBarItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2694
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2695
- } & {
2696
- children?: React.ReactNode;
2697
- } & React.RefAttributes<HTMLElement>>;
2698
- export declare const MenuItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onSelect"> & {
2699
- children?: React.ReactNode;
2700
- content?: React.ReactNode;
2701
- checkmark?: React.ReactNode;
2702
- submenuIndicator?: React.ReactNode;
2703
- icon?: React.ReactNode;
2704
- secondaryContent?: React.ReactNode;
2705
- subText?: React.ReactNode;
2706
- switchIndicator?: React.ReactNode;
2707
- kind?: "default" | "checkbox" | "radio" | "switch";
2708
- value?: string;
2709
- name?: string;
2710
- checked?: boolean;
2711
- disabled?: boolean;
2712
- disabledFocusable?: boolean;
2713
- persistOnClick?: boolean;
2714
- hasSubmenu?: boolean;
2715
- onSelect?: (value: string, label: string, checked: boolean) => void;
2716
- onCheckedChange?: (checked: boolean, event?: MenuCheckedValueChangeEvent) => void;
2717
- } & React.RefAttributes<HTMLElement>>;
2718
- export type MenuItemSelectableProps = Omit<ElementProps, "onSelect"> & {
2719
- name: string;
2720
- value: string;
2721
- children?: React.ReactNode;
2722
- content?: React.ReactNode;
2723
- checkmark?: React.ReactNode;
2724
- submenuIndicator?: React.ReactNode;
2725
- icon?: React.ReactNode;
2726
- secondaryContent?: React.ReactNode;
2727
- subText?: React.ReactNode;
2728
- checked?: boolean;
2729
- defaultChecked?: boolean;
2730
- disabled?: boolean;
2731
- disabledFocusable?: boolean;
2732
- hasSubmenu?: boolean;
2733
- persistOnClick?: boolean;
2734
- onCheckedChange?: (checked: boolean) => void;
2735
- };
2736
- export type MenuItemSwitchProps = MenuItemSelectableProps & {
2737
- switchIndicator?: React.ReactNode;
2738
- };
2739
- export declare function MenuItemCheckbox(props: MenuItemSelectableProps): React.ReactElement;
2740
- export declare function MenuItemRadio(props: MenuItemSelectableProps): React.ReactElement;
2741
- export declare function MenuItemSwitch(props: MenuItemSwitchProps): React.ReactElement;
2742
- export type MenuItemLinkProps = ElementProps & {
2743
- href: string;
2744
- target?: string;
2745
- rel?: string;
2746
- download?: string | boolean;
2747
- disabled?: boolean;
2748
- icon?: SpanSlotProps;
2749
- checkmark?: SpanSlotProps;
2750
- content?: SpanSlotProps;
2751
- secondaryContent?: SpanSlotProps;
2752
- children?: React.ReactNode;
2753
- };
2754
- export declare const MenuItemLink: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2755
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2756
- } & {
2757
- href: string;
2758
- target?: string;
2759
- rel?: string;
2760
- download?: string | boolean;
2761
- disabled?: boolean;
2762
- icon?: SpanSlotProps;
2763
- checkmark?: SpanSlotProps;
2764
- content?: SpanSlotProps;
2765
- secondaryContent?: SpanSlotProps;
2766
- children?: React.ReactNode;
2767
- } & React.RefAttributes<HTMLElement>>;
2768
- export declare function MenuTrigger({ children, disableButtonEnhancement, ...props }: ElementProps & {
2769
- children: React.ReactElement;
2770
- disableButtonEnhancement?: boolean;
2771
- }): React.ReactElement;
2772
- export declare const MenuPopover: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2773
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2774
- } & {
2775
- children?: React.ReactNode;
2776
- } & React.RefAttributes<HTMLElement>>;
2777
- export type MenuListProps = ElementProps & {
2778
- children?: React.ReactNode;
2779
- checkedValues?: MenuCheckedValues;
2780
- defaultCheckedValues?: MenuCheckedValues;
2781
- hasCheckmarks?: boolean;
2782
- hasIcons?: boolean;
2783
- onCheckedValueChange?: MenuProps["onCheckedValueChange"];
2784
- };
2785
- export declare function MenuList({ children, checkedValues, defaultCheckedValues, hasCheckmarks, hasIcons, onCheckedValueChange, ...props }: MenuListProps): React.ReactElement;
2786
- export declare const MenuSplitGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2787
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2788
- } & {
2789
- children?: React.ReactNode;
2790
- orientation?: "horizontal" | "vertical";
2791
- } & React.RefAttributes<HTMLElement>>;
2792
- export declare const MenuDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2793
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2794
- } & React.RefAttributes<HTMLElement>>;
2795
- export declare const MenuGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2796
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2797
- } & {
2798
- children?: React.ReactNode;
2799
- label: string;
2800
- } & React.RefAttributes<HTMLElement>>;
2801
- export declare const MenuGroupHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2802
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2803
- } & {
2804
- children?: React.ReactNode;
2805
- } & React.RefAttributes<HTMLElement>>;
2806
- export type AvatarProps = ElementProps & {
2807
- name?: string;
2808
- image?: string;
2809
- initials?: string;
2810
- size?: number | string;
2811
- shape?: "circular" | "square";
2812
- color?: AvatarColor;
2813
- active?: "active" | "inactive" | "unset";
2814
- activeAppearance?: "ring" | "shadow" | "ring-shadow";
2815
- idForColor?: string;
2816
- decorative?: boolean;
2817
- icon?: React.ReactNode;
2818
- badge?: React.ReactNode;
2819
- children?: React.ReactNode;
2820
- };
2821
- export declare const Avatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2822
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2823
- } & {
2824
- name?: string;
2825
- image?: string;
2826
- initials?: string;
2827
- size?: number | string;
2828
- shape?: "circular" | "square";
2829
- color?: AvatarColor;
2830
- active?: "active" | "inactive" | "unset";
2831
- activeAppearance?: "ring" | "shadow" | "ring-shadow";
2832
- idForColor?: string;
2833
- decorative?: boolean;
2834
- icon?: React.ReactNode;
2835
- badge?: React.ReactNode;
2836
- children?: React.ReactNode;
2837
- } & React.RefAttributes<HTMLElement>>;
2838
- export declare function AvatarGroupProvider({ value, children }: {
2839
- value: AvatarGroupContextValue;
2840
- children?: React.ReactNode;
2841
- }): React.ReactElement;
2842
- export declare const AvatarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2843
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2844
- } & {
2845
- children?: React.ReactNode;
2846
- label?: string;
2847
- maxVisible?: number;
2848
- layout?: "stack" | "spread" | "pie";
2849
- size?: number;
2850
- expanded?: boolean;
2851
- showMoreLabel?: string;
2852
- showLessLabel?: string;
2853
- onExpandedChange?: (expanded: boolean) => void;
2854
- } & React.RefAttributes<HTMLElement>>;
2855
- export type AvatarGroupItemAvatarSlot = React.ReactElement | Parameters<typeof Avatar>[0];
2856
- export type AvatarGroupItemProps = ElementProps & {
2857
- name: string;
2858
- avatar?: AvatarGroupItemAvatarSlot;
2859
- overflowLabel?: SpanSlotProps;
2860
- image?: string;
2861
- initials?: string;
2862
- size?: number;
2863
- shape?: "circular" | "square";
2864
- color?: AvatarColor;
2865
- active?: "active" | "inactive" | "unset";
2866
- activeAppearance?: "ring" | "shadow" | "ring-shadow";
2867
- idForColor?: string;
2868
- icon?: React.ReactNode;
2869
- badge?: React.ReactNode;
2870
- };
2871
- /** One identity in an AvatarGroup; inside AvatarGroupPopover it renders as a named list row. */
2872
- export declare const AvatarGroupItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2873
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2874
- } & {
2875
- name: string;
2876
- avatar?: AvatarGroupItemAvatarSlot;
2877
- overflowLabel?: SpanSlotProps;
2878
- image?: string;
2879
- initials?: string;
2880
- size?: number;
2881
- shape?: "circular" | "square";
2882
- color?: AvatarColor;
2883
- active?: "active" | "inactive" | "unset";
2884
- activeAppearance?: "ring" | "shadow" | "ring-shadow";
2885
- idForColor?: string;
2886
- icon?: React.ReactNode;
2887
- badge?: React.ReactNode;
2888
- } & React.RefAttributes<HTMLElement>>;
2889
- export type AvatarGroupPopoverProps = ElementProps & {
2890
- children: React.ReactNode;
2891
- count?: number;
2892
- indicator?: "count" | "icon";
2893
- label?: string;
2894
- triggerLabel?: string;
2895
- open?: boolean;
2896
- placement?: "top" | "bottom" | "start" | "end";
2897
- onOpenChange?: (open: boolean) => void;
2898
- content?: React.ReactElement<React.HTMLAttributes<HTMLUListElement>> | React.HTMLAttributes<HTMLUListElement>;
2899
- popoverSurface?: React.ReactElement<any> | Parameters<typeof PopoverSurface>[0];
2900
- tooltip?: React.ReactElement<any> | Parameters<typeof Tooltip>[0];
2901
- triggerButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
2902
- };
2903
- /** A labelled overflow trigger with a theme-aware people list in the library Popover. */
2904
- export declare function AvatarGroupPopover({ children, count, indicator, label, triggerLabel, open, placement, onOpenChange, content, popoverSurface, tooltip, triggerButton, ...props }: AvatarGroupPopoverProps): React.ReactElement;
2905
- export declare const Persona: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2906
- [attribute: `data-${string}`]: string | number | boolean | undefined;
2907
- } & {
2908
- name: string;
2909
- image?: string;
2910
- initials?: string;
2911
- primaryText?: React.ReactNode;
2912
- secondaryText?: React.ReactNode;
2913
- tertiaryText?: React.ReactNode;
2914
- quaternaryText?: React.ReactNode;
2915
- presence?: PersonaPresence;
2916
- presenceLabel?: string;
2917
- size?: PersonaSize;
2918
- color?: AvatarColor;
2919
- textPosition?: "after" | "before" | "below";
2920
- textAlignment?: "start" | "center";
2921
- presenceOnly?: boolean;
2922
- avatar?: React.ReactNode;
2923
- children?: React.ReactNode;
2924
- } & React.RefAttributes<HTMLElement>>;
2925
- export type VirtualListScrollToHandle = {
2926
- scrollTo: (index: number, align?: "start" | "center" | "end", behavior?: ScrollBehavior) => void;
2927
- };
2928
- export type VirtualizerSlotProps = React.ReactElement<any> | React.HTMLAttributes<HTMLDivElement>;
2929
- export type VirtualizerBookendSlots = {
2930
- before?: VirtualizerSlotProps;
2931
- after?: VirtualizerSlotProps;
2932
- beforeContainer?: VirtualizerSlotProps;
2933
- afterContainer?: VirtualizerSlotProps;
2934
- };
2935
- type VirtualizerScrollViewContainer = VirtualizerSlotProps;
2936
- export type VirtualListProps<T> = ElementProps & VirtualizerBookendSlots & {
2937
- items?: T[];
2938
- itemCount?: number;
2939
- dataSource?: VirtualListDataSource<T>;
2940
- onDataLoadError?: (error: unknown, range: {
2941
- start: number;
2942
- end: number;
2943
- }) => void;
2944
- renderItem: (item: T | undefined, index: number) => React.ReactNode;
2945
- itemKey?: (item: T | undefined, index: number) => string | number;
2946
- onRenderedRange?: (range: {
2947
- start: number;
2948
- end: number;
2949
- total: number;
2950
- }) => void;
2951
- onScrollStateChange?: (scrolling: boolean) => void;
2952
- viewportRef?: React.Ref<HTMLDivElement>;
2953
- scrollToIndexRef?: React.RefObject<VirtualListScrollToHandle | null>;
2954
- virtualizerLength?: number;
2955
- label?: string;
2956
- rowHeight?: number;
2957
- measureItems?: boolean;
2958
- overscan?: number;
2959
- axis?: "vertical" | "horizontal";
2960
- scrollMode?: "element" | "window";
2961
- };
2962
- export declare function VirtualList<T>({ items, itemCount, dataSource, onDataLoadError, renderItem, itemKey, onRenderedRange, onScrollStateChange, viewportRef, scrollToIndexRef, virtualizerLength, label, rowHeight, measureItems, overscan, axis, ...props }: ElementProps & {
2963
- items?: T[];
2964
- itemCount?: number;
2965
- dataSource?: VirtualListDataSource<T>;
2966
- onDataLoadError?: (error: unknown, range: {
2967
- start: number;
2968
- end: number;
2969
- }) => void;
2970
- renderItem: (item: T | undefined, index: number) => React.ReactNode;
2971
- itemKey?: (item: T | undefined, index: number) => string | number;
2972
- onRenderedRange?: (range: {
2973
- start: number;
2974
- end: number;
2975
- total: number;
2976
- }) => void;
2977
- onScrollStateChange?: (scrolling: boolean) => void;
2978
- viewportRef?: React.Ref<HTMLDivElement>;
2979
- scrollToIndexRef?: React.RefObject<VirtualListScrollToHandle | null>;
2980
- virtualizerLength?: number;
2981
- label?: string;
2982
- rowHeight?: number;
2983
- measureItems?: boolean;
2984
- overscan?: number;
2985
- axis?: "vertical" | "horizontal";
2986
- scrollMode?: "element" | "window";
2987
- }): React.ReactElement;
2988
- export type VirtualizerChildRenderFunction = (index: number, isScrolling: boolean) => React.ReactNode;
2989
- export type VirtualizerScrollToHandle = {
2990
- scrollTo: (index: number, behavior?: ScrollBehavior, callback?: (index: number) => void) => void;
2991
- virtualizerLength: React.RefObject<number>;
2992
- currentIndex: React.RefObject<number | undefined>;
2993
- };
2994
- export type VirtualizerDataRef = {
2995
- progressiveSizes: React.RefObject<number[]>;
2996
- nodeSizes: React.RefObject<number[]>;
2997
- setFlaggedIndex: (index: number | null) => void;
2998
- currentIndex: React.RefObject<number>;
2999
- };
3000
- export type ScrollToInterface = VirtualizerScrollToHandle;
3001
- export type VirtualizerContextProps = {
3002
- contextIndex: number;
3003
- setContextIndex: (index: number) => void;
3004
- childProgressiveSizes?: React.MutableRefObject<number[]>;
3005
- };
3006
- export type DynamicVirtualizerContextProps = Required<VirtualizerContextProps>;
3007
- export declare function useVirtualizerContext(): VirtualizerContextProps;
3008
- export declare const useVirtualizerContext_unstable: typeof useVirtualizerContext;
3009
- export declare const VirtualizerContextProvider: React.Provider<VirtualizerContextProps>;
3010
- /** Fixed or measured one-dimensional virtualization over the bounded VirtualList renderer. */
3011
- export declare function Virtualizer({ children, numItems, itemSize, virtualizerLength, bufferItems, bufferSize, containerSizeRef, getItemSize, gap, reversed, updateScrollPosition, virtualizerContext, axis, measureItems, enableScrollLoad, enablePagination, flaggedIndex, onRenderedFlaggedIndex, onRenderedRange: onRenderedRangeChange, imperativeVirtualizerRef, imperativeRef, scrollViewRef, label, scrollMode, before, after, beforeContainer, afterContainer, ...props }: Omit<ElementProps, "children"> & {
3012
- children: VirtualizerChildRenderFunction;
3013
- numItems: number;
3014
- itemSize: number;
3015
- virtualizerLength?: number;
3016
- bufferItems?: number;
3017
- bufferSize?: number;
3018
- containerSizeRef?: React.RefObject<number>;
3019
- getItemSize?: (index: number) => number;
3020
- gap?: number;
3021
- reversed?: boolean;
3022
- updateScrollPosition?: (position: number) => void;
3023
- virtualizerContext?: VirtualizerContextProps;
3024
- axis?: "vertical" | "horizontal";
3025
- scrollMode?: "element" | "window";
3026
- measureItems?: boolean;
3027
- enableScrollLoad?: boolean;
3028
- enablePagination?: boolean;
3029
- flaggedIndex?: React.MutableRefObject<number | null>;
3030
- onRenderedFlaggedIndex?: (index: number) => void;
3031
- onRenderedRange?: (range: {
3032
- start: number;
3033
- end: number;
3034
- total: number;
3035
- }) => void;
3036
- imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef | null>;
3037
- imperativeRef?: React.RefObject<VirtualizerScrollToHandle | null>;
3038
- scrollViewRef?: React.MutableRefObject<HTMLElement | null>;
3039
- label?: string;
3040
- } & VirtualizerBookendSlots): React.ReactElement;
3041
- type ScrollViewBaseProps = Omit<ElementProps, "children"> & {
3042
- children: VirtualizerChildRenderFunction;
3043
- itemSize: number;
3044
- numItems: number;
3045
- virtualizerLength?: number;
3046
- bufferItems?: number;
3047
- bufferSize?: number;
3048
- scrollViewRef?: React.MutableRefObject<HTMLElement | null>;
3049
- axis?: "vertical" | "horizontal";
3050
- reversed?: boolean;
3051
- enableScrollLoad?: boolean;
3052
- getItemSize?: (index: number) => number;
3053
- virtualizerContext?: VirtualizerContextProps;
3054
- onRenderedFlaggedIndex?: (index: number) => void;
3055
- flaggedIndex?: React.MutableRefObject<number | null>;
3056
- imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef | null>;
3057
- imperativeRef?: React.RefObject<VirtualizerScrollToHandle | null>;
3058
- containerSizeRef?: React.RefObject<number>;
3059
- updateScrollPosition?: (position: number) => void;
3060
- gap?: number;
3061
- enablePagination?: boolean;
3062
- container?: VirtualizerScrollViewContainer;
3063
- label?: string;
3064
- } & VirtualizerBookendSlots;
3065
- /** Responsive compatibility view for Fluent's legacy fixed-size VirtualizerScrollView API. */
3066
- export declare function VirtualizerScrollView({ children, itemSize, numItems, virtualizerLength, bufferItems, bufferSize, scrollViewRef: providedScrollViewRef, axis, reversed, enableScrollLoad, onRenderedFlaggedIndex, flaggedIndex, imperativeVirtualizerRef, imperativeRef, containerSizeRef, updateScrollPosition, gap, enablePagination, container, label, ...props }: ScrollViewBaseProps): React.ReactElement;
3067
- /** Responsive measured compatibility view for Fluent's legacy dynamic VirtualizerScrollView API. */
3068
- export declare function VirtualizerScrollViewDynamic({ children, itemSize, numItems, virtualizerLength, bufferItems, bufferSize, scrollViewRef: providedScrollViewRef, axis, reversed, enableScrollLoad, getItemSize, virtualizerContext, onRenderedFlaggedIndex, flaggedIndex, imperativeVirtualizerRef, imperativeRef, containerSizeRef, updateScrollPosition, gap, enablePagination, container, label, ...props }: ScrollViewBaseProps): React.ReactElement;
3069
- export type DataGridColumnResizeData = {
3070
- columnId: string;
3071
- width: number;
3072
- };
3073
- export type DataGridColumnResizeEvent = MouseEvent | KeyboardEvent | TouchEvent | undefined;
3074
- export type DataGridSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent;
3075
- declare function VirtualDataGrid<T>({ items, dataSource, onDataLoadError, onDataSourceGroupToggle, columns, getRowId, label: labelProp, height, rowHeight, getRowHeight, overscan, virtualize, virtualizeColumns, focusMode, subtleSelection, selectionAppearance, selectionMode, selectedKeys, defaultSelectedKeys, selectionModel, defaultSelectionModel, onDataSourceSelectionChange, onSelectionChange, sort, defaultSort, onSortChange, multiSort, defaultMultiSort, onMultiSortChange, sortPriorityLabel: sortPriorityLabelProp, filterable, filterValue, defaultFilterValue, onFilterValueChange, filterLabel: filterLabelProp, renderCell, onCellEdit, onCellsEdit, validateCellEdit, rowLabel: rowLabelProp, editHint: editHintProp, emptyMessage: emptyMessageProp, loadingLabel: loadingLabelProp, selectLabel: selectLabelProp, selectAllLabel: selectAllLabelProp, resizableColumns, columnWidths, defaultColumnWidths, columnSizingOptions, resizableColumnsOptions, containerWidthOffset, onColumnResize, resizeLabel: resizeLabelProp, reorderableColumns, columnOrder, defaultColumnOrder, onColumnOrderChange, reorderLabel: reorderLabelProp, groupBy, collapsedGroupKeys, defaultCollapsedGroupKeys, onCollapsedGroupKeysChange, emptyGroupLabel: emptyGroupLabelProp, expandGroupLabel: expandGroupLabelProp, collapseGroupLabel: collapseGroupLabelProp, onRenderedRange, ...props }: ElementProps & {
3076
- items?: T[];
3077
- dataSource?: DataGridDataSource<T>;
3078
- onDataLoadError?: (error: unknown, range: {
3079
- start: number;
3080
- end: number;
3081
- }) => void;
3082
- onDataSourceGroupToggle?: (groupKey: string, expanded: boolean) => void;
3083
- columns: DataGridColumn<T>[];
3084
- getRowId: (item: T) => string | number;
3085
- label?: string;
3086
- height?: number | string;
3087
- rowHeight?: number;
3088
- getRowHeight?: (item: T, index: number) => number;
3089
- overscan?: number;
3090
- virtualize?: boolean;
3091
- virtualizeColumns?: boolean;
3092
- focusMode?: DataGridFocusMode;
3093
- subtleSelection?: boolean;
3094
- selectionAppearance?: DataGridSelectionAppearance;
3095
- selectionMode?: "none" | "single" | "multiple" | "multiselect";
3096
- selectedKeys?: readonly (string | number)[];
3097
- defaultSelectedKeys?: readonly (string | number)[];
3098
- selectionModel?: DataGridSelectionModel;
3099
- defaultSelectionModel?: DataGridSelectionModel;
3100
- onDataSourceSelectionChange?: (selection: DataGridSelectionModel, selectedItems: T[]) => void;
3101
- onSelectionChange?: (keys: string[], selectedItems: T[]) => void;
3102
- sort?: DataGridSort | null;
3103
- defaultSort?: DataGridSort;
3104
- onSortChange?: (sort: DataGridSort | undefined) => void;
3105
- multiSort?: readonly DataGridSort[];
3106
- defaultMultiSort?: readonly DataGridSort[];
3107
- onMultiSortChange?: (sorts: DataGridSort[]) => void;
3108
- sortPriorityLabel?: string;
3109
- filterable?: boolean;
3110
- filterValue?: string;
3111
- defaultFilterValue?: string;
3112
- onFilterValueChange?: (value: string) => void;
3113
- filterLabel?: string;
3114
- renderCell?: (item: T, column: DataGridColumn<T>, rowIndex: number) => React.ReactNode;
3115
- onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3116
- onCellsEdit?: (edits: readonly DataGridCellEdit<T>[]) => void | Promise<void>;
3117
- validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3118
- rowLabel?: string;
3119
- editHint?: string;
3120
- emptyMessage?: React.ReactNode;
3121
- loadingLabel?: string;
3122
- selectLabel?: string;
3123
- selectAllLabel?: string;
3124
- resizableColumns?: boolean;
3125
- columnWidths?: DataGridColumnWidths;
3126
- defaultColumnWidths?: DataGridColumnWidths;
3127
- columnSizingOptions?: DataGridColumnSizingOptions;
3128
- resizableColumnsOptions?: {
3129
- autoFitColumns?: boolean;
3130
- };
3131
- containerWidthOffset?: number;
3132
- onColumnResize?: (event: DataGridColumnResizeEvent, data: DataGridColumnResizeData) => void;
3133
- resizeLabel?: string;
3134
- reorderableColumns?: boolean;
3135
- columnOrder?: readonly string[];
3136
- defaultColumnOrder?: readonly string[];
3137
- onColumnOrderChange?: (columnIds: string[]) => void;
3138
- reorderLabel?: string;
3139
- groupBy?: string;
3140
- collapsedGroupKeys?: readonly string[];
3141
- defaultCollapsedGroupKeys?: readonly string[];
3142
- onCollapsedGroupKeysChange?: (groupKeys: string[]) => void;
3143
- emptyGroupLabel?: string;
3144
- expandGroupLabel?: string;
3145
- collapseGroupLabel?: string;
3146
- onRenderedRange?: (range: {
3147
- start: number;
3148
- end: number;
3149
- total: number;
3150
- }) => void;
3151
- }): React.ReactElement;
3152
- type VirtualDataGridProps<T> = Parameters<typeof VirtualDataGrid<T>>[0];
3153
- export type DataGridCompositionSortState = {
3154
- sortColumn: TableColumnId | undefined;
3155
- sortDirection: TableSortDirection;
3156
- };
3157
- export type DataGridSelectionChangeData<T> = {
3158
- selectedItems: Set<T>;
3159
- };
3160
- export type DataGridCompositionContextValue<T> = {
3161
- items: readonly T[];
3162
- dataSource?: DataGridDataSource<T>;
3163
- totalRows: number;
3164
- firstRow: number;
3165
- lastRow: number;
3166
- rowHeight: number;
3167
- sourceBusy: boolean;
3168
- sourceError: string;
3169
- expandGroupLabel: string;
3170
- collapseGroupLabel: string;
3171
- groupCountLabel: string;
3172
- toggleGroup: (group: Extract<DataGridDataSourceRow<T>, {
3173
- kind: "group";
3174
- }>) => void;
3175
- columns: readonly TableColumnDefinition<T>[];
3176
- getRowId: (item: T) => string | number;
3177
- selectionMode: "none" | "single" | "multiselect";
3178
- selectionAppearance: "brand" | "neutral";
3179
- subtleSelection: boolean;
3180
- focusMode: DataGridFocusMode;
3181
- selectedItems: Set<T>;
3182
- selectionModel: DataGridSelectionModel;
3183
- setSelectionModel: (selection: DataGridSelectionModel, event: React.SyntheticEvent) => void;
3184
- isItemSelected: (item: T) => boolean;
3185
- isRowSelected: (rowId: string | number, item: T) => boolean;
3186
- setSelectedItems: (items: Set<T>, event: React.SyntheticEvent) => void;
3187
- sortState: DataGridCompositionSortState;
3188
- setSortState: (state: DataGridCompositionSortState, event: React.MouseEvent) => void;
3189
- activeCell: {
3190
- row: number;
3191
- column: number;
3192
- };
3193
- setActiveCell: (row: number, column: number) => void;
3194
- columnWidths: DataGridColumnWidths;
3195
- resizeColumn: (id: string, width: number, event: DataGridColumnResizeEvent) => void;
3196
- columnSizingOptions: DataGridColumnSizingOptions;
3197
- resizableColumns: boolean;
3198
- autoFitColumns: boolean;
3199
- resizeLabel: string;
3200
- orderedColumns?: readonly TableColumnDefinition<T>[];
3201
- reorderColumn?: (fromId: string, toId: string, after?: boolean) => void;
3202
- reorderableColumns?: boolean;
3203
- reorderLabel?: string;
3204
- draggedColumn?: React.MutableRefObject<string | undefined>;
3205
- editHint: string;
3206
- rowLabel: string;
3207
- editedCells: Record<string, DataGridEditValue>;
3208
- onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3209
- validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3210
- setEditedCell: (key: string, value: DataGridEditValue) => void;
3211
- };
3212
- export type DataGridContextValue<T> = Omit<DataGridCompositionContextValue<T>, "items" | "columns"> & {
3213
- /** Fluent table feature state uses mutable snapshots; these arrays are local projections. */
3214
- items: T[];
3215
- columns: TableColumnDefinition<T>[];
3216
- /** Fluent table feature state projected from the active DataGrid composition. */
3217
- getRows: TableFeaturesState<T>["getRows"];
3218
- selection: TableSelectionState;
3219
- sort: TableSortState<T>;
3220
- tableRef: React.RefObject<HTMLDivElement | null>;
3221
- columnSizing_unstable: TableColumnSizingState;
3222
- selectableRows: boolean;
3223
- compositeRowTabsterAttribute: TableCompositeNavigationAttribute;
3224
- };
3225
- export type DataGridCompositionRow<T> = {
3226
- item: T;
3227
- rowId: string | number;
3228
- index: number;
3229
- };
3230
- export type DataGridCompositionGroupRow<T> = {
3231
- group: Extract<DataGridDataSourceRow<T>, {
3232
- kind: "group";
3233
- }>;
3234
- index: number;
3235
- };
3236
- export type DataGridRowRenderHelpers<T> = {
3237
- item?: T;
3238
- rowId?: string | number;
3239
- renderCell: (column: TableColumnDefinition<T>) => React.ReactNode;
3240
- renderHeaderCell: (column: TableColumnDefinition<T>) => React.ReactNode;
3241
- columns: readonly TableColumnDefinition<T>[];
3242
- dataGridContextValue: DataGridContextValue<T>;
3243
- };
3244
- export type DataGridCompositionProps<T> = Omit<ElementProps, "children"> & {
3245
- items?: readonly T[];
3246
- dataSource?: DataGridDataSource<T>;
3247
- onDataLoadError?: (error: unknown, range: {
3248
- start: number;
3249
- end: number;
3250
- }) => void;
3251
- onDataSourceGroupToggle?: (groupKey: string, expanded: boolean) => void;
3252
- onRenderedRange?: (range: {
3253
- start: number;
3254
- end: number;
3255
- total: number;
3256
- }) => void;
3257
- rowHeight?: number;
3258
- overscan?: number;
3259
- virtualize?: boolean;
3260
- loadingLabel?: string;
3261
- expandGroupLabel?: string;
3262
- collapseGroupLabel?: string;
3263
- groupCountLabel?: string;
3264
- columns: readonly TableColumnDefinition<T>[];
3265
- getRowId: (item: T) => string | number;
3266
- selectionMode?: "none" | "single" | "multiselect";
3267
- selectionAppearance?: "brand" | "neutral";
3268
- subtleSelection?: boolean;
3269
- focusMode?: DataGridFocusMode;
3270
- selectedItems?: Set<T>;
3271
- defaultSelectedItems?: Set<T>;
3272
- selectionModel?: DataGridSelectionModel;
3273
- defaultSelectionModel?: DataGridSelectionModel;
3274
- onDataSourceSelectionChange?: (selection: DataGridSelectionModel, selectedItems: T[]) => void;
3275
- onSelectionChange?: (event: DataGridSelectionChangeEvent, data: DataGridSelectionChangeData<T>) => void;
3276
- sortState?: DataGridCompositionSortState;
3277
- defaultSortState?: DataGridCompositionSortState;
3278
- onSortChange?: (event: React.MouseEvent, state: DataGridCompositionSortState) => void;
3279
- label?: string;
3280
- resizableColumns?: boolean;
3281
- columnWidths?: DataGridColumnWidths;
3282
- defaultColumnWidths?: DataGridColumnWidths;
3283
- columnSizingOptions?: DataGridColumnSizingOptions;
3284
- resizableColumnsOptions?: {
3285
- autoFitColumns?: boolean;
3286
- };
3287
- containerWidthOffset?: number;
3288
- onColumnResize?: (event: DataGridColumnResizeEvent, data: DataGridColumnResizeData) => void;
3289
- resizeLabel?: string;
3290
- reorderableColumns?: boolean;
3291
- columnOrder?: readonly string[];
3292
- defaultColumnOrder?: readonly string[];
3293
- onColumnOrderChange?: (columnIds: string[]) => void;
3294
- reorderLabel?: string;
3295
- onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3296
- validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3297
- rowLabel?: string;
3298
- editHint?: string;
3299
- children?: React.ReactNode;
3300
- };
3301
- export type DataGridProps<T> = VirtualDataGridProps<T> | DataGridCompositionProps<T>;
3302
- export declare function DataGridContextProvider<T>({ value, children }: {
3303
- value: DataGridContextValue<T> | undefined;
3304
- children?: React.ReactNode;
3305
- }): React.ReactElement;
3306
- export declare function ColumnIdContextProvider({ value, children }: {
3307
- value: TableColumnId | undefined;
3308
- children?: React.ReactNode;
3309
- }): React.ReactElement;
3310
- /** Select from the nearest DataGrid context, using Fluent-compatible defaults outside a provider. */
3311
- export declare function useDataGridContext_unstable<TValue>(selector: (context: DataGridContextValue<unknown>) => TValue): TValue;
3312
- export declare function DataGrid<T>(props: DataGridCompositionProps<T>): React.ReactElement;
3313
- export declare function DataGrid<T>(props: VirtualDataGridProps<T>): React.ReactElement;
3314
- export type DataGridHeaderProps = Omit<ElementProps, "children"> & {
3315
- children?: React.ReactNode;
3316
- };
3317
- export declare function DataGridHeader({ children, ...props }: DataGridHeaderProps): React.ReactElement;
3318
- export type DataGridBodyProps<T> = Omit<ElementProps, "children"> & {
3319
- children: (row: DataGridCompositionRow<T>) => React.ReactNode;
3320
- renderGroupRow?: (row: DataGridCompositionGroupRow<T>) => React.ReactNode;
3321
- };
3322
- export declare function DataGridBody<T>({ children, renderGroupRow, ...props }: DataGridBodyProps<T>): React.ReactElement;
3323
- export type DataGridFluentCellRenderFunction<T> = (column: TableColumnDefinition<T>, dataGridContextValue: DataGridContextValue<T>) => React.ReactNode;
3324
- type DataGridRowBaseProps<T> = Omit<ElementProps, "children"> & {
3325
- item?: T;
3326
- rowId?: string | number;
3327
- rowIndex?: number;
3328
- appearance?: "brand" | "neutral" | "none";
3329
- selectionCell?: React.ReactNode;
3330
- };
3331
- export type DataGridRowProps<T> = DataGridRowBaseProps<T> & {
3332
- children: React.ReactNode | ((helpers: DataGridRowRenderHelpers<T>) => React.ReactNode) | DataGridFluentCellRenderFunction<T>;
3333
- };
3334
- export declare function DataGridRow<T>(props: DataGridRowBaseProps<T> & {
3335
- children: (helpers: DataGridRowRenderHelpers<T>) => React.ReactNode;
3336
- }): React.ReactElement;
3337
- export declare function DataGridRow<T>(props: DataGridRowBaseProps<T> & {
3338
- children: DataGridFluentCellRenderFunction<T>;
3339
- }): React.ReactElement;
3340
- export declare function DataGridRow<T>(props: DataGridRowBaseProps<T> & {
3341
- children: React.ReactNode;
3342
- }): React.ReactElement;
3343
- export type DataGridCellProps = Omit<ElementProps, "children"> & {
3344
- children?: React.ReactNode;
3345
- columnId?: TableColumnId;
3346
- rowIndex?: number;
3347
- columnIndex?: number;
3348
- focusMode?: "group" | "none" | "cell";
3349
- editable?: boolean;
3350
- value?: unknown;
3351
- editType?: DataGridColumn["editType"];
3352
- editLabel?: string;
3353
- };
3354
- export declare function DataGridCell({ children, columnId, rowIndex, columnIndex, focusMode: requestedFocusMode, editable, value, editType, editLabel, ...props }: DataGridCellProps): React.ReactElement;
3355
- export type DataGridHeaderCellProps = Omit<ElementProps, "children"> & {
3356
- children?: React.ReactNode;
3357
- columnId?: TableColumnId;
3358
- rowIndex?: number;
3359
- columnIndex?: number;
3360
- sortable?: boolean;
3361
- sortDirection?: "ascending" | "descending";
3362
- focusMode?: "group" | "none" | "cell";
3363
- aside?: SpanSlotProps;
3364
- sortIcon?: SpanSlotProps;
3365
- button?: React.ReactElement<any> | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">;
3366
- };
3367
- export declare function DataGridHeaderCell({ children, columnId, rowIndex, columnIndex, sortable, sortDirection: explicitSortDirection, focusMode, aside, sortIcon, button, ...props }: DataGridHeaderCellProps): React.ReactElement;
3368
- export type SelectionIndicatorSlot = React.ReactElement | React.HTMLAttributes<HTMLElement>;
3369
- export type DataGridSelectionCellProps = Omit<ElementProps, "children"> & {
3370
- item?: unknown;
3371
- rowIndex?: number;
3372
- columnIndex?: number;
3373
- label?: string;
3374
- type?: "checkbox" | "radio";
3375
- checked?: boolean | "mixed";
3376
- subtle?: boolean;
3377
- hidden?: boolean;
3378
- invisible?: boolean;
3379
- checkboxIndicator?: SelectionIndicatorSlot;
3380
- radioIndicator?: SelectionIndicatorSlot;
3381
- };
3382
- export declare function DataGridSelectionCell({ item, rowIndex, columnIndex, label, type, checked: checkedProp, subtle: subtleProp, hidden, invisible, checkboxIndicator, radioIndicator, ...props }: DataGridSelectionCellProps): React.ReactElement;
3383
- export type TreeItemLayoutProps = ElementProps & {
3384
- children?: React.ReactNode;
3385
- main?: React.ReactNode;
3386
- iconBefore?: React.ReactNode;
3387
- iconAfter?: React.ReactNode;
3388
- expandIcon?: React.ReactNode;
3389
- aside?: React.ReactNode;
3390
- actions?: React.ReactNode;
3391
- selector?: React.ReactNode;
3392
- };
3393
- export declare function TreeItemLayout({ children, main, iconBefore, iconAfter, expandIcon, aside, actions, selector, className, ...props }: TreeItemLayoutProps): React.ReactElement;
3394
- export type TreeItemPersonaLayoutProps = ElementProps & {
3395
- children?: React.ReactNode;
3396
- media?: React.ReactNode;
3397
- main?: React.ReactNode;
3398
- description?: React.ReactNode;
3399
- actions?: React.ReactNode;
3400
- aside?: React.ReactNode;
3401
- expandIcon?: React.ReactNode;
3402
- selector?: React.ReactNode;
3403
- };
3404
- export declare function TreeItemPersonaLayout({ children, media, main, description, actions, aside, expandIcon, selector, className, ...props }: TreeItemPersonaLayoutProps): React.ReactElement;
3405
- export type TreeInteractionEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
3406
- export type TreeCheckedChangeEvent = React.ChangeEvent<HTMLElement>;
3407
- type TreeOpenChangeEventMap = {
3408
- ExpandIconClick: React.MouseEvent<HTMLElement>;
3409
- Click: React.MouseEvent<HTMLElement>;
3410
- ArrowLeft: React.KeyboardEvent<HTMLElement>;
3411
- ArrowRight: React.KeyboardEvent<HTMLElement>;
3412
- Enter: React.KeyboardEvent<HTMLElement>;
3413
- };
3414
- type TreeNavigationEventMap = {
3415
- Click: React.MouseEvent<HTMLElement>;
3416
- TypeAhead: React.KeyboardEvent<HTMLElement>;
3417
- ArrowRight: React.KeyboardEvent<HTMLElement>;
3418
- ArrowLeft: React.KeyboardEvent<HTMLElement>;
3419
- ArrowUp: React.KeyboardEvent<HTMLElement>;
3420
- ArrowDown: React.KeyboardEvent<HTMLElement>;
3421
- Home: React.KeyboardEvent<HTMLElement>;
3422
- End: React.KeyboardEvent<HTMLElement>;
3423
- };
3424
- export type TreeOpenChangeData = {
3425
- [Type in keyof TreeOpenChangeEventMap]: {
3426
- event: TreeOpenChangeEventMap[Type];
3427
- open: boolean;
3428
- openItems: Set<string>;
3429
- value: string;
3430
- target: HTMLElement;
3431
- type: Type;
3432
- };
3433
- }[keyof TreeOpenChangeEventMap];
3434
- export type TreeItemOpenChangeData = {
3435
- [Type in keyof TreeOpenChangeEventMap]: {
3436
- event: TreeOpenChangeEventMap[Type];
3437
- open: boolean;
3438
- value: string | number;
3439
- target: HTMLElement;
3440
- type: Type;
3441
- };
3442
- }[keyof TreeOpenChangeEventMap];
3443
- export type TreeNavigationData = {
3444
- [Type in keyof TreeNavigationEventMap]: {
3445
- event: TreeNavigationEventMap[Type];
3446
- target: HTMLElement;
3447
- value: string;
3448
- parentValue?: string;
3449
- type: Type;
3450
- isScrollPrevented: boolean;
3451
- preventScroll: () => void;
3452
- };
3453
- }[keyof TreeNavigationEventMap];
3454
- export type TreeItemProps = ElementProps & {
3455
- itemType: "leaf" | "branch";
3456
- value?: string | number;
3457
- open?: boolean;
3458
- parentValue?: string | number;
3459
- onOpenChange?: (event: TreeInteractionEvent, data: TreeItemOpenChangeData) => void;
3460
- disabled?: boolean;
3461
- children?: React.ReactNode;
3462
- };
3463
- export declare function TreeItem(_props: TreeItemProps): null;
3464
- export type FlatTreeItemProps = ElementProps & {
3465
- itemType: "leaf" | "branch";
3466
- value: string | number;
3467
- open?: boolean;
3468
- parentValue?: string | number;
3469
- onOpenChange?: TreeItemProps["onOpenChange"];
3470
- disabled?: boolean;
3471
- children?: React.ReactNode;
3472
- "aria-level": number;
3473
- "aria-setsize": number;
3474
- "aria-posinset": number;
3475
- };
3476
- export declare function FlatTreeItem(_props: FlatTreeItemProps): null;
3477
- export type TreeProps<T = unknown> = ElementProps & {
3478
- items?: readonly TreeNode<T>[];
3479
- children?: React.ReactNode;
3480
- label?: string;
3481
- selectionMode?: "none" | "single" | "multiple" | "multiselect";
3482
- selectedKeys?: readonly (string | number)[];
3483
- defaultSelectedKeys?: readonly (string | number)[];
3484
- checkedItems?: Iterable<string | number | readonly [string | number, boolean | "mixed"]>;
3485
- defaultCheckedItems?: Iterable<string | number | readonly [string | number, boolean | "mixed"]>;
3486
- openItems?: Iterable<string | number>;
3487
- defaultOpenItems?: Iterable<string | number>;
3488
- expandedKeys?: readonly (string | number)[];
3489
- defaultExpandedKeys?: readonly (string | number)[];
3490
- onSelectionChange?: (keys: string[], selectedItems: TreeNode<T>[]) => void;
3491
- onCheckedChange?: (event: TreeCheckedChangeEvent, data: {
3492
- value: string;
3493
- checkedItems: Map<string, boolean | "mixed">;
3494
- target: HTMLElement;
3495
- event: TreeCheckedChangeEvent;
3496
- type: "Change";
3497
- selectionMode: "single" | "multiselect";
3498
- checked: boolean | "mixed";
3499
- }) => void;
3500
- onExpandedChange?: (keys: string[]) => void;
3501
- onOpenChange?: (event: TreeInteractionEvent, data: TreeOpenChangeData) => void;
3502
- onNavigation?: (event: TreeInteractionEvent, data: TreeNavigationData) => void;
3503
- navigationMode?: "tree" | "treegrid";
3504
- appearance?: "subtle" | "subtle-alpha" | "transparent";
3505
- size?: "small" | "medium";
3506
- renderItem?: (node: TreeNode<T>, level: number) => React.ReactNode;
3507
- collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
3508
- toggleLabel?: string;
3509
- emptyMessage?: React.ReactNode;
3510
- };
3511
- export declare function Tree<T>({ items, children, label, selectionMode, selectedKeys, defaultSelectedKeys, checkedItems, defaultCheckedItems, openItems, defaultOpenItems, expandedKeys, defaultExpandedKeys, onSelectionChange, onCheckedChange, onExpandedChange, onOpenChange, onNavigation, navigationMode, appearance, size, renderItem, collapseMotion, toggleLabel, emptyMessage, ...props }: TreeProps<T>): React.ReactElement;
3512
- export type FlatTreeProps = ElementProps & {
3513
- children?: React.ReactNode;
3514
- label?: string;
3515
- selectionMode?: "none" | "single" | "multiple" | "multiselect";
3516
- selectedKeys?: readonly (string | number)[];
3517
- defaultSelectedKeys?: readonly (string | number)[];
3518
- checkedItems?: Iterable<string | number | readonly [string | number, boolean | "mixed"]>;
3519
- defaultCheckedItems?: Iterable<string | number | readonly [string | number, boolean | "mixed"]>;
3520
- openItems?: Iterable<string | number>;
3521
- defaultOpenItems?: Iterable<string | number>;
3522
- expandedKeys?: readonly (string | number)[];
3523
- defaultExpandedKeys?: readonly (string | number)[];
3524
- onSelectionChange?: TreeProps["onSelectionChange"];
3525
- onCheckedChange?: TreeProps["onCheckedChange"];
3526
- onExpandedChange?: TreeProps["onExpandedChange"];
3527
- onOpenChange?: TreeProps["onOpenChange"];
3528
- onNavigation?: TreeProps["onNavigation"];
3529
- navigationMode?: "tree" | "treegrid";
3530
- appearance?: "subtle" | "subtle-alpha" | "transparent";
3531
- size?: "small" | "medium";
3532
- renderItem?: (node: TreeNode<React.ReactNode>, level: number) => React.ReactNode;
3533
- collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
3534
- toggleLabel?: string;
3535
- emptyMessage?: React.ReactNode;
3536
- };
3537
- export declare function FlatTree({ children, ...props }: FlatTreeProps): React.ReactElement;
3538
- export type TextFieldProps = ElementProps & {
3539
- label?: string;
3540
- value?: string;
3541
- onValueChange?: (value: string) => void;
3542
- name?: string;
3543
- required?: boolean;
3544
- disabled?: boolean;
3545
- readOnly?: boolean;
3546
- placeholder?: string;
3547
- type?: string;
3548
- };
3549
- export declare const TextField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3550
- [attribute: `data-${string}`]: string | number | boolean | undefined;
3551
- } & {
3552
- label?: string;
3553
- value?: string;
3554
- onValueChange?: (value: string) => void;
3555
- name?: string;
3556
- required?: boolean;
3557
- disabled?: boolean;
3558
- readOnly?: boolean;
3559
- placeholder?: string;
3560
- type?: string;
3561
- } & React.RefAttributes<HTMLElement>>;
3562
- export type FieldProps = ElementProps & {
3563
- children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);
3564
- label?: React.ReactNode;
3565
- hint?: React.ReactNode;
3566
- validationMessage?: React.ReactNode;
3567
- validationMessageIcon?: React.ReactNode;
3568
- validationState?: FieldValidationState;
3569
- required?: boolean;
3570
- disabled?: boolean;
3571
- orientation?: FieldOrientation;
3572
- size?: LabelSize;
3573
- };
3574
- /** Pair one form control with a theme-aware label, hint, and validation message. */
3575
- export declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3576
- [attribute: `data-${string}`]: string | number | boolean | undefined;
3577
- } & {
3578
- children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);
3579
- label?: React.ReactNode;
3580
- hint?: React.ReactNode;
3581
- validationMessage?: React.ReactNode;
3582
- validationMessageIcon?: React.ReactNode;
3583
- validationState?: FieldValidationState;
3584
- required?: boolean;
3585
- disabled?: boolean;
3586
- orientation?: FieldOrientation;
3587
- size?: LabelSize;
3588
- } & React.RefAttributes<HTMLDivElement>>;
3589
- export type InputProps = Omit<NativeClickHostProps<HTMLInputElement>, "children" | "onChange" | "defaultValue" | "defaultChecked"> & {
3590
- children?: never;
3591
- type?: InputType;
3592
- value?: string | number | readonly string[];
3593
- defaultValue?: string | number | readonly string[];
3594
- checked?: boolean;
3595
- defaultChecked?: boolean;
3596
- accept?: string;
3597
- alt?: string;
3598
- autoComplete?: string;
3599
- capture?: boolean | string;
3600
- form?: string;
3601
- formAction?: string;
3602
- formEncType?: string;
3603
- formMethod?: string;
3604
- formNoValidate?: boolean;
3605
- formTarget?: string;
3606
- height?: number | string;
3607
- list?: string;
3608
- max?: number | string;
3609
- maxLength?: number;
3610
- min?: number | string;
3611
- minLength?: number;
3612
- multiple?: boolean;
3613
- pattern?: string;
3614
- src?: string;
3615
- step?: number | string;
3616
- width?: number | string;
3617
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3618
- onValueChange?: (value: string) => void;
3619
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
3620
- value: string;
3621
- }) => void;
3622
- contentBefore?: React.ReactNode;
3623
- contentAfter?: React.ReactNode;
3624
- size?: InputSize;
3625
- appearance?: InputAppearance;
3626
- disabled?: boolean;
3627
- required?: boolean;
3628
- readOnly?: boolean;
3629
- placeholder?: string;
3630
- name?: string;
3631
- };
3632
- /** Bare input primitive. Supply aria-label or aria-labelledby; use TextField when a shadow-safe visible label is needed. */
3633
- export declare const Input: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "defaultValue" | "defaultChecked" | "children" | "onChange"> & {
3634
- children?: never;
3635
- type?: InputType;
3636
- value?: string | number | readonly string[];
3637
- defaultValue?: string | number | readonly string[];
3638
- checked?: boolean;
3639
- defaultChecked?: boolean;
3640
- accept?: string;
3641
- alt?: string;
3642
- autoComplete?: string;
3643
- capture?: boolean | string;
3644
- form?: string;
3645
- formAction?: string;
3646
- formEncType?: string;
3647
- formMethod?: string;
3648
- formNoValidate?: boolean;
3649
- formTarget?: string;
3650
- height?: number | string;
3651
- list?: string;
3652
- max?: number | string;
3653
- maxLength?: number;
3654
- min?: number | string;
3655
- minLength?: number;
3656
- multiple?: boolean;
3657
- pattern?: string;
3658
- src?: string;
3659
- step?: number | string;
3660
- width?: number | string;
3661
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3662
- onValueChange?: (value: string) => void;
3663
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
3664
- value: string;
3665
- }) => void;
3666
- contentBefore?: React.ReactNode;
3667
- contentAfter?: React.ReactNode;
3668
- size?: InputSize;
3669
- appearance?: InputAppearance;
3670
- disabled?: boolean;
3671
- required?: boolean;
3672
- readOnly?: boolean;
3673
- placeholder?: string;
3674
- name?: string;
3675
- } & React.RefAttributes<HTMLElement>>;
3676
- export type FileUploadProps = NativeClickHostProps<HTMLDivElement> & {
3677
- label?: string;
3678
- name?: string;
3679
- form?: string;
3680
- accept?: string;
3681
- multiple?: boolean;
3682
- disabled?: boolean;
3683
- required?: boolean;
3684
- maxFiles?: number;
3685
- maxFileSize?: number;
3686
- browseLabel?: string;
3687
- dropLabel?: string;
3688
- removeLabel?: string;
3689
- selectedLabel?: string;
3690
- onFilesChange?: (files: File[]) => void;
3691
- onFilesError?: (errors: FileUploadError[]) => void;
3692
- };
3693
- export declare const FileUpload: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
3694
- onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
3695
- onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
3696
- } & {
3697
- label?: string;
3698
- name?: string;
3699
- form?: string;
3700
- accept?: string;
3701
- multiple?: boolean;
3702
- disabled?: boolean;
3703
- required?: boolean;
3704
- maxFiles?: number;
3705
- maxFileSize?: number;
3706
- browseLabel?: string;
3707
- dropLabel?: string;
3708
- removeLabel?: string;
3709
- selectedLabel?: string;
3710
- onFilesChange?: (files: File[]) => void;
3711
- onFilesError?: (errors: FileUploadError[]) => void;
3712
- } & React.RefAttributes<HTMLElement>>;
3713
- export type ImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "loading" | "decoding"> & {
3714
- fit?: ImageFit;
3715
- shape?: ImageShape;
3716
- block?: boolean;
3717
- bordered?: boolean;
3718
- shadow?: boolean;
3719
- loading?: "eager" | "lazy";
3720
- decoding?: "async" | "sync" | "auto";
3721
- };
3722
- /** Theme-aware image styling on a native img; keeps srcset, dimensions, and browser loading native. */
3723
- export declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "loading" | "decoding"> & {
3724
- fit?: ImageFit;
3725
- shape?: ImageShape;
3726
- block?: boolean;
3727
- bordered?: boolean;
3728
- shadow?: boolean;
3729
- loading?: "eager" | "lazy";
3730
- decoding?: "async" | "sync" | "auto";
3731
- } & React.RefAttributes<HTMLImageElement>>;
3732
- export type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;
3733
- export type SearchBoxProps = Omit<InputProps, "appearance" | "children" | "defaultValue" | "input" | "onChange" | "size" | "type" | "value"> & {
3734
- children?: React.ReactNode;
3735
- label?: string;
3736
- type?: React.HTMLInputTypeAttribute;
3737
- value?: string;
3738
- defaultValue?: string;
3739
- onValueChange?: (value: string) => void;
3740
- onSearch?: (value: string) => void;
3741
- onChange?: (event: SearchBoxChangeEvent, data: {
3742
- value: string;
3743
- }) => void;
3744
- size?: SearchSize;
3745
- appearance?: SearchAppearance;
3746
- clearLabel?: string;
3747
- contentBefore?: React.ReactNode;
3748
- contentAfter?: React.ReactNode;
3749
- dismiss?: React.ReactNode;
3750
- };
3751
- export declare const SearchBox: React.ForwardRefExoticComponent<Omit<InputProps, "value" | "defaultValue" | "input" | "appearance" | "size" | "type" | "children" | "onChange"> & {
3752
- children?: React.ReactNode;
3753
- label?: string;
3754
- type?: React.HTMLInputTypeAttribute;
3755
- value?: string;
3756
- defaultValue?: string;
3757
- onValueChange?: (value: string) => void;
3758
- onSearch?: (value: string) => void;
3759
- onChange?: (event: SearchBoxChangeEvent, data: {
3760
- value: string;
3761
- }) => void;
3762
- size?: SearchSize;
3763
- appearance?: SearchAppearance;
3764
- clearLabel?: string;
3765
- contentBefore?: React.ReactNode;
3766
- contentAfter?: React.ReactNode;
3767
- dismiss?: React.ReactNode;
3768
- } & React.RefAttributes<HTMLElement>>;
3769
- type FluentEventData<TChangeEvent extends Event | React.SyntheticEvent> = {
3770
- color: ColorPickerHsvColor;
3771
- event: SharePointUIEvent;
3772
- type: undefined;
3773
- } | {
3774
- color: ColorPickerHsvColor;
3775
- event: TChangeEvent;
3776
- type: "change";
3777
- };
3778
- export type ColorPickerOnColorChangeData = FluentEventData<React.ChangeEvent<HTMLInputElement>>;
3779
- export type ColorPickerProps = Omit<NativeClickHostProps<HTMLDivElement>, "color"> & {
3780
- label?: string;
3781
- name?: string;
3782
- form?: string;
3783
- color?: ColorPickerHsvColor;
3784
- defaultColor?: ColorPickerHsvColor;
3785
- value?: string;
3786
- defaultValue?: string;
3787
- alpha?: number;
3788
- defaultAlpha?: number;
3789
- colors?: readonly string[];
3790
- format?: ColorPickerFormat;
3791
- onColorChange?: (event: SharePointUIEvent, data: ColorPickerOnColorChangeData) => void;
3792
- onValueChange?: (value: string, alpha: number) => void;
3793
- onFormatChange?: (format: ColorPickerFormat) => void;
3794
- size?: ColorPickerSize;
3795
- shape?: ColorPickerShape;
3796
- readOnly?: boolean;
3797
- required?: boolean;
3798
- children?: React.ReactNode;
3799
- };
3800
- export declare const ColorPicker: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLDivElement>, "color"> & {
3801
- label?: string;
3802
- name?: string;
3803
- form?: string;
3804
- color?: ColorPickerHsvColor;
3805
- defaultColor?: ColorPickerHsvColor;
3806
- value?: string;
3807
- defaultValue?: string;
3808
- alpha?: number;
3809
- defaultAlpha?: number;
3810
- colors?: readonly string[];
3811
- format?: ColorPickerFormat;
3812
- onColorChange?: (event: SharePointUIEvent, data: ColorPickerOnColorChangeData) => void;
3813
- onValueChange?: (value: string, alpha: number) => void;
3814
- onFormatChange?: (format: ColorPickerFormat) => void;
3815
- size?: ColorPickerSize;
3816
- shape?: ColorPickerShape;
3817
- readOnly?: boolean;
3818
- required?: boolean;
3819
- children?: React.ReactNode;
3820
- } & React.RefAttributes<HTMLElement>>;
3821
- export type ColorAreaChangeData = {
3822
- color: ColorPickerHsvColor;
3823
- event: SharePointUIEvent;
3824
- type: undefined;
3825
- } | {
3826
- color: ColorPickerHsvColor;
3827
- event: React.SyntheticEvent | PointerEvent;
3828
- type: "change";
3829
- };
3830
- export type ColorControlChangeData = FluentEventData<React.ChangeEvent<HTMLInputElement>>;
3831
- export type ColorControlChangeHandler = (event: SharePointUIEvent, data: ColorControlChangeData) => void;
3832
- export type ColorAreaProps = Omit<NativeClickHostProps<HTMLDivElement>, "color" | "onChange"> & {
3833
- color?: ColorPickerHsvColor;
3834
- defaultColor?: ColorPickerHsvColor;
3835
- inputX?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3836
- inputY?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3837
- thumb?: React.ReactNode;
3838
- shape?: ColorPickerShape;
3839
- onChange?: (event: SharePointUIEvent, data: ColorAreaChangeData) => void;
3840
- children?: React.ReactNode;
3841
- };
3842
- export type ColorSliderProps = Omit<NativeClickHostProps<HTMLDivElement>, "color" | "onChange"> & {
3843
- color?: ColorPickerHsvColor;
3844
- defaultColor?: ColorPickerHsvColor;
3845
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3846
- rail?: React.ReactNode;
3847
- thumb?: React.ReactNode;
3848
- channel?: ColorSliderChannel;
3849
- vertical?: boolean;
3850
- shape?: ColorPickerShape;
3851
- onChange?: ColorControlChangeHandler;
3852
- };
3853
- export type AlphaSliderProps = Omit<ColorSliderProps, "channel"> & {
3854
- transparency?: boolean;
3855
- };
3856
- export declare const ColorArea: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLDivElement>, "color" | "onChange"> & {
3857
- color?: ColorPickerHsvColor;
3858
- defaultColor?: ColorPickerHsvColor;
3859
- inputX?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3860
- inputY?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3861
- thumb?: React.ReactNode;
3862
- shape?: ColorPickerShape;
3863
- onChange?: (event: SharePointUIEvent, data: ColorAreaChangeData) => void;
3864
- children?: React.ReactNode;
3865
- } & React.RefAttributes<HTMLElement>>;
3866
- export declare const ColorSlider: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLDivElement>, "color" | "onChange"> & {
3867
- color?: ColorPickerHsvColor;
3868
- defaultColor?: ColorPickerHsvColor;
3869
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3870
- rail?: React.ReactNode;
3871
- thumb?: React.ReactNode;
3872
- channel?: ColorSliderChannel;
3873
- vertical?: boolean;
3874
- shape?: ColorPickerShape;
3875
- onChange?: ColorControlChangeHandler;
3876
- } & React.RefAttributes<HTMLElement>>;
3877
- export declare const AlphaSlider: React.ForwardRefExoticComponent<Omit<ColorSliderProps, "channel"> & {
3878
- transparency?: boolean;
3879
- } & React.RefAttributes<HTMLElement>>;
3880
- export type SwatchPickerSelection = {
3881
- selectedValue: string;
3882
- selectedColor: string;
3883
- selectedValues: string[];
3884
- selectedColors: string[];
3885
- selectionMode: "single" | "multiple";
3886
- };
3887
- export type SwatchPickerSelectionChangeEvent = SharePointUIEvent;
3888
- export type SwatchPickerOnSelectionChangeData = (SwatchPickerSelection & {
3889
- event: SharePointUIEvent;
3890
- type: undefined;
3891
- selectedSwatch: string;
3892
- }) | (SwatchPickerSelection & {
3893
- event: React.MouseEvent<HTMLButtonElement>;
3894
- type: "click";
3895
- selectedSwatch: string;
3896
- });
3897
- export type SwatchPickerProps = ElementProps & {
3898
- selectedValue?: string;
3899
- defaultSelectedValue?: string;
3900
- selectedValues?: string[];
3901
- defaultSelectedValues?: string[];
3902
- selectionMode?: "single" | "multiple";
3903
- layout?: "row" | "grid";
3904
- size?: "extra-small" | "small" | "medium" | "large";
3905
- shape?: "rounded" | "square" | "circular";
3906
- spacing?: "small" | "medium";
3907
- focusMode?: "arrow" | "tab";
3908
- columns?: number;
3909
- onSelectionChange?: (event: SwatchPickerSelectionChangeEvent, data: SwatchPickerOnSelectionChangeData) => void;
3910
- children?: React.ReactNode;
3911
- };
3912
- export declare const SwatchPicker: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3913
- [attribute: `data-${string}`]: string | number | boolean | undefined;
3914
- } & {
3915
- selectedValue?: string;
3916
- defaultSelectedValue?: string;
3917
- selectedValues?: string[];
3918
- defaultSelectedValues?: string[];
3919
- selectionMode?: "single" | "multiple";
3920
- layout?: "row" | "grid";
3921
- size?: "extra-small" | "small" | "medium" | "large";
3922
- shape?: "rounded" | "square" | "circular";
3923
- spacing?: "small" | "medium";
3924
- focusMode?: "arrow" | "tab";
3925
- columns?: number;
3926
- onSelectionChange?: (event: SwatchPickerSelectionChangeEvent, data: SwatchPickerOnSelectionChangeData) => void;
3927
- children?: React.ReactNode;
3928
- } & React.RefAttributes<HTMLElement>>;
3929
- export declare const ColorSwatch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3930
- [attribute: `data-${string}`]: string | number | boolean | undefined;
3931
- } & {
3932
- color: string;
3933
- value: string;
3934
- disabled?: boolean;
3935
- borderColor?: string;
3936
- size?: SwatchPickerProps["size"];
3937
- shape?: SwatchPickerProps["shape"];
3938
- icon?: React.ReactNode;
3939
- disabledIcon?: React.ReactNode;
3940
- children?: React.ReactNode;
3941
- } & React.RefAttributes<HTMLElement>>;
3942
- export declare const ImageSwatch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3943
- [attribute: `data-${string}`]: string | number | boolean | undefined;
3944
- } & {
3945
- src: string;
3946
- value: string;
3947
- disabled?: boolean;
3948
- size?: SwatchPickerProps["size"];
3949
- shape?: SwatchPickerProps["shape"];
3950
- children?: React.ReactNode;
3951
- } & React.RefAttributes<HTMLElement>>;
3952
- export declare const EmptySwatch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3953
- [attribute: `data-${string}`]: string | number | boolean | undefined;
3954
- } & {
3955
- onAdd?: () => void;
3956
- disabled?: boolean;
3957
- size?: SwatchPickerProps["size"];
3958
- shape?: SwatchPickerProps["shape"];
3959
- } & React.RefAttributes<HTMLElement>>;
3960
- export declare const SwatchPickerRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3961
- [attribute: `data-${string}`]: string | number | boolean | undefined;
3962
- } & {
3963
- children?: React.ReactNode;
3964
- } & React.RefAttributes<HTMLElement>>;
3965
- export type TableSize = "small" | "medium" | "large";
3966
- export type TableAppearance = "subtle" | "dividers" | "plain";
3967
- export type TableSortDirection = "ascending" | "descending";
3968
- export type TableColumnId = string | number;
3969
- export type TableRowId = string | number;
3970
- export type TableContextValue = {
3971
- size: "extra-small" | "small" | "medium" | "large";
3972
- noNativeElements: boolean;
3973
- sortable: boolean;
3974
- };
3975
- export declare const TableContextProvider: React.Provider<TableContextValue | undefined>;
3976
- export declare function useTableContext(): TableContextValue;
3977
- export declare const TableRowIdContextProvider: React.Provider<TableRowId | undefined>;
3978
- export declare function useTableRowIdContext(): TableRowId;
3979
- export declare function useColumnIdContext(): TableColumnId;
3980
- export declare const TableHeaderContextProvider: React.Provider<string | undefined>;
3981
- export declare function useIsInTableHeader(): boolean;
3982
- export type TableColumnDefinition<TItem> = {
3983
- columnId: TableColumnId;
3984
- compare: (a: TItem, b: TItem) => number;
3985
- renderHeaderCell: (data?: unknown) => React.ReactNode;
3986
- renderCell: (item: TItem) => React.ReactNode;
3987
- };
3988
- export type CreateTableColumnOptions<TItem> = {
3989
- columnId: TableColumnId;
3990
- compare?: (a: TItem, b: TItem) => number;
3991
- renderHeaderCell?: (data?: unknown) => React.ReactNode;
3992
- renderCell?: (item: TItem) => React.ReactNode;
3993
- };
3994
- export declare function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): TableColumnDefinition<TItem>;
3995
- export type TableRowData<TItem> = {
3996
- item: TItem;
3997
- rowId: TableRowId;
3998
- };
3999
- export type TableSelectionState = {
4000
- selectionMode: "single" | "multiselect";
4001
- selectedRows: Set<TableRowId>;
4002
- allRowsSelected: boolean;
4003
- someRowsSelected: boolean;
4004
- isRowSelected: (rowId: TableRowId) => boolean;
4005
- toggleRow: (event: React.SyntheticEvent, rowId: TableRowId) => void;
4006
- selectRow: (event: React.SyntheticEvent, rowId: TableRowId) => void;
4007
- deselectRow: (event: React.SyntheticEvent, rowId: TableRowId) => void;
4008
- toggleAllRows: (event: React.SyntheticEvent) => void;
4009
- clearRows: (event: React.SyntheticEvent) => void;
4010
- };
4011
- export type TableSortState<TItem> = {
4012
- sortColumn: TableColumnId | undefined;
4013
- sortDirection: TableSortDirection;
4014
- getSortDirection: (columnId: TableColumnId) => TableSortDirection | undefined;
4015
- setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, direction: TableSortDirection) => void;
4016
- toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;
4017
- sort: <TRow extends TableRowData<TItem>>(rows: TRow[]) => TRow[];
4018
- };
4019
- export type ColumnWidthState = {
4020
- columnId: TableColumnId;
4021
- width: number;
4022
- minWidth: number;
4023
- idealWidth: number;
4024
- padding: number;
4025
- };
4026
- export type TableColumnSizingOptions = Record<TableColumnId, Partial<Pick<ColumnWidthState, "minWidth" | "idealWidth" | "padding">> & {
4027
- defaultWidth?: number;
4028
- autoFitColumns?: boolean;
4029
- }>;
4030
- export type TableColumnSizingState = {
4031
- getOnMouseDown: (columnId: TableColumnId) => (event: React.MouseEvent | React.TouchEvent) => void;
4032
- setColumnWidth: (columnId: TableColumnId, width: number) => void;
4033
- getColumnWidths: () => ColumnWidthState[];
4034
- getTableProps: (props?: React.HTMLAttributes<HTMLDivElement>) => React.HTMLAttributes<HTMLDivElement>;
4035
- getTableHeaderCellProps: (columnId: TableColumnId) => {
4036
- style?: React.CSSProperties;
4037
- aside?: React.ReactNode;
4038
- };
4039
- getTableCellProps: (columnId: TableColumnId) => {
4040
- style?: React.CSSProperties;
4041
- };
4042
- enableKeyboardMode: (columnId: TableColumnId, onChange?: (columnId: TableColumnId, isKeyboardMode: boolean) => void) => (event: React.MouseEvent | React.TouchEvent) => void;
4043
- };
4044
- export type TableFeaturesState<TItem> = {
4045
- items: TItem[];
4046
- columns: TableColumnDefinition<TItem>[];
4047
- getRowId?: (item: TItem) => TableRowId;
4048
- getRows: <TRow extends TableRowData<TItem> = TableRowData<TItem>>(rowEnhancer?: (row: TableRowData<TItem>) => TRow) => TRow[];
4049
- selection: TableSelectionState;
4050
- sort: TableSortState<TItem>;
4051
- tableRef: React.RefObject<HTMLDivElement | null>;
4052
- columnSizing_unstable: TableColumnSizingState;
4053
- };
4054
- export type TableFeaturePlugin = <TItem>(state: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
4055
- export type UseTableFeaturesOptions<TItem> = {
4056
- items: TItem[];
4057
- columns: TableColumnDefinition<TItem>[];
4058
- getRowId?: (item: TItem) => TableRowId;
4059
- };
4060
- export type UseTableSelectionOptions = {
4061
- selectionMode: "single" | "multiselect";
4062
- defaultSelectedItems?: Iterable<TableRowId>;
4063
- selectedItems?: Iterable<TableRowId>;
4064
- onSelectionChange?: (event: React.SyntheticEvent, data: {
4065
- selectedItems: Set<TableRowId>;
4066
- }) => void;
4067
- };
4068
- export type UseTableSortOptions = {
4069
- sortState?: {
4070
- sortColumn: TableColumnId | undefined;
4071
- sortDirection: TableSortDirection;
4072
- };
4073
- defaultSortState?: {
4074
- sortColumn: TableColumnId | undefined;
4075
- sortDirection: TableSortDirection;
4076
- };
4077
- onSortChange?: (event: React.SyntheticEvent, state: {
4078
- sortColumn: TableColumnId | undefined;
4079
- sortDirection: TableSortDirection;
4080
- }) => void;
4081
- };
4082
- /** Build reusable table row state, then enhance it with selection/sort feature plugins. Keep plugin order stable across renders. */
4083
- export declare function useTableFeatures<TItem>(options: UseTableFeaturesOptions<TItem>, plugins?: readonly TableFeaturePlugin[]): TableFeaturesState<TItem>;
4084
- /** Create a Fluent-compatible selection plugin for useTableFeatures. */
4085
- export declare function useTableSelection(options: UseTableSelectionOptions): TableFeaturePlugin;
4086
- /** Create a Fluent-compatible sort plugin; sorting returns a shallow-sorted copy of rows. */
4087
- export declare function useTableSort(options?: UseTableSortOptions): TableFeaturePlugin;
4088
- export type UseTableColumnSizingParams = {
4089
- columnSizingOptions?: TableColumnSizingOptions;
4090
- onColumnResize?: (event: KeyboardEvent | TouchEvent | MouseEvent | undefined, data: {
4091
- columnId: TableColumnId;
4092
- width: number;
4093
- }) => void;
4094
- containerWidthOffset?: number;
4095
- autoFitColumns?: boolean;
4096
- };
4097
- /** Fluent-compatible composable sizing state for Table and custom table renderers. */
4098
- export declare function useTableColumnSizing_unstable(params?: UseTableColumnSizingParams): TableFeaturePlugin;
4099
- export type TableCompositeNavigationAttribute = {
4100
- "data-tabster": string;
4101
- };
4102
- export type TableCompositeNavigation = {
4103
- onTableKeyDown: React.KeyboardEventHandler<HTMLElement>;
4104
- tableTabsterAttribute: TableCompositeNavigationAttribute;
4105
- tableRowTabsterAttribute: TableCompositeNavigationAttribute;
4106
- };
4107
- /** Fluent-compatible table/grid navigation attributes and focus handoff events without a Tabster runtime dependency. */
4108
- export declare function useTableCompositeNavigation(): TableCompositeNavigation;
4109
- export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4110
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4111
- } & {
4112
- children?: React.ReactNode;
4113
- size?: TableSize;
4114
- appearance?: TableAppearance;
4115
- noNativeElements?: boolean;
4116
- sortable?: boolean;
4117
- } & React.RefAttributes<HTMLElement>>;
4118
- export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4119
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4120
- } & {
4121
- children?: React.ReactNode;
4122
- } & React.RefAttributes<HTMLElement>>;
4123
- export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4124
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4125
- } & {
4126
- children?: React.ReactNode;
4127
- } & React.RefAttributes<HTMLElement>>;
4128
- export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4129
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4130
- } & {
4131
- children?: React.ReactNode;
4132
- selected?: boolean;
4133
- appearance?: "brand" | "neutral" | "none";
4134
- } & React.RefAttributes<HTMLElement>>;
4135
- export type TableHeaderCellButtonSlot = React.ReactElement<any> | Omit<React.HTMLAttributes<HTMLElement>, "children">;
4136
- export declare const TableHeaderCell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4137
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4138
- } & {
4139
- children?: React.ReactNode;
4140
- aside?: React.ReactNode;
4141
- sortIcon?: React.ReactNode;
4142
- button?: TableHeaderCellButtonSlot;
4143
- sortable?: boolean;
4144
- sortDirection?: TableSortDirection;
4145
- columnId?: string | number;
4146
- onSort?: (direction: TableSortDirection, columnId?: string) => void;
4147
- } & React.RefAttributes<HTMLElement>>;
4148
- export declare const TableCell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4149
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4150
- } & {
4151
- children?: React.ReactNode;
4152
- } & React.RefAttributes<HTMLElement>>;
4153
- export type TableCellLayoutSlot = React.ReactNode | React.HTMLAttributes<HTMLSpanElement>;
4154
- export type TableCellLayoutProps = ElementProps & {
4155
- children?: React.ReactNode;
4156
- main?: TableCellLayoutSlot;
4157
- media?: TableCellLayoutSlot;
4158
- description?: TableCellLayoutSlot;
4159
- appearance?: "primary";
4160
- truncate?: boolean;
4161
- };
4162
- export type SpanSlotProps = React.ReactNode | React.HTMLAttributes<HTMLSpanElement>;
4163
- export declare const TableCellLayout: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4164
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4165
- } & {
4166
- children?: React.ReactNode;
4167
- main?: TableCellLayoutSlot;
4168
- media?: TableCellLayoutSlot;
4169
- description?: TableCellLayoutSlot;
4170
- appearance?: "primary";
4171
- truncate?: boolean;
4172
- } & React.RefAttributes<HTMLElement>>;
4173
- export declare const TableCellActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4174
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4175
- } & {
4176
- children?: React.ReactNode;
4177
- visible?: boolean;
4178
- } & React.RefAttributes<HTMLElement>>;
4179
- export declare const TableSelectionCell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4180
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4181
- } & {
4182
- type?: "checkbox" | "radio";
4183
- checked?: boolean | "mixed";
4184
- subtle?: boolean;
4185
- invisible?: boolean;
4186
- hidden?: boolean;
4187
- checkboxIndicator?: SelectionIndicatorSlot;
4188
- radioIndicator?: SelectionIndicatorSlot;
4189
- onSelectionChange?: (checked: boolean, type: "checkbox" | "radio") => void;
4190
- } & React.RefAttributes<HTMLElement>>;
4191
- export declare const TableResizeHandle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4192
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4193
- } & {
4194
- value?: number;
4195
- min?: number;
4196
- max?: number;
4197
- step?: number;
4198
- label?: string;
4199
- onResize?: (delta: number, value: number, event?: Event) => void;
4200
- } & React.RefAttributes<HTMLElement>>;
4201
- export type TextAreaAppearance = "outline" | "filled-darker" | "filled-lighter" | "filled-darker-shadow" | "filled-lighter-shadow";
4202
- export type TextAreaSize = "small" | "medium" | "large";
4203
- export type TextAreaResize = "none" | "horizontal" | "vertical" | "both";
4204
- export type TextAreaChangeData = {
4205
- value: string;
4206
- };
4207
- export type TextAreaProps = Omit<NativeClickHostProps<HTMLTextAreaElement>, "onChange" | "defaultValue"> & {
4208
- label?: string;
4209
- value?: string | number | readonly string[];
4210
- defaultValue?: string | number | readonly string[];
4211
- textarea?: React.ReactElement<React.TextareaHTMLAttributes<HTMLTextAreaElement>> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
4212
- rows?: number;
4213
- cols?: number;
4214
- autoComplete?: string;
4215
- dirName?: string;
4216
- form?: string;
4217
- maxLength?: number;
4218
- minLength?: number;
4219
- name?: string;
4220
- wrap?: "hard" | "soft" | "off";
4221
- placeholder?: string;
4222
- disabled?: boolean;
4223
- required?: boolean;
4224
- readOnly?: boolean;
4225
- appearance?: TextAreaAppearance;
4226
- size?: TextAreaSize;
4227
- resize?: TextAreaResize;
4228
- onValueChange?: (value: string) => void;
4229
- onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaChangeData) => void;
4230
- };
4231
- export declare const TextArea: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLTextAreaElement>, "defaultValue" | "onChange"> & {
4232
- label?: string;
4233
- value?: string | number | readonly string[];
4234
- defaultValue?: string | number | readonly string[];
4235
- textarea?: React.ReactElement<React.TextareaHTMLAttributes<HTMLTextAreaElement>> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
4236
- rows?: number;
4237
- cols?: number;
4238
- autoComplete?: string;
4239
- dirName?: string;
4240
- form?: string;
4241
- maxLength?: number;
4242
- minLength?: number;
4243
- name?: string;
4244
- wrap?: "hard" | "soft" | "off";
4245
- placeholder?: string;
4246
- disabled?: boolean;
4247
- required?: boolean;
4248
- readOnly?: boolean;
4249
- appearance?: TextAreaAppearance;
4250
- size?: TextAreaSize;
4251
- resize?: TextAreaResize;
4252
- onValueChange?: (value: string) => void;
4253
- onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaChangeData) => void;
4254
- } & React.RefAttributes<HTMLElement>>;
4255
- export type CheckboxCheckedState = boolean | "mixed";
4256
- export type CheckboxProps = Omit<NativeClickHostProps<HTMLInputElement>, "onChange" | "children"> & {
4257
- children?: never;
4258
- checked?: CheckboxCheckedState;
4259
- defaultChecked?: CheckboxCheckedState;
4260
- disabled?: boolean;
4261
- disabledFocusable?: boolean;
4262
- required?: boolean;
4263
- name?: string;
4264
- form?: string;
4265
- value?: string;
4266
- label?: React.ReactNode;
4267
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
4268
- indicator?: React.ReactNode;
4269
- labelPosition?: "before" | "after";
4270
- shape?: "square" | "circular";
4271
- size?: "small" | "medium" | "large";
4272
- onCheckedChange?: (checked: boolean) => void;
4273
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
4274
- checked: CheckboxCheckedState;
4275
- }) => void;
4276
- };
4277
- export declare const Checkbox: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "children" | "onChange"> & {
4278
- children?: never;
4279
- checked?: CheckboxCheckedState;
4280
- defaultChecked?: CheckboxCheckedState;
4281
- disabled?: boolean;
4282
- disabledFocusable?: boolean;
4283
- required?: boolean;
4284
- name?: string;
4285
- form?: string;
4286
- value?: string;
4287
- label?: React.ReactNode;
4288
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
4289
- indicator?: React.ReactNode;
4290
- labelPosition?: "before" | "after";
4291
- shape?: "square" | "circular";
4292
- size?: "small" | "medium" | "large";
4293
- onCheckedChange?: (checked: boolean) => void;
4294
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
4295
- checked: CheckboxCheckedState;
4296
- }) => void;
4297
- } & React.RefAttributes<HTMLElement>>;
4298
- export type SwitchProps = Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
4299
- label?: React.ReactNode;
4300
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
4301
- indicator?: React.ReactNode;
4302
- checked?: boolean;
4303
- defaultChecked?: boolean;
4304
- disabled?: boolean;
4305
- disabledFocusable?: boolean;
4306
- required?: boolean;
4307
- name?: string;
4308
- form?: string;
4309
- value?: string;
4310
- size?: "small" | "medium";
4311
- labelPosition?: "before" | "after" | "above";
4312
- onCheckedChange?: (checked: boolean) => void;
4313
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
4314
- checked: boolean;
4315
- }) => void;
4316
- };
4317
- export declare const Switch: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
4318
- label?: React.ReactNode;
4319
- input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
4320
- indicator?: React.ReactNode;
4321
- checked?: boolean;
4322
- defaultChecked?: boolean;
4323
- disabled?: boolean;
4324
- disabledFocusable?: boolean;
4325
- required?: boolean;
4326
- name?: string;
4327
- form?: string;
4328
- value?: string;
4329
- size?: "small" | "medium";
4330
- labelPosition?: "before" | "after" | "above";
4331
- onCheckedChange?: (checked: boolean) => void;
4332
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
4333
- checked: boolean;
4334
- }) => void;
4335
- } & React.RefAttributes<HTMLElement>>;
4336
- export type SpinnerContextValue = {
4337
- size?: SpinnerSize;
4338
- };
4339
- export declare const SpinnerContextProvider: React.Provider<SpinnerContextValue | undefined>;
4340
- export declare function useSpinnerContext(): SpinnerContextValue;
4341
- export declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4342
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4343
- } & {
4344
- label?: React.ReactNode;
4345
- spinner?: React.ReactNode;
4346
- spinnerTail?: React.ReactNode;
4347
- size?: SpinnerSize;
4348
- appearance?: SpinnerAppearance;
4349
- labelPosition?: SpinnerLabelPosition;
4350
- delay?: number;
4351
- children?: React.ReactNode;
4352
- } & React.RefAttributes<HTMLElement>>;
4353
- export declare const MessageBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4354
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4355
- } & {
4356
- intent?: MessageBarIntent;
4357
- politeness?: MessageBarPoliteness;
4358
- shape?: MessageBarShape;
4359
- layout?: MessageBarLayout;
4360
- icon?: React.ReactNode;
4361
- bottomReflowSpacer?: React.ReactNode;
4362
- children?: React.ReactNode;
4363
- } & React.RefAttributes<HTMLElement>>;
4364
- export declare const MessageBarActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4365
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4366
- } & {
4367
- containerAction?: React.ReactNode;
4368
- children?: React.ReactNode;
4369
- } & React.RefAttributes<HTMLElement>>;
4370
- export declare const MessageBarBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4371
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4372
- } & {
4373
- children?: React.ReactNode;
4374
- } & React.RefAttributes<HTMLElement>>;
4375
- export declare const MessageBarTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4376
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4377
- } & {
4378
- children?: React.ReactNode;
4379
- } & React.RefAttributes<HTMLElement>>;
4380
- export declare const MessageBarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4381
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4382
- } & {
4383
- animate?: MessageBarGroupAnimation;
4384
- children?: React.ReactNode;
4385
- } & React.RefAttributes<HTMLElement>>;
4386
- export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4387
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4388
- } & {
4389
- intent?: "info" | "success" | "warning" | "error";
4390
- appearance?: "primary" | "inverted";
4391
- assertive?: boolean;
4392
- dismissible?: boolean;
4393
- dismissLabel?: string;
4394
- onDismiss?: () => void;
4395
- icon?: React.ReactNode;
4396
- avatar?: React.ReactNode;
4397
- action?: React.ReactNode;
4398
- actions?: React.ReactNode;
4399
- } & React.RefAttributes<HTMLElement>>;
4400
- export type ToastProps = Omit<ElementProps, "title"> & Omit<ToastDispatchOptions, "appearance"> & {
4401
- appearance?: "brand" | "inverted";
4402
- children?: React.ReactNode;
4403
- onDismiss?: (id: string, reason: string) => void;
4404
- };
4405
- export declare const ToastTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4406
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4407
- } & {
4408
- media?: React.ReactNode;
4409
- action?: React.ReactNode;
4410
- children?: React.ReactNode;
4411
- } & React.RefAttributes<HTMLElement>>;
4412
- export declare const ToastBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4413
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4414
- } & {
4415
- subtitle?: React.ReactNode;
4416
- children?: React.ReactNode;
4417
- } & React.RefAttributes<HTMLElement>>;
4418
- export declare const ToastFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4419
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4420
- } & {
4421
- children?: React.ReactNode;
4422
- } & React.RefAttributes<HTMLElement>>;
4423
- export declare function ToastTrigger({ children, disableButtonEnhancement }: {
4424
- children: React.ReactElement;
4425
- disableButtonEnhancement?: boolean;
4426
- }): React.ReactElement;
4427
- export declare const Toast: React.ForwardRefExoticComponent<Omit<ElementProps, "title"> & Omit<ToastDispatchOptions, "appearance"> & {
4428
- appearance?: "brand" | "inverted";
4429
- children?: React.ReactNode;
4430
- onDismiss?: (id: string, reason: string) => void;
4431
- } & React.RefAttributes<HTMLElement>>;
4432
- export declare const Toaster: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4433
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4434
- } & {
4435
- position?: ToastPosition;
4436
- limit?: number;
4437
- inline?: boolean;
4438
- toasterId?: string;
4439
- mountNode?: PortalMountNode;
4440
- announce?: ToastAnnounce;
4441
- children?: React.ReactNode;
4442
- } & React.RefAttributes<HTMLElement>>;
4443
- export declare function useToastController(toasterId?: string): ToastControllerValue;
4444
- export type SkeletonContextValue = {
4445
- animation?: SkeletonAnimation;
4446
- appearance?: SkeletonAppearance;
4447
- size?: SkeletonItemSize;
4448
- shape?: SkeletonShape;
4449
- };
4450
- export declare const SkeletonContextProvider: React.Provider<SkeletonContextValue | undefined>;
4451
- export declare function useSkeletonContext(): SkeletonContextValue;
4452
- export declare const Skeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4453
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4454
- } & {
4455
- shape?: SkeletonShape;
4456
- width?: string | number;
4457
- height?: string | number;
4458
- animated?: boolean;
4459
- animation?: SkeletonAnimation;
4460
- appearance?: SkeletonAppearance;
4461
- size?: SkeletonItemSize;
4462
- children?: React.ReactNode;
4463
- } & React.RefAttributes<HTMLElement>>;
4464
- export declare const SkeletonItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4465
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4466
- } & {
4467
- animation?: SkeletonAnimation;
4468
- appearance?: SkeletonAppearance;
4469
- size?: SkeletonItemSize;
4470
- shape?: "rectangle" | "square" | "circle";
4471
- } & React.RefAttributes<HTMLElement>>;
4472
- export type LinkProps = NativeClickHostProps<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> & {
4473
- href?: string;
4474
- target?: string;
4475
- rel?: string;
4476
- download?: string | boolean;
4477
- hrefLang?: string;
4478
- hreflang?: string;
4479
- media?: string;
4480
- ping?: string;
4481
- type?: string;
4482
- referrerPolicy?: string;
4483
- title?: string;
4484
- appearance?: "default" | "subtle";
4485
- underline?: "always" | "hover" | "none";
4486
- disabled?: boolean;
4487
- disabledFocusable?: boolean;
4488
- inline?: boolean;
4489
- as?: "a" | "button" | "span";
4490
- children?: React.ReactNode;
4491
- };
4492
- export declare const Link: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> & {
4493
- onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> | undefined;
4494
- onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> | undefined;
4495
- } & {
4496
- href?: string;
4497
- target?: string;
4498
- rel?: string;
4499
- download?: string | boolean;
4500
- hrefLang?: string;
4501
- hreflang?: string;
4502
- media?: string;
4503
- ping?: string;
4504
- type?: string;
4505
- referrerPolicy?: string;
4506
- title?: string;
4507
- appearance?: "default" | "subtle";
4508
- underline?: "always" | "hover" | "none";
4509
- disabled?: boolean;
4510
- disabledFocusable?: boolean;
4511
- inline?: boolean;
4512
- as?: "a" | "button" | "span";
4513
- children?: React.ReactNode;
4514
- } & React.RefAttributes<HTMLElement>>;
4515
- export declare const Divider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4516
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4517
- } & {
4518
- orientation?: "horizontal" | "vertical";
4519
- vertical?: boolean;
4520
- align?: "start" | "center" | "end";
4521
- alignContent?: "start" | "center" | "end";
4522
- appearance?: DividerAppearance;
4523
- inset?: boolean;
4524
- wrapper?: React.ReactNode;
4525
- children?: React.ReactNode;
4526
- } & React.RefAttributes<HTMLElement>>;
4527
- export type AccordionProviderValue = {
4528
- openItems: AccordionItemValue[];
4529
- requestToggle: (data: {
4530
- event: Event;
4531
- value: AccordionItemValue;
4532
- }) => void;
4533
- collapsible: boolean;
4534
- multiple: boolean;
4535
- navigation: AccordionNavigation | undefined;
4536
- };
4537
- export declare function AccordionProvider({ value, children }: {
4538
- value: AccordionProviderValue;
4539
- children?: React.ReactNode;
4540
- }): React.ReactElement;
4541
- export type AccordionToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
4542
- export declare const Accordion: <TValue extends AccordionItemValue = AccordionItemValue>(props: ElementProps & {
4543
- mode?: "single" | "multiple";
4544
- multiple?: boolean;
4545
- collapsible?: boolean;
4546
- navigation?: AccordionNavigation;
4547
- openItems?: TValue | readonly TValue[];
4548
- defaultOpenItems?: TValue | readonly TValue[];
4549
- onToggle?: (event: AccordionToggleEvent, data: {
4550
- value: TValue;
4551
- openItems: TValue[];
4552
- }) => void;
4553
- children?: React.ReactNode;
4554
- } & React.RefAttributes<HTMLElement>) => React.ReactElement;
4555
- export declare const AccordionItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4556
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4557
- } & {
4558
- value: AccordionItemValue;
4559
- heading?: string;
4560
- open?: boolean;
4561
- defaultOpen?: boolean;
4562
- disabled?: boolean;
4563
- onOpenChange?: (open: boolean) => void;
4564
- children?: React.ReactNode;
4565
- } & React.RefAttributes<HTMLElement>>;
4566
- export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
4567
- onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
4568
- onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
4569
- } & {
4570
- expandIconPosition?: "start" | "end";
4571
- inline?: boolean;
4572
- size?: "small" | "medium" | "large" | "extra-large";
4573
- icon?: React.ReactNode;
4574
- expandIcon?: React.ReactNode;
4575
- button?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
4576
- children?: React.ReactNode;
4577
- } & React.RefAttributes<HTMLElement>>;
4578
- export declare const AccordionPanel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4579
- [attribute: `data-${string}`]: string | number | boolean | undefined;
4580
- } & {
4581
- children?: React.ReactNode;
4582
- collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
4583
- } & React.RefAttributes<HTMLElement>>;
1
+ export * from "./index.js";