@spfx-fast/sharepoint-ui 0.4.2 → 0.4.3

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 (57) hide show
  1. package/AGENTS.md +23 -3
  2. package/QUICKSTART.md +133 -0
  3. package/README.md +3 -1
  4. package/components.json +168 -28
  5. package/dist/appearance.js +4 -4
  6. package/dist/elements/alert.js +26 -2
  7. package/dist/elements/avatar.js +1 -1
  8. package/dist/elements/button.js +1 -1
  9. package/dist/elements/carousel.js +5 -2
  10. package/dist/elements/color-picker.js +1 -1
  11. package/dist/elements/combobox.js +5 -5
  12. package/dist/elements/data-grid-model.d.ts +3 -0
  13. package/dist/elements/data-grid.d.ts +2 -1
  14. package/dist/elements/data-grid.js +19 -10
  15. package/dist/elements/date-picker.js +1 -1
  16. package/dist/elements/dialog.js +1 -1
  17. package/dist/elements/file-upload.js +1 -1
  18. package/dist/elements/floating-position.d.ts +10 -0
  19. package/dist/elements/floating-position.js +53 -0
  20. package/dist/elements/info.js +1 -1
  21. package/dist/elements/input.js +2 -2
  22. package/dist/elements/link.js +1 -1
  23. package/dist/elements/message-bar.js +33 -5
  24. package/dist/elements/nav.js +4 -1
  25. package/dist/elements/overflow.d.ts +1 -0
  26. package/dist/elements/overflow.js +2 -2
  27. package/dist/elements/popover.js +1 -1
  28. package/dist/elements/rating.js +3 -3
  29. package/dist/elements/rich-text-editor.d.ts +15 -1
  30. package/dist/elements/rich-text-editor.js +938 -79
  31. package/dist/elements/search.js +3 -10
  32. package/dist/elements/select.js +2 -2
  33. package/dist/elements/shared.d.ts +4 -1
  34. package/dist/elements/shared.js +14 -1
  35. package/dist/elements/sharepoint-field-basic-controls.d.ts +1 -0
  36. package/dist/elements/sharepoint-field-basic-controls.js +14 -0
  37. package/dist/elements/sharepoint-fields.d.ts +29 -0
  38. package/dist/elements/sharepoint-fields.js +460 -0
  39. package/dist/elements/spin-button.js +2 -2
  40. package/dist/elements/tag-picker.js +29 -11
  41. package/dist/elements/textarea.js +2 -2
  42. package/dist/elements/toaster.js +2 -1
  43. package/dist/elements/tooltip.js +18 -1
  44. package/dist/elements/tree.js +1 -1
  45. package/dist/elements.d.ts +3 -2
  46. package/dist/elements.js +4 -1
  47. package/dist/index.d.ts +6 -4
  48. package/dist/index.js +4 -2
  49. package/dist/react.d.ts +142 -10
  50. package/dist/react.js +306 -46
  51. package/dist/sharepoint-fields.d.ts +135 -0
  52. package/dist/sharepoint-fields.js +402 -0
  53. package/dist/theme.d.ts +9 -1
  54. package/dist/theme.js +78 -1
  55. package/package.json +11 -2
  56. package/skills/sharepoint-ui/SKILL.md +1 -1
  57. package/skills/sharepoint-ui/references/sharepoint-patterns.md +1 -1
package/dist/react.d.ts CHANGED
@@ -23,6 +23,9 @@ export type DialogOnOpenChangeData = {
23
23
  import { type ProgressBarColor, type ProgressBarShape, type ProgressBarThickness } from "./elements/progress-bar.js";
24
24
  export type { ProgressBarColor, ProgressBarShape, ProgressBarThickness } from "./elements/progress-bar.js";
25
25
  export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from "./elements/spin-button.js";
26
+ import { type RichTextEditorImageUploader, type RichTextEditorLinkPicker, type SharePointMultiLineField } from "./elements/rich-text-editor.js";
27
+ export { getRichTextEditorFieldOptions, type SharePointMultiLineField, type RichTextEditorImageUploadResult, type RichTextEditorImageUploader, type RichTextEditorLink, type RichTextEditorLinkPicker } from "./elements/rich-text-editor.js";
28
+ import { type SharePointFieldMetadata, type SharePointFieldValue } from "./sharepoint-fields.js";
26
29
  import { type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
27
30
  import { type DividerAppearance } from "./elements/divider.js";
28
31
  export type { DividerAppearance } from "./elements/divider.js";
@@ -30,7 +33,8 @@ import { type AccordionItemValue, type AccordionNavigation } from "./elements/ac
30
33
  import { type AvatarColor } from "./elements/avatar.js";
31
34
  import { type PersonaPresence, type PersonaSize } from "./elements/persona.js";
32
35
  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";
36
+ import { type DataGridCellEdit, type DataGridCellEditError, 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";
37
+ export type { DataGridCellEditError } from "./elements/data-grid-model.js";
34
38
  import { type TreeNode } from "./elements/tree-model.js";
35
39
  import { type InteractionTagSelectData, type TagAppearance, type TagGroupSelectData, type TagSize } from "./elements/tags.js";
36
40
  import { type TagPickerOpenChangeType } from "./elements/tag-picker.js";
@@ -75,10 +79,11 @@ import { type InfoPlacement } from "./elements/info.js";
75
79
  import { type CarouselAlign, type CarouselAppearance, type CarouselMotion } from "./elements/carousel.js";
76
80
  export type { CarouselIndexChangeData } from "./elements/carousel.js";
77
81
  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";
82
+ import { type OverflowAxis, type OverflowDensity, type OverflowState } from "./elements/overflow.js";
83
+ export type { OverflowAxis, OverflowDensity, OverflowState } from "./elements/overflow.js";
80
84
  import { type SharePointUIAppearance, type SharePointUIBaseAppearance, type SharePointUIDensity, type SharePointUIStyleTokens } from "./appearance.js";
81
85
  import { type FluentThemeTokens, type SharePointUIDesignTheme } from "./theme.js";
86
+ export { getSharePointThemeColorPresets, type SharePointThemeColorPreset } from "./theme.js";
82
87
  export { createResizeObserverFromDocument, getRTLRootMargin, scrollToItemDynamic, scrollToItemStatic, useDynamicVirtualizerMeasure, useIntersectionObserver, useMeasureList, useResizeObserverRef_unstable, useStaticVirtualizerMeasure } from "./virtualizer-hooks.js";
83
88
  export type { IndexedResizeCallbackElement, ResizeCallbackWithRef, ScrollToItemDynamicParams, ScrollToItemStaticParams, VirtualizerContextMeasureProps, VirtualizerMeasureDynamicProps, VirtualizerMeasureProps } from "./virtualizer-hooks.js";
84
89
  export { composeSharePointUIDesignThemes } from "./theme.js";
@@ -143,6 +148,12 @@ export type SharePointUIStrings = {
143
148
  close: string;
144
149
  dialogLabel?: string;
145
150
  richTextEditorLabel?: string;
151
+ richTextTextColor?: string;
152
+ richTextHighlightColor?: string;
153
+ richTextCustomColor?: string;
154
+ richTextThemeAccent?: string;
155
+ richTextFontFamily?: string;
156
+ richTextFontSize?: string;
146
157
  dismiss: string;
147
158
  notifications?: string;
148
159
  clear: string;
@@ -155,6 +166,15 @@ export type SharePointUIStrings = {
155
166
  invalidValue: string;
156
167
  moreInformation: string;
157
168
  people?: string;
169
+ presenceAvailable?: string;
170
+ presenceBusy?: string;
171
+ presenceDoNotDisturb?: string;
172
+ presenceAway?: string;
173
+ presenceOffline?: string;
174
+ presenceUnknown?: string;
175
+ presenceOutOfOffice?: string;
176
+ presenceBlocked?: string;
177
+ presenceOutOfOfficeLabel?: string;
158
178
  showMorePeople?: string;
159
179
  showFewerPeople?: string;
160
180
  navigationMenu?: string;
@@ -178,6 +198,9 @@ export type SharePointUIStrings = {
178
198
  dataGridSortPriority?: string;
179
199
  dataGridResizeLabel?: string;
180
200
  dataGridReorderLabel?: string;
201
+ dataGridReorderHint?: string;
202
+ dataGridLoadError?: string;
203
+ dataGridEditError?: string;
181
204
  dataGridEmptyGroupLabel?: string;
182
205
  dataGridExpandGroupLabel?: string;
183
206
  dataGridCollapseGroupLabel?: string;
@@ -219,6 +242,15 @@ export type SharePointUIStrings = {
219
242
  richTextBold: string;
220
243
  richTextItalic: string;
221
244
  richTextUnderline: string;
245
+ richTextStrike?: string;
246
+ richTextClearFormatting?: string;
247
+ richTextFormatBlock?: string;
248
+ richTextParagraph?: string;
249
+ richTextHeading1?: string;
250
+ richTextHeading2?: string;
251
+ richTextHeading3?: string;
252
+ richTextBlockquote?: string;
253
+ richTextPreformatted?: string;
222
254
  richTextBulletList: string;
223
255
  richTextNumberList: string;
224
256
  richTextLink: string;
@@ -269,6 +301,24 @@ export type SharePointUIStrings = {
269
301
  teachingPopoverPageLabel?: string;
270
302
  overflowDescription?: string;
271
303
  overflowMenuLabel?: string;
304
+ } & {
305
+ richTextLinkDialog?: string;
306
+ richTextLinkNewTab?: string;
307
+ richTextLinkText?: string;
308
+ richTextLinkTitle?: string;
309
+ richTextLinkApply?: string;
310
+ richTextLinkRemove?: string;
311
+ richTextLinkCancel?: string;
312
+ richTextLinkInvalid?: string;
313
+ richTextLinkBrowse?: string;
314
+ richTextLinkBrowsing?: string;
315
+ richTextLinkPickerError?: string;
316
+ richTextSubscript?: string;
317
+ richTextSuperscript?: string;
318
+ richTextAlignLeft?: string;
319
+ richTextAlignCenter?: string;
320
+ richTextAlignRight?: string;
321
+ richTextAlignJustify?: string;
272
322
  };
273
323
  export type AvatarGroupContextValue = {
274
324
  size: number;
@@ -743,12 +793,13 @@ export declare function useOverflowMenu<TElement extends HTMLElement = HTMLEleme
743
793
  overflowCount: number;
744
794
  isOverflowing: boolean;
745
795
  };
746
- export declare function Overflow({ children, label, minimumVisible, overflowDirection, overflowAxis, hasHiddenItems, overflowContent, padding, onOverflowChange, onOverflowItemSelect, ...props }: ElementProps & {
796
+ export declare function Overflow({ children, label, minimumVisible, overflowDirection, overflowAxis, density, hasHiddenItems, overflowContent, padding, onOverflowChange, onOverflowItemSelect, ...props }: ElementProps & {
747
797
  children?: React.ReactNode;
748
798
  label?: string;
749
799
  minimumVisible?: number;
750
800
  overflowDirection?: "start" | "end";
751
801
  overflowAxis?: OverflowAxis;
802
+ density?: OverflowDensity;
752
803
  hasHiddenItems?: boolean;
753
804
  overflowContent?: React.ReactNode;
754
805
  padding?: number;
@@ -1333,6 +1384,7 @@ export type ComboboxActiveOptionChangeData = {
1333
1384
  export type ComboBoxProps = NativeClickHostProps<HTMLInputElement> & {
1334
1385
  label?: string;
1335
1386
  selectedLabel?: string;
1387
+ requiredMessage?: string;
1336
1388
  value?: string;
1337
1389
  defaultValue?: string;
1338
1390
  selectedValue?: string;
@@ -1375,6 +1427,7 @@ export declare const ComboBox: React.ForwardRefExoticComponent<Omit<ElementProps
1375
1427
  } & {
1376
1428
  label?: string;
1377
1429
  selectedLabel?: string;
1430
+ requiredMessage?: string;
1378
1431
  value?: string;
1379
1432
  defaultValue?: string;
1380
1433
  selectedValue?: string;
@@ -1564,19 +1617,30 @@ export declare const OptionGroup: React.ForwardRefExoticComponent<React.HTMLAttr
1564
1617
  label?: string;
1565
1618
  children?: React.ReactNode;
1566
1619
  } & React.RefAttributes<HTMLElement>>;
1620
+ export type RichTextImageUploadErrorData = {
1621
+ fileName: string;
1622
+ error: unknown;
1623
+ };
1624
+ export type RichTextEditorContentMode = "plain" | "restricted" | "rich" | "html";
1567
1625
  export type RichTextEditorProps = NativeClickHostProps<HTMLDivElement> & {
1568
1626
  label?: string;
1569
1627
  editorLabel?: string;
1570
1628
  value?: string;
1571
1629
  defaultValue?: string;
1572
1630
  placeholder?: string;
1631
+ field?: SharePointMultiLineField;
1632
+ contentMode?: RichTextEditorContentMode;
1633
+ allowHyperlink?: boolean;
1573
1634
  disabled?: boolean;
1574
1635
  readOnly?: boolean;
1575
1636
  required?: boolean;
1576
1637
  name?: string;
1577
1638
  form?: string;
1578
- onValueChange?: (html: string) => void;
1579
- onImageUpload?: (file: File) => Promise<string>;
1639
+ onValueChange?: (value: string) => void;
1640
+ onImageUpload?: RichTextEditorImageUploader;
1641
+ onImageUploadError?: (data: RichTextImageUploadErrorData) => void;
1642
+ linkPicker?: RichTextEditorLinkPicker;
1643
+ onLinkPickerError?: (error: unknown) => void;
1580
1644
  };
1581
1645
  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
1646
  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
@@ -1587,13 +1651,19 @@ export declare const RichTextEditor: React.ForwardRefExoticComponent<Omit<Elemen
1587
1651
  value?: string;
1588
1652
  defaultValue?: string;
1589
1653
  placeholder?: string;
1654
+ field?: SharePointMultiLineField;
1655
+ contentMode?: RichTextEditorContentMode;
1656
+ allowHyperlink?: boolean;
1590
1657
  disabled?: boolean;
1591
1658
  readOnly?: boolean;
1592
1659
  required?: boolean;
1593
1660
  name?: string;
1594
1661
  form?: string;
1595
- onValueChange?: (html: string) => void;
1596
- onImageUpload?: (file: File) => Promise<string>;
1662
+ onValueChange?: (value: string) => void;
1663
+ onImageUpload?: RichTextEditorImageUploader;
1664
+ onImageUploadError?: (data: RichTextImageUploadErrorData) => void;
1665
+ linkPicker?: RichTextEditorLinkPicker;
1666
+ onLinkPickerError?: (error: unknown) => void;
1597
1667
  } & React.RefAttributes<HTMLElement>>;
1598
1668
  export type BadgeProps = ElementProps & {
1599
1669
  children?: React.ReactNode;
@@ -1770,6 +1840,7 @@ export type TagPickerProps = Omit<ElementProps, "onChange"> & {
1770
1840
  children?: React.ReactNode;
1771
1841
  label?: string;
1772
1842
  selectedLabel?: string;
1843
+ requiredMessage?: string;
1773
1844
  form?: string;
1774
1845
  disabled?: boolean;
1775
1846
  selectedOptions?: readonly string[];
@@ -1792,6 +1863,7 @@ export declare const TagPicker: React.ForwardRefExoticComponent<Omit<ElementProp
1792
1863
  children?: React.ReactNode;
1793
1864
  label?: string;
1794
1865
  selectedLabel?: string;
1866
+ requiredMessage?: string;
1795
1867
  form?: string;
1796
1868
  disabled?: boolean;
1797
1869
  selectedOptions?: readonly string[];
@@ -1884,6 +1956,7 @@ export type RatingProps = Omit<ElementProps, "onChange"> & {
1884
1956
  size?: "small" | "medium" | "large" | "extra-large";
1885
1957
  color?: "brand" | "marigold" | "neutral";
1886
1958
  label?: string;
1959
+ requiredMessage?: string;
1887
1960
  itemLabel?: (rating: number) => string;
1888
1961
  iconFilled?: React.ElementType;
1889
1962
  iconOutline?: React.ElementType;
@@ -1904,6 +1977,7 @@ export declare const Rating: React.ForwardRefExoticComponent<Omit<ElementProps,
1904
1977
  size?: "small" | "medium" | "large" | "extra-large";
1905
1978
  color?: "brand" | "marigold" | "neutral";
1906
1979
  label?: string;
1980
+ requiredMessage?: string;
1907
1981
  itemLabel?: (rating: number) => string;
1908
1982
  iconFilled?: React.ElementType;
1909
1983
  iconOutline?: React.ElementType;
@@ -1989,7 +2063,7 @@ export declare const CarouselNav: React.ForwardRefExoticComponent<React.HTMLAttr
1989
2063
  } & {
1990
2064
  children?: React.ReactNode;
1991
2065
  label?: string;
1992
- appearance?: "brand";
2066
+ appearance?: "brand" | "thumbnails";
1993
2067
  slot?: string;
1994
2068
  } & React.RefAttributes<HTMLElement>>;
1995
2069
  export declare const CarouselNavButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
@@ -2196,6 +2270,7 @@ export declare const Nav: React.ForwardRefExoticComponent<Omit<ElementProps, "on
2196
2270
  defaultOpen?: boolean;
2197
2271
  collapsed?: boolean;
2198
2272
  defaultCollapsed?: boolean;
2273
+ fullWidth?: boolean;
2199
2274
  collapsible?: boolean;
2200
2275
  multiple?: boolean;
2201
2276
  density?: "small" | "medium" | "large";
@@ -3072,7 +3147,7 @@ export type DataGridColumnResizeData = {
3072
3147
  };
3073
3148
  export type DataGridColumnResizeEvent = MouseEvent | KeyboardEvent | TouchEvent | undefined;
3074
3149
  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 & {
3150
+ 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, onCellEditError, 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
3151
  items?: T[];
3077
3152
  dataSource?: DataGridDataSource<T>;
3078
3153
  onDataLoadError?: (error: unknown, range: {
@@ -3113,6 +3188,7 @@ declare function VirtualDataGrid<T>({ items, dataSource, onDataLoadError, onData
3113
3188
  filterLabel?: string;
3114
3189
  renderCell?: (item: T, column: DataGridColumn<T>, rowIndex: number) => React.ReactNode;
3115
3190
  onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3191
+ onCellEditError?: (error: DataGridCellEditError<T>) => void;
3116
3192
  onCellsEdit?: (edits: readonly DataGridCellEdit<T>[]) => void | Promise<void>;
3117
3193
  validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3118
3194
  rowLabel?: string;
@@ -3206,6 +3282,7 @@ export type DataGridCompositionContextValue<T> = {
3206
3282
  rowLabel: string;
3207
3283
  editedCells: Record<string, DataGridEditValue>;
3208
3284
  onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3285
+ onCellEditError?: (error: DataGridCellEditError<T>) => void;
3209
3286
  validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3210
3287
  setEditedCell: (key: string, value: DataGridEditValue) => void;
3211
3288
  };
@@ -3293,6 +3370,7 @@ export type DataGridCompositionProps<T> = Omit<ElementProps, "children"> & {
3293
3370
  onColumnOrderChange?: (columnIds: string[]) => void;
3294
3371
  reorderLabel?: string;
3295
3372
  onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3373
+ onCellEditError?: (error: DataGridCellEditError<T>) => void;
3296
3374
  validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3297
3375
  rowLabel?: string;
3298
3376
  editHint?: string;
@@ -3894,6 +3972,35 @@ export type SwatchPickerOnSelectionChangeData = (SwatchPickerSelection & {
3894
3972
  type: "click";
3895
3973
  selectedSwatch: string;
3896
3974
  });
3975
+ export type SavedSwatchPalette = {
3976
+ id: string;
3977
+ name: string;
3978
+ colors: readonly {
3979
+ value: string;
3980
+ color: string;
3981
+ label?: string;
3982
+ }[];
3983
+ };
3984
+ export type SwatchPaletteStore = {
3985
+ list: () => Promise<readonly SavedSwatchPalette[]>;
3986
+ save: (palette: SavedSwatchPalette) => Promise<void>;
3987
+ remove: (id: string) => Promise<void>;
3988
+ };
3989
+ /** Load and persist a user's compact command-shelf choice in this browser. Use a site/app-scoped key. */
3990
+ export declare function useStoredOverflowCompactMode(storageKey: string, defaultCompact?: boolean): {
3991
+ compact: boolean;
3992
+ ready: boolean;
3993
+ setCompact: (compact: boolean) => void;
3994
+ toggleCompact: () => void;
3995
+ };
3996
+ export declare function useSavedSwatchPalettes(store: SwatchPaletteStore): {
3997
+ palettes: readonly SavedSwatchPalette[];
3998
+ loading: boolean;
3999
+ error: unknown;
4000
+ reload: () => Promise<readonly SavedSwatchPalette[]>;
4001
+ save: (palette: SavedSwatchPalette) => Promise<void>;
4002
+ remove: (id: string) => Promise<void>;
4003
+ };
3897
4004
  export type SwatchPickerProps = ElementProps & {
3898
4005
  selectedValue?: string;
3899
4006
  defaultSelectedValue?: string;
@@ -3939,6 +4046,11 @@ export declare const ColorSwatch: React.ForwardRefExoticComponent<React.HTMLAttr
3939
4046
  disabledIcon?: React.ReactNode;
3940
4047
  children?: React.ReactNode;
3941
4048
  } & React.RefAttributes<HTMLElement>>;
4049
+ export type SharePointThemeSwatchesProps = {
4050
+ palette?: Readonly<Record<string, string | undefined>>;
4051
+ labelForColor?: (paletteKey: string) => string;
4052
+ };
4053
+ export declare function SharePointThemeSwatches({ palette, labelForColor }: SharePointThemeSwatchesProps): React.ReactElement;
3942
4054
  export declare const ImageSwatch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3943
4055
  [attribute: `data-${string}`]: string | number | boolean | undefined;
3944
4056
  } & {
@@ -4581,3 +4693,23 @@ export declare const AccordionPanel: React.ForwardRefExoticComponent<React.HTMLA
4581
4693
  children?: React.ReactNode;
4582
4694
  collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
4583
4695
  } & React.RefAttributes<HTMLElement>>;
4696
+ export type SharePointFieldOption = {
4697
+ value: string | number;
4698
+ label: string;
4699
+ disabled?: boolean;
4700
+ };
4701
+ export type SharePointFieldProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & {
4702
+ field: SharePointFieldMetadata;
4703
+ value?: SharePointFieldValue;
4704
+ defaultValue?: SharePointFieldValue;
4705
+ options?: readonly SharePointFieldOption[];
4706
+ onValueChange?: (value: SharePointFieldValue) => void;
4707
+ disabled?: boolean;
4708
+ hint?: React.ReactNode;
4709
+ validationMessage?: React.ReactNode;
4710
+ renderUnsupported?: (field: SharePointFieldMetadata, reason: string) => React.ReactNode;
4711
+ addChoiceLabel?: string;
4712
+ emptyOptionLabel?: string;
4713
+ };
4714
+ /** Render a SharePoint field recipe using the library's matching form control. */
4715
+ export declare function SharePointField({ field, value, defaultValue, options: providedOptions, onValueChange, disabled, hint, validationMessage, renderUnsupported, addChoiceLabel, emptyOptionLabel, className, style, ...hostProps }: SharePointFieldProps): React.ReactElement | null;