@wix/site-ui 1.30.0 → 1.31.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/dist/1268.js +99 -0
- package/dist/1279.js +7 -0
- package/dist/1457.js +10 -0
- package/dist/1477.js +106 -0
- package/dist/1500.js +111 -0
- package/dist/167.js +6 -0
- package/dist/2274.js +34 -0
- package/dist/2287.js +17 -0
- package/dist/2418.js +31 -0
- package/dist/2801.js +20 -0
- package/dist/285.js +86 -0
- package/dist/2861.js +6 -0
- package/dist/3020.js +7 -0
- package/dist/3021.js +72 -0
- package/dist/3056.js +229 -0
- package/dist/3140.js +4 -0
- package/dist/3248.js +307 -0
- package/dist/3296.js +4 -0
- package/dist/3319.js +400 -0
- package/dist/3395.js +4 -0
- package/dist/3485.js +854 -0
- package/dist/353.js +14 -0
- package/dist/3670.js +418 -0
- package/dist/3829.js +113 -0
- package/dist/4026.js +12 -0
- package/dist/4143.js +46 -0
- package/dist/42.js +32 -0
- package/dist/4281.js +30 -0
- package/dist/4346.js +2 -0
- package/dist/4388.js +418 -0
- package/dist/4490.js +32 -0
- package/dist/4495.js +9 -0
- package/dist/4549.js +24 -0
- package/dist/4586.js +41 -0
- package/dist/4586.js.LICENSE.txt +19 -0
- package/dist/4707.js +19 -0
- package/dist/4723.js +7 -0
- package/dist/4745.js +7 -0
- package/dist/4768.js +35 -0
- package/dist/4922.js +15 -0
- package/dist/5036.js +17 -0
- package/dist/5085.js +20 -0
- package/dist/5299.js +597 -0
- package/dist/5659.js +4 -0
- package/dist/5778.js +10 -0
- package/dist/5864.js +86 -0
- package/dist/5992.js +913 -0
- package/dist/5992.js.LICENSE.txt +19 -0
- package/dist/6003.js +10 -0
- package/dist/6046.js +29 -0
- package/dist/6089.js +2355 -0
- package/dist/6107.js +10 -0
- package/dist/6247.js +20 -0
- package/dist/6270.js +487 -0
- package/dist/6329.js +32 -0
- package/dist/6330.js +30 -0
- package/dist/6499.js +7 -0
- package/dist/6535.js +71 -0
- package/dist/6588.js +382 -0
- package/dist/6706.js +16 -0
- package/dist/6825.js +7 -0
- package/dist/6882.js +1562 -0
- package/dist/6914.js +30 -0
- package/dist/7021.js +13 -0
- package/dist/7366.js +83 -0
- package/dist/7373.js +25 -0
- package/dist/7541.js +25 -0
- package/dist/7564.js +10 -0
- package/dist/7642.js +20 -0
- package/dist/7725.js +10 -0
- package/dist/7871.js +38 -0
- package/dist/8052.js +352 -0
- package/dist/8106.js +238 -0
- package/dist/8171.js +346 -0
- package/dist/8225.js +21 -0
- package/dist/8272.js +333 -0
- package/dist/8527.js +58 -0
- package/dist/8724.js +10 -0
- package/dist/8750.js +1920 -0
- package/dist/8758.js +43 -0
- package/dist/880.js +149 -0
- package/dist/8935.js +8 -0
- package/dist/8960.js +22 -0
- package/dist/8971.js +40 -0
- package/dist/8979.js +10 -0
- package/dist/8996.js +71 -0
- package/dist/904.js +121 -0
- package/dist/9048.js +52 -0
- package/dist/9087.js +256 -0
- package/dist/9189.js +158 -0
- package/dist/9255.js +136 -0
- package/dist/9352.js +148 -0
- package/dist/951.js +22 -0
- package/dist/9635.js +22 -0
- package/dist/9829.js +4 -0
- package/dist/9863.js +8 -0
- package/dist/Accordion/index.d.ts +569 -12
- package/dist/Accordion/index.js +423 -8
- package/dist/AlertDialog/index.d.ts +1417 -18
- package/dist/AlertDialog/index.js +34 -14
- package/dist/Autocomplete/index.d.ts +1861 -38
- package/dist/Autocomplete/index.js +98 -24
- package/dist/Avatar/index.d.ts +129 -7
- package/dist/Avatar/index.js +149 -6
- package/dist/Breadcrumbs/index.d.ts +960 -7
- package/dist/Breadcrumbs/index.js +5 -5
- package/dist/Button/index.d.ts +88 -6
- package/dist/Button/index.js +27 -3
- package/dist/Checkbox/index.d.ts +425 -5
- package/dist/Checkbox/index.js +45 -5
- package/dist/CheckboxGroup/index.d.ts +318 -3
- package/dist/CheckboxGroup/index.js +166 -3
- package/dist/Collapsible/index.d.ts +377 -7
- package/dist/Collapsible/index.js +160 -6
- package/dist/Combobox/index.d.ts +1984 -48
- package/dist/Combobox/index.js +352 -29
- package/dist/ContextMenu/index.d.ts +2340 -36
- package/dist/ContextMenu/index.js +197 -22
- package/dist/Dialog/index.d.ts +1355 -18
- package/dist/Dialog/index.js +16 -14
- package/dist/Drawer/index.d.ts +1653 -18
- package/dist/Drawer/index.js +2797 -20
- package/dist/Field/index.d.ts +655 -15
- package/dist/Field/index.js +677 -10
- package/dist/Fieldset/index.d.ts +94 -5
- package/dist/Fieldset/index.js +68 -5
- package/dist/Form/index.d.ts +331 -2
- package/dist/Form/index.js +106 -3
- package/dist/Input/index.d.ts +692 -3
- package/dist/Input/index.js +10 -3
- package/dist/Menu/index.d.ts +2301 -36
- package/dist/Menu/index.js +365 -26
- package/dist/Menubar/index.d.ts +2301 -3
- package/dist/Menubar/index.js +105 -3
- package/dist/Meter/index.d.ts +175 -11
- package/dist/Meter/index.js +129 -9
- package/dist/NavigationMenu/index.d.ts +978 -28
- package/dist/NavigationMenu/index.js +1034 -17
- package/dist/NumberField/index.d.ts +612 -15
- package/dist/NumberField/index.js +1409 -11
- package/dist/Popover/index.d.ts +1655 -20
- package/dist/Popover/index.js +792 -17
- package/dist/PreviewCard/index.d.ts +1523 -14
- package/dist/PreviewCard/index.js +679 -14
- package/dist/Progress/index.d.ts +183 -11
- package/dist/Progress/index.js +181 -9
- package/dist/Radio/index.d.ts +185 -6
- package/dist/Radio/index.js +253 -6
- package/dist/RadioGroup/index.d.ts +341 -2
- package/dist/RadioGroup/index.js +154 -3
- package/dist/ScrollArea/index.d.ts +265 -13
- package/dist/ScrollArea/index.js +892 -10
- package/dist/Select/index.d.ts +1493 -38
- package/dist/Select/index.js +1824 -23
- package/dist/Separator/index.d.ts +80 -6
- package/dist/Separator/index.js +3 -3
- package/dist/Slider/index.d.ts +678 -16
- package/dist/Slider/index.js +1199 -11
- package/dist/Switch/index.d.ts +393 -5
- package/dist/Switch/index.js +208 -6
- package/dist/Tabs/index.d.ts +523 -12
- package/dist/Tabs/index.js +685 -9
- package/dist/Toggle/index.d.ts +305 -2
- package/dist/Toggle/index.js +76 -3
- package/dist/ToggleGroup/index.d.ts +316 -2
- package/dist/ToggleGroup/index.js +102 -3
- package/dist/Toolbar/index.d.ts +282 -13
- package/dist/Toolbar/index.js +230 -9
- package/dist/Tooltip/index.d.ts +1572 -14
- package/dist/Tooltip/index.js +965 -14
- package/dist/index.d.ts +12749 -652
- package/dist/rslib-runtime.js +18 -0
- 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 };
|