@wix/site-ui 1.30.0 → 1.32.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 (173) hide show
  1. package/dist/1268.js +99 -0
  2. package/dist/1279.js +7 -0
  3. package/dist/1457.js +10 -0
  4. package/dist/1477.js +106 -0
  5. package/dist/1500.js +111 -0
  6. package/dist/167.js +6 -0
  7. package/dist/2274.js +34 -0
  8. package/dist/2287.js +17 -0
  9. package/dist/2418.js +31 -0
  10. package/dist/2801.js +20 -0
  11. package/dist/285.js +86 -0
  12. package/dist/2861.js +6 -0
  13. package/dist/3020.js +7 -0
  14. package/dist/3021.js +72 -0
  15. package/dist/3056.js +229 -0
  16. package/dist/3140.js +4 -0
  17. package/dist/3248.js +307 -0
  18. package/dist/3296.js +4 -0
  19. package/dist/3319.js +400 -0
  20. package/dist/3395.js +4 -0
  21. package/dist/3485.js +854 -0
  22. package/dist/353.js +14 -0
  23. package/dist/3670.js +418 -0
  24. package/dist/3829.js +113 -0
  25. package/dist/4026.js +12 -0
  26. package/dist/4143.js +46 -0
  27. package/dist/42.js +32 -0
  28. package/dist/4281.js +30 -0
  29. package/dist/4346.js +2 -0
  30. package/dist/4388.js +418 -0
  31. package/dist/4490.js +32 -0
  32. package/dist/4495.js +9 -0
  33. package/dist/4549.js +24 -0
  34. package/dist/4586.js +41 -0
  35. package/dist/4586.js.LICENSE.txt +19 -0
  36. package/dist/4707.js +19 -0
  37. package/dist/4723.js +7 -0
  38. package/dist/4745.js +7 -0
  39. package/dist/4768.js +35 -0
  40. package/dist/4922.js +15 -0
  41. package/dist/5036.js +17 -0
  42. package/dist/5085.js +20 -0
  43. package/dist/5299.js +597 -0
  44. package/dist/5659.js +4 -0
  45. package/dist/5778.js +10 -0
  46. package/dist/5864.js +86 -0
  47. package/dist/5992.js +913 -0
  48. package/dist/5992.js.LICENSE.txt +19 -0
  49. package/dist/6003.js +10 -0
  50. package/dist/6046.js +29 -0
  51. package/dist/6089.js +2355 -0
  52. package/dist/6107.js +10 -0
  53. package/dist/6247.js +20 -0
  54. package/dist/6270.js +487 -0
  55. package/dist/6329.js +32 -0
  56. package/dist/6330.js +30 -0
  57. package/dist/6499.js +7 -0
  58. package/dist/6535.js +71 -0
  59. package/dist/6588.js +382 -0
  60. package/dist/6706.js +16 -0
  61. package/dist/6825.js +7 -0
  62. package/dist/6882.js +1562 -0
  63. package/dist/6914.js +30 -0
  64. package/dist/7021.js +13 -0
  65. package/dist/7366.js +83 -0
  66. package/dist/7373.js +25 -0
  67. package/dist/7541.js +25 -0
  68. package/dist/7564.js +10 -0
  69. package/dist/7642.js +20 -0
  70. package/dist/7725.js +10 -0
  71. package/dist/7871.js +38 -0
  72. package/dist/8052.js +352 -0
  73. package/dist/8106.js +238 -0
  74. package/dist/8171.js +346 -0
  75. package/dist/8225.js +21 -0
  76. package/dist/8272.js +333 -0
  77. package/dist/8527.js +58 -0
  78. package/dist/8724.js +10 -0
  79. package/dist/8750.js +1920 -0
  80. package/dist/8758.js +43 -0
  81. package/dist/880.js +149 -0
  82. package/dist/8935.js +8 -0
  83. package/dist/8960.js +22 -0
  84. package/dist/8971.js +40 -0
  85. package/dist/8979.js +10 -0
  86. package/dist/8996.js +71 -0
  87. package/dist/904.js +121 -0
  88. package/dist/9048.js +52 -0
  89. package/dist/9087.js +256 -0
  90. package/dist/9189.js +158 -0
  91. package/dist/9255.js +136 -0
  92. package/dist/9352.js +148 -0
  93. package/dist/951.js +22 -0
  94. package/dist/9635.js +22 -0
  95. package/dist/9829.js +4 -0
  96. package/dist/9863.js +8 -0
  97. package/dist/Accordion/index.d.ts +569 -12
  98. package/dist/Accordion/index.js +423 -8
  99. package/dist/AlertDialog/index.d.ts +1417 -18
  100. package/dist/AlertDialog/index.js +34 -14
  101. package/dist/Autocomplete/index.d.ts +1861 -38
  102. package/dist/Autocomplete/index.js +98 -24
  103. package/dist/Avatar/index.d.ts +129 -7
  104. package/dist/Avatar/index.js +149 -6
  105. package/dist/Breadcrumbs/index.d.ts +960 -7
  106. package/dist/Breadcrumbs/index.js +5 -5
  107. package/dist/Button/index.d.ts +88 -6
  108. package/dist/Button/index.js +27 -3
  109. package/dist/Checkbox/index.d.ts +425 -5
  110. package/dist/Checkbox/index.js +45 -5
  111. package/dist/CheckboxGroup/index.d.ts +318 -3
  112. package/dist/CheckboxGroup/index.js +166 -3
  113. package/dist/Collapsible/index.d.ts +377 -7
  114. package/dist/Collapsible/index.js +160 -6
  115. package/dist/Combobox/index.d.ts +1984 -48
  116. package/dist/Combobox/index.js +352 -29
  117. package/dist/ContextMenu/index.d.ts +2340 -36
  118. package/dist/ContextMenu/index.js +197 -22
  119. package/dist/Dialog/index.d.ts +1355 -18
  120. package/dist/Dialog/index.js +16 -14
  121. package/dist/Drawer/index.d.ts +1653 -18
  122. package/dist/Drawer/index.js +2797 -20
  123. package/dist/Field/index.d.ts +655 -15
  124. package/dist/Field/index.js +677 -10
  125. package/dist/Fieldset/index.d.ts +94 -5
  126. package/dist/Fieldset/index.js +68 -5
  127. package/dist/Form/index.d.ts +331 -2
  128. package/dist/Form/index.js +106 -3
  129. package/dist/Input/index.d.ts +692 -3
  130. package/dist/Input/index.js +10 -3
  131. package/dist/Menu/index.d.ts +2301 -36
  132. package/dist/Menu/index.js +365 -26
  133. package/dist/Menubar/index.d.ts +2301 -3
  134. package/dist/Menubar/index.js +105 -3
  135. package/dist/Meter/index.d.ts +175 -11
  136. package/dist/Meter/index.js +129 -9
  137. package/dist/NavigationMenu/index.d.ts +978 -28
  138. package/dist/NavigationMenu/index.js +1034 -17
  139. package/dist/NumberField/index.d.ts +612 -15
  140. package/dist/NumberField/index.js +1409 -11
  141. package/dist/Popover/index.d.ts +1655 -20
  142. package/dist/Popover/index.js +792 -17
  143. package/dist/PreviewCard/index.d.ts +1523 -14
  144. package/dist/PreviewCard/index.js +679 -14
  145. package/dist/Progress/index.d.ts +183 -11
  146. package/dist/Progress/index.js +181 -9
  147. package/dist/Radio/index.d.ts +185 -6
  148. package/dist/Radio/index.js +253 -6
  149. package/dist/RadioGroup/index.d.ts +341 -2
  150. package/dist/RadioGroup/index.js +154 -3
  151. package/dist/ScrollArea/index.d.ts +265 -13
  152. package/dist/ScrollArea/index.js +892 -10
  153. package/dist/Select/index.d.ts +1493 -38
  154. package/dist/Select/index.js +1824 -23
  155. package/dist/Separator/index.d.ts +80 -6
  156. package/dist/Separator/index.js +3 -3
  157. package/dist/Slider/index.d.ts +678 -16
  158. package/dist/Slider/index.js +1199 -11
  159. package/dist/Switch/index.d.ts +393 -5
  160. package/dist/Switch/index.js +208 -6
  161. package/dist/Tabs/index.d.ts +523 -12
  162. package/dist/Tabs/index.js +685 -9
  163. package/dist/Toggle/index.d.ts +305 -2
  164. package/dist/Toggle/index.js +76 -3
  165. package/dist/ToggleGroup/index.d.ts +316 -2
  166. package/dist/ToggleGroup/index.js +102 -3
  167. package/dist/Toolbar/index.d.ts +282 -13
  168. package/dist/Toolbar/index.js +230 -9
  169. package/dist/Tooltip/index.d.ts +1572 -14
  170. package/dist/Tooltip/index.js +965 -14
  171. package/dist/index.d.ts +12749 -652
  172. package/dist/rslib-runtime.js +18 -0
  173. package/package.json +3 -3
package/dist/9087.js ADDED
@@ -0,0 +1,256 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { EMPTY_OBJECT, useMergedRefs, EMPTY_ARRAY as empty_EMPTY_ARRAY, useRenderElement } from "./8272.js";
3
+ import { useStableCallback } from "./7541.js";
4
+ import { ARROW_LEFT, scrollIntoViewIfNeeded, ARROW_UP, ARROW_DOWN, COMPOSITE_KEYS, ARROW_KEYS, VERTICAL_KEYS_WITH_EXTRA_KEYS, HORIZONTAL_KEYS, VERTICAL_KEYS, MODIFIER_KEYS, ARROW_RIGHT, HORIZONTAL_KEYS_WITH_EXTRA_KEYS, isNativeInput } from "./1500.js";
5
+ import { ACTIVE_COMPOSITE_ITEM } from "./4346.js";
6
+ import { getTarget } from "./4549.js";
7
+ import { isElementDisabled } from "./3140.js";
8
+ import { isListIndexDisabled, getGridCellIndices, findNonDisabledListIndex, getGridNavigatedIndex, createGridCellMap, getMinListIndex, getGridCellIndexOfCorner, isIndexOutOfListBounds, getMaxListIndex } from "./3319.js";
9
+ import { useDirection } from "./9863.js";
10
+ import { CompositeRootContext } from "./8724.js";
11
+ import { CompositeList } from "./9255.js";
12
+ import * as __rspack_external_react from "react";
13
+ const EMPTY_ARRAY = [];
14
+ function useCompositeRoot(params) {
15
+ const { itemSizes, cols = 1, loopFocus = true, onLoop, dense = false, orientation = 'both', direction, highlightedIndex: externalHighlightedIndex, onHighlightedIndexChange: externalSetHighlightedIndex, rootRef: externalRef, enableHomeAndEndKeys = false, stopEventPropagation = false, disabledIndices, modifierKeys = EMPTY_ARRAY } = params;
16
+ const [internalHighlightedIndex, internalSetHighlightedIndex] = __rspack_external_react.useState(0);
17
+ const isGrid = cols > 1;
18
+ const rootRef = __rspack_external_react.useRef(null);
19
+ const mergedRef = useMergedRefs(rootRef, externalRef);
20
+ const elementsRef = __rspack_external_react.useRef([]);
21
+ const hasSetDefaultIndexRef = __rspack_external_react.useRef(false);
22
+ const highlightedIndex = externalHighlightedIndex ?? internalHighlightedIndex;
23
+ const onHighlightedIndexChange = useStableCallback((index, shouldScrollIntoView = false)=>{
24
+ (externalSetHighlightedIndex ?? internalSetHighlightedIndex)(index);
25
+ if (shouldScrollIntoView) {
26
+ const newActiveItem = elementsRef.current[index];
27
+ scrollIntoViewIfNeeded(rootRef.current, newActiveItem, direction, orientation);
28
+ }
29
+ });
30
+ const onMapChange = useStableCallback((map)=>{
31
+ if (0 === map.size || hasSetDefaultIndexRef.current) return;
32
+ hasSetDefaultIndexRef.current = true;
33
+ const sortedElements = Array.from(map.keys());
34
+ const activeItem = sortedElements.find((compositeElement)=>compositeElement?.hasAttribute(ACTIVE_COMPOSITE_ITEM)) ?? null;
35
+ const activeIndex = activeItem ? sortedElements.indexOf(activeItem) : -1;
36
+ if (-1 !== activeIndex) onHighlightedIndexChange(activeIndex);
37
+ scrollIntoViewIfNeeded(rootRef.current, activeItem, direction, orientation);
38
+ });
39
+ const wrappedOnLoop = useStableCallback((event, prevIndex, nextIndex)=>{
40
+ if (!onLoop) return nextIndex;
41
+ return onLoop?.(event, prevIndex, nextIndex, elementsRef);
42
+ });
43
+ const props = __rspack_external_react.useMemo(()=>({
44
+ 'aria-orientation': 'both' === orientation ? void 0 : orientation,
45
+ ref: mergedRef,
46
+ onFocus (event) {
47
+ const element = rootRef.current;
48
+ const target = getTarget(event.nativeEvent);
49
+ if (!element || null == target || !isNativeInput(target)) return;
50
+ target.setSelectionRange(0, target.value.length ?? 0);
51
+ },
52
+ onKeyDown (event) {
53
+ const RELEVANT_KEYS = enableHomeAndEndKeys ? COMPOSITE_KEYS : ARROW_KEYS;
54
+ if (!RELEVANT_KEYS.has(event.key)) return;
55
+ if (isModifierKeySet(event, modifierKeys)) return;
56
+ const element = rootRef.current;
57
+ if (!element) return;
58
+ const isRtl = 'rtl' === direction;
59
+ const horizontalForwardKey = isRtl ? ARROW_LEFT : ARROW_RIGHT;
60
+ const forwardKey = {
61
+ horizontal: horizontalForwardKey,
62
+ vertical: ARROW_DOWN,
63
+ both: horizontalForwardKey
64
+ }[orientation];
65
+ const horizontalBackwardKey = isRtl ? ARROW_RIGHT : ARROW_LEFT;
66
+ const backwardKey = {
67
+ horizontal: horizontalBackwardKey,
68
+ vertical: ARROW_UP,
69
+ both: horizontalBackwardKey
70
+ }[orientation];
71
+ const target = getTarget(event.nativeEvent);
72
+ if (null != target && isNativeInput(target) && !isElementDisabled(target)) {
73
+ const selectionStart = target.selectionStart;
74
+ const selectionEnd = target.selectionEnd;
75
+ const textContent = target.value ?? '';
76
+ if (null == selectionStart || event.shiftKey || selectionStart !== selectionEnd) return;
77
+ if (event.key !== backwardKey && selectionStart < textContent.length) return;
78
+ if (event.key !== forwardKey && selectionStart > 0) return;
79
+ }
80
+ let nextIndex = highlightedIndex;
81
+ const minIndex = getMinListIndex(elementsRef, disabledIndices);
82
+ const maxIndex = getMaxListIndex(elementsRef, disabledIndices);
83
+ if (isGrid) {
84
+ const sizes = itemSizes || Array.from({
85
+ length: elementsRef.current.length
86
+ }, ()=>({
87
+ width: 1,
88
+ height: 1
89
+ }));
90
+ const cellMap = createGridCellMap(sizes, cols, dense);
91
+ const minGridIndex = cellMap.findIndex((index)=>null != index && !isListIndexDisabled(elementsRef.current, index, disabledIndices));
92
+ const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex)=>null == index || isListIndexDisabled(elementsRef.current, index, disabledIndices) ? foundIndex : cellIndex, -1);
93
+ nextIndex = cellMap[getGridNavigatedIndex(cellMap.map((itemIndex)=>null != itemIndex ? elementsRef.current[itemIndex] : null), {
94
+ event,
95
+ orientation,
96
+ loopFocus,
97
+ onLoop: wrappedOnLoop,
98
+ cols,
99
+ disabledIndices: getGridCellIndices([
100
+ ...disabledIndices || elementsRef.current.map((_, index)=>isListIndexDisabled(elementsRef.current, index) ? index : void 0),
101
+ void 0
102
+ ], cellMap),
103
+ minIndex: minGridIndex,
104
+ maxIndex: maxGridIndex,
105
+ prevIndex: getGridCellIndexOfCorner(highlightedIndex > maxIndex ? minIndex : highlightedIndex, sizes, cellMap, cols, event.key === ARROW_DOWN ? 'bl' : event.key === ARROW_RIGHT ? 'tr' : 'tl'),
106
+ rtl: isRtl
107
+ })];
108
+ }
109
+ const forwardKeys = {
110
+ horizontal: [
111
+ horizontalForwardKey
112
+ ],
113
+ vertical: [
114
+ ARROW_DOWN
115
+ ],
116
+ both: [
117
+ horizontalForwardKey,
118
+ ARROW_DOWN
119
+ ]
120
+ }[orientation];
121
+ const backwardKeys = {
122
+ horizontal: [
123
+ horizontalBackwardKey
124
+ ],
125
+ vertical: [
126
+ ARROW_UP
127
+ ],
128
+ both: [
129
+ horizontalBackwardKey,
130
+ ARROW_UP
131
+ ]
132
+ }[orientation];
133
+ const preventedKeys = isGrid ? RELEVANT_KEYS : ({
134
+ horizontal: enableHomeAndEndKeys ? HORIZONTAL_KEYS_WITH_EXTRA_KEYS : HORIZONTAL_KEYS,
135
+ vertical: enableHomeAndEndKeys ? VERTICAL_KEYS_WITH_EXTRA_KEYS : VERTICAL_KEYS,
136
+ both: RELEVANT_KEYS
137
+ })[orientation];
138
+ if (enableHomeAndEndKeys) {
139
+ if ("Home" === event.key) nextIndex = minIndex;
140
+ else if ("End" === event.key) nextIndex = maxIndex;
141
+ }
142
+ if (nextIndex === highlightedIndex && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))) if (loopFocus && nextIndex === maxIndex && forwardKeys.includes(event.key)) {
143
+ nextIndex = minIndex;
144
+ if (onLoop) nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
145
+ } else if (loopFocus && nextIndex === minIndex && backwardKeys.includes(event.key)) {
146
+ nextIndex = maxIndex;
147
+ if (onLoop) nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
148
+ } else nextIndex = findNonDisabledListIndex(elementsRef.current, {
149
+ startingIndex: nextIndex,
150
+ decrement: backwardKeys.includes(event.key),
151
+ disabledIndices
152
+ });
153
+ if (nextIndex !== highlightedIndex && !isIndexOutOfListBounds(elementsRef.current, nextIndex)) {
154
+ if (stopEventPropagation) event.stopPropagation();
155
+ if (preventedKeys.has(event.key)) event.preventDefault();
156
+ onHighlightedIndexChange(nextIndex, true);
157
+ queueMicrotask(()=>{
158
+ elementsRef.current[nextIndex]?.focus();
159
+ });
160
+ }
161
+ }
162
+ }), [
163
+ cols,
164
+ dense,
165
+ direction,
166
+ disabledIndices,
167
+ elementsRef,
168
+ enableHomeAndEndKeys,
169
+ highlightedIndex,
170
+ isGrid,
171
+ itemSizes,
172
+ loopFocus,
173
+ onLoop,
174
+ wrappedOnLoop,
175
+ mergedRef,
176
+ modifierKeys,
177
+ onHighlightedIndexChange,
178
+ orientation,
179
+ stopEventPropagation
180
+ ]);
181
+ return __rspack_external_react.useMemo(()=>({
182
+ props,
183
+ highlightedIndex,
184
+ onHighlightedIndexChange,
185
+ elementsRef,
186
+ disabledIndices,
187
+ onMapChange,
188
+ relayKeyboardEvent: props.onKeyDown
189
+ }), [
190
+ props,
191
+ highlightedIndex,
192
+ onHighlightedIndexChange,
193
+ elementsRef,
194
+ disabledIndices,
195
+ onMapChange
196
+ ]);
197
+ }
198
+ function isModifierKeySet(event, ignoredModifierKeys) {
199
+ for (const key of MODIFIER_KEYS.values())if (!ignoredModifierKeys.includes(key)) {
200
+ if (event.getModifierState(key)) return true;
201
+ }
202
+ return false;
203
+ }
204
+ function CompositeRoot(componentProps) {
205
+ const { render, className, style, refs = empty_EMPTY_ARRAY, props = empty_EMPTY_ARRAY, state = EMPTY_OBJECT, stateAttributesMapping, highlightedIndex: highlightedIndexProp, onHighlightedIndexChange: onHighlightedIndexChangeProp, orientation, dense, itemSizes, loopFocus, onLoop, cols, enableHomeAndEndKeys, onMapChange: onMapChangeProp, stopEventPropagation = true, rootRef, disabledIndices, modifierKeys, highlightItemOnHover = false, tag = 'div', ...elementProps } = componentProps;
206
+ const direction = useDirection();
207
+ const { props: defaultProps, highlightedIndex, onHighlightedIndexChange, elementsRef, onMapChange: onMapChangeUnwrapped, relayKeyboardEvent } = useCompositeRoot({
208
+ itemSizes,
209
+ cols,
210
+ loopFocus,
211
+ onLoop,
212
+ dense,
213
+ orientation,
214
+ highlightedIndex: highlightedIndexProp,
215
+ onHighlightedIndexChange: onHighlightedIndexChangeProp,
216
+ rootRef,
217
+ stopEventPropagation,
218
+ enableHomeAndEndKeys,
219
+ direction,
220
+ disabledIndices,
221
+ modifierKeys
222
+ });
223
+ const element = useRenderElement(tag, componentProps, {
224
+ state,
225
+ ref: refs,
226
+ props: [
227
+ defaultProps,
228
+ ...props,
229
+ elementProps
230
+ ],
231
+ stateAttributesMapping
232
+ });
233
+ const contextValue = __rspack_external_react.useMemo(()=>({
234
+ highlightedIndex,
235
+ onHighlightedIndexChange,
236
+ highlightItemOnHover,
237
+ relayKeyboardEvent
238
+ }), [
239
+ highlightedIndex,
240
+ onHighlightedIndexChange,
241
+ highlightItemOnHover,
242
+ relayKeyboardEvent
243
+ ]);
244
+ return /*#__PURE__*/ jsx(CompositeRootContext.Provider, {
245
+ value: contextValue,
246
+ children: /*#__PURE__*/ jsx(CompositeList, {
247
+ elementsRef: elementsRef,
248
+ onMapChange: (newMap)=>{
249
+ onMapChangeProp?.(newMap);
250
+ onMapChangeUnwrapped(newMap);
251
+ },
252
+ children: element
253
+ })
254
+ });
255
+ }
256
+ export { CompositeRoot };
package/dist/9189.js ADDED
@@ -0,0 +1,158 @@
1
+ import { useCompositeRootContext } from "./8724.js";
2
+ import { useIsoLayoutEffect, SafeReact } from "./6499.js";
3
+ import { error } from "./4026.js";
4
+ import { mergeProps, makeEventPreventable } from "./8272.js";
5
+ import { useStableCallback } from "./7541.js";
6
+ import { isHTMLElement } from "./3829.js";
7
+ import * as __rspack_external_react from "react";
8
+ function useFocusableWhenDisabled(parameters) {
9
+ const { focusableWhenDisabled, disabled, composite = false, tabIndex: tabIndexProp = 0, isNativeButton } = parameters;
10
+ const isFocusableComposite = composite && false !== focusableWhenDisabled;
11
+ const isNonFocusableComposite = composite && false === focusableWhenDisabled;
12
+ const props = __rspack_external_react.useMemo(()=>{
13
+ const additionalProps = {
14
+ onKeyDown (event) {
15
+ if (disabled && focusableWhenDisabled && 'Tab' !== event.key) event.preventDefault();
16
+ }
17
+ };
18
+ if (!composite) {
19
+ additionalProps.tabIndex = tabIndexProp;
20
+ if (!isNativeButton && disabled) additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
21
+ }
22
+ if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) additionalProps['aria-disabled'] = disabled;
23
+ if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) additionalProps.disabled = disabled;
24
+ return additionalProps;
25
+ }, [
26
+ composite,
27
+ disabled,
28
+ focusableWhenDisabled,
29
+ isFocusableComposite,
30
+ isNonFocusableComposite,
31
+ isNativeButton,
32
+ tabIndexProp
33
+ ]);
34
+ return {
35
+ props
36
+ };
37
+ }
38
+ function useButton(parameters = {}) {
39
+ const { disabled = false, focusableWhenDisabled, tabIndex = 0, native: isNativeButton = true, composite: compositeProp } = parameters;
40
+ const elementRef = __rspack_external_react.useRef(null);
41
+ const compositeRootContext = useCompositeRootContext(true);
42
+ const isCompositeItem = compositeProp ?? void 0 !== compositeRootContext;
43
+ const { props: focusableWhenDisabledProps } = useFocusableWhenDisabled({
44
+ focusableWhenDisabled,
45
+ disabled,
46
+ composite: isCompositeItem,
47
+ tabIndex,
48
+ isNativeButton
49
+ });
50
+ if ('production' !== process.env.NODE_ENV) __rspack_external_react.useEffect(()=>{
51
+ if (!elementRef.current) return;
52
+ const isButtonTag = isButtonElement(elementRef.current);
53
+ if (isNativeButton) {
54
+ if (!isButtonTag) {
55
+ const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
56
+ const message = "A component that acts as a button expected a native <button> because the `nativeButton` prop is true. Rendering a non-<button> removes native button semantics, which can impact forms and accessibility. Use a real <button> in the `render` prop, or set `nativeButton` to `false`.";
57
+ error(`${message}${ownerStackMessage}`);
58
+ }
59
+ } else if (isButtonTag) {
60
+ const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
61
+ const message = "A component that acts as a button expected a non-<button> because the `nativeButton` prop is false. Rendering a <button> keeps native behavior while Base UI applies non-native attributes and handlers, which can add unintended extra attributes (such as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set `nativeButton` to `true`.";
62
+ error(`${message}${ownerStackMessage}`);
63
+ }
64
+ }, [
65
+ isNativeButton
66
+ ]);
67
+ const updateDisabled = __rspack_external_react.useCallback(()=>{
68
+ const element = elementRef.current;
69
+ if (!isButtonElement(element)) return;
70
+ if (isCompositeItem && disabled && void 0 === focusableWhenDisabledProps.disabled && element.disabled) element.disabled = false;
71
+ }, [
72
+ disabled,
73
+ focusableWhenDisabledProps.disabled,
74
+ isCompositeItem
75
+ ]);
76
+ useIsoLayoutEffect(updateDisabled, [
77
+ updateDisabled
78
+ ]);
79
+ const getButtonProps = __rspack_external_react.useCallback((externalProps = {})=>{
80
+ const { onClick: externalOnClick, onMouseDown: externalOnMouseDown, onKeyUp: externalOnKeyUp, onKeyDown: externalOnKeyDown, onPointerDown: externalOnPointerDown, ...otherExternalProps } = externalProps;
81
+ return mergeProps({
82
+ onClick (event) {
83
+ if (disabled) return void event.preventDefault();
84
+ externalOnClick?.(event);
85
+ },
86
+ onMouseDown (event) {
87
+ if (!disabled) externalOnMouseDown?.(event);
88
+ },
89
+ onKeyDown (event) {
90
+ if (disabled) return;
91
+ makeEventPreventable(event);
92
+ externalOnKeyDown?.(event);
93
+ if (event.baseUIHandlerPrevented) return;
94
+ const isCurrentTarget = event.target === event.currentTarget;
95
+ const currentTarget = event.currentTarget;
96
+ const isButton = isButtonElement(currentTarget);
97
+ const isLink = !isNativeButton && isValidLinkElement(currentTarget);
98
+ const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
99
+ const isEnterKey = 'Enter' === event.key;
100
+ const isSpaceKey = ' ' === event.key;
101
+ const role = currentTarget.getAttribute('role');
102
+ const isTextNavigationRole = role?.startsWith('menuitem') || 'option' === role || 'gridcell' === role;
103
+ if (isCurrentTarget && isCompositeItem && isSpaceKey) {
104
+ if (event.defaultPrevented && isTextNavigationRole) return;
105
+ event.preventDefault();
106
+ if (isLink || isNativeButton && isButton) {
107
+ currentTarget.click();
108
+ event.preventBaseUIHandler();
109
+ } else if (shouldClick) {
110
+ externalOnClick?.(event);
111
+ event.preventBaseUIHandler();
112
+ }
113
+ return;
114
+ }
115
+ if (shouldClick) {
116
+ if (!isNativeButton && (isSpaceKey || isEnterKey)) event.preventDefault();
117
+ if (!isNativeButton && isEnterKey) externalOnClick?.(event);
118
+ }
119
+ },
120
+ onKeyUp (event) {
121
+ if (disabled) return;
122
+ makeEventPreventable(event);
123
+ externalOnKeyUp?.(event);
124
+ if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && ' ' === event.key) return void event.preventDefault();
125
+ if (event.baseUIHandlerPrevented) return;
126
+ if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && ' ' === event.key) externalOnClick?.(event);
127
+ },
128
+ onPointerDown (event) {
129
+ if (disabled) return void event.preventDefault();
130
+ externalOnPointerDown?.(event);
131
+ }
132
+ }, isNativeButton ? {
133
+ type: 'button'
134
+ } : {
135
+ role: 'button'
136
+ }, focusableWhenDisabledProps, otherExternalProps);
137
+ }, [
138
+ disabled,
139
+ focusableWhenDisabledProps,
140
+ isCompositeItem,
141
+ isNativeButton
142
+ ]);
143
+ const buttonRef = useStableCallback((element)=>{
144
+ elementRef.current = element;
145
+ updateDisabled();
146
+ });
147
+ return {
148
+ getButtonProps,
149
+ buttonRef
150
+ };
151
+ }
152
+ function isButtonElement(elem) {
153
+ return isHTMLElement(elem) && 'BUTTON' === elem.tagName;
154
+ }
155
+ function isValidLinkElement(elem) {
156
+ return Boolean(elem?.tagName === 'A' && elem?.href);
157
+ }
158
+ export { useButton, useFocusableWhenDisabled };
package/dist/9255.js ADDED
@@ -0,0 +1,136 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useStableCallback } from "./7541.js";
3
+ import { useRefWithInit } from "./8272.js";
4
+ import { useIsoLayoutEffect } from "./6499.js";
5
+ import { CompositeListContext } from "./5036.js";
6
+ import * as __rspack_external_react from "react";
7
+ function CompositeList(props) {
8
+ const { children, elementsRef, labelsRef, onMapChange: onMapChangeProp } = props;
9
+ const onMapChange = useStableCallback(onMapChangeProp);
10
+ const nextIndexRef = __rspack_external_react.useRef(0);
11
+ const listeners = useRefWithInit(createListeners).current;
12
+ const map = useRefWithInit(createMap).current;
13
+ const [mapTick, setMapTick] = __rspack_external_react.useState(0);
14
+ const lastTickRef = __rspack_external_react.useRef(mapTick);
15
+ const register = useStableCallback((node, metadata)=>{
16
+ map.set(node, metadata ?? null);
17
+ lastTickRef.current += 1;
18
+ setMapTick(lastTickRef.current);
19
+ });
20
+ const unregister = useStableCallback((node)=>{
21
+ map.delete(node);
22
+ lastTickRef.current += 1;
23
+ setMapTick(lastTickRef.current);
24
+ });
25
+ const sortedMap = __rspack_external_react.useMemo(()=>{
26
+ disableEslintWarning(mapTick);
27
+ const newMap = new Map();
28
+ const sortedNodes = Array.from(map.keys()).filter((node)=>node.isConnected).sort(sortByDocumentPosition);
29
+ sortedNodes.forEach((node, index)=>{
30
+ const metadata = map.get(node) ?? {};
31
+ newMap.set(node, {
32
+ ...metadata,
33
+ index
34
+ });
35
+ });
36
+ return newMap;
37
+ }, [
38
+ map,
39
+ mapTick
40
+ ]);
41
+ useIsoLayoutEffect(()=>{
42
+ if ('function' != typeof MutationObserver || 0 === sortedMap.size) return;
43
+ const mutationObserver = new MutationObserver((entries)=>{
44
+ const diff = new Set();
45
+ const updateDiff = (node)=>diff.has(node) ? diff.delete(node) : diff.add(node);
46
+ entries.forEach((entry)=>{
47
+ entry.removedNodes.forEach(updateDiff);
48
+ entry.addedNodes.forEach(updateDiff);
49
+ });
50
+ if (0 === diff.size) {
51
+ lastTickRef.current += 1;
52
+ setMapTick(lastTickRef.current);
53
+ }
54
+ });
55
+ sortedMap.forEach((_, node)=>{
56
+ if (node.parentElement) mutationObserver.observe(node.parentElement, {
57
+ childList: true
58
+ });
59
+ });
60
+ return ()=>{
61
+ mutationObserver.disconnect();
62
+ };
63
+ }, [
64
+ sortedMap
65
+ ]);
66
+ useIsoLayoutEffect(()=>{
67
+ const shouldUpdateLengths = lastTickRef.current === mapTick;
68
+ if (shouldUpdateLengths) {
69
+ if (elementsRef.current.length !== sortedMap.size) elementsRef.current.length = sortedMap.size;
70
+ if (labelsRef && labelsRef.current.length !== sortedMap.size) labelsRef.current.length = sortedMap.size;
71
+ nextIndexRef.current = sortedMap.size;
72
+ }
73
+ onMapChange(sortedMap);
74
+ }, [
75
+ onMapChange,
76
+ sortedMap,
77
+ elementsRef,
78
+ labelsRef,
79
+ mapTick
80
+ ]);
81
+ useIsoLayoutEffect(()=>()=>{
82
+ elementsRef.current = [];
83
+ }, [
84
+ elementsRef
85
+ ]);
86
+ useIsoLayoutEffect(()=>()=>{
87
+ if (labelsRef) labelsRef.current = [];
88
+ }, [
89
+ labelsRef
90
+ ]);
91
+ const subscribeMapChange = useStableCallback((fn)=>{
92
+ listeners.add(fn);
93
+ return ()=>{
94
+ listeners.delete(fn);
95
+ };
96
+ });
97
+ useIsoLayoutEffect(()=>{
98
+ listeners.forEach((l)=>l(sortedMap));
99
+ }, [
100
+ listeners,
101
+ sortedMap
102
+ ]);
103
+ const contextValue = __rspack_external_react.useMemo(()=>({
104
+ register,
105
+ unregister,
106
+ subscribeMapChange,
107
+ elementsRef,
108
+ labelsRef,
109
+ nextIndexRef
110
+ }), [
111
+ register,
112
+ unregister,
113
+ subscribeMapChange,
114
+ elementsRef,
115
+ labelsRef,
116
+ nextIndexRef
117
+ ]);
118
+ return /*#__PURE__*/ jsx(CompositeListContext.Provider, {
119
+ value: contextValue,
120
+ children: children
121
+ });
122
+ }
123
+ function createMap() {
124
+ return new Map();
125
+ }
126
+ function createListeners() {
127
+ return new Set();
128
+ }
129
+ function sortByDocumentPosition(a, b) {
130
+ const position = a.compareDocumentPosition(b);
131
+ if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) return -1;
132
+ if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) return 1;
133
+ return 0;
134
+ }
135
+ function disableEslintWarning(_) {}
136
+ export { CompositeList };