@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.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.
- package/AGENTS.md +211 -0
- package/LICENSE +21 -0
- package/README.md +897 -2
- package/components.json +5810 -0
- package/dist/appearance.d.ts +6 -0
- package/dist/appearance.js +217 -0
- package/dist/elements/accordion.d.ts +9 -0
- package/dist/elements/accordion.js +338 -0
- package/dist/elements/alert.d.ts +2 -0
- package/dist/elements/alert.js +62 -0
- package/dist/elements/avatar-group-primitives.d.ts +3 -0
- package/dist/elements/avatar-group-primitives.js +189 -0
- package/dist/elements/avatar-group.d.ts +2 -0
- package/dist/elements/avatar-group.js +110 -0
- package/dist/elements/avatar.d.ts +4 -0
- package/dist/elements/avatar.js +251 -0
- package/dist/elements/badge.d.ts +8 -0
- package/dist/elements/badge.js +182 -0
- package/dist/elements/breadcrumb.d.ts +4 -0
- package/dist/elements/breadcrumb.js +233 -0
- package/dist/elements/button-group.d.ts +1 -0
- package/dist/elements/button-group.js +20 -0
- package/dist/elements/button-variants.d.ts +6 -0
- package/dist/elements/button-variants.js +339 -0
- package/dist/elements/button.d.ts +5 -0
- package/dist/elements/button.js +233 -0
- package/dist/elements/card-primitives.d.ts +3 -0
- package/dist/elements/card-primitives.js +83 -0
- package/dist/elements/card.d.ts +5 -0
- package/dist/elements/card.js +213 -0
- package/dist/elements/carousel.d.ts +92 -0
- package/dist/elements/carousel.js +1112 -0
- package/dist/elements/color-picker.d.ts +24 -0
- package/dist/elements/color-picker.js +1004 -0
- package/dist/elements/combobox.d.ts +1 -0
- package/dist/elements/combobox.js +1012 -0
- package/dist/elements/data-grid-model.d.ts +117 -0
- package/dist/elements/data-grid-model.js +294 -0
- package/dist/elements/data-grid.d.ts +29 -0
- package/dist/elements/data-grid.js +1567 -0
- package/dist/elements/date-picker.d.ts +1 -0
- package/dist/elements/date-picker.js +486 -0
- package/dist/elements/dialog.d.ts +23 -0
- package/dist/elements/dialog.js +409 -0
- package/dist/elements/divider.d.ts +2 -0
- package/dist/elements/divider.js +66 -0
- package/dist/elements/drawer.d.ts +3 -0
- package/dist/elements/drawer.js +308 -0
- package/dist/elements/field-composition.d.ts +26 -0
- package/dist/elements/field-composition.js +133 -0
- package/dist/elements/field.d.ts +1 -0
- package/dist/elements/field.js +67 -0
- package/dist/elements/file-upload.d.ts +6 -0
- package/dist/elements/file-upload.js +211 -0
- package/dist/elements/floating-position.d.ts +26 -0
- package/dist/elements/floating-position.js +39 -0
- package/dist/elements/image.d.ts +28 -0
- package/dist/elements/image.js +38 -0
- package/dist/elements/info.d.ts +9 -0
- package/dist/elements/info.js +102 -0
- package/dist/elements/input.d.ts +5 -0
- package/dist/elements/input.js +255 -0
- package/dist/elements/label.d.ts +15 -0
- package/dist/elements/label.js +56 -0
- package/dist/elements/link.d.ts +1 -0
- package/dist/elements/link.js +92 -0
- package/dist/elements/list.d.ts +19 -0
- package/dist/elements/list.js +297 -0
- package/dist/elements/menu.d.ts +33 -0
- package/dist/elements/menu.js +1103 -0
- package/dist/elements/message-bar.d.ts +10 -0
- package/dist/elements/message-bar.js +299 -0
- package/dist/elements/nav.d.ts +32 -0
- package/dist/elements/nav.js +791 -0
- package/dist/elements/overflow.d.ts +9 -0
- package/dist/elements/overflow.js +218 -0
- package/dist/elements/persona.d.ts +3 -0
- package/dist/elements/persona.js +124 -0
- package/dist/elements/popover.d.ts +77 -0
- package/dist/elements/popover.js +840 -0
- package/dist/elements/progress-bar.d.ts +4 -0
- package/dist/elements/progress-bar.js +82 -0
- package/dist/elements/radio-group.d.ts +1 -0
- package/dist/elements/radio-group.js +303 -0
- package/dist/elements/rating-display.d.ts +2 -0
- package/dist/elements/rating-display.js +125 -0
- package/dist/elements/rating.d.ts +2 -0
- package/dist/elements/rating.js +206 -0
- package/dist/elements/rich-text-editor.d.ts +18 -0
- package/dist/elements/rich-text-editor.js +508 -0
- package/dist/elements/search.d.ts +3 -0
- package/dist/elements/search.js +207 -0
- package/dist/elements/select.d.ts +6 -0
- package/dist/elements/select.js +291 -0
- package/dist/elements/shared.d.ts +19 -0
- package/dist/elements/shared.js +396 -0
- package/dist/elements/skeleton.d.ts +6 -0
- package/dist/elements/skeleton.js +91 -0
- package/dist/elements/slider.d.ts +1 -0
- package/dist/elements/slider.js +248 -0
- package/dist/elements/spin-button.d.ts +7 -0
- package/dist/elements/spin-button.js +499 -0
- package/dist/elements/spinner.d.ts +4 -0
- package/dist/elements/spinner.js +124 -0
- package/dist/elements/swatch-picker.d.ts +5 -0
- package/dist/elements/swatch-picker.js +363 -0
- package/dist/elements/table.d.ts +21 -0
- package/dist/elements/table.js +261 -0
- package/dist/elements/tabs.d.ts +1 -0
- package/dist/elements/tabs.js +276 -0
- package/dist/elements/tag-picker.d.ts +29 -0
- package/dist/elements/tag-picker.js +697 -0
- package/dist/elements/tags.d.ts +21 -0
- package/dist/elements/tags.js +421 -0
- package/dist/elements/teaching-popover.d.ts +32 -0
- package/dist/elements/teaching-popover.js +412 -0
- package/dist/elements/text.d.ts +5 -0
- package/dist/elements/text.js +69 -0
- package/dist/elements/textarea.d.ts +1 -0
- package/dist/elements/textarea.js +182 -0
- package/dist/elements/toast.d.ts +25 -0
- package/dist/elements/toast.js +337 -0
- package/dist/elements/toaster.d.ts +6 -0
- package/dist/elements/toaster.js +356 -0
- package/dist/elements/toggle.d.ts +2 -0
- package/dist/elements/toggle.js +246 -0
- package/dist/elements/toolbar.d.ts +12 -0
- package/dist/elements/toolbar.js +381 -0
- package/dist/elements/tooltip.d.ts +76 -0
- package/dist/elements/tooltip.js +510 -0
- package/dist/elements/tree-model.d.ts +19 -0
- package/dist/elements/tree-model.js +34 -0
- package/dist/elements/tree.d.ts +5 -0
- package/dist/elements/tree.js +273 -0
- package/dist/elements/view-card.d.ts +2 -0
- package/dist/elements/view-card.js +78 -0
- package/dist/elements/virtual-list.d.ts +41 -0
- package/dist/elements/virtual-list.js +369 -0
- package/dist/elements.d.ts +72 -0
- package/dist/elements.js +207 -0
- package/dist/index.d.ts +76 -0
- package/dist/index.js +66 -0
- package/dist/react-theme-styles.d.ts +2 -0
- package/dist/react-theme-styles.js +75 -0
- package/dist/react.d.ts +4540 -0
- package/dist/react.js +6799 -0
- package/dist/theme.d.ts +169 -0
- package/dist/theme.js +167 -0
- package/dist/virtualizer-hooks.d.ts +80 -0
- package/dist/virtualizer-hooks.js +253 -0
- package/package.json +87 -4
- package/scripts/generate-token-index.mjs +43 -0
- package/scripts/sync-component-catalog-signatures.mjs +55 -0
- package/scripts/validate-component-catalog.mjs +44 -0
- package/skills/sharepoint-ui/SKILL.md +12 -0
- package/skills/sharepoint-ui/references/choosing-components.md +20 -0
- package/skills/sharepoint-ui/references/sharepoint-patterns.md +17 -0
- package/tokens.json +3777 -0
package/dist/elements.js
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import { defineButton } from "./elements/button.js";
|
|
2
|
+
import { defineButtonGroup } from "./elements/button-group.js";
|
|
3
|
+
import { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
|
|
4
|
+
import { defineInput } from "./elements/input.js";
|
|
5
|
+
import { defineFileUpload } from "./elements/file-upload.js";
|
|
6
|
+
import { defineField } from "./elements/field.js";
|
|
7
|
+
import { defineCard } from "./elements/card.js";
|
|
8
|
+
import { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
|
|
9
|
+
import { defineBadge, defineCounterBadge, definePresenceBadge } from "./elements/badge.js";
|
|
10
|
+
import { defineCheckbox, defineSwitch } from "./elements/toggle.js";
|
|
11
|
+
import { defineTextArea } from "./elements/textarea.js";
|
|
12
|
+
import { defineSpinner } from "./elements/spinner.js";
|
|
13
|
+
import { defineMessageBar } from "./elements/message-bar.js";
|
|
14
|
+
import { defineViewCard } from "./elements/view-card.js";
|
|
15
|
+
import { defineDialog } from "./elements/dialog.js";
|
|
16
|
+
import { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
|
|
17
|
+
import { defineProgressBar } from "./elements/progress-bar.js";
|
|
18
|
+
import { defineSelect } from "./elements/select.js";
|
|
19
|
+
import { defineRadioGroup } from "./elements/radio-group.js";
|
|
20
|
+
import { defineSpinButton } from "./elements/spin-button.js";
|
|
21
|
+
import { defineSlider } from "./elements/slider.js";
|
|
22
|
+
import { defineDatePicker } from "./elements/date-picker.js";
|
|
23
|
+
import { defineCombobox } from "./elements/combobox.js";
|
|
24
|
+
import { defineRichTextEditor } from "./elements/rich-text-editor.js";
|
|
25
|
+
import { defineAlert } from "./elements/alert.js";
|
|
26
|
+
import { defineSkeleton } from "./elements/skeleton.js";
|
|
27
|
+
import { defineLink } from "./elements/link.js";
|
|
28
|
+
import { defineDivider } from "./elements/divider.js";
|
|
29
|
+
import { defineAccordion } from "./elements/accordion.js";
|
|
30
|
+
import { defineAvatar } from "./elements/avatar.js";
|
|
31
|
+
import { defineAvatarGroup } from "./elements/avatar-group.js";
|
|
32
|
+
import { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
|
|
33
|
+
import { definePersona } from "./elements/persona.js";
|
|
34
|
+
import { defineVirtualList } from "./elements/virtual-list.js";
|
|
35
|
+
import { defineDataGrid } from "./elements/data-grid.js";
|
|
36
|
+
import { defineTree } from "./elements/tree.js";
|
|
37
|
+
import { defineInteractionTag, defineTag, defineTagGroup } from "./elements/tags.js";
|
|
38
|
+
import { defineTagPicker } from "./elements/tag-picker.js";
|
|
39
|
+
import { defineRating } from "./elements/rating.js";
|
|
40
|
+
import { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
|
|
41
|
+
import { defineList, defineListItem } from "./elements/list.js";
|
|
42
|
+
import { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
|
|
43
|
+
import { defineTabs } from "./elements/tabs.js";
|
|
44
|
+
import { defineTooltip } from "./elements/tooltip.js";
|
|
45
|
+
import { definePopover } from "./elements/popover.js";
|
|
46
|
+
import { defineTeachingPopover } from "./elements/teaching-popover.js";
|
|
47
|
+
import { defineMenu, defineMenuItem, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuBar, defineMenuBarItem } from "./elements/menu.js";
|
|
48
|
+
import { defineText } from "./elements/text.js";
|
|
49
|
+
import { defineToast } from "./elements/toast.js";
|
|
50
|
+
import { defineToaster } from "./elements/toaster.js";
|
|
51
|
+
import { defineSearchBox } from "./elements/search.js";
|
|
52
|
+
import { defineColorPicker } from "./elements/color-picker.js";
|
|
53
|
+
import { defineToolbar } from "./elements/toolbar.js";
|
|
54
|
+
import { defineNav } from "./elements/nav.js";
|
|
55
|
+
import { defineInfoButton } from "./elements/info.js";
|
|
56
|
+
import { defineCarousel } from "./elements/carousel.js";
|
|
57
|
+
import { defineOverflow } from "./elements/overflow.js";
|
|
58
|
+
import { defineSwatchPicker } from "./elements/swatch-picker.js";
|
|
59
|
+
import { defineTable } from "./elements/table.js";
|
|
60
|
+
export { createLabel, getLabelStyle } from "./elements/label.js";
|
|
61
|
+
export { defineInfoButton, createInfoLabel } from "./elements/info.js";
|
|
62
|
+
export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
|
|
63
|
+
export { defineOverflow, defineOverflowItem, defineOverflowDivider } from "./elements/overflow.js";
|
|
64
|
+
export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
|
|
65
|
+
export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell } from "./elements/table.js";
|
|
66
|
+
export { defineButton } from "./elements/button.js";
|
|
67
|
+
export { defineButtonGroup } from "./elements/button-group.js";
|
|
68
|
+
export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
|
|
69
|
+
export { defineInput } from "./elements/input.js";
|
|
70
|
+
export { defineFileUpload } from "./elements/file-upload.js";
|
|
71
|
+
export { createImage, getImageStyle } from "./elements/image.js";
|
|
72
|
+
export { defineField } from "./elements/field.js";
|
|
73
|
+
export { createFormField } from "./elements/field-composition.js";
|
|
74
|
+
export { defineCard } from "./elements/card.js";
|
|
75
|
+
export { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
|
|
76
|
+
export { defineBadge, defineCounterBadge, definePresenceBadge } from "./elements/badge.js";
|
|
77
|
+
export { defineCheckbox, defineSwitch } from "./elements/toggle.js";
|
|
78
|
+
export { defineTextArea } from "./elements/textarea.js";
|
|
79
|
+
export { defineSpinner } from "./elements/spinner.js";
|
|
80
|
+
export { defineMessageBar, defineMessageBarActions, defineMessageBarBody, defineMessageBarGroup, defineMessageBarTitle } from "./elements/message-bar.js";
|
|
81
|
+
export { defineViewCard } from "./elements/view-card.js";
|
|
82
|
+
export { defineDialog, defineDialogActions, defineDialogBody, defineDialogContent, defineDialogSurface, defineDialogTitle, defineDialogTrigger } from "./elements/dialog.js";
|
|
83
|
+
export { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
|
|
84
|
+
export { defineProgressBar } from "./elements/progress-bar.js";
|
|
85
|
+
export { defineSelect } from "./elements/select.js";
|
|
86
|
+
export { defineRadioGroup } from "./elements/radio-group.js";
|
|
87
|
+
export { defineSpinButton } from "./elements/spin-button.js";
|
|
88
|
+
export { defineSlider } from "./elements/slider.js";
|
|
89
|
+
export { defineDatePicker } from "./elements/date-picker.js";
|
|
90
|
+
export { defineCombobox } from "./elements/combobox.js";
|
|
91
|
+
export { defineRichTextEditor } from "./elements/rich-text-editor.js";
|
|
92
|
+
export { defineAlert } from "./elements/alert.js";
|
|
93
|
+
export { defineSkeleton, defineSkeletonItem } from "./elements/skeleton.js";
|
|
94
|
+
export { defineLink } from "./elements/link.js";
|
|
95
|
+
export { defineDivider } from "./elements/divider.js";
|
|
96
|
+
export { defineAccordion, defineAccordionHeader, defineAccordionPanel } from "./elements/accordion.js";
|
|
97
|
+
export { defineAvatar } from "./elements/avatar.js";
|
|
98
|
+
export { defineAvatarGroup } from "./elements/avatar-group.js";
|
|
99
|
+
export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
|
|
100
|
+
export { definePersona } from "./elements/persona.js";
|
|
101
|
+
export { defineVirtualList } from "./elements/virtual-list.js";
|
|
102
|
+
export { defineDataGrid } from "./elements/data-grid.js";
|
|
103
|
+
export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText } from "./elements/data-grid-model.js";
|
|
104
|
+
export { defineTree } from "./elements/tree.js";
|
|
105
|
+
export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup } from "./elements/tags.js";
|
|
106
|
+
export { defineTagPicker } from "./elements/tag-picker.js";
|
|
107
|
+
export { defineRating } from "./elements/rating.js";
|
|
108
|
+
export { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
|
|
109
|
+
export { defineList, defineListItem } from "./elements/list.js";
|
|
110
|
+
export { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
|
|
111
|
+
export { defineTabs } from "./elements/tabs.js";
|
|
112
|
+
export { defineTooltip } from "./elements/tooltip.js";
|
|
113
|
+
export { definePopover, definePopoverSurface, definePopoverTrigger } from "./elements/popover.js";
|
|
114
|
+
export { defineTeachingPopover } from "./elements/teaching-popover.js";
|
|
115
|
+
export { defineMenu, defineMenuItem, defineMenuItemLink, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuList, defineMenuPopover, defineMenuSplitGroup, defineMenuTrigger, defineMenuBar, defineMenuBarItem } from "./elements/menu.js";
|
|
116
|
+
export { defineText } from "./elements/text.js";
|
|
117
|
+
export { defineToast, defineToastBody, defineToastFooter, defineToastTitle } from "./elements/toast.js";
|
|
118
|
+
export { defineToaster } from "./elements/toaster.js";
|
|
119
|
+
export { defineSearchBox } from "./elements/search.js";
|
|
120
|
+
export { defineColorPicker, defineColorArea, defineColorSlider, defineAlphaSlider } from "./elements/color-picker.js";
|
|
121
|
+
export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolbarRadioGroup, defineToolbarRadioButton } from "./elements/toolbar.js";
|
|
122
|
+
export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader } from "./elements/nav.js";
|
|
123
|
+
/** Register every current custom element. Import an element-specific entrypoint to keep a package slice small. */
|
|
124
|
+
export function defineSharePointUIElements() {
|
|
125
|
+
defineButton();
|
|
126
|
+
defineButtonGroup();
|
|
127
|
+
defineCompoundButton();
|
|
128
|
+
defineMenuButton();
|
|
129
|
+
defineToggleButton();
|
|
130
|
+
defineSplitButton();
|
|
131
|
+
defineInput();
|
|
132
|
+
defineFileUpload();
|
|
133
|
+
defineField();
|
|
134
|
+
defineCard();
|
|
135
|
+
defineCardHeader();
|
|
136
|
+
defineCardFooter();
|
|
137
|
+
defineCardPreview();
|
|
138
|
+
defineBadge();
|
|
139
|
+
defineCounterBadge();
|
|
140
|
+
definePresenceBadge();
|
|
141
|
+
defineCheckbox();
|
|
142
|
+
defineSwitch();
|
|
143
|
+
defineTextArea();
|
|
144
|
+
defineSpinner();
|
|
145
|
+
defineMessageBar();
|
|
146
|
+
defineViewCard();
|
|
147
|
+
defineDialog();
|
|
148
|
+
defineDrawer();
|
|
149
|
+
defineInlineDrawer();
|
|
150
|
+
defineProgressBar();
|
|
151
|
+
defineSelect();
|
|
152
|
+
defineRadioGroup();
|
|
153
|
+
defineSpinButton();
|
|
154
|
+
defineSlider();
|
|
155
|
+
defineDatePicker();
|
|
156
|
+
defineCombobox();
|
|
157
|
+
defineRichTextEditor();
|
|
158
|
+
defineAlert();
|
|
159
|
+
defineSkeleton();
|
|
160
|
+
defineLink();
|
|
161
|
+
defineDivider();
|
|
162
|
+
defineAccordion();
|
|
163
|
+
defineAvatar();
|
|
164
|
+
defineAvatarGroup();
|
|
165
|
+
defineAvatarGroupItem();
|
|
166
|
+
defineAvatarGroupPopover();
|
|
167
|
+
definePersona();
|
|
168
|
+
defineVirtualList();
|
|
169
|
+
defineDataGrid();
|
|
170
|
+
defineTree();
|
|
171
|
+
defineTag();
|
|
172
|
+
defineTagGroup();
|
|
173
|
+
defineInteractionTag();
|
|
174
|
+
defineTagPicker();
|
|
175
|
+
defineRating();
|
|
176
|
+
defineRatingDisplay();
|
|
177
|
+
defineRatingItem();
|
|
178
|
+
defineList();
|
|
179
|
+
defineListItem();
|
|
180
|
+
defineBreadcrumb();
|
|
181
|
+
defineBreadcrumbItem();
|
|
182
|
+
defineBreadcrumbButton();
|
|
183
|
+
defineBreadcrumbDivider();
|
|
184
|
+
defineTabs();
|
|
185
|
+
defineTooltip();
|
|
186
|
+
definePopover();
|
|
187
|
+
defineTeachingPopover();
|
|
188
|
+
defineMenu();
|
|
189
|
+
defineMenuItem();
|
|
190
|
+
defineMenuDivider();
|
|
191
|
+
defineMenuGroup();
|
|
192
|
+
defineMenuGroupHeader();
|
|
193
|
+
defineMenuBar();
|
|
194
|
+
defineMenuBarItem();
|
|
195
|
+
defineText();
|
|
196
|
+
defineToast();
|
|
197
|
+
defineToaster();
|
|
198
|
+
defineSearchBox();
|
|
199
|
+
defineColorPicker();
|
|
200
|
+
defineToolbar();
|
|
201
|
+
defineNav();
|
|
202
|
+
defineInfoButton();
|
|
203
|
+
defineCarousel();
|
|
204
|
+
defineOverflow();
|
|
205
|
+
defineSwatchPicker();
|
|
206
|
+
defineTable();
|
|
207
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
export { defineSharePointUIElements } from "./elements.js";
|
|
2
|
+
export { defineButton } from "./elements/button.js";
|
|
3
|
+
export { defineButtonGroup } from "./elements/button-group.js";
|
|
4
|
+
export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
|
|
5
|
+
export type { ButtonAppearance, ButtonShape, ButtonSize } from "./elements/button.js";
|
|
6
|
+
export { defineInput, type InputAppearance, type InputSize, type InputType } from "./elements/input.js";
|
|
7
|
+
export { defineFileUpload, type FileUploadError } from "./elements/file-upload.js";
|
|
8
|
+
export { createImage, getImageStyle, type ImageOptions, type ImageFit, type ImageShape } from "./elements/image.js";
|
|
9
|
+
export { defineText } from "./elements/text.js";
|
|
10
|
+
export type { TextFont, TextSize, TextTag, TextWeight } from "./elements/text.js";
|
|
11
|
+
export { defineToast, defineToastBody, defineToastFooter, defineToastTitle, type ToastAppearance, type ToastIntent, type ToastOptions, type ToastPoliteness } from "./elements/toast.js";
|
|
12
|
+
export { defineToaster, type ToastAnnounce, type ToastAnnounceOptions, type ToastPosition } from "./elements/toaster.js";
|
|
13
|
+
export { defineSearchBox, type SearchAppearance, type SearchSize } from "./elements/search.js";
|
|
14
|
+
export { defineColorPicker, defineColorArea, defineColorSlider, defineAlphaSlider, type ColorPickerFormat, type ColorPickerHsvColor, type ColorPickerShape, type ColorPickerSize, type ColorSliderChannel, type ColorPickerState } from "./elements/color-picker.js";
|
|
15
|
+
export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolbarRadioGroup, defineToolbarRadioButton, type ToolbarCheckedValues, type ToolbarCheckedValueChange } from "./elements/toolbar.js";
|
|
16
|
+
export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
|
|
17
|
+
export type { CarouselIndexChangeData, CarouselIndexChangeSource } from "./elements/carousel.js";
|
|
18
|
+
export type { CarouselAlign, CarouselAppearance, CarouselMotion, CarouselAnnouncerFunction, SharePointCarouselElement, SharePointCarouselCardElement, SharePointCarouselNavButtonElement, SharePointCarouselButtonElement, SharePointCarouselAutoplayButtonElement, SharePointCarouselSliderElement } from "./elements/carousel.js";
|
|
19
|
+
export { defineOverflow, defineOverflowItem, defineOverflowDivider, type OverflowAxis, type OverflowState } from "./elements/overflow.js";
|
|
20
|
+
export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
|
|
21
|
+
export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell, type CreateTableColumnOptions, type TableColumnDefinition, type TableColumnId } from "./elements/table.js";
|
|
22
|
+
export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader, type NavItemSelectData, type NavCategoryToggleData } from "./elements/nav.js";
|
|
23
|
+
export { createLabel, getLabelStyle, type LabelOptions, type LabelSize, type LabelWeight } from "./elements/label.js";
|
|
24
|
+
export { defineInfoButton, createInfoLabel, type InfoLabelOptions, type InfoPlacement } from "./elements/info.js";
|
|
25
|
+
export { defineField } from "./elements/field.js";
|
|
26
|
+
export { createFormField, type FieldOrientation, type FieldValidationState, type FormFieldOptions } from "./elements/field-composition.js";
|
|
27
|
+
export { defineCard, type CardAppearance, type CardOrientation, type CardSize } from "./elements/card.js";
|
|
28
|
+
export { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
|
|
29
|
+
export { defineBadge, defineCounterBadge, definePresenceBadge, type BadgeAppearance, type BadgeColor, type BadgeShape, type BadgeSize, type PresenceBadgeStatus } from "./elements/badge.js";
|
|
30
|
+
export { defineCheckbox, defineSwitch } from "./elements/toggle.js";
|
|
31
|
+
export { defineTextArea } from "./elements/textarea.js";
|
|
32
|
+
export { defineSpinner } from "./elements/spinner.js";
|
|
33
|
+
export { defineMessageBar, defineMessageBarActions, defineMessageBarBody, defineMessageBarGroup, defineMessageBarTitle, type MessageBarGroupAnimation, type MessageBarIntent, type MessageBarLayout, type MessageBarPoliteness, type MessageBarShape } from "./elements/message-bar.js";
|
|
34
|
+
export { defineViewCard } from "./elements/view-card.js";
|
|
35
|
+
export { defineDialog, defineDialogActions, defineDialogBody, defineDialogContent, defineDialogSurface, defineDialogTitle, defineDialogTrigger, type DialogOpenChangeData } from "./elements/dialog.js";
|
|
36
|
+
export { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
|
|
37
|
+
export { defineProgressBar, type ProgressBarColor, type ProgressBarShape, type ProgressBarThickness } from "./elements/progress-bar.js";
|
|
38
|
+
export { defineSelect } from "./elements/select.js";
|
|
39
|
+
export type { SelectAppearance, SelectSize, SelectChangeData } from "./elements/select.js";
|
|
40
|
+
export { defineRadioGroup } from "./elements/radio-group.js";
|
|
41
|
+
export { defineSpinButton } from "./elements/spin-button.js";
|
|
42
|
+
export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from "./elements/spin-button.js";
|
|
43
|
+
export { defineSlider } from "./elements/slider.js";
|
|
44
|
+
export { defineDatePicker } from "./elements/date-picker.js";
|
|
45
|
+
export { defineCombobox } from "./elements/combobox.js";
|
|
46
|
+
export { defineRichTextEditor, type SharePointRichTextEditorElement } from "./elements/rich-text-editor.js";
|
|
47
|
+
export { defineAlert, type AlertAppearance } from "./elements/alert.js";
|
|
48
|
+
export { defineSkeleton, defineSkeletonItem, type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
|
|
49
|
+
export { DEFAULT_ACCENT, getSharePointUIStyleTokens, type SharePointUIAppearance, type SharePointUIBaseAppearance, type SharePointUIDensity, type SharePointUIStyleTokens } from "./appearance.js";
|
|
50
|
+
export { applySharePointTheme, composeSharePointUIDesignThemes, getSharePointUIDesignTokens, type SharePointTheme, type FluentThemeTokens, type SharePointUIDesignTheme, type SharePointUIThemeOptions } from "./theme.js";
|
|
51
|
+
export { defineLink } from "./elements/link.js";
|
|
52
|
+
export { defineDivider, type DividerAppearance } from "./elements/divider.js";
|
|
53
|
+
export { defineAccordion, defineAccordionHeader, defineAccordionPanel, type AccordionItemValue, type AccordionNavigation, type AccordionToggleData } from "./elements/accordion.js";
|
|
54
|
+
export { defineAvatar, type AvatarColor, type AvatarNamedColor } from "./elements/avatar.js";
|
|
55
|
+
export { defineAvatarGroup } from "./elements/avatar-group.js";
|
|
56
|
+
export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
|
|
57
|
+
export { definePersona, type PersonaPresence, type PersonaSize } from "./elements/persona.js";
|
|
58
|
+
export { defineVirtualList, type VirtualListDataSource, type VirtualListItemRenderer, type SharePointVirtualListElement } from "./elements/virtual-list.js";
|
|
59
|
+
export { defineDataGrid, type DataGridCellRenderer, type DataGridCellsEditHandler, type DataGridRowHeightGetter, type DataGridSourceSelectionHandler, type SharePointDataGridElement } from "./elements/data-grid.js";
|
|
60
|
+
export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, getDataGridGroupKey, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText, type DataGridCellEdit, type DataGridClipboardColumn, type DataGridColumn, type DataGridColumnSizingOption, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridDataSource, type DataGridDataSourceRow, type DataGridSelectionModel, type DataGridEditValue, type DataGridFocusMode, type DataGridGroup, type DataGridSelectionAppearance, type DataGridSort, type DataGridSortDirection, type DataGridSortState } from "./elements/data-grid-model.js";
|
|
61
|
+
export { defineTree, type TreeCheckedItem, type TreeItemRenderer } from "./elements/tree.js";
|
|
62
|
+
export { type TreeNode, type VisibleTreeNode } from "./elements/tree-model.js";
|
|
63
|
+
export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup, type InteractionTagSelectData, type SharePointTagGroupElement, type TagAppearance, type TagGroupSelectData, type TagShape, type TagSize } from "./elements/tags.js";
|
|
64
|
+
export { defineTagPicker } from "./elements/tag-picker.js";
|
|
65
|
+
export type { TagPickerOpenChangeType, TagPickerOnOpenChangeData, TagPickerOnOptionSelectData } from "./elements/tag-picker.js";
|
|
66
|
+
export { defineRating } from "./elements/rating.js";
|
|
67
|
+
export { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
|
|
68
|
+
export { defineList, defineListItem, type ListItemActionData, type ListItemActionEvent, type ListItemValue, type ListNavigationMode, type ListSelectionChangeData, type ListSelectionMode } from "./elements/list.js";
|
|
69
|
+
export { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
|
|
70
|
+
export { defineTabs } from "./elements/tabs.js";
|
|
71
|
+
export { defineTooltip, type TooltipAppearance, type TooltipPosition, type TooltipPositioning, type TooltipPositioningBoundary, type TooltipPositioningEndData, type TooltipPositioningImperativeRef, type TooltipPositioningOffset, type TooltipPositioningOffsetParams, type TooltipPositioningOptions, type TooltipPositioningPlacement, type TooltipPositioningRect, type TooltipPositioningRef, type TooltipPositioningShorthand, type TooltipPositioningTarget, type TooltipPositioningTargetRect, type TooltipRelationship, type TooltipVisibleChangeData } from "./elements/tooltip.js";
|
|
72
|
+
export { definePopover, definePopoverSurface, definePopoverTrigger } from "./elements/popover.js";
|
|
73
|
+
export type { PopoverAlignment, PopoverAutoSize, PopoverBoundary, PopoverBoundaryPadding, PopoverBoundaryRect, PopoverOffset, PopoverOffsetParams, PopoverOpenChangeData, PopoverPosition, PopoverPositioning, PopoverPositioningEndData, PopoverPositioningImperativeRef, PopoverPositioningOptions, PopoverPositioningPlacement, PopoverPositioningRef, PopoverPositioningTargetRect, PopoverTarget } from "./elements/popover.js";
|
|
74
|
+
export { defineTeachingPopover } from "./elements/teaching-popover.js";
|
|
75
|
+
export type { SharePointTeachingPopoverCarouselElement, TeachingPopoverAnnouncementFunction, TeachingPopoverAnnouncementDetail, TeachingPopoverCarouselValueChangeType, TeachingPopoverCarouselValueChangeDetail, TeachingPopoverFinishDetail } from "./elements/teaching-popover.js";
|
|
76
|
+
export { defineMenu, defineMenuItem, defineMenuItemLink, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuList, defineMenuPopover, defineMenuSplitGroup, defineMenuTrigger, defineMenuBar, defineMenuBarItem, type MenuOpenChangeData, type MenuOpenChangeType } from "./elements/menu.js";
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export { defineSharePointUIElements } from "./elements.js";
|
|
2
|
+
export { defineButton } from "./elements/button.js";
|
|
3
|
+
export { defineButtonGroup } from "./elements/button-group.js";
|
|
4
|
+
export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
|
|
5
|
+
export { defineInput } from "./elements/input.js";
|
|
6
|
+
export { defineFileUpload } from "./elements/file-upload.js";
|
|
7
|
+
export { createImage, getImageStyle } from "./elements/image.js";
|
|
8
|
+
export { defineText } from "./elements/text.js";
|
|
9
|
+
export { defineToast, defineToastBody, defineToastFooter, defineToastTitle } from "./elements/toast.js";
|
|
10
|
+
export { defineToaster } from "./elements/toaster.js";
|
|
11
|
+
export { defineSearchBox } from "./elements/search.js";
|
|
12
|
+
export { defineColorPicker, defineColorArea, defineColorSlider, defineAlphaSlider } from "./elements/color-picker.js";
|
|
13
|
+
export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolbarRadioGroup, defineToolbarRadioButton } from "./elements/toolbar.js";
|
|
14
|
+
export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
|
|
15
|
+
export { defineOverflow, defineOverflowItem, defineOverflowDivider } from "./elements/overflow.js";
|
|
16
|
+
export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
|
|
17
|
+
export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell } from "./elements/table.js";
|
|
18
|
+
export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader } from "./elements/nav.js";
|
|
19
|
+
export { createLabel, getLabelStyle } from "./elements/label.js";
|
|
20
|
+
export { defineInfoButton, createInfoLabel } from "./elements/info.js";
|
|
21
|
+
export { defineField } from "./elements/field.js";
|
|
22
|
+
export { createFormField } from "./elements/field-composition.js";
|
|
23
|
+
export { defineCard } from "./elements/card.js";
|
|
24
|
+
export { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
|
|
25
|
+
export { defineBadge, defineCounterBadge, definePresenceBadge } from "./elements/badge.js";
|
|
26
|
+
export { defineCheckbox, defineSwitch } from "./elements/toggle.js";
|
|
27
|
+
export { defineTextArea } from "./elements/textarea.js";
|
|
28
|
+
export { defineSpinner } from "./elements/spinner.js";
|
|
29
|
+
export { defineMessageBar, defineMessageBarActions, defineMessageBarBody, defineMessageBarGroup, defineMessageBarTitle } from "./elements/message-bar.js";
|
|
30
|
+
export { defineViewCard } from "./elements/view-card.js";
|
|
31
|
+
export { defineDialog, defineDialogActions, defineDialogBody, defineDialogContent, defineDialogSurface, defineDialogTitle, defineDialogTrigger } from "./elements/dialog.js";
|
|
32
|
+
export { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
|
|
33
|
+
export { defineProgressBar } from "./elements/progress-bar.js";
|
|
34
|
+
export { defineSelect } from "./elements/select.js";
|
|
35
|
+
export { defineRadioGroup } from "./elements/radio-group.js";
|
|
36
|
+
export { defineSpinButton } from "./elements/spin-button.js";
|
|
37
|
+
export { defineSlider } from "./elements/slider.js";
|
|
38
|
+
export { defineDatePicker } from "./elements/date-picker.js";
|
|
39
|
+
export { defineCombobox } from "./elements/combobox.js";
|
|
40
|
+
export { defineRichTextEditor } from "./elements/rich-text-editor.js";
|
|
41
|
+
export { defineAlert } from "./elements/alert.js";
|
|
42
|
+
export { defineSkeleton, defineSkeletonItem } from "./elements/skeleton.js";
|
|
43
|
+
export { DEFAULT_ACCENT, getSharePointUIStyleTokens } from "./appearance.js";
|
|
44
|
+
export { applySharePointTheme, composeSharePointUIDesignThemes, getSharePointUIDesignTokens } from "./theme.js";
|
|
45
|
+
export { defineLink } from "./elements/link.js";
|
|
46
|
+
export { defineDivider } from "./elements/divider.js";
|
|
47
|
+
export { defineAccordion, defineAccordionHeader, defineAccordionPanel } from "./elements/accordion.js";
|
|
48
|
+
export { defineAvatar } from "./elements/avatar.js";
|
|
49
|
+
export { defineAvatarGroup } from "./elements/avatar-group.js";
|
|
50
|
+
export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
|
|
51
|
+
export { definePersona } from "./elements/persona.js";
|
|
52
|
+
export { defineVirtualList } from "./elements/virtual-list.js";
|
|
53
|
+
export { defineDataGrid } from "./elements/data-grid.js";
|
|
54
|
+
export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, getDataGridGroupKey, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText } from "./elements/data-grid-model.js";
|
|
55
|
+
export { defineTree } from "./elements/tree.js";
|
|
56
|
+
export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup } from "./elements/tags.js";
|
|
57
|
+
export { defineTagPicker } from "./elements/tag-picker.js";
|
|
58
|
+
export { defineRating } from "./elements/rating.js";
|
|
59
|
+
export { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
|
|
60
|
+
export { defineList, defineListItem } from "./elements/list.js";
|
|
61
|
+
export { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
|
|
62
|
+
export { defineTabs } from "./elements/tabs.js";
|
|
63
|
+
export { defineTooltip } from "./elements/tooltip.js";
|
|
64
|
+
export { definePopover, definePopoverSurface, definePopoverTrigger } from "./elements/popover.js";
|
|
65
|
+
export { defineTeachingPopover } from "./elements/teaching-popover.js";
|
|
66
|
+
export { defineMenu, defineMenuItem, defineMenuItemLink, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuList, defineMenuPopover, defineMenuSplitGroup, defineMenuTrigger, defineMenuBar, defineMenuBarItem } from "./elements/menu.js";
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
const registries = new WeakMap();
|
|
2
|
+
const maxThemeRulesPerDocument = 256;
|
|
3
|
+
function hash(value) {
|
|
4
|
+
let result = 2166136261;
|
|
5
|
+
for (let index = 0; index < value.length; index++) {
|
|
6
|
+
result ^= value.charCodeAt(index);
|
|
7
|
+
result = Math.imul(result, 16777619);
|
|
8
|
+
}
|
|
9
|
+
return (result >>> 0).toString(36);
|
|
10
|
+
}
|
|
11
|
+
function createSheet(document) {
|
|
12
|
+
const Sheet = document.defaultView?.CSSStyleSheet;
|
|
13
|
+
if (!Sheet)
|
|
14
|
+
return undefined;
|
|
15
|
+
try {
|
|
16
|
+
const sheet = new Sheet();
|
|
17
|
+
sheet.insertRule(".spui-theme-empty{}", 0);
|
|
18
|
+
if (!("adoptedStyleSheets" in document))
|
|
19
|
+
return undefined;
|
|
20
|
+
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
|
|
21
|
+
sheet.deleteRule(0);
|
|
22
|
+
return sheet;
|
|
23
|
+
}
|
|
24
|
+
catch {
|
|
25
|
+
return undefined;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
function getRegistry(document) {
|
|
29
|
+
const existing = registries.get(document);
|
|
30
|
+
if (existing)
|
|
31
|
+
return existing;
|
|
32
|
+
const sheet = createSheet(document);
|
|
33
|
+
if (!sheet)
|
|
34
|
+
return undefined;
|
|
35
|
+
const registry = { sheet, records: new Map(), classes: new WeakMap() };
|
|
36
|
+
registries.set(document, registry);
|
|
37
|
+
return registry;
|
|
38
|
+
}
|
|
39
|
+
function entriesOf(styles) {
|
|
40
|
+
return Object.entries(styles).filter(([, value]) => typeof value === "string" || typeof value === "number");
|
|
41
|
+
}
|
|
42
|
+
function serialize(styles) {
|
|
43
|
+
return JSON.stringify(entriesOf(styles).sort(([left], [right]) => left.localeCompare(right)));
|
|
44
|
+
}
|
|
45
|
+
function cssPropertyName(name) {
|
|
46
|
+
return name.startsWith("--") ? name : name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
|
|
47
|
+
}
|
|
48
|
+
/** Applies a theme token map once per document and returns the class inherited by shadow roots. */
|
|
49
|
+
export function getReactThemeClass(document, styles) {
|
|
50
|
+
const registry = getRegistry(document);
|
|
51
|
+
if (!registry)
|
|
52
|
+
return undefined;
|
|
53
|
+
const cachedClass = registry.classes.get(styles);
|
|
54
|
+
if (cachedClass)
|
|
55
|
+
return cachedClass;
|
|
56
|
+
const serialized = serialize(styles);
|
|
57
|
+
const existing = registry.records.get(serialized);
|
|
58
|
+
if (existing)
|
|
59
|
+
return existing.className;
|
|
60
|
+
if (registry.records.size >= maxThemeRulesPerDocument)
|
|
61
|
+
return undefined;
|
|
62
|
+
const baseName = `spui-theme-${hash(serialized)}`;
|
|
63
|
+
let className = baseName;
|
|
64
|
+
let suffix = 0;
|
|
65
|
+
while ([...registry.records.values()].some(record => record.className === className && record.serialized !== serialized))
|
|
66
|
+
className = `${baseName}-${++suffix}`;
|
|
67
|
+
const index = registry.sheet.cssRules.length;
|
|
68
|
+
registry.sheet.insertRule(`.${className}{}`, index);
|
|
69
|
+
const rule = registry.sheet.cssRules[index];
|
|
70
|
+
for (const [name, value] of entriesOf(styles))
|
|
71
|
+
rule.style.setProperty(cssPropertyName(name), String(value));
|
|
72
|
+
registry.records.set(serialized, { className, rule, serialized });
|
|
73
|
+
registry.classes.set(styles, className);
|
|
74
|
+
return className;
|
|
75
|
+
}
|