@jobber/components 9.4.0 → 9.5.1
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/index.cjs +7 -7
- package/dist/DataDump/index.mjs +7 -7
- 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/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/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/index.cjs +0 -1
- package/dist/FormatFile/index.mjs +0 -1
- 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 +8 -5
- package/dist/Menu-es.js +8 -5
- 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 +7 -8
- package/dist/Page/index.mjs +7 -8
- package/dist/Popover/index.cjs +0 -1
- package/dist/Popover/index.mjs +0 -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/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/InputNumber/InputNumber.md +564 -56
- 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/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
|
@@ -2,28 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var ComboboxChipRemove = require('../ComboboxChipRemove-cjs.js');
|
|
5
|
-
var
|
|
5
|
+
var useCompositeListItem = require('../useCompositeListItem-cjs.js');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
var
|
|
7
|
+
var useScrollLock = require('../useScrollLock-cjs.js');
|
|
8
8
|
var Separator = require('../Separator-cjs.js');
|
|
9
9
|
var DrawerDescription = require('../DrawerDescription-cjs.js');
|
|
10
10
|
var DrawerTitle = require('../DrawerTitle-cjs.js');
|
|
11
11
|
var ScrollAreaViewport = require('../ScrollAreaViewport-cjs.js');
|
|
12
12
|
var useRenderElement = require('../useRenderElement-cjs.js');
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var clamp = require('../clamp-cjs.js');
|
|
13
|
+
var floatingUi_utils = require('../floating-ui.utils-cjs.js');
|
|
14
|
+
var scrollEdges = require('../scrollEdges-cjs.js');
|
|
16
15
|
var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
|
|
17
|
-
var useCompositeListItem = require('../useCompositeListItem-cjs.js');
|
|
18
16
|
var ReactDOM = require('react-dom');
|
|
19
17
|
var SelectGroupLabel = require('../SelectGroupLabel-cjs.js');
|
|
20
|
-
var floatingUi_utils = require('../floating-ui.utils-cjs.js');
|
|
21
18
|
var NumberFieldInput = require('../NumberFieldInput-cjs.js');
|
|
22
|
-
var useLabelableId = require('../useLabelableId-cjs.js');
|
|
23
19
|
var useLabel = require('../useLabel-cjs.js');
|
|
24
|
-
var scrollEdges = require('../scrollEdges-cjs.js');
|
|
25
20
|
require('../stringifyLocale-cjs.js');
|
|
26
|
-
require('../isElementDisabled-cjs.js');
|
|
27
21
|
require('../floating-ui.react-dom-cjs.js');
|
|
28
22
|
|
|
29
23
|
function _interopNamespaceDefault(e) {
|
|
@@ -109,14 +103,14 @@ function AutocompleteRoot(props) {
|
|
|
109
103
|
}
|
|
110
104
|
function handleItemHighlighted(highlightedValue, eventDetails) {
|
|
111
105
|
props.onItemHighlighted?.(highlightedValue, eventDetails);
|
|
112
|
-
if (eventDetails.reason ===
|
|
106
|
+
if (eventDetails.reason === useScrollLock.pointer) {
|
|
113
107
|
return;
|
|
114
108
|
}
|
|
115
109
|
if (enableInline) {
|
|
116
110
|
if (highlightedValue == null) {
|
|
117
111
|
setInlineInputValue('');
|
|
118
112
|
} else {
|
|
119
|
-
setInlineInputValue(
|
|
113
|
+
setInlineInputValue(useCompositeListItem.stringifyAsLabel(highlightedValue, itemToStringValue));
|
|
120
114
|
}
|
|
121
115
|
} else {
|
|
122
116
|
setInlineInputValue('');
|
|
@@ -252,7 +246,7 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
|
|
|
252
246
|
const active = providerContext?.active ?? false;
|
|
253
247
|
const visualStateStore = providerContext?.visualStateStore;
|
|
254
248
|
const indentRef = React__namespace.useRef(null);
|
|
255
|
-
|
|
249
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
256
250
|
const element = indentRef.current;
|
|
257
251
|
if (!element || !visualStateStore) {
|
|
258
252
|
return undefined;
|
|
@@ -343,7 +337,7 @@ function DrawerProvider(props) {
|
|
|
343
337
|
} = props;
|
|
344
338
|
const [openById, setOpenById] = React__namespace.useState(() => new Map());
|
|
345
339
|
const [visualStateStore] = React__namespace.useState(createVisualStateStore);
|
|
346
|
-
const setDrawerOpen =
|
|
340
|
+
const setDrawerOpen = useScrollLock.useStableCallback((drawerId, open) => {
|
|
347
341
|
setOpenById(prev => {
|
|
348
342
|
const prevOpen = prev.get(drawerId);
|
|
349
343
|
if (prevOpen === open) {
|
|
@@ -354,7 +348,7 @@ function DrawerProvider(props) {
|
|
|
354
348
|
return next;
|
|
355
349
|
});
|
|
356
350
|
});
|
|
357
|
-
const removeDrawer =
|
|
351
|
+
const removeDrawer = useScrollLock.useStableCallback(drawerId => {
|
|
358
352
|
setOpenById(prev => {
|
|
359
353
|
if (!prev.has(drawerId)) {
|
|
360
354
|
return prev;
|
|
@@ -511,7 +505,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
|
|
|
511
505
|
} = ScrollAreaViewport.useDrawerRootContext();
|
|
512
506
|
const providerContext = ScrollAreaViewport.useDrawerProviderContext();
|
|
513
507
|
const [swipeActive, setSwipeActive] = React__namespace.useState(false);
|
|
514
|
-
const releaseDismissTimeout =
|
|
508
|
+
const releaseDismissTimeout = useScrollLock.useTimeout();
|
|
515
509
|
const swipeAreaRef = React__namespace.useRef(null);
|
|
516
510
|
const swipeStartEventRef = React__namespace.useRef(null);
|
|
517
511
|
const openedBySwipeRef = React__namespace.useRef(false);
|
|
@@ -522,10 +516,10 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
|
|
|
522
516
|
const closedOffsetRef = React__namespace.useRef(null);
|
|
523
517
|
const appliedSwipeStylesRef = React__namespace.useRef(false);
|
|
524
518
|
const popupTransitionRef = React__namespace.useRef(null);
|
|
525
|
-
const swipeAreaId =
|
|
519
|
+
const swipeAreaId = useScrollLock.useBaseUiId(componentProps.id);
|
|
526
520
|
const registerTrigger = useScrollLock.useTriggerRegistration(swipeAreaId, store);
|
|
527
521
|
const open = store.useState('open');
|
|
528
|
-
const resetDragDelta =
|
|
522
|
+
const resetDragDelta = useScrollLock.useStableCallback(() => {
|
|
529
523
|
dragDeltaRef.current.x = 0;
|
|
530
524
|
dragDeltaRef.current.y = 0;
|
|
531
525
|
});
|
|
@@ -635,7 +629,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
|
|
|
635
629
|
});
|
|
636
630
|
appliedSwipeStylesRef.current = true;
|
|
637
631
|
}
|
|
638
|
-
const clearSwipeStyles =
|
|
632
|
+
const clearSwipeStyles = useScrollLock.useStableCallback(() => {
|
|
639
633
|
const popupElement = store.context.popupRef.current;
|
|
640
634
|
if (popupElement && appliedSwipeStylesRef.current) {
|
|
641
635
|
popupElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.swipeMovementX);
|
|
@@ -663,13 +657,13 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
|
|
|
663
657
|
return;
|
|
664
658
|
}
|
|
665
659
|
openedBySwipeRef.current = true;
|
|
666
|
-
store.setOpen(true,
|
|
660
|
+
store.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.swipe, event, swipeAreaRef.current ?? undefined));
|
|
667
661
|
}
|
|
668
662
|
function closeDrawer(event) {
|
|
669
663
|
if (!store.select('open')) {
|
|
670
664
|
return;
|
|
671
665
|
}
|
|
672
|
-
store.setOpen(false,
|
|
666
|
+
store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.swipe, event, swipeAreaRef.current ?? undefined));
|
|
673
667
|
}
|
|
674
668
|
function resetSwipeInteractionState() {
|
|
675
669
|
swipeStartEventRef.current = null;
|
|
@@ -871,8 +865,8 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
871
865
|
const keyboardTouchStartRef = React__namespace.useRef(null);
|
|
872
866
|
const focusedKeyboardTargetRef = React__namespace.useRef(null);
|
|
873
867
|
const keyboardScrollAdjustmentRef = React__namespace.useRef(null);
|
|
874
|
-
const keyboardFocusFrame =
|
|
875
|
-
const restoreKeyboardScrollAdjustment =
|
|
868
|
+
const keyboardFocusFrame = useScrollLock.useAnimationFrame();
|
|
869
|
+
const restoreKeyboardScrollAdjustment = useScrollLock.useStableCallback(() => {
|
|
876
870
|
const adjustment = keyboardScrollAdjustmentRef.current;
|
|
877
871
|
if (!adjustment) {
|
|
878
872
|
return;
|
|
@@ -882,7 +876,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
882
876
|
adjustment.element.style.scrollPaddingBottom = adjustment.scrollPaddingBottom;
|
|
883
877
|
keyboardScrollAdjustmentRef.current = null;
|
|
884
878
|
});
|
|
885
|
-
const setKeyboardScrollSlack =
|
|
879
|
+
const setKeyboardScrollSlack = useScrollLock.useStableCallback((element, slack) => {
|
|
886
880
|
const roundedSlack = Math.max(0, Math.ceil(slack));
|
|
887
881
|
let adjustment = keyboardScrollAdjustmentRef.current;
|
|
888
882
|
if (adjustment && !adjustment.element.isConnected) {
|
|
@@ -898,7 +892,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
898
892
|
adjustment = null;
|
|
899
893
|
}
|
|
900
894
|
if (!adjustment) {
|
|
901
|
-
const styles =
|
|
895
|
+
const styles = floatingUi_utils.getComputedStyle(element);
|
|
902
896
|
adjustment = {
|
|
903
897
|
element,
|
|
904
898
|
overflowAnchor: element.style.overflowAnchor,
|
|
@@ -913,15 +907,15 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
913
907
|
element.style.paddingBottom = `${adjustment.computedPaddingBottom + roundedSlack}px`;
|
|
914
908
|
element.style.scrollPaddingBottom = `${adjustment.computedScrollPaddingBottom + KEYBOARD_VISIBILITY_MARGIN}px`;
|
|
915
909
|
});
|
|
916
|
-
const animateKeyboardScroll =
|
|
917
|
-
const win =
|
|
910
|
+
const animateKeyboardScroll = useScrollLock.useStableCallback((element, scrollTop) => {
|
|
911
|
+
const win = floatingUi_utils.getWindow(element);
|
|
918
912
|
const behavior = win.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ? 'auto' : 'smooth';
|
|
919
913
|
element.scrollTo({
|
|
920
914
|
top: scrollTop,
|
|
921
915
|
behavior
|
|
922
916
|
});
|
|
923
917
|
});
|
|
924
|
-
const resetTouchTrackingState =
|
|
918
|
+
const resetTouchTrackingState = useScrollLock.useStableCallback(() => {
|
|
925
919
|
pendingKeyboardFocusMovedRef.current = false;
|
|
926
920
|
keyboardTouchStartRef.current = null;
|
|
927
921
|
});
|
|
@@ -936,8 +930,8 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
936
930
|
restoreKeyboardScrollAdjustment();
|
|
937
931
|
return undefined;
|
|
938
932
|
}
|
|
939
|
-
const doc =
|
|
940
|
-
const win =
|
|
933
|
+
const doc = useScrollLock.ownerDocument(rootElement);
|
|
934
|
+
const win = floatingUi_utils.getWindow(rootElement);
|
|
941
935
|
const visualViewport = win.visualViewport;
|
|
942
936
|
const setDrawerKeyboardInset = inset => {
|
|
943
937
|
rootElement.style.setProperty(DrawerViewportCssVars.keyboardInset, `${Math.max(0, Math.ceil(inset))}px`);
|
|
@@ -957,7 +951,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
957
951
|
// conditionally rendered away), any applied scroll slack is restored here on the next
|
|
958
952
|
// focus/viewport event or when the drawer closes. This self-corrects rather than
|
|
959
953
|
// tracking each field's lifecycle.
|
|
960
|
-
if (nestedDrawerOpen || !target || !
|
|
954
|
+
if (nestedDrawerOpen || !target || !useScrollLock.contains(rootElement, target)) {
|
|
961
955
|
resetDrawerKeyboardInset();
|
|
962
956
|
restoreKeyboardScrollAdjustment();
|
|
963
957
|
return;
|
|
@@ -974,7 +968,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
974
968
|
restoreKeyboardScrollAdjustment();
|
|
975
969
|
return;
|
|
976
970
|
}
|
|
977
|
-
if (!scrollTarget.isConnected || !
|
|
971
|
+
if (!scrollTarget.isConnected || !useScrollLock.contains(rootElement, scrollTarget)) {
|
|
978
972
|
resetDrawerKeyboardInset();
|
|
979
973
|
restoreKeyboardScrollAdjustment();
|
|
980
974
|
return;
|
|
@@ -997,7 +991,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
997
991
|
const targetCenter = (targetRect.top + targetRect.bottom) / 2;
|
|
998
992
|
const visibleCenter = (visibleTop + visibleBottom) / 2;
|
|
999
993
|
const nextScrollTop = scrollTarget.scrollTop + targetCenter - visibleCenter;
|
|
1000
|
-
animateKeyboardScroll(scrollTarget,
|
|
994
|
+
animateKeyboardScroll(scrollTarget, scrollEdges.clamp(nextScrollTop, 0, maxScrollTop));
|
|
1001
995
|
};
|
|
1002
996
|
const scheduleKeyboardFocusAlignment = () => {
|
|
1003
997
|
keyboardFocusFrame.request(alignFocusedKeyboardTarget);
|
|
@@ -1010,14 +1004,14 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
1010
1004
|
// Resolve through the same path as taps so contentEditable hosts (and labelled
|
|
1011
1005
|
// controls) are normalized identically for the focus and touch paths.
|
|
1012
1006
|
const target = resolveKeyboardInputTarget(eventTarget);
|
|
1013
|
-
if (!target || !
|
|
1007
|
+
if (!target || !useScrollLock.contains(rootElement, target)) {
|
|
1014
1008
|
return false;
|
|
1015
1009
|
}
|
|
1016
1010
|
focusedKeyboardTargetRef.current = target;
|
|
1017
1011
|
return true;
|
|
1018
1012
|
};
|
|
1019
1013
|
const handleFocusIn = event => {
|
|
1020
|
-
if (captureFocusedKeyboardTarget(
|
|
1014
|
+
if (captureFocusedKeyboardTarget(useScrollLock.getTarget(event))) {
|
|
1021
1015
|
scheduleKeyboardFocusAlignment();
|
|
1022
1016
|
}
|
|
1023
1017
|
};
|
|
@@ -1029,16 +1023,16 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
1029
1023
|
clearFocusedKeyboardTarget();
|
|
1030
1024
|
};
|
|
1031
1025
|
const handleViewportUpdate = () => {
|
|
1032
|
-
if (focusedKeyboardTargetRef.current || captureFocusedKeyboardTarget(
|
|
1026
|
+
if (focusedKeyboardTargetRef.current || captureFocusedKeyboardTarget(useScrollLock.activeElement(doc))) {
|
|
1033
1027
|
scheduleKeyboardFocusAlignment();
|
|
1034
1028
|
}
|
|
1035
1029
|
};
|
|
1036
1030
|
const cleanupListeners = [];
|
|
1037
1031
|
if (visualViewport) {
|
|
1038
|
-
cleanupListeners.push(
|
|
1032
|
+
cleanupListeners.push(useScrollLock.addEventListener(visualViewport, 'resize', handleViewportUpdate), useScrollLock.addEventListener(visualViewport, 'scroll', handleViewportUpdate));
|
|
1039
1033
|
}
|
|
1040
|
-
cleanupListeners.push(
|
|
1041
|
-
if (captureFocusedKeyboardTarget(
|
|
1034
|
+
cleanupListeners.push(useScrollLock.addEventListener(doc, 'focusin', handleFocusIn, true), useScrollLock.addEventListener(doc, 'focusout', handleFocusOut, true));
|
|
1035
|
+
if (captureFocusedKeyboardTarget(useScrollLock.activeElement(doc))) {
|
|
1042
1036
|
scheduleKeyboardFocusAlignment();
|
|
1043
1037
|
}
|
|
1044
1038
|
return () => {
|
|
@@ -1047,7 +1041,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
1047
1041
|
rootElement.style.removeProperty(DrawerViewportCssVars.keyboardInset);
|
|
1048
1042
|
};
|
|
1049
1043
|
}, [animateKeyboardScroll, keyboardFocusFrame, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
|
|
1050
|
-
const onTouchStart =
|
|
1044
|
+
const onTouchStart = useScrollLock.useStableCallback(event => {
|
|
1051
1045
|
if (!open || !mounted || nestedDrawerOpen) {
|
|
1052
1046
|
resetTouchTrackingState();
|
|
1053
1047
|
return;
|
|
@@ -1062,7 +1056,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
1062
1056
|
y: touch.clientY
|
|
1063
1057
|
};
|
|
1064
1058
|
});
|
|
1065
|
-
const onTouchMove =
|
|
1059
|
+
const onTouchMove = useScrollLock.useStableCallback(event => {
|
|
1066
1060
|
const touch = event.touches[0];
|
|
1067
1061
|
const touchStart = keyboardTouchStartRef.current;
|
|
1068
1062
|
if (!touch || !touchStart || pendingKeyboardFocusMovedRef.current) {
|
|
@@ -1075,14 +1069,14 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
1075
1069
|
pendingKeyboardFocusMovedRef.current = true;
|
|
1076
1070
|
}
|
|
1077
1071
|
});
|
|
1078
|
-
const onTouchEnd =
|
|
1072
|
+
const onTouchEnd = useScrollLock.useStableCallback(event => {
|
|
1079
1073
|
if (!open || !mounted || nestedDrawerOpen || !rootElement || !keyboardTouchStartRef.current || pendingKeyboardFocusMovedRef.current) {
|
|
1080
1074
|
resetTouchTrackingState();
|
|
1081
1075
|
return;
|
|
1082
1076
|
}
|
|
1083
1077
|
const touch = event.changedTouches[0] ?? event.touches[0];
|
|
1084
|
-
const doc =
|
|
1085
|
-
const nativeEventTarget =
|
|
1078
|
+
const doc = useScrollLock.ownerDocument(event.currentTarget);
|
|
1079
|
+
const nativeEventTarget = useScrollLock.getTarget(event.nativeEvent);
|
|
1086
1080
|
const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(doc, touch.clientX, touch.clientY) : null;
|
|
1087
1081
|
|
|
1088
1082
|
// The lift point landed on another interactive/label element; let its native tap
|
|
@@ -1092,7 +1086,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
1092
1086
|
return;
|
|
1093
1087
|
}
|
|
1094
1088
|
const keyboardTarget = touch && (pointTarget ?? resolveKeyboardTouchTarget(nativeEventTarget));
|
|
1095
|
-
if (keyboardTarget && (!
|
|
1089
|
+
if (keyboardTarget && (!useScrollLock.contains(rootElement, keyboardTarget.focusTarget) || !useScrollLock.contains(rootElement, keyboardTarget.clickTarget))) {
|
|
1096
1090
|
resetTouchTrackingState();
|
|
1097
1091
|
return;
|
|
1098
1092
|
}
|
|
@@ -1101,7 +1095,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
1101
1095
|
clickTarget: keyboardClickTarget,
|
|
1102
1096
|
focusTarget: keyboardFocusTarget
|
|
1103
1097
|
} = keyboardTarget;
|
|
1104
|
-
const win =
|
|
1098
|
+
const win = floatingUi_utils.getWindow(keyboardFocusTarget);
|
|
1105
1099
|
|
|
1106
1100
|
// While pinch-zoomed, keyboard alignment is suspended; let native behavior
|
|
1107
1101
|
// handle focus and caret placement instead of blurring and re-focusing.
|
|
@@ -1112,7 +1106,7 @@ function DrawerVirtualKeyboardProvider(props) {
|
|
|
1112
1106
|
|
|
1113
1107
|
// Already focused with the keyboard up: let the native tap through so it can
|
|
1114
1108
|
// reposition the caret, rather than blurring and re-focusing the same input.
|
|
1115
|
-
if (
|
|
1109
|
+
if (useScrollLock.activeElement(useScrollLock.ownerDocument(keyboardFocusTarget)) === keyboardFocusTarget && isKeyboardVisualViewportOpen(win)) {
|
|
1116
1110
|
resetTouchTrackingState();
|
|
1117
1111
|
return;
|
|
1118
1112
|
}
|
|
@@ -1145,7 +1139,7 @@ function isKeyboardInputElement(element) {
|
|
|
1145
1139
|
if (element.isContentEditable) {
|
|
1146
1140
|
return true;
|
|
1147
1141
|
}
|
|
1148
|
-
const win =
|
|
1142
|
+
const win = floatingUi_utils.getWindow(element);
|
|
1149
1143
|
if (element instanceof win.HTMLTextAreaElement || element instanceof win.HTMLInputElement && KEYBOARD_INPUT_TYPES.has(element.type)) {
|
|
1150
1144
|
// Disabled controls can't focus or open the keyboard, so tap-to-focus must skip them —
|
|
1151
1145
|
// otherwise the dispatched click fires handlers a native tap on a disabled control never would.
|
|
@@ -1154,7 +1148,7 @@ function isKeyboardInputElement(element) {
|
|
|
1154
1148
|
return false;
|
|
1155
1149
|
}
|
|
1156
1150
|
function resolveKeyboardInputTarget(target) {
|
|
1157
|
-
if (!
|
|
1151
|
+
if (!floatingUi_utils.isHTMLElement(target)) {
|
|
1158
1152
|
return null;
|
|
1159
1153
|
}
|
|
1160
1154
|
if (isKeyboardInputElement(target)) {
|
|
@@ -1162,7 +1156,7 @@ function resolveKeyboardInputTarget(target) {
|
|
|
1162
1156
|
}
|
|
1163
1157
|
const label = target.closest('label');
|
|
1164
1158
|
const control = label?.control ?? null;
|
|
1165
|
-
return
|
|
1159
|
+
return floatingUi_utils.isHTMLElement(control) && isKeyboardInputElement(control) ? control : null;
|
|
1166
1160
|
}
|
|
1167
1161
|
function resolveKeyboardTouchTarget(target) {
|
|
1168
1162
|
const focusTarget = resolveKeyboardInputTarget(target);
|
|
@@ -1171,7 +1165,7 @@ function resolveKeyboardTouchTarget(target) {
|
|
|
1171
1165
|
}
|
|
1172
1166
|
return {
|
|
1173
1167
|
focusTarget,
|
|
1174
|
-
clickTarget:
|
|
1168
|
+
clickTarget: floatingUi_utils.isHTMLElement(target) ? target : focusTarget
|
|
1175
1169
|
};
|
|
1176
1170
|
}
|
|
1177
1171
|
|
|
@@ -1190,7 +1184,7 @@ function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
|
|
|
1190
1184
|
if (exactKeyboardTarget) {
|
|
1191
1185
|
return {
|
|
1192
1186
|
focusTarget: exactKeyboardTarget,
|
|
1193
|
-
clickTarget:
|
|
1187
|
+
clickTarget: floatingUi_utils.isHTMLElement(exactTarget) ? exactTarget : exactKeyboardTarget
|
|
1194
1188
|
};
|
|
1195
1189
|
}
|
|
1196
1190
|
|
|
@@ -1215,7 +1209,7 @@ function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
|
|
|
1215
1209
|
return null;
|
|
1216
1210
|
}
|
|
1217
1211
|
function dispatchKeyboardClick(target, touch) {
|
|
1218
|
-
const win =
|
|
1212
|
+
const win = floatingUi_utils.getWindow(target);
|
|
1219
1213
|
const ClickEvent = win.PointerEvent ?? win.MouseEvent;
|
|
1220
1214
|
target.dispatchEvent(new ClickEvent('click', {
|
|
1221
1215
|
bubbles: true,
|
|
@@ -1227,7 +1221,7 @@ function dispatchKeyboardClick(target, touch) {
|
|
|
1227
1221
|
}));
|
|
1228
1222
|
}
|
|
1229
1223
|
function focusKeyboardInputWithoutPageScroll(target) {
|
|
1230
|
-
const wasFocused =
|
|
1224
|
+
const wasFocused = useScrollLock.activeElement(useScrollLock.ownerDocument(target)) === target;
|
|
1231
1225
|
const previousOpacity = target.style.opacity;
|
|
1232
1226
|
const previousTransform = target.style.transform;
|
|
1233
1227
|
const previousTransition = target.style.transition;
|
|
@@ -1257,7 +1251,7 @@ function findKeyboardScrollTarget(target, root) {
|
|
|
1257
1251
|
// the drawer body scroller. Prefer an already-scrollable ancestor, then fall back to one
|
|
1258
1252
|
// that only becomes scrollable once keyboard slack is added (overflow intent without
|
|
1259
1253
|
// current overflow).
|
|
1260
|
-
const scrollStart =
|
|
1254
|
+
const scrollStart = floatingUi_utils.getParentNode(target);
|
|
1261
1255
|
return ScrollAreaViewport.findScrollableTouchTarget(scrollStart, root, 'vertical') ?? ScrollAreaViewport.findScrollableTouchTarget(scrollStart, root, 'vertical', true);
|
|
1262
1256
|
}
|
|
1263
1257
|
function getKeyboardVisualViewport(win) {
|
|
@@ -1382,13 +1376,13 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
|
|
|
1382
1376
|
label
|
|
1383
1377
|
});
|
|
1384
1378
|
const menuPositionerContext = MenuSubmenuTrigger.useMenuPositionerContext(true);
|
|
1385
|
-
const id =
|
|
1379
|
+
const id = useScrollLock.useBaseUiId(idProp);
|
|
1386
1380
|
const {
|
|
1387
1381
|
store
|
|
1388
1382
|
} = MenuSubmenuTrigger.useMenuRootContext();
|
|
1389
1383
|
const highlighted = store.useState('isActive', listItem.index);
|
|
1390
1384
|
const itemProps = store.useState('itemProps');
|
|
1391
|
-
const [checked, setChecked] =
|
|
1385
|
+
const [checked, setChecked] = useScrollLock.useControlled({
|
|
1392
1386
|
controlled: checkedProp,
|
|
1393
1387
|
default: defaultChecked ?? false,
|
|
1394
1388
|
name: 'MenuCheckboxItem',
|
|
@@ -1413,7 +1407,7 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
|
|
|
1413
1407
|
checked
|
|
1414
1408
|
}), [disabled, highlighted, checked]);
|
|
1415
1409
|
function handleClick(event) {
|
|
1416
|
-
const details =
|
|
1410
|
+
const details = useScrollLock.createChangeEventDetails(useScrollLock.itemPress, event.nativeEvent, undefined, {
|
|
1417
1411
|
preventUnmountOnClose() {}
|
|
1418
1412
|
});
|
|
1419
1413
|
onCheckedChange?.(!checked, details);
|
|
@@ -1458,8 +1452,8 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(funct
|
|
|
1458
1452
|
const {
|
|
1459
1453
|
transitionStatus,
|
|
1460
1454
|
setMounted
|
|
1461
|
-
} =
|
|
1462
|
-
|
|
1455
|
+
} = useScrollLock.useTransitionStatus(item.checked);
|
|
1456
|
+
useScrollLock.useOpenChangeComplete({
|
|
1463
1457
|
open: item.checked,
|
|
1464
1458
|
ref: indicatorRef,
|
|
1465
1459
|
onComplete() {
|
|
@@ -1489,12 +1483,12 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(funct
|
|
|
1489
1483
|
if (process.env.NODE_ENV !== "production") MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
|
|
1490
1484
|
|
|
1491
1485
|
function getCssDimensions(element) {
|
|
1492
|
-
const css =
|
|
1486
|
+
const css = floatingUi_utils.getComputedStyle(element);
|
|
1493
1487
|
// In testing environments, the `width` and `height` properties are empty
|
|
1494
1488
|
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
1495
1489
|
let width = parseFloat(css.width) || 0;
|
|
1496
1490
|
let height = parseFloat(css.height) || 0;
|
|
1497
|
-
const hasOffset =
|
|
1491
|
+
const hasOffset = floatingUi_utils.isHTMLElement(element);
|
|
1498
1492
|
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
1499
1493
|
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
1500
1494
|
const shouldFallback = floatingUi_utils.round(width) !== offsetWidth || floatingUi_utils.round(height) !== offsetHeight;
|
|
@@ -1522,13 +1516,13 @@ function usePopupAutoResize(parameters) {
|
|
|
1522
1516
|
side,
|
|
1523
1517
|
direction
|
|
1524
1518
|
} = parameters;
|
|
1525
|
-
const runOnceAnimationsFinish =
|
|
1526
|
-
const animationFrame =
|
|
1519
|
+
const runOnceAnimationsFinish = useScrollLock.useAnimationsFinished(popupElement, true, false);
|
|
1520
|
+
const animationFrame = useScrollLock.useAnimationFrame();
|
|
1527
1521
|
const committedDimensionsRef = React__namespace.useRef(null);
|
|
1528
1522
|
const isInitialRenderRef = React__namespace.useRef(true);
|
|
1529
1523
|
const restoreAnchoringStylesRef = React__namespace.useRef(useRenderElement.NOOP);
|
|
1530
|
-
const onMeasureLayout =
|
|
1531
|
-
const onMeasureLayoutComplete =
|
|
1524
|
+
const onMeasureLayout = useScrollLock.useStableCallback(onMeasureLayoutParam);
|
|
1525
|
+
const onMeasureLayoutComplete = useScrollLock.useStableCallback(onMeasureLayoutCompleteParam);
|
|
1532
1526
|
const anchoringStyles = React__namespace.useMemo(() => {
|
|
1533
1527
|
// Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
|
|
1534
1528
|
let isOriginSide = side === 'top';
|
|
@@ -1546,7 +1540,7 @@ function usePopupAutoResize(parameters) {
|
|
|
1546
1540
|
[isPhysicalLeft ? 'right' : 'left']: '0'
|
|
1547
1541
|
} : useRenderElement.EMPTY_OBJECT;
|
|
1548
1542
|
}, [side, direction]);
|
|
1549
|
-
|
|
1543
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1550
1544
|
// Reset the state when the popup is closed.
|
|
1551
1545
|
if (!mounted) {
|
|
1552
1546
|
restoreAnchoringStylesRef.current = useRenderElement.NOOP;
|
|
@@ -1678,22 +1672,22 @@ function usePopupViewport(parameters) {
|
|
|
1678
1672
|
const [newTriggerOffset, setNewTriggerOffset] = React__namespace.useState(null);
|
|
1679
1673
|
const currentContainerRef = React__namespace.useRef(null);
|
|
1680
1674
|
const previousContainerRef = React__namespace.useRef(null);
|
|
1681
|
-
const onAnimationsFinished =
|
|
1682
|
-
const cleanupFrame =
|
|
1675
|
+
const onAnimationsFinished = useScrollLock.useAnimationsFinished(currentContainerRef, true, false);
|
|
1676
|
+
const cleanupFrame = useScrollLock.useAnimationFrame();
|
|
1683
1677
|
const [previousContentDimensions, setPreviousContentDimensions] = React__namespace.useState(null);
|
|
1684
1678
|
const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React__namespace.useState(false);
|
|
1685
|
-
|
|
1679
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1686
1680
|
store.set('hasViewport', true);
|
|
1687
1681
|
return () => {
|
|
1688
1682
|
store.set('hasViewport', false);
|
|
1689
1683
|
};
|
|
1690
1684
|
}, [store]);
|
|
1691
|
-
const handleMeasureLayout =
|
|
1685
|
+
const handleMeasureLayout = useScrollLock.useStableCallback(() => {
|
|
1692
1686
|
currentContainerRef.current?.style.setProperty('animation', 'none');
|
|
1693
1687
|
currentContainerRef.current?.style.setProperty('transition', 'none');
|
|
1694
1688
|
previousContainerRef.current?.style.setProperty('display', 'none');
|
|
1695
1689
|
});
|
|
1696
|
-
const handleMeasureLayoutComplete =
|
|
1690
|
+
const handleMeasureLayoutComplete = useScrollLock.useStableCallback(previousDimensions => {
|
|
1697
1691
|
currentContainerRef.current?.style.removeProperty('animation');
|
|
1698
1692
|
currentContainerRef.current?.style.removeProperty('transition');
|
|
1699
1693
|
previousContainerRef.current?.style.removeProperty('display');
|
|
@@ -1702,12 +1696,12 @@ function usePopupViewport(parameters) {
|
|
|
1702
1696
|
}
|
|
1703
1697
|
});
|
|
1704
1698
|
const lastHandledTriggerRef = React__namespace.useRef(null);
|
|
1705
|
-
|
|
1699
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1706
1700
|
if (!open || !mounted) {
|
|
1707
1701
|
lastHandledTriggerRef.current = null;
|
|
1708
1702
|
}
|
|
1709
1703
|
}, [open, mounted]);
|
|
1710
|
-
|
|
1704
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1711
1705
|
// When a trigger changes, set the captured children HTML to state,
|
|
1712
1706
|
// so we can render both new and old content.
|
|
1713
1707
|
if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
|
|
@@ -1734,7 +1728,7 @@ function usePopupViewport(parameters) {
|
|
|
1734
1728
|
|
|
1735
1729
|
// Capture a clone of the current content DOM subtree when not transitioning.
|
|
1736
1730
|
// We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
|
|
1737
|
-
|
|
1731
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1738
1732
|
// When a transition is in progress, we store the next content in capturedNodeRef.
|
|
1739
1733
|
// This handles the case where the trigger changes multiple times before the transition finishes.
|
|
1740
1734
|
// We want to always capture the latest content for the previous snapshot.
|
|
@@ -1745,7 +1739,7 @@ function usePopupViewport(parameters) {
|
|
|
1745
1739
|
if (!source) {
|
|
1746
1740
|
return;
|
|
1747
1741
|
}
|
|
1748
|
-
const wrapper =
|
|
1742
|
+
const wrapper = useScrollLock.ownerDocument(source).createElement('div');
|
|
1749
1743
|
for (const child of Array.from(source.childNodes)) {
|
|
1750
1744
|
wrapper.appendChild(child.cloneNode(true));
|
|
1751
1745
|
}
|
|
@@ -1783,7 +1777,7 @@ function usePopupViewport(parameters) {
|
|
|
1783
1777
|
}
|
|
1784
1778
|
|
|
1785
1779
|
// When previousContentNode is present, imperatively populate the previous container with the cloned children.
|
|
1786
|
-
|
|
1780
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1787
1781
|
const container = previousContainerRef.current;
|
|
1788
1782
|
if (!container || !previousContentNode) {
|
|
1789
1783
|
return;
|
|
@@ -1870,7 +1864,7 @@ function usePopupContentKey(activeTriggerId, payload) {
|
|
|
1870
1864
|
const previousActiveTriggerIdRef = React__namespace.useRef(activeTriggerId);
|
|
1871
1865
|
const previousPayloadRef = React__namespace.useRef(payload);
|
|
1872
1866
|
const pendingPayloadUpdateRef = React__namespace.useRef(false);
|
|
1873
|
-
|
|
1867
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
1874
1868
|
// Compare against the last committed values to decide whether we need a new DOM subtree.
|
|
1875
1869
|
const previousActiveTriggerId = previousActiveTriggerIdRef.current;
|
|
1876
1870
|
const previousPayload = previousPayloadRef.current;
|
|
@@ -1984,14 +1978,14 @@ class MenuHandle {
|
|
|
1984
1978
|
if (triggerId && !triggerElement) {
|
|
1985
1979
|
throw new Error(process.env.NODE_ENV !== "production" ? `Base UI: MenuHandle.open: No trigger found with id "${triggerId}".` : useRenderElement.formatErrorMessage(83, triggerId));
|
|
1986
1980
|
}
|
|
1987
|
-
this.store.setOpen(true,
|
|
1981
|
+
this.store.setOpen(true, useScrollLock.createChangeEventDetails('imperative-action', undefined, triggerElement));
|
|
1988
1982
|
}
|
|
1989
1983
|
|
|
1990
1984
|
/**
|
|
1991
1985
|
* Closes the menu.
|
|
1992
1986
|
*/
|
|
1993
1987
|
close() {
|
|
1994
|
-
this.store.setOpen(false,
|
|
1988
|
+
this.store.setOpen(false, useScrollLock.createChangeEventDetails('imperative-action', undefined, undefined));
|
|
1995
1989
|
}
|
|
1996
1990
|
|
|
1997
1991
|
/**
|
|
@@ -2148,7 +2142,7 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
|
|
|
2148
2142
|
y: viewportEl.scrollTop
|
|
2149
2143
|
});
|
|
2150
2144
|
}
|
|
2151
|
-
return
|
|
2145
|
+
return useScrollLock.addEventListener(scrollbarEl, 'wheel', handleWheel, {
|
|
2152
2146
|
passive: false
|
|
2153
2147
|
});
|
|
2154
2148
|
}, [direction, handleScroll, orientation, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
|
|
@@ -2160,12 +2154,12 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
|
|
|
2160
2154
|
if (event.button !== 0) {
|
|
2161
2155
|
return;
|
|
2162
2156
|
}
|
|
2163
|
-
const target =
|
|
2157
|
+
const target = useScrollLock.getTarget(event.nativeEvent);
|
|
2164
2158
|
const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
|
|
2165
2159
|
|
|
2166
2160
|
// Ignore clicks on thumb, including cases where React retargets the
|
|
2167
2161
|
// synthetic event to the track host across a shadow boundary.
|
|
2168
|
-
if (thumb &&
|
|
2162
|
+
if (thumb && useScrollLock.contains(thumb, target)) {
|
|
2169
2163
|
return;
|
|
2170
2164
|
}
|
|
2171
2165
|
if (!viewportRef.current) {
|
|
@@ -2281,7 +2275,7 @@ const ScrollAreaContent = /*#__PURE__*/React__namespace.forwardRef(function Scro
|
|
|
2281
2275
|
} = ScrollAreaViewport.useScrollAreaRootContext();
|
|
2282
2276
|
const contentWrapperRef = React__namespace.useRef(null);
|
|
2283
2277
|
const computeOnInitialResizeRef = React__namespace.useRef(hasMeasuredScrollbar);
|
|
2284
|
-
|
|
2278
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
2285
2279
|
if (typeof ResizeObserver === 'undefined') {
|
|
2286
2280
|
return undefined;
|
|
2287
2281
|
}
|
|
@@ -2477,7 +2471,7 @@ function useNumberFieldScrubAreaContext() {
|
|
|
2477
2471
|
|
|
2478
2472
|
// Calculates the bounds the virtual cursor wraps within, as absolute edge coordinates.
|
|
2479
2473
|
function getViewportRect(teleportDistance, scrubAreaEl) {
|
|
2480
|
-
const win =
|
|
2474
|
+
const win = floatingUi_utils.getWindow(scrubAreaEl);
|
|
2481
2475
|
if (teleportDistance != null) {
|
|
2482
2476
|
const rect = scrubAreaEl.getBoundingClientRect();
|
|
2483
2477
|
return {
|
|
@@ -2507,7 +2501,7 @@ function getViewportRect(teleportDistance, scrubAreaEl) {
|
|
|
2507
2501
|
// This lets us invert the scale of the cursor to match the OS scale, in which the cursor doesn't
|
|
2508
2502
|
// scale with the content on pinch-zoom.
|
|
2509
2503
|
function subscribeToVisualViewportResize(element, visualScaleRef) {
|
|
2510
|
-
const vV =
|
|
2504
|
+
const vV = floatingUi_utils.getWindow(element).visualViewport;
|
|
2511
2505
|
if (!vV) {
|
|
2512
2506
|
return () => {};
|
|
2513
2507
|
}
|
|
@@ -2517,7 +2511,7 @@ function subscribeToVisualViewportResize(element, visualScaleRef) {
|
|
|
2517
2511
|
}
|
|
2518
2512
|
}
|
|
2519
2513
|
handleVisualResize();
|
|
2520
|
-
return
|
|
2514
|
+
return useScrollLock.addEventListener(vV, 'resize', handleVisualResize);
|
|
2521
2515
|
}
|
|
2522
2516
|
|
|
2523
2517
|
const SCRUB_AREA_STYLE = {
|
|
@@ -2565,7 +2559,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2565
2559
|
y: 0
|
|
2566
2560
|
});
|
|
2567
2561
|
const visualScaleRef = React__namespace.useRef(1);
|
|
2568
|
-
const exitPointerLockTimeout =
|
|
2562
|
+
const exitPointerLockTimeout = useScrollLock.useTimeout();
|
|
2569
2563
|
const [isTouchInput, setIsTouchInput] = React__namespace.useState(false);
|
|
2570
2564
|
const [isPointerLockDenied, setIsPointerLockDenied] = React__namespace.useState(false);
|
|
2571
2565
|
const [isScrubbing, setIsScrubbing] = React__namespace.useState(false);
|
|
@@ -2580,7 +2574,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2580
2574
|
scrubAreaCursorRef.current.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;
|
|
2581
2575
|
}
|
|
2582
2576
|
}
|
|
2583
|
-
const onScrub =
|
|
2577
|
+
const onScrub = useScrollLock.useStableCallback(({
|
|
2584
2578
|
movementX,
|
|
2585
2579
|
movementY
|
|
2586
2580
|
}) => {
|
|
@@ -2610,7 +2604,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2610
2604
|
virtualCursorCoords.current = newCoords;
|
|
2611
2605
|
updateCursorTransform(newCoords.x, newCoords.y);
|
|
2612
2606
|
});
|
|
2613
|
-
const onScrubbingChange =
|
|
2607
|
+
const onScrubbingChange = useScrollLock.useStableCallback((scrubbingValue, {
|
|
2614
2608
|
clientX,
|
|
2615
2609
|
clientY
|
|
2616
2610
|
}) => {
|
|
@@ -2638,20 +2632,20 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2638
2632
|
function handleScrubPointerUp(event) {
|
|
2639
2633
|
function handler() {
|
|
2640
2634
|
try {
|
|
2641
|
-
|
|
2635
|
+
useScrollLock.ownerDocument(scrubAreaRef.current).exitPointerLock();
|
|
2642
2636
|
} catch {
|
|
2643
2637
|
// Ignore errors.
|
|
2644
2638
|
} finally {
|
|
2645
2639
|
isScrubbingRef.current = false;
|
|
2646
2640
|
onScrubbingChange(false, event);
|
|
2647
|
-
onValueCommitted(lastChangedValueRef.current ?? valueRef.current,
|
|
2641
|
+
onValueCommitted(lastChangedValueRef.current ?? valueRef.current, useScrollLock.createGenericEventDetails(useScrollLock.scrub, event));
|
|
2648
2642
|
|
|
2649
2643
|
// Manually dispatch a click event if no movement happened, since
|
|
2650
2644
|
// preventDefault on pointerdown prevents the browser click event.
|
|
2651
2645
|
const pointerDownTarget = pointerDownTargetRef.current;
|
|
2652
2646
|
const input = inputRef.current;
|
|
2653
2647
|
if (!didMoveRef.current && pointerDownTarget != null && input) {
|
|
2654
|
-
pointerDownTarget.dispatchEvent(new (
|
|
2648
|
+
pointerDownTarget.dispatchEvent(new (floatingUi_utils.getWindow(input).MouseEvent)('click', {
|
|
2655
2649
|
bubbles: true,
|
|
2656
2650
|
cancelable: true
|
|
2657
2651
|
}));
|
|
@@ -2692,13 +2686,13 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2692
2686
|
incrementValue(Math.abs(rawAmount), {
|
|
2693
2687
|
direction: rawAmount >= 0 ? 1 : -1,
|
|
2694
2688
|
event,
|
|
2695
|
-
reason:
|
|
2689
|
+
reason: useScrollLock.scrub
|
|
2696
2690
|
});
|
|
2697
2691
|
}
|
|
2698
2692
|
}
|
|
2699
2693
|
}
|
|
2700
|
-
const win =
|
|
2701
|
-
const unsubscribe = useScrollLock.mergeCleanups(
|
|
2694
|
+
const win = floatingUi_utils.getWindow(inputRef.current);
|
|
2695
|
+
const unsubscribe = useScrollLock.mergeCleanups(useScrollLock.addEventListener(win, 'pointerup', handleScrubPointerUp, true), useScrollLock.addEventListener(win, 'pointermove', handleScrubPointerMove, true));
|
|
2702
2696
|
return () => {
|
|
2703
2697
|
exitPointerLockTimeout.clear();
|
|
2704
2698
|
unsubscribe();
|
|
@@ -2712,7 +2706,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2712
2706
|
isScrubbingRef.current = false;
|
|
2713
2707
|
setRootScrubbing(false);
|
|
2714
2708
|
try {
|
|
2715
|
-
|
|
2709
|
+
useScrollLock.ownerDocument(scrubAreaRef.current).exitPointerLock();
|
|
2716
2710
|
} catch {
|
|
2717
2711
|
// Ignore errors.
|
|
2718
2712
|
}
|
|
@@ -2730,7 +2724,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2730
2724
|
event.preventDefault();
|
|
2731
2725
|
}
|
|
2732
2726
|
}
|
|
2733
|
-
return
|
|
2727
|
+
return useScrollLock.addEventListener(element, 'touchstart', handleTouchStart);
|
|
2734
2728
|
}, [disabled, readOnly]);
|
|
2735
2729
|
const defaultProps = {
|
|
2736
2730
|
role: 'presentation',
|
|
@@ -2748,7 +2742,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2748
2742
|
}
|
|
2749
2743
|
isScrubbingRef.current = true;
|
|
2750
2744
|
didMoveRef.current = false;
|
|
2751
|
-
pointerDownTargetRef.current =
|
|
2745
|
+
pointerDownTargetRef.current = useScrollLock.getTarget(event.nativeEvent);
|
|
2752
2746
|
onScrubbingChange(true, event.nativeEvent);
|
|
2753
2747
|
|
|
2754
2748
|
// WebKit causes significant layout shift with the native message, so we can't use it.
|
|
@@ -2757,7 +2751,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
|
|
|
2757
2751
|
// Avoid non-deterministic errors in testing environments. This error sometimes
|
|
2758
2752
|
// appears:
|
|
2759
2753
|
// "The root document of this element is not valid for pointer lock."
|
|
2760
|
-
await
|
|
2754
|
+
await useScrollLock.ownerDocument(scrubAreaRef.current).body.requestPointerLock();
|
|
2761
2755
|
setIsPointerLockDenied(false);
|
|
2762
2756
|
} catch (error) {
|
|
2763
2757
|
setIsPointerLockDenied(true);
|
|
@@ -2835,7 +2829,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
|
|
|
2835
2829
|
}, elementProps],
|
|
2836
2830
|
stateAttributesMapping: NumberFieldInput.stateAttributesMapping
|
|
2837
2831
|
});
|
|
2838
|
-
return element && /*#__PURE__*/ReactDOM__namespace.createPortal(element,
|
|
2832
|
+
return element && /*#__PURE__*/ReactDOM__namespace.createPortal(element, useScrollLock.ownerDocument(domElement).body);
|
|
2839
2833
|
});
|
|
2840
2834
|
if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor";
|
|
2841
2835
|
|
|
@@ -2866,13 +2860,13 @@ const SelectLabel = /*#__PURE__*/React__namespace.forwardRef(function SelectLabe
|
|
|
2866
2860
|
// Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
|
|
2867
2861
|
const elementPropsWithoutId = elementProps;
|
|
2868
2862
|
delete elementPropsWithoutId.id;
|
|
2869
|
-
const fieldRootContext =
|
|
2863
|
+
const fieldRootContext = useCompositeListItem.useFieldRootContext();
|
|
2870
2864
|
const {
|
|
2871
2865
|
store
|
|
2872
2866
|
} = SelectGroupLabel.useSelectRootContext();
|
|
2873
2867
|
const triggerElement = useScrollLock.useStore(store, SelectGroupLabel.selectors.triggerElement);
|
|
2874
2868
|
const rootId = useScrollLock.useStore(store, SelectGroupLabel.selectors.id);
|
|
2875
|
-
const defaultLabelId =
|
|
2869
|
+
const defaultLabelId = useCompositeListItem.getDefaultLabelId(rootId);
|
|
2876
2870
|
const labelProps = useLabel.useLabel({
|
|
2877
2871
|
id: defaultLabelId,
|
|
2878
2872
|
fallbackControlId: triggerElement?.id ?? rootId,
|
|
@@ -2884,7 +2878,7 @@ const SelectLabel = /*#__PURE__*/React__namespace.forwardRef(function SelectLabe
|
|
|
2884
2878
|
ref: forwardedRef,
|
|
2885
2879
|
state: fieldRootContext.state,
|
|
2886
2880
|
props: [labelProps, elementProps],
|
|
2887
|
-
stateAttributesMapping:
|
|
2881
|
+
stateAttributesMapping: useCompositeListItem.fieldValidityMapping
|
|
2888
2882
|
});
|
|
2889
2883
|
});
|
|
2890
2884
|
if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabel";
|
|
@@ -2924,7 +2918,7 @@ if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon"
|
|
|
2924
2918
|
|
|
2925
2919
|
const stateAttributesMapping$1 = {
|
|
2926
2920
|
...useScrollLock.popupStateMapping,
|
|
2927
|
-
...
|
|
2921
|
+
...useScrollLock.transitionStatusMapping
|
|
2928
2922
|
};
|
|
2929
2923
|
|
|
2930
2924
|
/**
|
|
@@ -2969,7 +2963,7 @@ if (process.env.NODE_ENV !== "production") SelectBackdrop.displayName = "SelectB
|
|
|
2969
2963
|
|
|
2970
2964
|
const stateAttributesMapping = {
|
|
2971
2965
|
...useScrollLock.popupStateMapping,
|
|
2972
|
-
...
|
|
2966
|
+
...useScrollLock.transitionStatusMapping
|
|
2973
2967
|
};
|
|
2974
2968
|
|
|
2975
2969
|
/**
|
|
@@ -3050,14 +3044,14 @@ const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function Sele
|
|
|
3050
3044
|
|
|
3051
3045
|
// Scroll arrows are disabled for touch modality as they are a hover-only element.
|
|
3052
3046
|
const visible = stateVisible && openMethod !== 'touch';
|
|
3053
|
-
const timeout =
|
|
3047
|
+
const timeout = useScrollLock.useTimeout();
|
|
3054
3048
|
const scrollArrowRef = isUp ? scrollUpArrowRef : scrollDownArrowRef;
|
|
3055
3049
|
const {
|
|
3056
3050
|
mounted,
|
|
3057
3051
|
transitionStatus,
|
|
3058
3052
|
setMounted
|
|
3059
|
-
} =
|
|
3060
|
-
|
|
3053
|
+
} = useScrollLock.useTransitionStatus(visible);
|
|
3054
|
+
useScrollLock.useIsoLayoutEffect(() => {
|
|
3061
3055
|
scrollArrowsMountedCountRef.current += 1;
|
|
3062
3056
|
if (!store.state.hasScrollArrows) {
|
|
3063
3057
|
store.set('hasScrollArrows', true);
|
|
@@ -3069,7 +3063,7 @@ const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function Sele
|
|
|
3069
3063
|
}
|
|
3070
3064
|
};
|
|
3071
3065
|
}, [store, scrollArrowsMountedCountRef]);
|
|
3072
|
-
|
|
3066
|
+
useScrollLock.useOpenChangeComplete({
|
|
3073
3067
|
open: visible,
|
|
3074
3068
|
ref: scrollArrowRef,
|
|
3075
3069
|
onComplete() {
|
|
@@ -3134,7 +3128,7 @@ const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function Sele
|
|
|
3134
3128
|
ref: [forwardedRef, scrollArrowRef],
|
|
3135
3129
|
state,
|
|
3136
3130
|
props: [defaultProps, elementProps],
|
|
3137
|
-
stateAttributesMapping:
|
|
3131
|
+
stateAttributesMapping: useScrollLock.transitionStatusMapping
|
|
3138
3132
|
});
|
|
3139
3133
|
const shouldRender = mounted || keepMounted;
|
|
3140
3134
|
if (!shouldRender) {
|