@jobber/components 9.3.0 → 9.5.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/Autocomplete/index.cjs +0 -1
- package/dist/Autocomplete/index.mjs +0 -1
- package/dist/Card/index.cjs +7 -7
- package/dist/Card/index.mjs +7 -7
- package/dist/Chip/index.cjs +0 -1
- package/dist/Chip/index.mjs +0 -1
- package/dist/Chips/InternalChipDismissible/hooks/index.cjs +0 -1
- package/dist/Chips/InternalChipDismissible/hooks/index.mjs +0 -1
- package/dist/Chips/InternalChipDismissible/index.cjs +0 -1
- package/dist/Chips/InternalChipDismissible/index.mjs +0 -1
- package/dist/Chips/index.cjs +0 -1
- package/dist/Chips/index.mjs +0 -1
- package/dist/ComboboxChipRemove-cjs.js +181 -184
- package/dist/ComboboxChipRemove-es.js +4 -7
- package/dist/ConfirmationModal/index.cjs +0 -1
- package/dist/ConfirmationModal/index.mjs +0 -1
- package/dist/DataDump/DataDump.d.ts +1 -1
- package/dist/DataDump/DataDump.messages.d.ts +6 -0
- package/dist/DataDump/index.cjs +9 -9
- package/dist/DataDump/index.mjs +9 -9
- package/dist/DataDump-cjs.js +11 -1
- package/dist/DataDump-es.js +11 -1
- package/dist/DataList/components/DataListActions/index.cjs +0 -1
- package/dist/DataList/components/DataListActions/index.mjs +0 -1
- package/dist/DataList/components/DataListBulkActions/index.cjs +0 -1
- package/dist/DataList/components/DataListBulkActions/index.mjs +0 -1
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs +0 -1
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs +0 -1
- package/dist/DataList/components/DataListFilters/index.cjs +0 -1
- package/dist/DataList/components/DataListFilters/index.mjs +0 -1
- package/dist/DataList/components/DataListHeader/index.cjs +0 -1
- package/dist/DataList/components/DataListHeader/index.mjs +0 -1
- package/dist/DataList/components/DataListItem/index.cjs +0 -1
- package/dist/DataList/components/DataListItem/index.mjs +0 -1
- package/dist/DataList/components/DataListItemActions/index.cjs +0 -1
- package/dist/DataList/components/DataListItemActions/index.mjs +0 -1
- package/dist/DataList/components/DataListItemActionsOverflow/index.cjs +0 -1
- package/dist/DataList/components/DataListItemActionsOverflow/index.mjs +0 -1
- package/dist/DataList/components/DataListItems/index.cjs +0 -1
- package/dist/DataList/components/DataListItems/index.mjs +0 -1
- package/dist/DataList/components/DataListLayout/index.cjs +0 -1
- package/dist/DataList/components/DataListLayout/index.mjs +0 -1
- package/dist/DataList/components/DataListLayoutActions/index.cjs +0 -1
- package/dist/DataList/components/DataListLayoutActions/index.mjs +0 -1
- package/dist/DataList/index.cjs +0 -1
- package/dist/DataList/index.mjs +0 -1
- package/dist/DataTable/DataTable.messages.d.ts +22 -0
- package/dist/DataTable/index.cjs +2 -2
- package/dist/DataTable/index.mjs +2 -2
- package/dist/DataTable-cjs.js +34 -5
- package/dist/DataTable-es.js +34 -5
- package/dist/DatePicker/index.cjs +0 -2
- package/dist/DatePicker/index.mjs +0 -2
- package/dist/DatePicker-cjs.js +19 -18
- package/dist/DatePicker-es.js +2 -1
- package/dist/Dialog/index.cjs +11 -6
- package/dist/Dialog/index.mjs +11 -6
- package/dist/DrawerDescription-cjs.js +7 -8
- package/dist/DrawerDescription-es.js +1 -2
- package/dist/DrawerTitle-cjs.js +4 -4
- package/dist/DrawerTitle-es.js +1 -1
- package/dist/FeatureSwitch/FeatureSwitch.messages.d.ts +10 -0
- package/dist/FeatureSwitch/index.cjs +2 -0
- package/dist/FeatureSwitch/index.mjs +2 -0
- package/dist/FeatureSwitch-cjs.js +15 -2
- package/dist/FeatureSwitch-es.js +15 -2
- package/dist/FieldDescription-cjs.js +49 -49
- package/dist/FieldDescription-es.js +2 -2
- package/dist/FilterPicker/components/FilterPickerActivator/index.cjs +0 -1
- package/dist/FilterPicker/components/FilterPickerActivator/index.mjs +0 -1
- package/dist/FilterPicker/components/FilterPickerContent/index.cjs +0 -1
- package/dist/FilterPicker/components/FilterPickerContent/index.mjs +0 -1
- package/dist/FilterPicker/components/FilterPickerTrigger/index.cjs +0 -1
- package/dist/FilterPicker/components/FilterPickerTrigger/index.mjs +0 -1
- package/dist/FilterPicker/index.cjs +0 -1
- package/dist/FilterPicker/index.mjs +0 -1
- package/dist/FormatFile/FormatFile.messages.d.ts +18 -0
- package/dist/FormatFile/index.cjs +2 -3
- package/dist/FormatFile/index.mjs +2 -3
- package/dist/FormatFile-cjs.js +24 -2
- package/dist/FormatFile-es.js +24 -2
- package/dist/Gallery/index.cjs +0 -1
- package/dist/Gallery/index.mjs +0 -1
- package/dist/HelperText-cjs.js +3 -2
- package/dist/HelperText-es.js +3 -2
- package/dist/InputDate/index.cjs +0 -2
- package/dist/InputDate/index.mjs +0 -2
- package/dist/InputNumber/InputNumber.d.ts +75 -5
- package/dist/InputNumber/index.cjs +27 -3
- package/dist/InputNumber/index.d.ts +2 -2
- package/dist/InputNumber/index.mjs +27 -3
- package/dist/{primitives/InputNumberExperimental → InputNumber}/types.d.ts +48 -35
- package/dist/InputNumber-cjs.js +267 -4986
- package/dist/InputNumber-es.js +268 -4987
- package/dist/LightBox/index.cjs +0 -1
- package/dist/LightBox/index.mjs +0 -1
- package/dist/Menu/index.cjs +7 -7
- package/dist/Menu/index.mjs +7 -7
- package/dist/Menu-cjs.js +5 -1
- package/dist/Menu-es.js +5 -2
- package/dist/MenuSubmenuTrigger-cjs.js +142 -143
- package/dist/MenuSubmenuTrigger-es.js +5 -6
- package/dist/Modal/index.cjs +0 -1
- package/dist/Modal/index.mjs +0 -1
- package/dist/NumberFieldInput-cjs.js +63 -63
- package/dist/NumberFieldInput-es.js +5 -5
- package/dist/Page/index.cjs +18 -19
- package/dist/Page/index.mjs +18 -19
- package/dist/Page-cjs.js +6 -3
- package/dist/Page-es.js +6 -3
- package/dist/Popover/index.cjs +0 -1
- package/dist/Popover/index.mjs +0 -1
- package/dist/ProgressBar/ProgressBar.messages.d.ts +6 -0
- package/dist/ProgressBar/index.cjs +2 -0
- package/dist/ProgressBar/index.mjs +2 -0
- package/dist/ProgressBar-cjs.js +13 -1
- package/dist/ProgressBar-es.js +13 -1
- package/dist/ScrollAreaViewport-cjs.js +119 -121
- package/dist/ScrollAreaViewport-es.js +3 -5
- package/dist/Select/index.cjs +3 -9
- package/dist/Select/index.mjs +3 -9
- package/dist/SelectGroupLabel-cjs.js +117 -107
- package/dist/SelectGroupLabel-es.js +20 -12
- package/dist/Toast/Toast.messages.d.ts +6 -0
- package/dist/Toast/index.cjs +3 -1
- package/dist/Toast/index.mjs +3 -1
- package/dist/Toast/showToast.d.ts +12 -1
- package/dist/Tooltip/index.cjs +0 -1
- package/dist/Tooltip/index.mjs +0 -1
- package/dist/dialogReturnFocus-cjs.js +4 -1
- package/dist/dialogReturnFocus-es.js +4 -1
- package/dist/docs/DataDump/DataDump.md +1 -1
- package/dist/docs/InputNumber/InputNumber.md +564 -56
- package/dist/docs/Page/Page.md +1 -1
- package/dist/docs/index.md +0 -1
- package/dist/floating-ui.react-cjs.js +34 -35
- package/dist/floating-ui.react-dom-cjs.js +64 -65
- package/dist/floating-ui.react-dom-es.js +1 -2
- package/dist/floating-ui.react-es.js +1 -2
- package/dist/floating-ui.utils-cjs.js +183 -0
- package/dist/floating-ui.utils-es.js +165 -1
- package/dist/index.cjs +10 -15
- package/dist/index.mjs +10 -15
- package/dist/primitives/BottomSheet/index.cjs +2 -5
- package/dist/primitives/BottomSheet/index.mjs +2 -5
- package/dist/primitives/ComboboxPrimitive/index.cjs +3 -7
- package/dist/primitives/ComboboxPrimitive/index.mjs +3 -7
- package/dist/primitives/HelperText/HelperText.d.ts +4 -1
- package/dist/primitives/HelperText/index.cjs +1 -1
- package/dist/primitives/HelperText/index.mjs +1 -1
- package/dist/primitives/SelectPrimitive/index.cjs +3 -9
- package/dist/primitives/SelectPrimitive/index.mjs +3 -9
- package/dist/primitives/index.cjs +2 -16
- package/dist/primitives/index.d.ts +0 -2
- package/dist/primitives/index.mjs +2 -15
- package/dist/scrollEdges-cjs.js +6 -2
- package/dist/scrollEdges-es.js +5 -2
- package/dist/sharedHelpers/i18n/renderWithLocale.d.ts +11 -0
- package/dist/showToast-cjs.js +20 -6
- package/dist/showToast-es.js +20 -6
- package/dist/styles.css +573 -902
- package/dist/unstyledPrimitives/index.cjs +105 -111
- package/dist/unstyledPrimitives/index.mjs +5 -11
- package/dist/useCompositeListItem-cjs.js +516 -90
- package/dist/useCompositeListItem-es.js +407 -6
- package/dist/useLabel-cjs.js +10 -10
- package/dist/useLabel-es.js +3 -3
- package/dist/useRenderElement-es.js +1 -1
- package/dist/useScrollLock-cjs.js +1332 -203
- package/dist/useScrollLock-es.js +1068 -5
- package/dist/utils/meta/meta.json +12 -0
- package/package.json +2 -3
- package/dist/InputNumber/InputNumber.types.d.ts +0 -20
- package/dist/InputNumberExperimental-cjs.js +0 -277
- package/dist/InputNumberExperimental-es.js +0 -275
- package/dist/clamp-cjs.js +0 -7
- package/dist/clamp-es.js +0 -5
- package/dist/clsx-cjs.js +0 -5
- package/dist/clsx-es.js +0 -3
- package/dist/docs/InputNumberExperimental/InputNumberExperimental.md +0 -578
- package/dist/floating-ui.utils.dom-cjs.js +0 -185
- package/dist/floating-ui.utils.dom-es.js +0 -165
- package/dist/isElementDisabled-cjs.js +0 -40
- package/dist/isElementDisabled-es.js +0 -18
- package/dist/primitives/InputNumberExperimental/InputNumberExperimental.d.ts +0 -77
- package/dist/primitives/InputNumberExperimental/index.cjs +0 -30
- package/dist/primitives/InputNumberExperimental/index.d.ts +0 -2
- package/dist/primitives/InputNumberExperimental/index.mjs +0 -24
- package/dist/resolveAriaLabelledBy-cjs.js +0 -200
- package/dist/resolveAriaLabelledBy-es.js +0 -166
- package/dist/useButton-cjs.js +0 -1164
- package/dist/useButton-es.js +0 -1071
- package/dist/useLabelableId-cjs.js +0 -278
- package/dist/useLabelableId-es.js +0 -247
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var useRenderElement = require('./useRenderElement-cjs.js');
|
|
5
5
|
var useScrollLock = require('./useScrollLock-cjs.js');
|
|
6
|
-
var useButton = require('./useButton-cjs.js');
|
|
7
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
7
|
var useCompositeListItem = require('./useCompositeListItem-cjs.js');
|
|
9
|
-
var
|
|
8
|
+
var SelectGroupLabel = require('./SelectGroupLabel-cjs.js');
|
|
10
9
|
var scrollEdges = require('./scrollEdges-cjs.js');
|
|
11
|
-
var
|
|
10
|
+
var floatingUi_utils = require('./floating-ui.utils-cjs.js');
|
|
12
11
|
var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
|
|
13
12
|
var ReactDOM = require('react-dom');
|
|
14
13
|
|
|
@@ -33,7 +32,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
|
33
32
|
var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
|
|
34
33
|
|
|
35
34
|
function resolveValue(value, pointerType) {
|
|
36
|
-
if (pointerType != null && !
|
|
35
|
+
if (pointerType != null && !useScrollLock.isMouseLikePointerType(pointerType)) {
|
|
37
36
|
return 0;
|
|
38
37
|
}
|
|
39
38
|
if (typeof value === 'function') {
|
|
@@ -61,7 +60,7 @@ function isHoverOpenEvent(openEventType) {
|
|
|
61
60
|
return openEventType?.includes('mouse') && openEventType !== 'mousedown';
|
|
62
61
|
}
|
|
63
62
|
|
|
64
|
-
const isMacSafari =
|
|
63
|
+
const isMacSafari = useScrollLock.mac && useScrollLock.webkit;
|
|
65
64
|
/**
|
|
66
65
|
* Opens the floating element while the reference element has focus, like CSS
|
|
67
66
|
* `:focus`.
|
|
@@ -81,20 +80,20 @@ function useFocus(context, props = {}) {
|
|
|
81
80
|
// Track which reference should be blocked from re-opening after Escape/press dismissal.
|
|
82
81
|
const blockedReferenceRef = React__namespace.useRef(null);
|
|
83
82
|
const keyboardModalityRef = React__namespace.useRef(true);
|
|
84
|
-
const timeout =
|
|
83
|
+
const timeout = useScrollLock.useTimeout();
|
|
85
84
|
React__namespace.useEffect(() => {
|
|
86
85
|
const domReference = store.select('domReferenceElement');
|
|
87
86
|
if (!enabled) {
|
|
88
87
|
return undefined;
|
|
89
88
|
}
|
|
90
|
-
const win =
|
|
89
|
+
const win = floatingUi_utils.getWindow(domReference);
|
|
91
90
|
|
|
92
91
|
// If the reference was focused and the user left the tab/window, and the
|
|
93
92
|
// floating element was not open, the focus should be blocked when they
|
|
94
93
|
// return to the tab/window.
|
|
95
94
|
function onBlur() {
|
|
96
95
|
const currentDomReference = store.select('domReferenceElement');
|
|
97
|
-
if (!store.select('open') &&
|
|
96
|
+
if (!store.select('open') && floatingUi_utils.isHTMLElement(currentDomReference) && currentDomReference === useScrollLock.activeElement(useScrollLock.ownerDocument(currentDomReference))) {
|
|
98
97
|
blockFocusRef.current = true;
|
|
99
98
|
}
|
|
100
99
|
}
|
|
@@ -104,16 +103,16 @@ function useFocus(context, props = {}) {
|
|
|
104
103
|
function onPointerDown() {
|
|
105
104
|
keyboardModalityRef.current = false;
|
|
106
105
|
}
|
|
107
|
-
return useScrollLock.mergeCleanups(
|
|
106
|
+
return useScrollLock.mergeCleanups(useScrollLock.addEventListener(win, 'blur', onBlur), isMacSafari && useScrollLock.addEventListener(win, 'keydown', onKeyDown, true), isMacSafari && useScrollLock.addEventListener(win, 'pointerdown', onPointerDown, true));
|
|
108
107
|
}, [store, enabled]);
|
|
109
108
|
React__namespace.useEffect(() => {
|
|
110
109
|
if (!enabled) {
|
|
111
110
|
return undefined;
|
|
112
111
|
}
|
|
113
112
|
function onOpenChangeLocal(details) {
|
|
114
|
-
if (details.reason ===
|
|
113
|
+
if (details.reason === useScrollLock.triggerPress || details.reason === useScrollLock.escapeKey) {
|
|
115
114
|
const referenceElement = store.select('domReferenceElement');
|
|
116
|
-
if (
|
|
115
|
+
if (floatingUi_utils.isElement(referenceElement)) {
|
|
117
116
|
blockedReferenceRef.current = referenceElement;
|
|
118
117
|
blockFocusRef.current = true;
|
|
119
118
|
}
|
|
@@ -141,8 +140,8 @@ function useFocus(context, props = {}) {
|
|
|
141
140
|
}
|
|
142
141
|
resetBlockedFocus();
|
|
143
142
|
}
|
|
144
|
-
const target =
|
|
145
|
-
if (
|
|
143
|
+
const target = useScrollLock.getTarget(event.nativeEvent);
|
|
144
|
+
if (floatingUi_utils.isElement(target)) {
|
|
146
145
|
// Safari fails to match `:focus-visible` if focus was initially
|
|
147
146
|
// outside the document.
|
|
148
147
|
if (isMacSafari && !event.relatedTarget) {
|
|
@@ -160,14 +159,14 @@ function useFocus(context, props = {}) {
|
|
|
160
159
|
} = event;
|
|
161
160
|
const delayValue = typeof delay === 'function' ? delay() : delay;
|
|
162
161
|
if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
|
|
163
|
-
store.setOpen(true,
|
|
162
|
+
store.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.triggerFocus, nativeEvent, currentTarget));
|
|
164
163
|
return;
|
|
165
164
|
}
|
|
166
165
|
timeout.start(delayValue, () => {
|
|
167
166
|
if (blockFocusRef.current) {
|
|
168
167
|
return;
|
|
169
168
|
}
|
|
170
|
-
store.setOpen(true,
|
|
169
|
+
store.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.triggerFocus, nativeEvent, currentTarget));
|
|
171
170
|
});
|
|
172
171
|
},
|
|
173
172
|
onBlur(event) {
|
|
@@ -177,12 +176,12 @@ function useFocus(context, props = {}) {
|
|
|
177
176
|
|
|
178
177
|
// Hit the non-modal focus management portal guard. Focus will be
|
|
179
178
|
// moved into the floating element immediately after.
|
|
180
|
-
const movedToFocusGuard =
|
|
179
|
+
const movedToFocusGuard = floatingUi_utils.isElement(relatedTarget) && relatedTarget.hasAttribute(useScrollLock.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
|
|
181
180
|
|
|
182
181
|
// Wait for the window blur listener to fire.
|
|
183
182
|
timeout.start(0, () => {
|
|
184
183
|
const domReference = store.select('domReferenceElement');
|
|
185
|
-
const activeEl =
|
|
184
|
+
const activeEl = useScrollLock.activeElement(useScrollLock.ownerDocument(domReference));
|
|
186
185
|
|
|
187
186
|
// Focus left the page, keep it open.
|
|
188
187
|
if (!relatedTarget && activeEl === domReference) {
|
|
@@ -196,7 +195,7 @@ function useFocus(context, props = {}) {
|
|
|
196
195
|
// as it will only point to the shadow host of the newly focused element
|
|
197
196
|
// and not the element that actually has received focus if it is located
|
|
198
197
|
// inside a shadow root.
|
|
199
|
-
if (
|
|
198
|
+
if (useScrollLock.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || useScrollLock.contains(domReference, activeEl) || movedToFocusGuard) {
|
|
200
199
|
return;
|
|
201
200
|
}
|
|
202
201
|
|
|
@@ -207,7 +206,7 @@ function useFocus(context, props = {}) {
|
|
|
207
206
|
if (useScrollLock.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
|
|
208
207
|
return;
|
|
209
208
|
}
|
|
210
|
-
store.setOpen(false,
|
|
209
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.triggerFocus, nativeEvent));
|
|
211
210
|
});
|
|
212
211
|
}
|
|
213
212
|
};
|
|
@@ -229,8 +228,8 @@ class HoverInteraction {
|
|
|
229
228
|
this.pointerEventsReferenceElement = null;
|
|
230
229
|
this.pointerEventsFloatingElement = null;
|
|
231
230
|
this.restTimeoutPending = false;
|
|
232
|
-
this.openChangeTimeout = new
|
|
233
|
-
this.restTimeout = new
|
|
231
|
+
this.openChangeTimeout = new useScrollLock.Timeout();
|
|
232
|
+
this.restTimeout = new useScrollLock.Timeout();
|
|
234
233
|
this.handleCloseOptions = undefined;
|
|
235
234
|
}
|
|
236
235
|
static create() {
|
|
@@ -287,7 +286,7 @@ function useHoverInteractionSharedState(store) {
|
|
|
287
286
|
if (!data.hoverInteractionState) {
|
|
288
287
|
data.hoverInteractionState = instance;
|
|
289
288
|
}
|
|
290
|
-
|
|
289
|
+
useScrollLock.useOnMount(data.hoverInteractionState.disposeEffect);
|
|
291
290
|
return data.hoverInteractionState;
|
|
292
291
|
}
|
|
293
292
|
|
|
@@ -310,17 +309,17 @@ function useHoverFloatingInteraction(context, parameters = {}) {
|
|
|
310
309
|
const tree = useScrollLock.useFloatingTree();
|
|
311
310
|
const parentId = useScrollLock.useFloatingParentNodeId();
|
|
312
311
|
const instance = useHoverInteractionSharedState(store);
|
|
313
|
-
const childClosedTimeout =
|
|
314
|
-
const isClickLikeOpenEvent$1 =
|
|
312
|
+
const childClosedTimeout = useScrollLock.useTimeout();
|
|
313
|
+
const isClickLikeOpenEvent$1 = useScrollLock.useStableCallback(() => {
|
|
315
314
|
return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
|
|
316
315
|
});
|
|
317
|
-
const isHoverOpen =
|
|
316
|
+
const isHoverOpen = useScrollLock.useStableCallback(() => {
|
|
318
317
|
return isHoverOpenEvent(dataRef.current.openEvent?.type);
|
|
319
318
|
});
|
|
320
|
-
const clearPointerEvents =
|
|
319
|
+
const clearPointerEvents = useScrollLock.useStableCallback(() => {
|
|
321
320
|
clearSafePolygonPointerEventsMutation(instance);
|
|
322
321
|
});
|
|
323
|
-
|
|
322
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
324
323
|
if (!open) {
|
|
325
324
|
instance.pointerType = undefined;
|
|
326
325
|
instance.restTimeoutPending = false;
|
|
@@ -331,14 +330,14 @@ function useHoverFloatingInteraction(context, parameters = {}) {
|
|
|
331
330
|
React__namespace.useEffect(() => {
|
|
332
331
|
return clearPointerEvents;
|
|
333
332
|
}, [clearPointerEvents]);
|
|
334
|
-
|
|
333
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
335
334
|
if (!enabled) {
|
|
336
335
|
return undefined;
|
|
337
336
|
}
|
|
338
|
-
if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() &&
|
|
337
|
+
if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && floatingUi_utils.isElement(domReferenceElement) && floatingElement) {
|
|
339
338
|
const ref = domReferenceElement;
|
|
340
339
|
const floatingEl = floatingElement;
|
|
341
|
-
const doc =
|
|
340
|
+
const doc = useScrollLock.ownerDocument(floatingElement);
|
|
342
341
|
const parentFloating = tree?.nodesRef.current.find(node => node.id === parentId)?.context?.elements.floating;
|
|
343
342
|
if (parentFloating) {
|
|
344
343
|
parentFloating.style.pointerEvents = '';
|
|
@@ -371,7 +370,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
|
|
|
371
370
|
function closeWithDelay(event) {
|
|
372
371
|
const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
|
|
373
372
|
const close = () => {
|
|
374
|
-
store.setOpen(false,
|
|
373
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.triggerHover, event));
|
|
375
374
|
tree?.events.emit('floating.closed', event);
|
|
376
375
|
};
|
|
377
376
|
if (closeDelay) {
|
|
@@ -382,7 +381,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
|
|
|
382
381
|
}
|
|
383
382
|
}
|
|
384
383
|
function handleInteractInside(event) {
|
|
385
|
-
const target =
|
|
384
|
+
const target = useScrollLock.getTarget(event);
|
|
386
385
|
if (!useScrollLock.isInteractiveElement(target)) {
|
|
387
386
|
instance.interactedInside = false;
|
|
388
387
|
return;
|
|
@@ -407,7 +406,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
|
|
|
407
406
|
}
|
|
408
407
|
const currentNodeId = dataRef.current.floatingContext?.nodeId ?? nodeIdProp;
|
|
409
408
|
const relatedTarget = event.relatedTarget;
|
|
410
|
-
const isMovingIntoDescendantFloating = tree && currentNodeId &&
|
|
409
|
+
const isMovingIntoDescendantFloating = tree && currentNodeId && floatingUi_utils.isElement(relatedTarget) && useScrollLock.getNodeChildren(tree.nodesRef.current, currentNodeId, false).some(node => useScrollLock.contains(node.context?.elements.floating, relatedTarget));
|
|
411
410
|
if (isMovingIntoDescendantFloating) {
|
|
412
411
|
return;
|
|
413
412
|
}
|
|
@@ -429,12 +428,12 @@ function useHoverFloatingInteraction(context, parameters = {}) {
|
|
|
429
428
|
// Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
|
|
430
429
|
childClosedTimeout.start(0, () => {
|
|
431
430
|
tree.events.off('floating.closed', onNodeClosed);
|
|
432
|
-
store.setOpen(false,
|
|
431
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.triggerHover, event));
|
|
433
432
|
tree.events.emit('floating.closed', event);
|
|
434
433
|
});
|
|
435
434
|
}
|
|
436
435
|
const floating = floatingElement;
|
|
437
|
-
return useScrollLock.mergeCleanups(floating &&
|
|
436
|
+
return useScrollLock.mergeCleanups(floating && useScrollLock.addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && useScrollLock.addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && useScrollLock.addEventListener(floating, 'pointerdown', handleInteractInside, true), () => {
|
|
438
437
|
tree?.events.off('floating.closed', onNodeClosed);
|
|
439
438
|
});
|
|
440
439
|
}, [enabled, floatingElement, store, dataRef, closeDelayProp, nodeIdProp, isHoverOpen, isClickLikeOpenEvent$1, clearPointerEvents, instance, tree, parentId, childClosedTimeout]);
|
|
@@ -471,42 +470,42 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
471
470
|
const tree = useScrollLock.useFloatingTree(externalTree);
|
|
472
471
|
const instance = useHoverInteractionSharedState(store);
|
|
473
472
|
const isHoverCloseActiveRef = React__namespace.useRef(false);
|
|
474
|
-
const handleCloseRef =
|
|
475
|
-
const delayRef =
|
|
476
|
-
const restMsRef =
|
|
477
|
-
const enabledRef =
|
|
478
|
-
const shouldOpenRef =
|
|
479
|
-
const isClosingRef =
|
|
480
|
-
const isClickLikeOpenEvent$1 =
|
|
473
|
+
const handleCloseRef = useScrollLock.useValueAsRef(handleClose);
|
|
474
|
+
const delayRef = useScrollLock.useValueAsRef(delay);
|
|
475
|
+
const restMsRef = useScrollLock.useValueAsRef(restMs);
|
|
476
|
+
const enabledRef = useScrollLock.useValueAsRef(enabled);
|
|
477
|
+
const shouldOpenRef = useScrollLock.useValueAsRef(shouldOpenProp);
|
|
478
|
+
const isClosingRef = useScrollLock.useValueAsRef(isClosing);
|
|
479
|
+
const isClickLikeOpenEvent$1 = useScrollLock.useStableCallback(() => {
|
|
481
480
|
return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
|
|
482
481
|
});
|
|
483
|
-
const checkShouldOpen =
|
|
482
|
+
const checkShouldOpen = useScrollLock.useStableCallback(() => {
|
|
484
483
|
return shouldOpenRef.current?.() !== false;
|
|
485
484
|
});
|
|
486
|
-
const isOverInactiveTrigger =
|
|
485
|
+
const isOverInactiveTrigger = useScrollLock.useStableCallback((currentDomReference, currentTarget, target) => {
|
|
487
486
|
const allTriggers = store.context.triggerElements;
|
|
488
487
|
|
|
489
488
|
// Fast path for normal usage where handlers are attached directly to triggers.
|
|
490
489
|
if (allTriggers.hasElement(currentTarget)) {
|
|
491
|
-
return !currentDomReference || !
|
|
490
|
+
return !currentDomReference || !useScrollLock.contains(currentDomReference, currentTarget);
|
|
492
491
|
}
|
|
493
492
|
|
|
494
493
|
// Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
|
|
495
|
-
if (!
|
|
494
|
+
if (!floatingUi_utils.isElement(target)) {
|
|
496
495
|
return false;
|
|
497
496
|
}
|
|
498
497
|
const targetElement = target;
|
|
499
|
-
return allTriggers.hasMatchingElement(trigger =>
|
|
498
|
+
return allTriggers.hasMatchingElement(trigger => useScrollLock.contains(trigger, targetElement)) && (!currentDomReference || !useScrollLock.contains(currentDomReference, targetElement));
|
|
500
499
|
});
|
|
501
|
-
const cleanupMouseMoveHandler =
|
|
500
|
+
const cleanupMouseMoveHandler = useScrollLock.useStableCallback(() => {
|
|
502
501
|
if (!instance.handler) {
|
|
503
502
|
return;
|
|
504
503
|
}
|
|
505
|
-
const doc =
|
|
504
|
+
const doc = useScrollLock.ownerDocument(store.select('domReferenceElement'));
|
|
506
505
|
doc.removeEventListener('mousemove', instance.handler);
|
|
507
506
|
instance.handler = undefined;
|
|
508
507
|
});
|
|
509
|
-
const clearPointerEvents =
|
|
508
|
+
const clearPointerEvents = useScrollLock.useStableCallback(() => {
|
|
510
509
|
clearSafePolygonPointerEventsMutation(instance);
|
|
511
510
|
});
|
|
512
511
|
if (isActiveTrigger) {
|
|
@@ -523,7 +522,7 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
523
522
|
}
|
|
524
523
|
function onOpenChangeLocal(details) {
|
|
525
524
|
if (!details.open) {
|
|
526
|
-
isHoverCloseActiveRef.current = details.reason ===
|
|
525
|
+
isHoverCloseActiveRef.current = details.reason === useScrollLock.triggerHover;
|
|
527
526
|
cleanupMouseMoveHandler();
|
|
528
527
|
instance.openChangeTimeout.clear();
|
|
529
528
|
instance.restTimeout.clear();
|
|
@@ -546,23 +545,23 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
546
545
|
const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
|
|
547
546
|
if (closeDelay) {
|
|
548
547
|
instance.openChangeTimeout.start(closeDelay, () => {
|
|
549
|
-
store.setOpen(false,
|
|
548
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.triggerHover, event));
|
|
550
549
|
tree?.events.emit('floating.closed', event);
|
|
551
550
|
});
|
|
552
551
|
} else if (runElseBranch) {
|
|
553
552
|
instance.openChangeTimeout.clear();
|
|
554
|
-
store.setOpen(false,
|
|
553
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.triggerHover, event));
|
|
555
554
|
tree?.events.emit('floating.closed', event);
|
|
556
555
|
}
|
|
557
556
|
}
|
|
558
557
|
const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select('domReferenceElement') : null);
|
|
559
|
-
if (!
|
|
558
|
+
if (!floatingUi_utils.isElement(trigger)) {
|
|
560
559
|
return undefined;
|
|
561
560
|
}
|
|
562
561
|
function onMouseEnter(event) {
|
|
563
562
|
instance.openChangeTimeout.clear();
|
|
564
563
|
instance.blockMouseMove = false;
|
|
565
|
-
if (mouseOnly && !
|
|
564
|
+
if (mouseOnly && !useScrollLock.isMouseLikePointerType(instance.pointerType)) {
|
|
566
565
|
return;
|
|
567
566
|
}
|
|
568
567
|
|
|
@@ -570,15 +569,15 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
570
569
|
// This will be handled by `onMouseMove`.
|
|
571
570
|
const restMsValue = getRestMs(restMsRef.current);
|
|
572
571
|
const openDelay = getDelay(delayRef.current, 'open', instance.pointerType);
|
|
573
|
-
const eventTarget =
|
|
572
|
+
const eventTarget = useScrollLock.getTarget(event);
|
|
574
573
|
const currentTarget = event.currentTarget ?? null;
|
|
575
574
|
const currentDomReference = store.select('domReferenceElement');
|
|
576
575
|
let triggerNode = currentTarget;
|
|
577
576
|
|
|
578
577
|
// Wrapper/delegated mode: resolve the actual trigger from the event target.
|
|
579
|
-
if (
|
|
578
|
+
if (floatingUi_utils.isElement(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
|
|
580
579
|
for (const triggerElement of store.context.triggerElements.elements()) {
|
|
581
|
-
if (
|
|
580
|
+
if (useScrollLock.contains(triggerElement, eventTarget)) {
|
|
582
581
|
triggerNode = triggerElement;
|
|
583
582
|
break;
|
|
584
583
|
}
|
|
@@ -587,14 +586,14 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
587
586
|
|
|
588
587
|
// Wrapper/delegated mode fallback: if the wrapper contains the active trigger,
|
|
589
588
|
// treat this as re-entering that active trigger.
|
|
590
|
-
if (
|
|
589
|
+
if (floatingUi_utils.isElement(currentTarget) && floatingUi_utils.isElement(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && useScrollLock.contains(currentTarget, currentDomReference)) {
|
|
591
590
|
triggerNode = currentDomReference;
|
|
592
591
|
}
|
|
593
592
|
const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, eventTarget);
|
|
594
593
|
const isOpen = store.select('open');
|
|
595
594
|
const isInClosingTransition = isClosingRef.current?.() ?? store.select('transitionStatus') === 'ending';
|
|
596
595
|
const isHoverCloseTransition = !isOpen && isInClosingTransition && isHoverCloseActiveRef.current;
|
|
597
|
-
const isReenteringSameTriggerDuringCloseTransition = !isOverInactive &&
|
|
596
|
+
const isReenteringSameTriggerDuringCloseTransition = !isOverInactive && floatingUi_utils.isElement(triggerNode) && floatingUi_utils.isElement(currentDomReference) && useScrollLock.contains(currentDomReference, triggerNode) && isHoverCloseTransition;
|
|
598
597
|
const isRestOnlyDelay = restMsValue > 0 && !openDelay;
|
|
599
598
|
const shouldOpenImmediately = isOverInactive && (isOpen || isHoverCloseTransition) || isReenteringSameTriggerDuringCloseTransition;
|
|
600
599
|
const shouldOpen = !isOpen || isOverInactive;
|
|
@@ -603,7 +602,7 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
603
602
|
// a hover-driven close transition (including same-trigger re-entry).
|
|
604
603
|
if (shouldOpenImmediately) {
|
|
605
604
|
if (checkShouldOpen()) {
|
|
606
|
-
store.setOpen(true,
|
|
605
|
+
store.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.triggerHover, event, triggerNode));
|
|
607
606
|
}
|
|
608
607
|
return;
|
|
609
608
|
}
|
|
@@ -613,12 +612,12 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
613
612
|
if (openDelay) {
|
|
614
613
|
instance.openChangeTimeout.start(openDelay, () => {
|
|
615
614
|
if (shouldOpen && checkShouldOpen()) {
|
|
616
|
-
store.setOpen(true,
|
|
615
|
+
store.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.triggerHover, event, triggerNode));
|
|
617
616
|
}
|
|
618
617
|
});
|
|
619
618
|
} else if (shouldOpen) {
|
|
620
619
|
if (checkShouldOpen()) {
|
|
621
|
-
store.setOpen(true,
|
|
620
|
+
store.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.triggerHover, event, triggerNode));
|
|
622
621
|
}
|
|
623
622
|
}
|
|
624
623
|
}
|
|
@@ -629,7 +628,7 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
629
628
|
}
|
|
630
629
|
cleanupMouseMoveHandler();
|
|
631
630
|
const domReferenceElement = store.select('domReferenceElement');
|
|
632
|
-
const doc =
|
|
631
|
+
const doc = useScrollLock.ownerDocument(domReferenceElement);
|
|
633
632
|
instance.restTimeout.clear();
|
|
634
633
|
instance.restTimeoutPending = false;
|
|
635
634
|
const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
|
|
@@ -658,17 +657,17 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
658
657
|
instance.handler(event);
|
|
659
658
|
return;
|
|
660
659
|
}
|
|
661
|
-
const shouldClose = instance.pointerType === 'touch' ? !
|
|
660
|
+
const shouldClose = instance.pointerType === 'touch' ? !useScrollLock.contains(store.select('floatingElement'), event.relatedTarget) : true;
|
|
662
661
|
if (shouldClose) {
|
|
663
662
|
closeWithDelay(event);
|
|
664
663
|
}
|
|
665
664
|
}
|
|
666
665
|
if (move) {
|
|
667
|
-
return useScrollLock.mergeCleanups(
|
|
666
|
+
return useScrollLock.mergeCleanups(useScrollLock.addEventListener(trigger, 'mousemove', onMouseEnter, {
|
|
668
667
|
once: true
|
|
669
|
-
}),
|
|
668
|
+
}), useScrollLock.addEventListener(trigger, 'mouseenter', onMouseEnter), useScrollLock.addEventListener(trigger, 'mouseleave', onMouseLeave));
|
|
670
669
|
}
|
|
671
|
-
return useScrollLock.mergeCleanups(
|
|
670
|
+
return useScrollLock.mergeCleanups(useScrollLock.addEventListener(trigger, 'mouseenter', onMouseEnter), useScrollLock.addEventListener(trigger, 'mouseleave', onMouseLeave));
|
|
672
671
|
}, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent$1, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen]);
|
|
673
672
|
return React__namespace.useMemo(() => {
|
|
674
673
|
if (!enabled) {
|
|
@@ -688,7 +687,7 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
688
687
|
const currentDomReference = store.select('domReferenceElement');
|
|
689
688
|
const currentOpen = store.select('open');
|
|
690
689
|
const isOverInactive = isOverInactiveTrigger(currentDomReference, trigger, event.target);
|
|
691
|
-
if (mouseOnly && !
|
|
690
|
+
if (mouseOnly && !useScrollLock.isMouseLikePointerType(instance.pointerType)) {
|
|
692
691
|
return;
|
|
693
692
|
}
|
|
694
693
|
if (currentOpen && isOverInactive && instance.handleCloseOptions?.blockPointerEvents) {
|
|
@@ -720,7 +719,7 @@ function useHoverReferenceInteraction(context, props = {}) {
|
|
|
720
719
|
}
|
|
721
720
|
const latestOpen = store.select('open');
|
|
722
721
|
if (!instance.blockMouseMove && (!latestOpen || isOverInactive) && checkShouldOpen()) {
|
|
723
|
-
store.setOpen(true,
|
|
722
|
+
store.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.triggerHover, nativeEvent, trigger));
|
|
724
723
|
}
|
|
725
724
|
}
|
|
726
725
|
if (instance.pointerType === 'touch') {
|
|
@@ -781,7 +780,7 @@ function safePolygon(options = {}) {
|
|
|
781
780
|
const {
|
|
782
781
|
blockPointerEvents = false
|
|
783
782
|
} = options;
|
|
784
|
-
const timeout = new
|
|
783
|
+
const timeout = new useScrollLock.Timeout();
|
|
785
784
|
const fn = ({
|
|
786
785
|
x,
|
|
787
786
|
y,
|
|
@@ -829,10 +828,10 @@ function safePolygon(options = {}) {
|
|
|
829
828
|
clientX,
|
|
830
829
|
clientY
|
|
831
830
|
} = event;
|
|
832
|
-
const target =
|
|
831
|
+
const target = useScrollLock.getTarget(event);
|
|
833
832
|
const isLeave = event.type === 'mouseleave';
|
|
834
|
-
const isOverFloatingEl =
|
|
835
|
-
const isOverReferenceEl =
|
|
833
|
+
const isOverFloatingEl = useScrollLock.contains(floating, target);
|
|
834
|
+
const isOverReferenceEl = useScrollLock.contains(domReference, target);
|
|
836
835
|
if (isOverFloatingEl) {
|
|
837
836
|
hasLanded = true;
|
|
838
837
|
if (!isLeave) {
|
|
@@ -849,7 +848,7 @@ function safePolygon(options = {}) {
|
|
|
849
848
|
|
|
850
849
|
// Prevent overlapping floating element from being stuck in an open-close
|
|
851
850
|
// loop: https://github.com/floating-ui/floating-ui/issues/1910
|
|
852
|
-
if (isLeave &&
|
|
851
|
+
if (isLeave && floatingUi_utils.isElement(event.relatedTarget) && useScrollLock.contains(floating, event.relatedTarget)) {
|
|
853
852
|
return undefined;
|
|
854
853
|
}
|
|
855
854
|
function hasOpenChildNode() {
|
|
@@ -1012,7 +1011,7 @@ function useContextMenuRootContext(optional = true) {
|
|
|
1012
1011
|
|
|
1013
1012
|
const stateAttributesMapping$1 = {
|
|
1014
1013
|
...useScrollLock.popupStateMapping,
|
|
1015
|
-
...
|
|
1014
|
+
...useScrollLock.transitionStatusMapping
|
|
1016
1015
|
};
|
|
1017
1016
|
|
|
1018
1017
|
/**
|
|
@@ -1048,7 +1047,7 @@ const MenuBackdrop = /*#__PURE__*/React__namespace.forwardRef(function MenuBackd
|
|
|
1048
1047
|
role: 'presentation',
|
|
1049
1048
|
hidden: !mounted,
|
|
1050
1049
|
style: {
|
|
1051
|
-
pointerEvents: lastOpenChangeReason ===
|
|
1050
|
+
pointerEvents: lastOpenChangeReason === useScrollLock.triggerHover ? 'none' : undefined,
|
|
1052
1051
|
userSelect: 'none',
|
|
1053
1052
|
WebkitUserSelect: 'none'
|
|
1054
1053
|
}
|
|
@@ -1104,7 +1103,7 @@ function useMenuItemCommonProps(params) {
|
|
|
1104
1103
|
if (closeOnClick) {
|
|
1105
1104
|
menuEvents.emit('close', {
|
|
1106
1105
|
domEvent: event,
|
|
1107
|
-
reason:
|
|
1106
|
+
reason: useScrollLock.itemPress
|
|
1108
1107
|
});
|
|
1109
1108
|
}
|
|
1110
1109
|
},
|
|
@@ -1118,7 +1117,7 @@ function useMenuItemCommonProps(params) {
|
|
|
1118
1117
|
|
|
1119
1118
|
// On non-macOS platforms, this mouseup belongs to the right-click gesture
|
|
1120
1119
|
// that opened the context menu, so it must not activate an item.
|
|
1121
|
-
if (isContextMenu && !
|
|
1120
|
+
if (isContextMenu && !useScrollLock.mac && event.button === 2) {
|
|
1122
1121
|
return;
|
|
1123
1122
|
}
|
|
1124
1123
|
}
|
|
@@ -1154,7 +1153,7 @@ function useMenuItem(params) {
|
|
|
1154
1153
|
const {
|
|
1155
1154
|
getButtonProps,
|
|
1156
1155
|
buttonRef
|
|
1157
|
-
} =
|
|
1156
|
+
} = useScrollLock.useButton({
|
|
1158
1157
|
disabled,
|
|
1159
1158
|
focusableWhenDisabled: true,
|
|
1160
1159
|
native: nativeButton,
|
|
@@ -1218,7 +1217,7 @@ const itemMapping = {
|
|
|
1218
1217
|
[MenuCheckboxItemDataAttributes.unchecked]: ''
|
|
1219
1218
|
};
|
|
1220
1219
|
},
|
|
1221
|
-
...
|
|
1220
|
+
...useScrollLock.transitionStatusMapping
|
|
1222
1221
|
};
|
|
1223
1222
|
|
|
1224
1223
|
const MenuGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
|
|
@@ -1268,9 +1267,9 @@ const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGro
|
|
|
1268
1267
|
id: idProp,
|
|
1269
1268
|
...elementProps
|
|
1270
1269
|
} = componentProps;
|
|
1271
|
-
const id =
|
|
1270
|
+
const id = useScrollLock.useBaseUiId(idProp);
|
|
1272
1271
|
const setLabelId = useMenuGroupRootContext();
|
|
1273
|
-
|
|
1272
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1274
1273
|
setLabelId(id);
|
|
1275
1274
|
return () => {
|
|
1276
1275
|
setLabelId(undefined);
|
|
@@ -1309,7 +1308,7 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
|
|
|
1309
1308
|
label
|
|
1310
1309
|
});
|
|
1311
1310
|
const menuPositionerContext = useMenuPositionerContext(true);
|
|
1312
|
-
const id =
|
|
1311
|
+
const id = useScrollLock.useBaseUiId(idProp);
|
|
1313
1312
|
const {
|
|
1314
1313
|
store
|
|
1315
1314
|
} = useMenuRootContext();
|
|
@@ -1362,7 +1361,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
|
|
|
1362
1361
|
});
|
|
1363
1362
|
const menuPositionerContext = useMenuPositionerContext(true);
|
|
1364
1363
|
const nodeId = menuPositionerContext?.context.nodeId;
|
|
1365
|
-
const id =
|
|
1364
|
+
const id = useScrollLock.useBaseUiId(idProp);
|
|
1366
1365
|
const {
|
|
1367
1366
|
store
|
|
1368
1367
|
} = useMenuRootContext();
|
|
@@ -1372,7 +1371,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
|
|
|
1372
1371
|
const {
|
|
1373
1372
|
getButtonProps,
|
|
1374
1373
|
buttonRef
|
|
1375
|
-
} =
|
|
1374
|
+
} = useScrollLock.useButton({
|
|
1376
1375
|
native: false,
|
|
1377
1376
|
composite: true
|
|
1378
1377
|
});
|
|
@@ -1401,7 +1400,7 @@ if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkI
|
|
|
1401
1400
|
|
|
1402
1401
|
const stateAttributesMapping = {
|
|
1403
1402
|
...useScrollLock.popupStateMapping,
|
|
1404
|
-
...
|
|
1403
|
+
...useScrollLock.transitionStatusMapping
|
|
1405
1404
|
};
|
|
1406
1405
|
|
|
1407
1406
|
/**
|
|
@@ -1425,7 +1424,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
|
|
|
1425
1424
|
side,
|
|
1426
1425
|
align
|
|
1427
1426
|
} = useMenuPositionerContext();
|
|
1428
|
-
const insideToolbar =
|
|
1427
|
+
const insideToolbar = SelectGroupLabel.useToolbarRootContext(true) != null;
|
|
1429
1428
|
const open = store.useState('open');
|
|
1430
1429
|
const transitionStatus = store.useState('transitionStatus');
|
|
1431
1430
|
const popupProps = store.useState('popupProps');
|
|
@@ -1443,7 +1442,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
|
|
|
1443
1442
|
const disabled = store.useState('disabled');
|
|
1444
1443
|
const openMethod = store.useState('openMethod');
|
|
1445
1444
|
const isContextMenu = parent.type === 'context-menu';
|
|
1446
|
-
|
|
1445
|
+
useScrollLock.useOpenChangeComplete({
|
|
1447
1446
|
open,
|
|
1448
1447
|
ref: store.context.popupRef,
|
|
1449
1448
|
onComplete() {
|
|
@@ -1454,7 +1453,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
|
|
|
1454
1453
|
});
|
|
1455
1454
|
React__namespace.useEffect(() => {
|
|
1456
1455
|
function handleClose(event) {
|
|
1457
|
-
store.setOpen(false,
|
|
1456
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(event.reason, event.domEvent));
|
|
1458
1457
|
}
|
|
1459
1458
|
floatingTreeRoot.events.on('close', handleClose);
|
|
1460
1459
|
return () => {
|
|
@@ -1491,7 +1490,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
|
|
|
1491
1490
|
}]
|
|
1492
1491
|
});
|
|
1493
1492
|
let returnFocus = parent.type === undefined || isContextMenu;
|
|
1494
|
-
if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !==
|
|
1493
|
+
if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useScrollLock.outsidePress) {
|
|
1495
1494
|
returnFocus = true;
|
|
1496
1495
|
}
|
|
1497
1496
|
return /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingFocusManager, {
|
|
@@ -1585,7 +1584,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
|
|
|
1585
1584
|
const floatingParentNodeId = store.useState('floatingParentNodeId');
|
|
1586
1585
|
const domReference = floatingRootContext.useState('domReferenceElement');
|
|
1587
1586
|
const previousTriggerRef = React__namespace.useRef(null);
|
|
1588
|
-
const runOnceAnimationsFinish =
|
|
1587
|
+
const runOnceAnimationsFinish = useScrollLock.useAnimationsFinished(positionerElement, false, false);
|
|
1589
1588
|
let anchor = anchorProp;
|
|
1590
1589
|
let sideOffset = sideOffsetProp;
|
|
1591
1590
|
let alignOffset = alignOffsetProp;
|
|
@@ -1638,7 +1637,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
|
|
|
1638
1637
|
store.set('hoverEnabled', false);
|
|
1639
1638
|
}
|
|
1640
1639
|
if (details.nodeId !== floatingNodeId && details.parentNodeId === store.select('floatingParentNodeId')) {
|
|
1641
|
-
store.setOpen(false,
|
|
1640
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.siblingOpen));
|
|
1642
1641
|
}
|
|
1643
1642
|
}
|
|
1644
1643
|
}
|
|
@@ -1655,15 +1654,15 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
|
|
|
1655
1654
|
if (details.open || details.nodeId !== store.select('floatingParentNodeId')) {
|
|
1656
1655
|
return;
|
|
1657
1656
|
}
|
|
1658
|
-
const reason = details.reason ??
|
|
1659
|
-
store.setOpen(false,
|
|
1657
|
+
const reason = details.reason ?? useScrollLock.siblingOpen;
|
|
1658
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(reason));
|
|
1660
1659
|
}
|
|
1661
1660
|
floatingTreeRoot.events.on('menuopenchange', onParentClose);
|
|
1662
1661
|
return () => {
|
|
1663
1662
|
floatingTreeRoot.events.off('menuopenchange', onParentClose);
|
|
1664
1663
|
};
|
|
1665
1664
|
}, [floatingTreeRoot.events, store]);
|
|
1666
|
-
const closeTimeout =
|
|
1665
|
+
const closeTimeout = useScrollLock.useTimeout();
|
|
1667
1666
|
|
|
1668
1667
|
// Clear pending close timeout when the menu closes.
|
|
1669
1668
|
React__namespace.useEffect(() => {
|
|
@@ -1685,11 +1684,11 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
|
|
|
1685
1684
|
if (delay > 0) {
|
|
1686
1685
|
if (!closeTimeout.isStarted()) {
|
|
1687
1686
|
closeTimeout.start(delay, () => {
|
|
1688
|
-
store.setOpen(false,
|
|
1687
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.siblingOpen));
|
|
1689
1688
|
});
|
|
1690
1689
|
}
|
|
1691
1690
|
} else {
|
|
1692
|
-
store.setOpen(false,
|
|
1691
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.siblingOpen));
|
|
1693
1692
|
}
|
|
1694
1693
|
} else {
|
|
1695
1694
|
// User re-hovered the submenu trigger, cancel pending close.
|
|
@@ -1712,7 +1711,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
|
|
|
1712
1711
|
}, [floatingTreeRoot.events, open, store, floatingNodeId, floatingParentNodeId]);
|
|
1713
1712
|
|
|
1714
1713
|
// Keep positioner transition behavior aligned with Popover when switching detached triggers.
|
|
1715
|
-
|
|
1714
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1716
1715
|
const currentTrigger = domReference;
|
|
1717
1716
|
const previousTrigger = previousTriggerRef.current;
|
|
1718
1717
|
if (currentTrigger) {
|
|
@@ -1739,7 +1738,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
|
|
|
1739
1738
|
instant: instantType
|
|
1740
1739
|
};
|
|
1741
1740
|
const menubarModal = parent.type === 'menubar' && parent.context.modal;
|
|
1742
|
-
const popupModal = modal && lastOpenChangeReason !==
|
|
1741
|
+
const popupModal = modal && lastOpenChangeReason !== useScrollLock.triggerHover;
|
|
1743
1742
|
useCompositeListItem.useAnchoredPopupScrollLock(open && (menubarModal || popupModal), openMethod === 'touch', positionerElement, triggerElement);
|
|
1744
1743
|
const element = useCompositeListItem.usePositioner(componentProps, state, {
|
|
1745
1744
|
styles: positioner.positionerStyles,
|
|
@@ -1749,7 +1748,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
|
|
|
1749
1748
|
hidden: !mounted,
|
|
1750
1749
|
inert: !open
|
|
1751
1750
|
});
|
|
1752
|
-
const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !==
|
|
1751
|
+
const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== useScrollLock.triggerHover || parent.type === 'menubar' && parent.context.modal);
|
|
1753
1752
|
|
|
1754
1753
|
// cuts a hole in the backdrop to allow pointer interaction with the menubar or dropdown menu trigger element
|
|
1755
1754
|
let backdropCutout = null;
|
|
@@ -1805,12 +1804,12 @@ const MenuRadioGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
|
|
|
1805
1804
|
...elementProps
|
|
1806
1805
|
} = componentProps;
|
|
1807
1806
|
const [labelId, setLabelId] = React__namespace.useState(undefined);
|
|
1808
|
-
const [value, setValueUnwrapped] =
|
|
1807
|
+
const [value, setValueUnwrapped] = useScrollLock.useControlled({
|
|
1809
1808
|
controlled: valueProp,
|
|
1810
1809
|
default: defaultValue,
|
|
1811
1810
|
name: 'MenuRadioGroup'
|
|
1812
1811
|
});
|
|
1813
|
-
const setValue =
|
|
1812
|
+
const setValue = useScrollLock.useStableCallback((newValue, eventDetails) => {
|
|
1814
1813
|
onValueChangeProp?.(newValue, eventDetails);
|
|
1815
1814
|
if (eventDetails.isCanceled) {
|
|
1816
1815
|
return;
|
|
@@ -1872,7 +1871,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
|
|
|
1872
1871
|
label
|
|
1873
1872
|
});
|
|
1874
1873
|
const menuPositionerContext = useMenuPositionerContext(true);
|
|
1875
|
-
const id =
|
|
1874
|
+
const id = useScrollLock.useBaseUiId(idProp);
|
|
1876
1875
|
const {
|
|
1877
1876
|
store
|
|
1878
1877
|
} = useMenuRootContext();
|
|
@@ -1904,7 +1903,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
|
|
|
1904
1903
|
checked
|
|
1905
1904
|
}), [disabled, highlighted, checked]);
|
|
1906
1905
|
function handleClick(event) {
|
|
1907
|
-
const details =
|
|
1906
|
+
const details = useScrollLock.createChangeEventDetails(useScrollLock.itemPress, event.nativeEvent, undefined, {
|
|
1908
1907
|
preventUnmountOnClose() {}
|
|
1909
1908
|
});
|
|
1910
1909
|
setSelectedValue(value, details);
|
|
@@ -1945,8 +1944,8 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
|
|
|
1945
1944
|
const {
|
|
1946
1945
|
transitionStatus,
|
|
1947
1946
|
setMounted
|
|
1948
|
-
} =
|
|
1949
|
-
|
|
1947
|
+
} = useScrollLock.useTransitionStatus(item.checked);
|
|
1948
|
+
useScrollLock.useOpenChangeComplete({
|
|
1950
1949
|
open: item.checked,
|
|
1951
1950
|
ref: indicatorRef,
|
|
1952
1951
|
onComplete() {
|
|
@@ -2188,8 +2187,8 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
|
|
|
2188
2187
|
store.useControlledProp('openProp', openProp);
|
|
2189
2188
|
store.useControlledProp('triggerIdProp', triggerIdProp);
|
|
2190
2189
|
store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
|
|
2191
|
-
const rootId =
|
|
2192
|
-
const floatingId =
|
|
2190
|
+
const rootId = useScrollLock.useId();
|
|
2191
|
+
const floatingId = useScrollLock.useId();
|
|
2193
2192
|
const floatingTreeRoot = store.useState('floatingTreeRoot');
|
|
2194
2193
|
const floatingNodeIdFromContext = useScrollLock.useFloatingNodeId(floatingTreeRoot);
|
|
2195
2194
|
const floatingParentNodeIdFromContext = useScrollLock.useFloatingParentNodeId();
|
|
@@ -2205,9 +2204,9 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
|
|
|
2205
2204
|
const floatingParentNodeId = store.useState('floatingParentNodeId');
|
|
2206
2205
|
const openEventRef = React__namespace.useRef(null);
|
|
2207
2206
|
const allowOutsidePressDismissalRef = React__namespace.useRef(parent.type !== 'context-menu');
|
|
2208
|
-
const allowOutsidePressDismissalTimeout =
|
|
2207
|
+
const allowOutsidePressDismissalTimeout = useScrollLock.useTimeout();
|
|
2209
2208
|
const allowTouchToCloseRef = React__namespace.useRef(true);
|
|
2210
|
-
const allowTouchToCloseTimeout =
|
|
2209
|
+
const allowTouchToCloseTimeout = useScrollLock.useTimeout();
|
|
2211
2210
|
const nested = floatingParentNodeId != null;
|
|
2212
2211
|
if (process.env.NODE_ENV !== 'production') {
|
|
2213
2212
|
if (parent.type !== undefined && modalProp !== undefined) {
|
|
@@ -2234,7 +2233,7 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
|
|
|
2234
2233
|
stickIfOpen: true
|
|
2235
2234
|
});
|
|
2236
2235
|
});
|
|
2237
|
-
|
|
2236
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
2238
2237
|
if (contextMenuContext && !parentMenuRootContext) {
|
|
2239
2238
|
// This is a context menu root.
|
|
2240
2239
|
// It doesn't support detached triggers yet, so we have to sync the parent context manually.
|
|
@@ -2273,12 +2272,12 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
|
|
|
2273
2272
|
allowOutsidePressDismissalRef.current = true;
|
|
2274
2273
|
});
|
|
2275
2274
|
}, [allowOutsidePressDismissalTimeout, open, parent.type]);
|
|
2276
|
-
|
|
2275
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
2277
2276
|
if (!open && !hoverEnabled) {
|
|
2278
2277
|
store.set('hoverEnabled', true);
|
|
2279
2278
|
}
|
|
2280
2279
|
}, [open, hoverEnabled, store]);
|
|
2281
|
-
const setOpen =
|
|
2280
|
+
const setOpen = useScrollLock.useStableCallback((nextOpen, eventDetails) => {
|
|
2282
2281
|
const reason = eventDetails.reason;
|
|
2283
2282
|
if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
|
|
2284
2283
|
return;
|
|
@@ -2303,7 +2302,7 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
|
|
|
2303
2302
|
// Prevent the menu from closing on mobile devices that have a delayed click event.
|
|
2304
2303
|
// In some cases the menu, when tapped, will fire the focus event first and then the click event.
|
|
2305
2304
|
// Without this guard, the menu will close immediately after opening.
|
|
2306
|
-
if (nextOpen && reason ===
|
|
2305
|
+
if (nextOpen && reason === useScrollLock.triggerFocus) {
|
|
2307
2306
|
allowTouchToCloseRef.current = false;
|
|
2308
2307
|
allowTouchToCloseTimeout.start(300, () => {
|
|
2309
2308
|
allowTouchToCloseRef.current = true;
|
|
@@ -2312,8 +2311,8 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
|
|
|
2312
2311
|
allowTouchToCloseRef.current = true;
|
|
2313
2312
|
allowTouchToCloseTimeout.clear();
|
|
2314
2313
|
}
|
|
2315
|
-
const isKeyboardClick = (reason ===
|
|
2316
|
-
const isDismissClose = !nextOpen && (reason ===
|
|
2314
|
+
const isKeyboardClick = (reason === useScrollLock.triggerPress || reason === useScrollLock.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
|
|
2315
|
+
const isDismissClose = !nextOpen && (reason === useScrollLock.escapeKey || reason == null);
|
|
2317
2316
|
const updatedState = {
|
|
2318
2317
|
open: nextOpen,
|
|
2319
2318
|
openChangeReason: reason
|
|
@@ -2321,7 +2320,7 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
|
|
|
2321
2320
|
openEventRef.current = eventDetails.event ?? null;
|
|
2322
2321
|
useScrollLock.setPopupOpenState(updatedState, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
|
|
2323
2322
|
store.update(updatedState);
|
|
2324
|
-
if (parent.type === 'menubar' && (reason ===
|
|
2323
|
+
if (parent.type === 'menubar' && (reason === useScrollLock.triggerFocus || reason === useScrollLock.focusOut || reason === useScrollLock.triggerHover || reason === useScrollLock.listNavigation || reason === useScrollLock.siblingOpen)) {
|
|
2325
2324
|
store.set('instantType', 'group');
|
|
2326
2325
|
} else if (isKeyboardClick || isDismissClose) {
|
|
2327
2326
|
store.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
|
|
@@ -2347,7 +2346,7 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
|
|
|
2347
2346
|
};
|
|
2348
2347
|
}, [floatingEvents, setOpen]);
|
|
2349
2348
|
const handleImperativeClose = React__namespace.useCallback(() => {
|
|
2350
|
-
store.setOpen(false,
|
|
2349
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.imperativeAction));
|
|
2351
2350
|
}, [store]);
|
|
2352
2351
|
React__namespace.useImperativeHandle(actionsRef, () => ({
|
|
2353
2352
|
unmount: forceUnmount,
|
|
@@ -2506,7 +2505,7 @@ function useCompositeItem(params = {}) {
|
|
|
2506
2505
|
highlightItemOnHover,
|
|
2507
2506
|
highlightedIndex,
|
|
2508
2507
|
onHighlightedIndexChange
|
|
2509
|
-
} =
|
|
2508
|
+
} = useScrollLock.useCompositeRootContext();
|
|
2510
2509
|
const {
|
|
2511
2510
|
ref,
|
|
2512
2511
|
index
|
|
@@ -2568,13 +2567,13 @@ function CompositeItem(componentProps) {
|
|
|
2568
2567
|
}
|
|
2569
2568
|
|
|
2570
2569
|
function findRootOwnerId(node) {
|
|
2571
|
-
if (
|
|
2570
|
+
if (floatingUi_utils.isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
|
|
2572
2571
|
return node.getAttribute('data-rootownerid') ?? undefined;
|
|
2573
2572
|
}
|
|
2574
|
-
if (
|
|
2573
|
+
if (floatingUi_utils.isLastTraversableNode(node)) {
|
|
2575
2574
|
return undefined;
|
|
2576
2575
|
}
|
|
2577
|
-
return findRootOwnerId(
|
|
2576
|
+
return findRootOwnerId(floatingUi_utils.getParentNode(node));
|
|
2578
2577
|
}
|
|
2579
2578
|
|
|
2580
2579
|
/**
|
|
@@ -2593,7 +2592,7 @@ function useTriggerFocusGuards(store, triggerElementRef) {
|
|
|
2593
2592
|
const preFocusGuardRef = React__namespace.useRef(null);
|
|
2594
2593
|
function handlePreFocusGuardFocus(event) {
|
|
2595
2594
|
ReactDOM__namespace.flushSync(() => {
|
|
2596
|
-
store.setOpen(false,
|
|
2595
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.focusOut, event.nativeEvent, event.currentTarget));
|
|
2597
2596
|
});
|
|
2598
2597
|
const previousTabbable = useScrollLock.getTabbableBeforeElement(preFocusGuardRef.current);
|
|
2599
2598
|
previousTabbable?.focus();
|
|
@@ -2604,10 +2603,10 @@ function useTriggerFocusGuards(store, triggerElementRef) {
|
|
|
2604
2603
|
store.context.beforeContentFocusGuardRef.current?.focus();
|
|
2605
2604
|
} else {
|
|
2606
2605
|
ReactDOM__namespace.flushSync(() => {
|
|
2607
|
-
store.setOpen(false,
|
|
2606
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.focusOut, event.nativeEvent, event.currentTarget));
|
|
2608
2607
|
});
|
|
2609
2608
|
let nextTabbable = useScrollLock.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
|
|
2610
|
-
while (nextTabbable !== null &&
|
|
2609
|
+
while (nextTabbable !== null && useScrollLock.contains(positionerElement, nextTabbable)) {
|
|
2611
2610
|
const prevTabbable = nextTabbable;
|
|
2612
2611
|
nextTabbable = useScrollLock.getNextTabbable(nextTabbable);
|
|
2613
2612
|
if (nextTabbable === prevTabbable) {
|
|
@@ -2644,7 +2643,7 @@ function useMixedToggleClickHandler(params) {
|
|
|
2644
2643
|
onMouseDown: event => {
|
|
2645
2644
|
if (mouseDownAction === 'open' && !open || mouseDownAction === 'close' && open) {
|
|
2646
2645
|
ignoreClickRef.current = true;
|
|
2647
|
-
|
|
2646
|
+
useScrollLock.ownerDocument(event.currentTarget).addEventListener('click', () => {
|
|
2648
2647
|
ignoreClickRef.current = false;
|
|
2649
2648
|
}, {
|
|
2650
2649
|
once: true
|
|
@@ -2689,14 +2688,14 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
|
|
|
2689
2688
|
if (!store) {
|
|
2690
2689
|
throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : useRenderElement.formatErrorMessage(85));
|
|
2691
2690
|
}
|
|
2692
|
-
const thisTriggerId =
|
|
2691
|
+
const thisTriggerId = useScrollLock.useBaseUiId(idProp);
|
|
2693
2692
|
const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
|
|
2694
2693
|
const floatingRootContext = store.useState('floatingRootContext');
|
|
2695
2694
|
const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
|
|
2696
2695
|
const popupId = store.useState('triggerPopupId', thisTriggerId);
|
|
2697
2696
|
const triggerElementRef = React__namespace.useRef(null);
|
|
2698
2697
|
const parent = useMenuParent();
|
|
2699
|
-
const compositeRootContext =
|
|
2698
|
+
const compositeRootContext = useScrollLock.useCompositeRootContext(true);
|
|
2700
2699
|
const floatingTreeRootFromContext = useScrollLock.useFloatingTree();
|
|
2701
2700
|
const floatingTreeRoot = React__namespace.useMemo(() => {
|
|
2702
2701
|
return floatingTreeRootFromContext ?? new useScrollLock.FloatingTreeStore();
|
|
@@ -2721,7 +2720,7 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
|
|
|
2721
2720
|
const {
|
|
2722
2721
|
getButtonProps,
|
|
2723
2722
|
buttonRef
|
|
2724
|
-
} =
|
|
2723
|
+
} = useScrollLock.useButton({
|
|
2725
2724
|
disabled,
|
|
2726
2725
|
native: nativeButton
|
|
2727
2726
|
});
|
|
@@ -2731,15 +2730,15 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
|
|
|
2731
2730
|
}
|
|
2732
2731
|
}, [store, isOpenedByThisTrigger, parent.type]);
|
|
2733
2732
|
const triggerRef = React__namespace.useRef(null);
|
|
2734
|
-
const allowMouseUpTriggerTimeout =
|
|
2735
|
-
const handleDocumentMouseUp =
|
|
2733
|
+
const allowMouseUpTriggerTimeout = useScrollLock.useTimeout();
|
|
2734
|
+
const handleDocumentMouseUp = useScrollLock.useStableCallback(mouseEvent => {
|
|
2736
2735
|
if (!triggerRef.current) {
|
|
2737
2736
|
return;
|
|
2738
2737
|
}
|
|
2739
2738
|
allowMouseUpTriggerTimeout.clear();
|
|
2740
2739
|
store.context.allowMouseUpTriggerRef.current = false;
|
|
2741
2740
|
const mouseUpTarget = mouseEvent.target;
|
|
2742
|
-
if (
|
|
2741
|
+
if (useScrollLock.contains(triggerRef.current, mouseUpTarget) || useScrollLock.contains(store.select('positionerElement'), mouseUpTarget) || mouseUpTarget === triggerRef.current) {
|
|
2743
2742
|
return;
|
|
2744
2743
|
}
|
|
2745
2744
|
if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === store.select('rootId')) {
|
|
@@ -2751,12 +2750,12 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
|
|
|
2751
2750
|
}
|
|
2752
2751
|
floatingTreeRoot.events.emit('close', {
|
|
2753
2752
|
domEvent: mouseEvent,
|
|
2754
|
-
reason:
|
|
2753
|
+
reason: useScrollLock.cancelOpen
|
|
2755
2754
|
});
|
|
2756
2755
|
});
|
|
2757
2756
|
React__namespace.useEffect(() => {
|
|
2758
|
-
if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') ===
|
|
2759
|
-
const doc =
|
|
2757
|
+
if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') === useScrollLock.triggerHover) {
|
|
2758
|
+
const doc = useScrollLock.ownerDocument(triggerRef.current);
|
|
2760
2759
|
doc.addEventListener('mouseup', handleDocumentMouseUp, {
|
|
2761
2760
|
once: true
|
|
2762
2761
|
});
|
|
@@ -2825,7 +2824,7 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
|
|
|
2825
2824
|
allowMouseUpTriggerTimeout.start(200, () => {
|
|
2826
2825
|
store.context.allowMouseUpTriggerRef.current = true;
|
|
2827
2826
|
});
|
|
2828
|
-
const doc =
|
|
2827
|
+
const doc = useScrollLock.ownerDocument(event.currentTarget);
|
|
2829
2828
|
doc.addEventListener('mouseup', handleDocumentMouseUp, {
|
|
2830
2829
|
once: true
|
|
2831
2830
|
});
|
|
@@ -2878,9 +2877,9 @@ if (process.env.NODE_ENV !== "production") MenuTrigger.displayName = "MenuTrigge
|
|
|
2878
2877
|
* Determines whether to ignore clicks after a hover-open.
|
|
2879
2878
|
*/
|
|
2880
2879
|
function useStickIfOpen(open, openReason) {
|
|
2881
|
-
const stickIfOpenTimeout =
|
|
2880
|
+
const stickIfOpenTimeout = useScrollLock.useTimeout();
|
|
2882
2881
|
const [stickIfOpen, setStickIfOpen] = React__namespace.useState(false);
|
|
2883
|
-
|
|
2882
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
2884
2883
|
if (open && openReason === 'trigger-hover') {
|
|
2885
2884
|
// Only allow "patient" clicks to close the menu if it's open.
|
|
2886
2885
|
// If they clicked within 500ms of the menu opening, keep it open.
|
|
@@ -2950,7 +2949,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Men
|
|
|
2950
2949
|
const {
|
|
2951
2950
|
store
|
|
2952
2951
|
} = useMenuRootContext();
|
|
2953
|
-
const thisTriggerId =
|
|
2952
|
+
const thisTriggerId = useScrollLock.useBaseUiId(idProp);
|
|
2954
2953
|
const open = store.useState('open');
|
|
2955
2954
|
const floatingRootContext = store.useState('floatingRootContext');
|
|
2956
2955
|
const floatingTreeRoot = store.useState('floatingTreeRoot');
|
|
@@ -2983,10 +2982,10 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Men
|
|
|
2983
2982
|
const disabled = disabledProp || rootDisabled || parentDisabled;
|
|
2984
2983
|
if (process.env.NODE_ENV !== 'production') {
|
|
2985
2984
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2986
|
-
|
|
2985
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
2987
2986
|
const element = triggerElementRef.current;
|
|
2988
|
-
if (element &&
|
|
2989
|
-
const ownerStackMessage =
|
|
2987
|
+
if (element && SelectGroupLabel.isElementDisabled(element) && !disabled) {
|
|
2988
|
+
const ownerStackMessage = useScrollLock.SafeReact.captureOwnerStack?.() || '';
|
|
2990
2989
|
useRenderElement.warn(`A disabled element was detected on <Menu.SubmenuTrigger>. To properly disable the trigger, use the \`disabled\` prop on the component instead of setting it on the rendered element.${ownerStackMessage}`);
|
|
2991
2990
|
}
|
|
2992
2991
|
});
|