@wix/site-ui 1.29.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/Badge/index.css +44 -0
- package/dist/Badge/index.d.ts +22 -0
- package/dist/Badge/index.js +23 -0
- 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 +12758 -646
- package/dist/index.js +1 -0
- package/dist/rslib-runtime.js +18 -0
- package/package.json +3 -3
package/dist/3056.js
ADDED
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
import { Timeout, useTimeout } from "./42.js";
|
|
2
|
+
import { useRefWithInit } from "./8272.js";
|
|
3
|
+
import { useOnMount } from "./2861.js";
|
|
4
|
+
import { isMouseLikePointerType } from "./6330.js";
|
|
5
|
+
import { useFloatingTree, useFloatingParentNodeId } from "./285.js";
|
|
6
|
+
import { useStableCallback } from "./7541.js";
|
|
7
|
+
import { useIsoLayoutEffect } from "./6499.js";
|
|
8
|
+
import { isElement } from "./3829.js";
|
|
9
|
+
import { ownerDocument } from "./9829.js";
|
|
10
|
+
import { getNodeChildren } from "./5992.js";
|
|
11
|
+
import { createChangeEventDetails } from "./4768.js";
|
|
12
|
+
import { triggerHover } from "./2418.js";
|
|
13
|
+
import { getTarget, contains } from "./4549.js";
|
|
14
|
+
import { isTargetInsideEnabledTrigger, isInteractiveElement } from "./8758.js";
|
|
15
|
+
import { mergeCleanups } from "./4495.js";
|
|
16
|
+
import { addEventListener } from "./4723.js";
|
|
17
|
+
import * as __rspack_external_react from "react";
|
|
18
|
+
class HoverInteraction {
|
|
19
|
+
constructor(){
|
|
20
|
+
this.pointerType = void 0;
|
|
21
|
+
this.interactedInside = false;
|
|
22
|
+
this.handler = void 0;
|
|
23
|
+
this.blockMouseMove = true;
|
|
24
|
+
this.performedPointerEventsMutation = false;
|
|
25
|
+
this.pointerEventsScopeElement = null;
|
|
26
|
+
this.pointerEventsReferenceElement = null;
|
|
27
|
+
this.pointerEventsFloatingElement = null;
|
|
28
|
+
this.restTimeoutPending = false;
|
|
29
|
+
this.openChangeTimeout = new Timeout();
|
|
30
|
+
this.restTimeout = new Timeout();
|
|
31
|
+
this.handleCloseOptions = void 0;
|
|
32
|
+
}
|
|
33
|
+
static create() {
|
|
34
|
+
return new HoverInteraction();
|
|
35
|
+
}
|
|
36
|
+
dispose = ()=>{
|
|
37
|
+
this.openChangeTimeout.clear();
|
|
38
|
+
this.restTimeout.clear();
|
|
39
|
+
};
|
|
40
|
+
disposeEffect = ()=>this.dispose;
|
|
41
|
+
}
|
|
42
|
+
const pointerEventsMutationOwnerByScopeElement = new WeakMap();
|
|
43
|
+
function clearSafePolygonPointerEventsMutation(instance) {
|
|
44
|
+
if (!instance.performedPointerEventsMutation) return;
|
|
45
|
+
const scopeElement = instance.pointerEventsScopeElement;
|
|
46
|
+
if (scopeElement && pointerEventsMutationOwnerByScopeElement.get(scopeElement) === instance) {
|
|
47
|
+
instance.pointerEventsScopeElement?.style.removeProperty('pointer-events');
|
|
48
|
+
instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events');
|
|
49
|
+
instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events');
|
|
50
|
+
pointerEventsMutationOwnerByScopeElement.delete(scopeElement);
|
|
51
|
+
}
|
|
52
|
+
instance.performedPointerEventsMutation = false;
|
|
53
|
+
instance.pointerEventsScopeElement = null;
|
|
54
|
+
instance.pointerEventsReferenceElement = null;
|
|
55
|
+
instance.pointerEventsFloatingElement = null;
|
|
56
|
+
}
|
|
57
|
+
function applySafePolygonPointerEventsMutation(instance, options) {
|
|
58
|
+
const { scopeElement, referenceElement, floatingElement } = options;
|
|
59
|
+
const existingOwner = pointerEventsMutationOwnerByScopeElement.get(scopeElement);
|
|
60
|
+
if (existingOwner && existingOwner !== instance) clearSafePolygonPointerEventsMutation(existingOwner);
|
|
61
|
+
clearSafePolygonPointerEventsMutation(instance);
|
|
62
|
+
instance.performedPointerEventsMutation = true;
|
|
63
|
+
instance.pointerEventsScopeElement = scopeElement;
|
|
64
|
+
instance.pointerEventsReferenceElement = referenceElement;
|
|
65
|
+
instance.pointerEventsFloatingElement = floatingElement;
|
|
66
|
+
pointerEventsMutationOwnerByScopeElement.set(scopeElement, instance);
|
|
67
|
+
scopeElement.style.pointerEvents = 'none';
|
|
68
|
+
referenceElement.style.pointerEvents = 'auto';
|
|
69
|
+
floatingElement.style.pointerEvents = 'auto';
|
|
70
|
+
}
|
|
71
|
+
function useHoverInteractionSharedState(store) {
|
|
72
|
+
const data = store.context.dataRef.current;
|
|
73
|
+
const instance = useRefWithInit(()=>data.hoverInteractionState ?? HoverInteraction.create()).current;
|
|
74
|
+
if (!data.hoverInteractionState) data.hoverInteractionState = instance;
|
|
75
|
+
useOnMount(data.hoverInteractionState.disposeEffect);
|
|
76
|
+
return data.hoverInteractionState;
|
|
77
|
+
}
|
|
78
|
+
function resolveValue(value, pointerType) {
|
|
79
|
+
if (null != pointerType && !isMouseLikePointerType(pointerType)) return 0;
|
|
80
|
+
if ('function' == typeof value) return value();
|
|
81
|
+
return value;
|
|
82
|
+
}
|
|
83
|
+
function getDelay(value, prop, pointerType) {
|
|
84
|
+
const result = resolveValue(value, pointerType);
|
|
85
|
+
if ('number' == typeof result) return result;
|
|
86
|
+
return result?.[prop];
|
|
87
|
+
}
|
|
88
|
+
function getRestMs(value) {
|
|
89
|
+
if ('function' == typeof value) return value();
|
|
90
|
+
return value;
|
|
91
|
+
}
|
|
92
|
+
function useHoverShared_isClickLikeOpenEvent(openEventType, interactedInside) {
|
|
93
|
+
return interactedInside || 'click' === openEventType || 'mousedown' === openEventType;
|
|
94
|
+
}
|
|
95
|
+
function isHoverOpenEvent(openEventType) {
|
|
96
|
+
return openEventType?.includes('mouse') && 'mousedown' !== openEventType;
|
|
97
|
+
}
|
|
98
|
+
function useHoverFloatingInteraction(context, parameters = {}) {
|
|
99
|
+
const { enabled = true, closeDelay: closeDelayProp = 0, nodeId: nodeIdProp } = parameters;
|
|
100
|
+
const store = 'rootStore' in context ? context.rootStore : context;
|
|
101
|
+
const open = store.useState('open');
|
|
102
|
+
const floatingElement = store.useState('floatingElement');
|
|
103
|
+
const domReferenceElement = store.useState('domReferenceElement');
|
|
104
|
+
const { dataRef } = store.context;
|
|
105
|
+
const tree = useFloatingTree();
|
|
106
|
+
const parentId = useFloatingParentNodeId();
|
|
107
|
+
const instance = useHoverInteractionSharedState(store);
|
|
108
|
+
const childClosedTimeout = useTimeout();
|
|
109
|
+
const isClickLikeOpenEvent = useStableCallback(()=>useHoverShared_isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside));
|
|
110
|
+
const isHoverOpen = useStableCallback(()=>isHoverOpenEvent(dataRef.current.openEvent?.type));
|
|
111
|
+
const clearPointerEvents = useStableCallback(()=>{
|
|
112
|
+
clearSafePolygonPointerEventsMutation(instance);
|
|
113
|
+
});
|
|
114
|
+
useIsoLayoutEffect(()=>{
|
|
115
|
+
if (!open) {
|
|
116
|
+
instance.pointerType = void 0;
|
|
117
|
+
instance.restTimeoutPending = false;
|
|
118
|
+
instance.interactedInside = false;
|
|
119
|
+
clearPointerEvents();
|
|
120
|
+
}
|
|
121
|
+
}, [
|
|
122
|
+
open,
|
|
123
|
+
instance,
|
|
124
|
+
clearPointerEvents
|
|
125
|
+
]);
|
|
126
|
+
__rspack_external_react.useEffect(()=>clearPointerEvents, [
|
|
127
|
+
clearPointerEvents
|
|
128
|
+
]);
|
|
129
|
+
useIsoLayoutEffect(()=>{
|
|
130
|
+
if (!enabled) return;
|
|
131
|
+
if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && isElement(domReferenceElement) && floatingElement) {
|
|
132
|
+
const ref = domReferenceElement;
|
|
133
|
+
const floatingEl = floatingElement;
|
|
134
|
+
const doc = ownerDocument(floatingElement);
|
|
135
|
+
const parentFloating = tree?.nodesRef.current.find((node)=>node.id === parentId)?.context?.elements.floating;
|
|
136
|
+
if (parentFloating) parentFloating.style.pointerEvents = '';
|
|
137
|
+
const cachedScopeElement = instance.pointerEventsScopeElement !== floatingEl ? instance.pointerEventsScopeElement : null;
|
|
138
|
+
const parentScopeElement = parentFloating !== floatingEl ? parentFloating : null;
|
|
139
|
+
const scopeElement = instance.handleCloseOptions?.getScope?.() ?? cachedScopeElement ?? parentScopeElement ?? ref.closest('[data-rootownerid]') ?? doc.body;
|
|
140
|
+
applySafePolygonPointerEventsMutation(instance, {
|
|
141
|
+
scopeElement,
|
|
142
|
+
referenceElement: ref,
|
|
143
|
+
floatingElement: floatingEl
|
|
144
|
+
});
|
|
145
|
+
return ()=>{
|
|
146
|
+
clearPointerEvents();
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
}, [
|
|
150
|
+
enabled,
|
|
151
|
+
open,
|
|
152
|
+
domReferenceElement,
|
|
153
|
+
floatingElement,
|
|
154
|
+
instance,
|
|
155
|
+
isHoverOpen,
|
|
156
|
+
tree,
|
|
157
|
+
parentId,
|
|
158
|
+
clearPointerEvents
|
|
159
|
+
]);
|
|
160
|
+
__rspack_external_react.useEffect(()=>{
|
|
161
|
+
if (!enabled) return;
|
|
162
|
+
function hasParentChildren() {
|
|
163
|
+
return !!(tree && parentId && getNodeChildren(tree.nodesRef.current, parentId).length > 0);
|
|
164
|
+
}
|
|
165
|
+
function closeWithDelay(event) {
|
|
166
|
+
const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
|
|
167
|
+
const close = ()=>{
|
|
168
|
+
store.setOpen(false, createChangeEventDetails(triggerHover, event));
|
|
169
|
+
tree?.events.emit('floating.closed', event);
|
|
170
|
+
};
|
|
171
|
+
if (closeDelay) instance.openChangeTimeout.start(closeDelay, close);
|
|
172
|
+
else {
|
|
173
|
+
instance.openChangeTimeout.clear();
|
|
174
|
+
close();
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
function handleInteractInside(event) {
|
|
178
|
+
const target = getTarget(event);
|
|
179
|
+
if (!isInteractiveElement(target)) {
|
|
180
|
+
instance.interactedInside = false;
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
instance.interactedInside = target?.closest('[aria-haspopup]') != null;
|
|
184
|
+
}
|
|
185
|
+
function onFloatingMouseEnter() {
|
|
186
|
+
instance.openChangeTimeout.clear();
|
|
187
|
+
childClosedTimeout.clear();
|
|
188
|
+
tree?.events.off('floating.closed', onNodeClosed);
|
|
189
|
+
clearPointerEvents();
|
|
190
|
+
}
|
|
191
|
+
function onFloatingMouseLeave(event) {
|
|
192
|
+
if (hasParentChildren() && tree) return void tree.events.on('floating.closed', onNodeClosed);
|
|
193
|
+
if (isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements)) return;
|
|
194
|
+
const currentNodeId = dataRef.current.floatingContext?.nodeId ?? nodeIdProp;
|
|
195
|
+
const relatedTarget = event.relatedTarget;
|
|
196
|
+
const isMovingIntoDescendantFloating = tree && currentNodeId && isElement(relatedTarget) && getNodeChildren(tree.nodesRef.current, currentNodeId, false).some((node)=>contains(node.context?.elements.floating, relatedTarget));
|
|
197
|
+
if (isMovingIntoDescendantFloating) return;
|
|
198
|
+
if (instance.handler) return void instance.handler(event);
|
|
199
|
+
clearPointerEvents();
|
|
200
|
+
if (!isClickLikeOpenEvent()) closeWithDelay(event);
|
|
201
|
+
}
|
|
202
|
+
function onNodeClosed(event) {
|
|
203
|
+
if (!tree || !parentId || hasParentChildren()) return;
|
|
204
|
+
childClosedTimeout.start(0, ()=>{
|
|
205
|
+
tree.events.off('floating.closed', onNodeClosed);
|
|
206
|
+
store.setOpen(false, createChangeEventDetails(triggerHover, event));
|
|
207
|
+
tree.events.emit('floating.closed', event);
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
const floating = floatingElement;
|
|
211
|
+
return mergeCleanups(floating && addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && addEventListener(floating, 'pointerdown', handleInteractInside, true), ()=>{
|
|
212
|
+
tree?.events.off('floating.closed', onNodeClosed);
|
|
213
|
+
});
|
|
214
|
+
}, [
|
|
215
|
+
enabled,
|
|
216
|
+
floatingElement,
|
|
217
|
+
store,
|
|
218
|
+
dataRef,
|
|
219
|
+
closeDelayProp,
|
|
220
|
+
nodeIdProp,
|
|
221
|
+
isClickLikeOpenEvent,
|
|
222
|
+
clearPointerEvents,
|
|
223
|
+
instance,
|
|
224
|
+
tree,
|
|
225
|
+
parentId,
|
|
226
|
+
childClosedTimeout
|
|
227
|
+
]);
|
|
228
|
+
}
|
|
229
|
+
export { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, getDelay, getRestMs, useHoverFloatingInteraction, useHoverInteractionSharedState, useHoverShared_isClickLikeOpenEvent };
|
package/dist/3140.js
ADDED
package/dist/3248.js
ADDED
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useLabelableContext, fieldValidityMapping, useFieldRootContext } from "./1477.js";
|
|
3
|
+
import { NOOP, useRefWithInit, EMPTY_OBJECT, mergeProps, useMergedRefs, useRenderElement, esm_formatErrorMessage } from "./8272.js";
|
|
4
|
+
import { useFormContext } from "./5085.js";
|
|
5
|
+
import { useFieldItemContext } from "./1457.js";
|
|
6
|
+
import { useCheckboxGroupContext } from "./8979.js";
|
|
7
|
+
import { useBaseUiId } from "./6046.js";
|
|
8
|
+
import { useButton } from "./9189.js";
|
|
9
|
+
import { useControlled } from "./8527.js";
|
|
10
|
+
import { useIsoLayoutEffect } from "./6499.js";
|
|
11
|
+
import { useRegisterFieldControl } from "./4281.js";
|
|
12
|
+
import { useAriaLabelledBy } from "./4490.js";
|
|
13
|
+
import { useValueChanged } from "./2801.js";
|
|
14
|
+
import { visuallyHiddenInput, visuallyHidden } from "./8225.js";
|
|
15
|
+
import { createChangeEventDetails } from "./4768.js";
|
|
16
|
+
import { getWindow } from "./3829.js";
|
|
17
|
+
import * as __rspack_external_react from "react";
|
|
18
|
+
function getDefaultFormSubmitter(form) {
|
|
19
|
+
if (!form) return null;
|
|
20
|
+
for (const candidate of form.elements){
|
|
21
|
+
const tagName = candidate.tagName;
|
|
22
|
+
if ('BUTTON' === tagName || 'INPUT' === tagName) {
|
|
23
|
+
const button = candidate;
|
|
24
|
+
if ('submit' === button.type) return button;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
let CheckboxRootDataAttributes_CheckboxRootDataAttributes = /*#__PURE__*/ function(CheckboxRootDataAttributes) {
|
|
30
|
+
CheckboxRootDataAttributes["checked"] = "data-checked";
|
|
31
|
+
CheckboxRootDataAttributes["unchecked"] = "data-unchecked";
|
|
32
|
+
CheckboxRootDataAttributes["indeterminate"] = "data-indeterminate";
|
|
33
|
+
CheckboxRootDataAttributes["disabled"] = "data-disabled";
|
|
34
|
+
CheckboxRootDataAttributes["readonly"] = "data-readonly";
|
|
35
|
+
CheckboxRootDataAttributes["required"] = "data-required";
|
|
36
|
+
CheckboxRootDataAttributes["valid"] = "data-valid";
|
|
37
|
+
CheckboxRootDataAttributes["invalid"] = "data-invalid";
|
|
38
|
+
CheckboxRootDataAttributes["touched"] = "data-touched";
|
|
39
|
+
CheckboxRootDataAttributes["dirty"] = "data-dirty";
|
|
40
|
+
CheckboxRootDataAttributes["filled"] = "data-filled";
|
|
41
|
+
CheckboxRootDataAttributes["focused"] = "data-focused";
|
|
42
|
+
return CheckboxRootDataAttributes;
|
|
43
|
+
}({});
|
|
44
|
+
function useStateAttributesMapping(state) {
|
|
45
|
+
return __rspack_external_react.useMemo(()=>({
|
|
46
|
+
checked (value) {
|
|
47
|
+
if (state.indeterminate) return {};
|
|
48
|
+
if (value) return {
|
|
49
|
+
[CheckboxRootDataAttributes_CheckboxRootDataAttributes.checked]: ''
|
|
50
|
+
};
|
|
51
|
+
return {
|
|
52
|
+
[CheckboxRootDataAttributes_CheckboxRootDataAttributes.unchecked]: ''
|
|
53
|
+
};
|
|
54
|
+
},
|
|
55
|
+
...fieldValidityMapping
|
|
56
|
+
}), [
|
|
57
|
+
state.indeterminate
|
|
58
|
+
]);
|
|
59
|
+
}
|
|
60
|
+
const CheckboxRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
|
|
61
|
+
if ("production" !== process.env.NODE_ENV) CheckboxRootContext.displayName = "CheckboxRootContext";
|
|
62
|
+
function useCheckboxRootContext() {
|
|
63
|
+
const context = __rspack_external_react.useContext(CheckboxRootContext);
|
|
64
|
+
if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>.' : esm_formatErrorMessage(14));
|
|
65
|
+
return context;
|
|
66
|
+
}
|
|
67
|
+
const PARENT_CHECKBOX = 'data-parent';
|
|
68
|
+
const CheckboxRoot_CheckboxRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
69
|
+
const { checked: checkedProp, className, defaultChecked = false, 'aria-labelledby': ariaLabelledByProp, disabled: disabledProp = false, form, id: idProp, indeterminate = false, inputRef: inputRefProp, name: nameProp, onCheckedChange, parent = false, readOnly = false, render, required = false, uncheckedValue, value: valueProp, nativeButton = false, style, ...elementProps } = componentProps;
|
|
70
|
+
const { clearErrors } = useFormContext();
|
|
71
|
+
const { disabled: rootDisabled, name: fieldName, setDirty, setFilled, setFocused, setTouched, state: fieldState, validationMode, validityData, shouldValidateOnChange, validation: localValidation } = useFieldRootContext();
|
|
72
|
+
const fieldItemContext = useFieldItemContext();
|
|
73
|
+
const { labelId, controlId, registerControlId, getDescriptionProps } = useLabelableContext();
|
|
74
|
+
const groupContext = useCheckboxGroupContext();
|
|
75
|
+
const parentContext = groupContext?.parent;
|
|
76
|
+
const isGroupedWithParent = parentContext && groupContext.allValues;
|
|
77
|
+
const disabled = rootDisabled || fieldItemContext.disabled || groupContext?.disabled || disabledProp;
|
|
78
|
+
const name = fieldName ?? nameProp;
|
|
79
|
+
const value = valueProp ?? name;
|
|
80
|
+
const id = useBaseUiId();
|
|
81
|
+
const parentId = useBaseUiId();
|
|
82
|
+
let inputId = controlId;
|
|
83
|
+
if (isGroupedWithParent) inputId = parent ? parentId : `${parentContext.id}-${value}`;
|
|
84
|
+
else if (idProp) inputId = idProp;
|
|
85
|
+
let groupProps = {};
|
|
86
|
+
if (isGroupedWithParent) {
|
|
87
|
+
if (parent) groupProps = groupContext.parent.getParentProps();
|
|
88
|
+
else if (value) groupProps = groupContext.parent.getChildProps(value);
|
|
89
|
+
}
|
|
90
|
+
const { checked: groupChecked = checkedProp, indeterminate: groupIndeterminate = indeterminate, onCheckedChange: groupOnChange, ...otherGroupProps } = groupProps;
|
|
91
|
+
const groupValue = groupContext?.value;
|
|
92
|
+
const setGroupValue = groupContext?.setValue;
|
|
93
|
+
const defaultGroupValue = groupContext?.defaultValue;
|
|
94
|
+
const controlRef = __rspack_external_react.useRef(null);
|
|
95
|
+
const controlSourceRef = useRefWithInit(()=>Symbol('checkbox-control'));
|
|
96
|
+
const hasRegisteredRef = __rspack_external_react.useRef(false);
|
|
97
|
+
const { getButtonProps, buttonRef } = useButton({
|
|
98
|
+
disabled,
|
|
99
|
+
native: nativeButton
|
|
100
|
+
});
|
|
101
|
+
const validation = groupContext?.validation ?? localValidation;
|
|
102
|
+
const [checked, setCheckedState] = useControlled({
|
|
103
|
+
controlled: value && groupValue && !parent ? groupValue.includes(value) : groupChecked,
|
|
104
|
+
default: value && defaultGroupValue && !parent ? defaultGroupValue.includes(value) : defaultChecked,
|
|
105
|
+
name: 'Checkbox',
|
|
106
|
+
state: 'checked'
|
|
107
|
+
});
|
|
108
|
+
useIsoLayoutEffect(()=>{
|
|
109
|
+
if (registerControlId === NOOP) return;
|
|
110
|
+
hasRegisteredRef.current = true;
|
|
111
|
+
registerControlId(controlSourceRef.current, inputId);
|
|
112
|
+
}, [
|
|
113
|
+
inputId,
|
|
114
|
+
registerControlId,
|
|
115
|
+
controlSourceRef
|
|
116
|
+
]);
|
|
117
|
+
__rspack_external_react.useEffect(()=>{
|
|
118
|
+
const controlSource = controlSourceRef.current;
|
|
119
|
+
return ()=>{
|
|
120
|
+
if (!hasRegisteredRef.current || registerControlId === NOOP) return;
|
|
121
|
+
hasRegisteredRef.current = false;
|
|
122
|
+
registerControlId(controlSource, void 0);
|
|
123
|
+
};
|
|
124
|
+
}, [
|
|
125
|
+
registerControlId,
|
|
126
|
+
controlSourceRef
|
|
127
|
+
]);
|
|
128
|
+
useRegisterFieldControl(controlRef, id, checked, void 0, !groupContext);
|
|
129
|
+
const inputRef = __rspack_external_react.useRef(null);
|
|
130
|
+
const mergedInputRef = useMergedRefs(inputRefProp, inputRef, validation.inputRef);
|
|
131
|
+
const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, inputId ?? void 0);
|
|
132
|
+
useIsoLayoutEffect(()=>{
|
|
133
|
+
if (inputRef.current) {
|
|
134
|
+
inputRef.current.indeterminate = groupIndeterminate;
|
|
135
|
+
if (checked) setFilled(true);
|
|
136
|
+
}
|
|
137
|
+
}, [
|
|
138
|
+
checked,
|
|
139
|
+
groupIndeterminate,
|
|
140
|
+
setFilled
|
|
141
|
+
]);
|
|
142
|
+
useValueChanged(checked, ()=>{
|
|
143
|
+
if (groupContext && !parent) return;
|
|
144
|
+
clearErrors(name);
|
|
145
|
+
setFilled(checked);
|
|
146
|
+
setDirty(checked !== validityData.initialValue);
|
|
147
|
+
if (shouldValidateOnChange()) validation.commit(checked);
|
|
148
|
+
else validation.commit(checked, true);
|
|
149
|
+
});
|
|
150
|
+
const inputProps = mergeProps({
|
|
151
|
+
checked,
|
|
152
|
+
disabled,
|
|
153
|
+
form,
|
|
154
|
+
name: parent ? void 0 : name,
|
|
155
|
+
id: nativeButton ? void 0 : inputId ?? void 0,
|
|
156
|
+
required,
|
|
157
|
+
ref: mergedInputRef,
|
|
158
|
+
style: name ? visuallyHiddenInput : visuallyHidden,
|
|
159
|
+
tabIndex: -1,
|
|
160
|
+
type: 'checkbox',
|
|
161
|
+
'aria-hidden': true,
|
|
162
|
+
onChange (event) {
|
|
163
|
+
if (event.nativeEvent.defaultPrevented) return;
|
|
164
|
+
if (readOnly) return void event.preventDefault();
|
|
165
|
+
const nextChecked = event.currentTarget.checked;
|
|
166
|
+
const details = createChangeEventDetails("none", event.nativeEvent);
|
|
167
|
+
groupOnChange?.(nextChecked, details);
|
|
168
|
+
onCheckedChange?.(nextChecked, details);
|
|
169
|
+
if (details.isCanceled) return;
|
|
170
|
+
setCheckedState(nextChecked);
|
|
171
|
+
if (value && groupValue && setGroupValue && !parent && !isGroupedWithParent) {
|
|
172
|
+
const nextGroupValue = nextChecked ? [
|
|
173
|
+
...groupValue,
|
|
174
|
+
value
|
|
175
|
+
] : groupValue.filter((item)=>item !== value);
|
|
176
|
+
setGroupValue(nextGroupValue, details);
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
onFocus () {
|
|
180
|
+
controlRef.current?.focus();
|
|
181
|
+
}
|
|
182
|
+
}, void 0 !== valueProp ? {
|
|
183
|
+
value: (groupContext ? checked && valueProp : valueProp) || ''
|
|
184
|
+
} : EMPTY_OBJECT, getDescriptionProps, groupContext ? validation.getValidationProps : validation.getInputValidationProps);
|
|
185
|
+
const computedChecked = isGroupedWithParent ? Boolean(groupChecked) : checked;
|
|
186
|
+
const computedIndeterminate = isGroupedWithParent ? groupIndeterminate || indeterminate : indeterminate;
|
|
187
|
+
__rspack_external_react.useEffect(()=>{
|
|
188
|
+
if (!parentContext || !value) return;
|
|
189
|
+
const disabledStates = parentContext.disabledStatesRef.current;
|
|
190
|
+
disabledStates.set(value, disabled);
|
|
191
|
+
return ()=>{
|
|
192
|
+
disabledStates.delete(value);
|
|
193
|
+
};
|
|
194
|
+
}, [
|
|
195
|
+
parentContext,
|
|
196
|
+
disabled,
|
|
197
|
+
value
|
|
198
|
+
]);
|
|
199
|
+
const state = __rspack_external_react.useMemo(()=>({
|
|
200
|
+
...fieldState,
|
|
201
|
+
checked: computedChecked,
|
|
202
|
+
disabled,
|
|
203
|
+
readOnly,
|
|
204
|
+
required,
|
|
205
|
+
indeterminate: computedIndeterminate
|
|
206
|
+
}), [
|
|
207
|
+
fieldState,
|
|
208
|
+
computedChecked,
|
|
209
|
+
disabled,
|
|
210
|
+
readOnly,
|
|
211
|
+
required,
|
|
212
|
+
computedIndeterminate
|
|
213
|
+
]);
|
|
214
|
+
const stateAttributesMapping = useStateAttributesMapping(state);
|
|
215
|
+
const element = useRenderElement('span', componentProps, {
|
|
216
|
+
state,
|
|
217
|
+
ref: [
|
|
218
|
+
buttonRef,
|
|
219
|
+
controlRef,
|
|
220
|
+
forwardedRef,
|
|
221
|
+
groupContext?.registerControlRef
|
|
222
|
+
],
|
|
223
|
+
props: [
|
|
224
|
+
{
|
|
225
|
+
id: nativeButton ? inputId ?? void 0 : id,
|
|
226
|
+
role: 'checkbox',
|
|
227
|
+
'aria-checked': groupIndeterminate ? 'mixed' : checked,
|
|
228
|
+
'aria-readonly': readOnly || void 0,
|
|
229
|
+
'aria-required': required || void 0,
|
|
230
|
+
'aria-labelledby': ariaLabelledBy,
|
|
231
|
+
[PARENT_CHECKBOX]: parent ? '' : void 0,
|
|
232
|
+
onFocus () {
|
|
233
|
+
setFocused(true);
|
|
234
|
+
},
|
|
235
|
+
onBlur () {
|
|
236
|
+
const inputEl = inputRef.current;
|
|
237
|
+
if (!inputEl) return;
|
|
238
|
+
setTouched(true);
|
|
239
|
+
setFocused(false);
|
|
240
|
+
if ('onBlur' === validationMode) validation.commit(groupContext ? groupValue : inputEl.checked);
|
|
241
|
+
},
|
|
242
|
+
onKeyDown (event) {
|
|
243
|
+
if ('Enter' !== event.key) return;
|
|
244
|
+
event.preventBaseUIHandler();
|
|
245
|
+
if (event.defaultPrevented) return;
|
|
246
|
+
const formToSubmit = inputRef.current?.form ?? null;
|
|
247
|
+
const currentTarget = event.currentTarget;
|
|
248
|
+
const nativeEvent = event.nativeEvent;
|
|
249
|
+
const originalPreventDefault = event.preventDefault;
|
|
250
|
+
const originalNativePreventDefault = nativeEvent.preventDefault;
|
|
251
|
+
let preventDefaultCalledAfterPropagation = false;
|
|
252
|
+
event.preventDefault = ()=>{
|
|
253
|
+
preventDefaultCalledAfterPropagation = true;
|
|
254
|
+
originalPreventDefault.call(event);
|
|
255
|
+
};
|
|
256
|
+
nativeEvent.preventDefault = ()=>{
|
|
257
|
+
preventDefaultCalledAfterPropagation = true;
|
|
258
|
+
originalNativePreventDefault.call(nativeEvent);
|
|
259
|
+
};
|
|
260
|
+
originalNativePreventDefault.call(nativeEvent);
|
|
261
|
+
getWindow(currentTarget).queueMicrotask(()=>{
|
|
262
|
+
event.preventDefault = originalPreventDefault;
|
|
263
|
+
nativeEvent.preventDefault = originalNativePreventDefault;
|
|
264
|
+
if (!preventDefaultCalledAfterPropagation) getDefaultFormSubmitter(formToSubmit)?.click();
|
|
265
|
+
});
|
|
266
|
+
},
|
|
267
|
+
onClick (event) {
|
|
268
|
+
if (readOnly || disabled) return;
|
|
269
|
+
event.preventDefault();
|
|
270
|
+
const input = inputRef.current;
|
|
271
|
+
if (!input) return;
|
|
272
|
+
input.dispatchEvent(new (getWindow(input)).PointerEvent('click', {
|
|
273
|
+
bubbles: true,
|
|
274
|
+
shiftKey: event.shiftKey,
|
|
275
|
+
ctrlKey: event.ctrlKey,
|
|
276
|
+
altKey: event.altKey,
|
|
277
|
+
metaKey: event.metaKey
|
|
278
|
+
}));
|
|
279
|
+
}
|
|
280
|
+
},
|
|
281
|
+
getDescriptionProps,
|
|
282
|
+
validation.getValidationProps,
|
|
283
|
+
elementProps,
|
|
284
|
+
otherGroupProps,
|
|
285
|
+
getButtonProps
|
|
286
|
+
],
|
|
287
|
+
stateAttributesMapping
|
|
288
|
+
});
|
|
289
|
+
return /*#__PURE__*/ jsxs(CheckboxRootContext.Provider, {
|
|
290
|
+
value: state,
|
|
291
|
+
children: [
|
|
292
|
+
element,
|
|
293
|
+
!checked && !groupContext && name && !parent && void 0 !== uncheckedValue && /*#__PURE__*/ jsx("input", {
|
|
294
|
+
type: "hidden",
|
|
295
|
+
form: form,
|
|
296
|
+
name: name,
|
|
297
|
+
value: uncheckedValue
|
|
298
|
+
}),
|
|
299
|
+
/*#__PURE__*/ jsx("input", {
|
|
300
|
+
...inputProps,
|
|
301
|
+
suppressHydrationWarning: true
|
|
302
|
+
})
|
|
303
|
+
]
|
|
304
|
+
});
|
|
305
|
+
});
|
|
306
|
+
if ("production" !== process.env.NODE_ENV) CheckboxRoot_CheckboxRoot.displayName = "CheckboxRoot";
|
|
307
|
+
export { CheckboxRoot_CheckboxRoot, PARENT_CHECKBOX, useCheckboxRootContext, useStateAttributesMapping };
|
package/dist/3296.js
ADDED