@jobber/components 8.19.0 → 8.20.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/InputNumberExperimental-cjs.js +214 -87
- package/dist/InputNumberExperimental-es.js +215 -88
- package/dist/MenuSubmenuTrigger-cjs.js +41 -41
- package/dist/MenuSubmenuTrigger-es.js +2 -2
- package/dist/NumberFieldInput-cjs.js +81 -2
- package/dist/NumberFieldInput-es.js +81 -3
- package/dist/ScrollAreaViewport-cjs.js +50 -175
- package/dist/ScrollAreaViewport-es.js +3 -115
- package/dist/clamp-cjs.js +131 -2
- package/dist/clamp-es.js +114 -2
- package/dist/docs/Banner/Banner.md +1 -1
- package/dist/docs/Box/Box.md +2 -2
- package/dist/docs/Button/Button.md +1 -1
- package/dist/docs/Colors/Colors.md +13 -0
- package/dist/primitives/BottomSheet/index.cjs +1 -1
- package/dist/primitives/BottomSheet/index.mjs +1 -1
- package/dist/primitives/InputNumberExperimental/InputNumberExperimental.d.ts +51 -10
- package/dist/primitives/InputNumberExperimental/index.cjs +3 -3
- package/dist/primitives/InputNumberExperimental/index.d.ts +1 -1
- package/dist/primitives/InputNumberExperimental/index.mjs +3 -3
- package/dist/primitives/InputNumberExperimental/types.d.ts +83 -83
- package/dist/primitives/index.cjs +1 -1
- package/dist/primitives/index.mjs +1 -1
- package/dist/unstyledPrimitives/index.cjs +17 -95
- package/dist/unstyledPrimitives/index.mjs +3 -81
- package/package.json +3 -3
|
@@ -1384,118 +1384,6 @@ class ReactStore extends Store {
|
|
|
1384
1384
|
}
|
|
1385
1385
|
}
|
|
1386
1386
|
|
|
1387
|
-
const FOCUSABLE_ATTRIBUTE = 'data-base-ui-focusable';
|
|
1388
|
-
const ACTIVE_KEY = 'active';
|
|
1389
|
-
const SELECTED_KEY = 'selected';
|
|
1390
|
-
const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," + "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
|
|
1391
|
-
const ARROW_LEFT$1 = 'ArrowLeft';
|
|
1392
|
-
const ARROW_RIGHT$1 = 'ArrowRight';
|
|
1393
|
-
const ARROW_UP$1 = 'ArrowUp';
|
|
1394
|
-
const ARROW_DOWN$1 = 'ArrowDown';
|
|
1395
|
-
|
|
1396
|
-
function activeElement(doc) {
|
|
1397
|
-
let element = doc.activeElement;
|
|
1398
|
-
while (element?.shadowRoot?.activeElement != null) {
|
|
1399
|
-
element = element.shadowRoot.activeElement;
|
|
1400
|
-
}
|
|
1401
|
-
return element;
|
|
1402
|
-
}
|
|
1403
|
-
function contains(parent, child) {
|
|
1404
|
-
if (!parent || !child) {
|
|
1405
|
-
return false;
|
|
1406
|
-
}
|
|
1407
|
-
const rootNode = child.getRootNode?.();
|
|
1408
|
-
|
|
1409
|
-
// First, attempt with faster native method
|
|
1410
|
-
if (parent.contains(child)) {
|
|
1411
|
-
return true;
|
|
1412
|
-
}
|
|
1413
|
-
|
|
1414
|
-
// then fallback to custom implementation with Shadow DOM support
|
|
1415
|
-
if (rootNode && floatingUi_utils_dom.isShadowRoot(rootNode)) {
|
|
1416
|
-
let next = child;
|
|
1417
|
-
while (next) {
|
|
1418
|
-
if (parent === next) {
|
|
1419
|
-
return true;
|
|
1420
|
-
}
|
|
1421
|
-
next = next.parentNode || next.host;
|
|
1422
|
-
}
|
|
1423
|
-
}
|
|
1424
|
-
|
|
1425
|
-
// Give up, the result is false
|
|
1426
|
-
return false;
|
|
1427
|
-
}
|
|
1428
|
-
function isTargetInsideEnabledTrigger(target, triggerElements) {
|
|
1429
|
-
if (!floatingUi_utils_dom.isElement(target)) {
|
|
1430
|
-
return false;
|
|
1431
|
-
}
|
|
1432
|
-
const targetElement = target;
|
|
1433
|
-
if (triggerElements.hasElement(targetElement)) {
|
|
1434
|
-
return !targetElement.hasAttribute('data-trigger-disabled');
|
|
1435
|
-
}
|
|
1436
|
-
for (const [, trigger] of triggerElements.entries()) {
|
|
1437
|
-
if (contains(trigger, targetElement)) {
|
|
1438
|
-
return !trigger.hasAttribute('data-trigger-disabled');
|
|
1439
|
-
}
|
|
1440
|
-
}
|
|
1441
|
-
return false;
|
|
1442
|
-
}
|
|
1443
|
-
function getTarget(event) {
|
|
1444
|
-
if ('composedPath' in event) {
|
|
1445
|
-
return event.composedPath()[0];
|
|
1446
|
-
}
|
|
1447
|
-
|
|
1448
|
-
// TS thinks `event` is of type never as it assumes all browsers support
|
|
1449
|
-
// `composedPath()`, but browsers without shadow DOM don't.
|
|
1450
|
-
return event.target;
|
|
1451
|
-
}
|
|
1452
|
-
function isEventTargetWithin(event, node) {
|
|
1453
|
-
if (node == null) {
|
|
1454
|
-
return false;
|
|
1455
|
-
}
|
|
1456
|
-
if ('composedPath' in event) {
|
|
1457
|
-
return event.composedPath().includes(node);
|
|
1458
|
-
}
|
|
1459
|
-
|
|
1460
|
-
// TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
|
|
1461
|
-
const eventAgain = event;
|
|
1462
|
-
return eventAgain.target != null && node.contains(eventAgain.target);
|
|
1463
|
-
}
|
|
1464
|
-
function isRootElement(element) {
|
|
1465
|
-
return element.matches('html,body');
|
|
1466
|
-
}
|
|
1467
|
-
function isTypeableElement(element) {
|
|
1468
|
-
return floatingUi_utils_dom.isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
|
|
1469
|
-
}
|
|
1470
|
-
function isTypeableCombobox(element) {
|
|
1471
|
-
if (!element) {
|
|
1472
|
-
return false;
|
|
1473
|
-
}
|
|
1474
|
-
return element.getAttribute('role') === 'combobox' && isTypeableElement(element);
|
|
1475
|
-
}
|
|
1476
|
-
function matchesFocusVisible(element) {
|
|
1477
|
-
// We don't want to block focus from working with `visibleOnly`
|
|
1478
|
-
// (JSDOM doesn't match `:focus-visible` when the element has `:focus`)
|
|
1479
|
-
if (!element || clamp.isJSDOM) {
|
|
1480
|
-
return true;
|
|
1481
|
-
}
|
|
1482
|
-
try {
|
|
1483
|
-
return element.matches(':focus-visible');
|
|
1484
|
-
} catch (_e) {
|
|
1485
|
-
return true;
|
|
1486
|
-
}
|
|
1487
|
-
}
|
|
1488
|
-
function getFloatingFocusElement(floatingElement) {
|
|
1489
|
-
if (!floatingElement) {
|
|
1490
|
-
return null;
|
|
1491
|
-
}
|
|
1492
|
-
// Try to find the element that has `{...getFloatingProps()}` spread on it.
|
|
1493
|
-
// This indicates the floating element is acting as a positioning wrapper, and
|
|
1494
|
-
// so focus should be managed on the child element with the event handlers and
|
|
1495
|
-
// aria props.
|
|
1496
|
-
return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? floatingElement : floatingElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`) || floatingElement;
|
|
1497
|
-
}
|
|
1498
|
-
|
|
1499
1387
|
/* eslint-disable @typescript-eslint/no-loop-func */
|
|
1500
1388
|
|
|
1501
1389
|
function getNodeChildren(nodes, id, onlyOpenChildren = true) {
|
|
@@ -1559,9 +1447,9 @@ function getGridNavigatedIndex(listRef, {
|
|
|
1559
1447
|
}) {
|
|
1560
1448
|
let nextIndex = prevIndex;
|
|
1561
1449
|
let verticalDirection;
|
|
1562
|
-
if (event.key === ARROW_UP
|
|
1450
|
+
if (event.key === clamp.ARROW_UP) {
|
|
1563
1451
|
verticalDirection = 'up';
|
|
1564
|
-
} else if (event.key === ARROW_DOWN
|
|
1452
|
+
} else if (event.key === clamp.ARROW_DOWN) {
|
|
1565
1453
|
verticalDirection = 'down';
|
|
1566
1454
|
}
|
|
1567
1455
|
if (verticalDirection) {
|
|
@@ -1703,7 +1591,7 @@ function getGridNavigatedIndex(listRef, {
|
|
|
1703
1591
|
// Remains on the same row/column.
|
|
1704
1592
|
if (orientation === 'both') {
|
|
1705
1593
|
const prevRow = index_esm.floor(prevIndex / cols);
|
|
1706
|
-
if (event.key === (rtl ? ARROW_LEFT
|
|
1594
|
+
if (event.key === (rtl ? clamp.ARROW_LEFT : clamp.ARROW_RIGHT)) {
|
|
1707
1595
|
if (stop) {
|
|
1708
1596
|
clamp.stopEvent(event);
|
|
1709
1597
|
}
|
|
@@ -1728,7 +1616,7 @@ function getGridNavigatedIndex(listRef, {
|
|
|
1728
1616
|
nextIndex = prevIndex;
|
|
1729
1617
|
}
|
|
1730
1618
|
}
|
|
1731
|
-
if (event.key === (rtl ? ARROW_RIGHT
|
|
1619
|
+
if (event.key === (rtl ? clamp.ARROW_RIGHT : clamp.ARROW_LEFT)) {
|
|
1732
1620
|
if (stop) {
|
|
1733
1621
|
clamp.stopEvent(event);
|
|
1734
1622
|
}
|
|
@@ -1759,7 +1647,7 @@ function getGridNavigatedIndex(listRef, {
|
|
|
1759
1647
|
const lastRow = index_esm.floor(maxIndex / cols) === prevRow;
|
|
1760
1648
|
if (isIndexOutOfListBounds(listRef, nextIndex)) {
|
|
1761
1649
|
if (loopFocus && lastRow) {
|
|
1762
|
-
nextIndex = event.key === (rtl ? ARROW_RIGHT
|
|
1650
|
+
nextIndex = event.key === (rtl ? clamp.ARROW_RIGHT : clamp.ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(listRef, {
|
|
1763
1651
|
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
1764
1652
|
disabledIndices
|
|
1765
1653
|
});
|
|
@@ -1870,7 +1758,7 @@ function getTabbableIn(container, dir) {
|
|
|
1870
1758
|
if (len === 0) {
|
|
1871
1759
|
return undefined;
|
|
1872
1760
|
}
|
|
1873
|
-
const active = activeElement(clamp.ownerDocument(container));
|
|
1761
|
+
const active = clamp.activeElement(clamp.ownerDocument(container));
|
|
1874
1762
|
const index = list.indexOf(active);
|
|
1875
1763
|
// eslint-disable-next-line no-nested-ternary
|
|
1876
1764
|
const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
|
|
@@ -1907,7 +1795,7 @@ function getTabbableBeforeElement(referenceElement) {
|
|
|
1907
1795
|
function isOutsideEvent(event, container) {
|
|
1908
1796
|
const containerElement = container || event.currentTarget;
|
|
1909
1797
|
const relatedTarget = event.relatedTarget;
|
|
1910
|
-
return !relatedTarget || !contains(containerElement, relatedTarget);
|
|
1798
|
+
return !relatedTarget || !clamp.contains(containerElement, relatedTarget);
|
|
1911
1799
|
}
|
|
1912
1800
|
function disableFocusInside(container) {
|
|
1913
1801
|
const tabbableElements = index_esm.tabbable(container, getTabbableOptions());
|
|
@@ -2603,7 +2491,7 @@ function FloatingFocusManager(props) {
|
|
|
2603
2491
|
// aria-hidden should be applied to all nodes still. Further, the visually
|
|
2604
2492
|
// hidden dismiss button should only appear at the end of the list, not the
|
|
2605
2493
|
// start.
|
|
2606
|
-
const isUntrappedTypeableCombobox = isTypeableCombobox(domReference) && ignoreInitialFocus;
|
|
2494
|
+
const isUntrappedTypeableCombobox = clamp.isTypeableCombobox(domReference) && ignoreInitialFocus;
|
|
2607
2495
|
const orderRef = React__namespace.useRef(['content']);
|
|
2608
2496
|
const initialFocusRef = clamp.useValueAsRef(initialFocus);
|
|
2609
2497
|
const returnFocusRef = clamp.useValueAsRef(returnFocus);
|
|
@@ -2624,7 +2512,7 @@ function FloatingFocusManager(props) {
|
|
|
2624
2512
|
const pointerDownTimeout = clamp.useTimeout();
|
|
2625
2513
|
const restoreFocusFrame = clamp.useAnimationFrame();
|
|
2626
2514
|
const isInsidePortal = portalContext != null;
|
|
2627
|
-
const floatingFocusElement = getFloatingFocusElement(floating);
|
|
2515
|
+
const floatingFocusElement = clamp.getFloatingFocusElement(floating);
|
|
2628
2516
|
const getTabbableContent = clamp.useStableCallback((container = floatingFocusElement) => {
|
|
2629
2517
|
return container ? index_esm.tabbable(container, getTabbableOptions()) : [];
|
|
2630
2518
|
});
|
|
@@ -2642,7 +2530,7 @@ function FloatingFocusManager(props) {
|
|
|
2642
2530
|
function onKeyDown(event) {
|
|
2643
2531
|
if (event.key === 'Tab') {
|
|
2644
2532
|
// The focus guards have nothing to focus, so we need to stop the event.
|
|
2645
|
-
if (contains(floatingFocusElement, activeElement(clamp.ownerDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
|
|
2533
|
+
if (clamp.contains(floatingFocusElement, clamp.activeElement(clamp.ownerDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
|
|
2646
2534
|
clamp.stopEvent(event);
|
|
2647
2535
|
}
|
|
2648
2536
|
}
|
|
@@ -2664,9 +2552,9 @@ function FloatingFocusManager(props) {
|
|
|
2664
2552
|
pointerDownOutsideRef.current = false;
|
|
2665
2553
|
}
|
|
2666
2554
|
function onPointerDown(event) {
|
|
2667
|
-
const target = getTarget(event);
|
|
2555
|
+
const target = clamp.getTarget(event);
|
|
2668
2556
|
const insideElements = getResolvedInsideElements();
|
|
2669
|
-
const pointerTargetInside = contains(floating, target) || contains(domReference, target) || contains(portalContext?.portalNode, target) || insideElements.some(element => element === target || contains(element, target));
|
|
2557
|
+
const pointerTargetInside = clamp.contains(floating, target) || clamp.contains(domReference, target) || clamp.contains(portalContext?.portalNode, target) || insideElements.some(element => element === target || clamp.contains(element, target));
|
|
2670
2558
|
pointerDownOutsideRef.current = !pointerTargetInside;
|
|
2671
2559
|
lastInteractionTypeRef.current = event.pointerType || 'keyboard';
|
|
2672
2560
|
if (target?.closest(`[${CLICK_TRIGGER_IDENTIFIER}]`)) {
|
|
@@ -2703,7 +2591,7 @@ function FloatingFocusManager(props) {
|
|
|
2703
2591
|
});
|
|
2704
2592
|
}
|
|
2705
2593
|
function handleFocusIn(event) {
|
|
2706
|
-
const target = getTarget(event);
|
|
2594
|
+
const target = clamp.getTarget(event);
|
|
2707
2595
|
const tabbableContent = getTabbableContent();
|
|
2708
2596
|
const tabbableIndex = tabbableContent.indexOf(target);
|
|
2709
2597
|
if (tabbableIndex !== -1) {
|
|
@@ -2713,20 +2601,20 @@ function FloatingFocusManager(props) {
|
|
|
2713
2601
|
function handleFocusOutside(event) {
|
|
2714
2602
|
const relatedTarget = event.relatedTarget;
|
|
2715
2603
|
const currentTarget = event.currentTarget;
|
|
2716
|
-
const target = getTarget(event);
|
|
2604
|
+
const target = clamp.getTarget(event);
|
|
2717
2605
|
queueMicrotask(() => {
|
|
2718
2606
|
const nodeId = getNodeId();
|
|
2719
2607
|
const triggers = store.context.triggerElements;
|
|
2720
2608
|
const insideElements = getResolvedInsideElements();
|
|
2721
2609
|
const isRelatedFocusGuard = relatedTarget?.hasAttribute(createAttribute('focus-guard')) && [beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeInsideRef.current, portalContext?.afterInsideRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, clamp.resolveRef(previousFocusableElement), clamp.resolveRef(nextFocusableElement)].includes(relatedTarget);
|
|
2722
|
-
const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || contains(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => contains(trigger, relatedTarget)) || isRelatedFocusGuard || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find(node => contains(node.context?.elements.floating, relatedTarget) || contains(node.context?.elements.domReference, relatedTarget)) || getNodeAncestors(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, getFloatingFocusElement(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
|
|
2610
|
+
const movedToUnrelatedNode = !(clamp.contains(domReference, relatedTarget) || clamp.contains(floating, relatedTarget) || clamp.contains(relatedTarget, floating) || clamp.contains(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || clamp.contains(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => clamp.contains(trigger, relatedTarget)) || isRelatedFocusGuard || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find(node => clamp.contains(node.context?.elements.floating, relatedTarget) || clamp.contains(node.context?.elements.domReference, relatedTarget)) || getNodeAncestors(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, clamp.getFloatingFocusElement(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
|
|
2723
2611
|
if (currentTarget === domReference && floatingFocusElement) {
|
|
2724
2612
|
handleTabIndex(floatingFocusElement, orderRef);
|
|
2725
2613
|
}
|
|
2726
2614
|
|
|
2727
2615
|
// Restore focus to the previous tabbable element index to prevent
|
|
2728
2616
|
// focus from being lost outside the floating tree.
|
|
2729
|
-
if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && activeElement(doc) === doc.body) {
|
|
2617
|
+
if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && clamp.activeElement(doc) === doc.body) {
|
|
2730
2618
|
// Let `FloatingPortal` effect knows that focus is still inside the
|
|
2731
2619
|
// floating tree.
|
|
2732
2620
|
if (floatingUi_utils_dom.isHTMLElement(floatingFocusElement)) {
|
|
@@ -2826,7 +2714,7 @@ function FloatingFocusManager(props) {
|
|
|
2826
2714
|
// Don't hide portals nested within the parent portal.
|
|
2827
2715
|
const portalNodes = Array.from(portalContext?.portalNode?.querySelectorAll(`[${createAttribute('portal')}]`) || []);
|
|
2828
2716
|
const ancestors = tree ? getNodeAncestors(tree.nodesRef.current, getNodeId()) : [];
|
|
2829
|
-
const rootAncestorComboboxDomReference = ancestors.find(node => isTypeableCombobox(node.context?.elements.domReference || null))?.context?.elements.domReference;
|
|
2717
|
+
const rootAncestorComboboxDomReference = ancestors.find(node => clamp.isTypeableCombobox(node.context?.elements.domReference || null))?.context?.elements.domReference;
|
|
2830
2718
|
const controlInsideElements = [floating, ...portalNodes, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, ...getResolvedInsideElements()];
|
|
2831
2719
|
const insideElements = [...controlInsideElements, rootAncestorComboboxDomReference, clamp.resolveRef(previousFocusableElement), clamp.resolveRef(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
|
|
2832
2720
|
const ariaHiddenCleanup = markOthers(insideElements, {
|
|
@@ -2847,7 +2735,7 @@ function FloatingFocusManager(props) {
|
|
|
2847
2735
|
return;
|
|
2848
2736
|
}
|
|
2849
2737
|
const doc = clamp.ownerDocument(floatingFocusElement);
|
|
2850
|
-
const previouslyFocusedElement = activeElement(doc);
|
|
2738
|
+
const previouslyFocusedElement = clamp.activeElement(doc);
|
|
2851
2739
|
|
|
2852
2740
|
// Wait for any layout effect state setters to execute to set `tabIndex`.
|
|
2853
2741
|
queueMicrotask(() => {
|
|
@@ -2866,7 +2754,7 @@ function FloatingFocusManager(props) {
|
|
|
2866
2754
|
elToFocus = clamp.resolveRef(resolvedInitialFocus);
|
|
2867
2755
|
}
|
|
2868
2756
|
elToFocus = elToFocus || focusableElements[0] || floatingFocusElement;
|
|
2869
|
-
const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
|
|
2757
|
+
const focusAlreadyInsideFloatingEl = clamp.contains(floatingFocusElement, previouslyFocusedElement);
|
|
2870
2758
|
if (focusAlreadyInsideFloatingEl) {
|
|
2871
2759
|
return;
|
|
2872
2760
|
}
|
|
@@ -2882,7 +2770,7 @@ function FloatingFocusManager(props) {
|
|
|
2882
2770
|
return undefined;
|
|
2883
2771
|
}
|
|
2884
2772
|
const doc = clamp.ownerDocument(floatingFocusElement);
|
|
2885
|
-
const previouslyFocusedElement = activeElement(doc);
|
|
2773
|
+
const previouslyFocusedElement = clamp.activeElement(doc);
|
|
2886
2774
|
addPreviouslyFocusedElement(previouslyFocusedElement);
|
|
2887
2775
|
|
|
2888
2776
|
// Dismissing via outside press should always ignore `returnFocus` to
|
|
@@ -2937,9 +2825,9 @@ function FloatingFocusManager(props) {
|
|
|
2937
2825
|
}
|
|
2938
2826
|
return () => {
|
|
2939
2827
|
events.off('openchange', onOpenChangeLocal);
|
|
2940
|
-
const activeEl = activeElement(doc);
|
|
2828
|
+
const activeEl = clamp.activeElement(doc);
|
|
2941
2829
|
const insideElements = getResolvedInsideElements();
|
|
2942
|
-
const isFocusInsideFloatingTree = contains(floating, activeEl) || insideElements.some(element => element === activeEl || contains(element, activeEl)) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some(node => contains(node.context?.elements.floating, activeEl));
|
|
2830
|
+
const isFocusInsideFloatingTree = clamp.contains(floating, activeEl) || insideElements.some(element => element === activeEl || clamp.contains(element, activeEl)) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some(node => clamp.contains(node.context?.elements.floating, activeEl));
|
|
2943
2831
|
const returnElement = getReturnElement();
|
|
2944
2832
|
queueMicrotask(() => {
|
|
2945
2833
|
// This is `returnElement`, if it's tabbable, or its first tabbable child.
|
|
@@ -2968,11 +2856,11 @@ function FloatingFocusManager(props) {
|
|
|
2968
2856
|
if (!clamp.isWebKit || open || !floating) {
|
|
2969
2857
|
return;
|
|
2970
2858
|
}
|
|
2971
|
-
const activeEl = activeElement(clamp.ownerDocument(floating));
|
|
2972
|
-
if (!floatingUi_utils_dom.isHTMLElement(activeEl) || !isTypeableElement(activeEl)) {
|
|
2859
|
+
const activeEl = clamp.activeElement(clamp.ownerDocument(floating));
|
|
2860
|
+
if (!floatingUi_utils_dom.isHTMLElement(activeEl) || !clamp.isTypeableElement(activeEl)) {
|
|
2973
2861
|
return;
|
|
2974
2862
|
}
|
|
2975
|
-
if (contains(floating, activeEl)) {
|
|
2863
|
+
if (clamp.contains(floating, activeEl)) {
|
|
2976
2864
|
activeEl.blur();
|
|
2977
2865
|
}
|
|
2978
2866
|
}, [open, floating]);
|
|
@@ -3085,7 +2973,7 @@ function useClick(context, props = {}) {
|
|
|
3085
2973
|
|
|
3086
2974
|
// Animations sometimes won't run on a typeable element if using a rAF.
|
|
3087
2975
|
// Focus is always set on these elements. For touch, we may delay opening.
|
|
3088
|
-
if (isTypeableElement(nativeEvent.target)) {
|
|
2976
|
+
if (clamp.isTypeableElement(nativeEvent.target)) {
|
|
3089
2977
|
const details = clamp.createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
|
|
3090
2978
|
if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
|
|
3091
2979
|
touchOpenTimeout.start(touchOpenDelay, () => {
|
|
@@ -3293,8 +3181,8 @@ function useDismiss(context, props = {}) {
|
|
|
3293
3181
|
}
|
|
3294
3182
|
function isEventWithinFloatingTree(event) {
|
|
3295
3183
|
const nodeId = dataRef.current.floatingContext?.nodeId;
|
|
3296
|
-
const targetIsInsideChildren = tree && getNodeChildren(tree.nodesRef.current, nodeId).some(node => isEventTargetWithin(event, node.context?.elements.floating));
|
|
3297
|
-
return isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement')) || targetIsInsideChildren;
|
|
3184
|
+
const targetIsInsideChildren = tree && getNodeChildren(tree.nodesRef.current, nodeId).some(node => clamp.isEventTargetWithin(event, node.context?.elements.floating));
|
|
3185
|
+
return clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement')) || targetIsInsideChildren;
|
|
3298
3186
|
}
|
|
3299
3187
|
function closeOnPressOutside(event) {
|
|
3300
3188
|
if (shouldIgnoreEvent(event)) {
|
|
@@ -3305,7 +3193,7 @@ function useDismiss(context, props = {}) {
|
|
|
3305
3193
|
clearInsideReactTree();
|
|
3306
3194
|
return;
|
|
3307
3195
|
}
|
|
3308
|
-
const target = getTarget(event);
|
|
3196
|
+
const target = clamp.getTarget(event);
|
|
3309
3197
|
const inertSelector = `[${createAttribute('inert')}]`;
|
|
3310
3198
|
let markers = Array.from(clamp.ownerDocument(store.select('floatingElement')).querySelectorAll(inertSelector));
|
|
3311
3199
|
const targetRoot = floatingUi_utils_dom.isElement(target) ? target.getRootNode() : null;
|
|
@@ -3315,7 +3203,7 @@ function useDismiss(context, props = {}) {
|
|
|
3315
3203
|
const triggers = store.context.triggerElements;
|
|
3316
3204
|
|
|
3317
3205
|
// If another trigger is clicked, don't close the floating element.
|
|
3318
|
-
if (target && (triggers.hasElement(target) || triggers.hasMatchingElement(trigger => contains(trigger, target)))) {
|
|
3206
|
+
if (target && (triggers.hasElement(target) || triggers.hasMatchingElement(trigger => clamp.contains(trigger, target)))) {
|
|
3319
3207
|
return;
|
|
3320
3208
|
}
|
|
3321
3209
|
let targetRootAncestor = floatingUi_utils_dom.isElement(target) ? target : null;
|
|
@@ -3329,12 +3217,12 @@ function useDismiss(context, props = {}) {
|
|
|
3329
3217
|
|
|
3330
3218
|
// Check if the click occurred on a third-party element injected after the
|
|
3331
3219
|
// floating element rendered.
|
|
3332
|
-
if (markers.length && floatingUi_utils_dom.isElement(target) && !isRootElement(target) &&
|
|
3220
|
+
if (markers.length && floatingUi_utils_dom.isElement(target) && !clamp.isRootElement(target) &&
|
|
3333
3221
|
// Clicked on a direct ancestor (e.g. FloatingOverlay).
|
|
3334
|
-
!contains(target, store.select('floatingElement')) &&
|
|
3222
|
+
!clamp.contains(target, store.select('floatingElement')) &&
|
|
3335
3223
|
// If the target root element contains none of the markers, then the
|
|
3336
3224
|
// element was injected after the floating element rendered.
|
|
3337
|
-
markers.every(marker => !contains(targetRootAncestor, marker))) {
|
|
3225
|
+
markers.every(marker => !clamp.contains(targetRootAncestor, marker))) {
|
|
3338
3226
|
return;
|
|
3339
3227
|
}
|
|
3340
3228
|
|
|
@@ -3393,13 +3281,13 @@ function useDismiss(context, props = {}) {
|
|
|
3393
3281
|
clearInsideReactTree();
|
|
3394
3282
|
}
|
|
3395
3283
|
function handlePointerDown(event) {
|
|
3396
|
-
if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3284
|
+
if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3397
3285
|
return;
|
|
3398
3286
|
}
|
|
3399
3287
|
closeOnPressOutside(event);
|
|
3400
3288
|
}
|
|
3401
3289
|
function handleTouchStart(event) {
|
|
3402
|
-
if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3290
|
+
if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3403
3291
|
return;
|
|
3404
3292
|
}
|
|
3405
3293
|
const touch = event.touches[0];
|
|
@@ -3421,7 +3309,7 @@ function useDismiss(context, props = {}) {
|
|
|
3421
3309
|
}
|
|
3422
3310
|
function handleTouchStartCapture(event) {
|
|
3423
3311
|
currentPointerTypeRef.current = 'touch';
|
|
3424
|
-
const target = getTarget(event);
|
|
3312
|
+
const target = clamp.getTarget(event);
|
|
3425
3313
|
function callback() {
|
|
3426
3314
|
handleTouchStart(event);
|
|
3427
3315
|
target?.removeEventListener(event.type, callback);
|
|
@@ -3436,7 +3324,7 @@ function useDismiss(context, props = {}) {
|
|
|
3436
3324
|
if (event.type === 'mousedown' && touchStateRef.current && !touchStateRef.current.dismissOnMouseDown) {
|
|
3437
3325
|
return;
|
|
3438
3326
|
}
|
|
3439
|
-
const target = getTarget(event);
|
|
3327
|
+
const target = clamp.getTarget(event);
|
|
3440
3328
|
function callback() {
|
|
3441
3329
|
if (event.type === 'pointerdown') {
|
|
3442
3330
|
handlePointerDown(event);
|
|
@@ -3484,7 +3372,7 @@ function useDismiss(context, props = {}) {
|
|
|
3484
3372
|
clearInsideReactTree();
|
|
3485
3373
|
}
|
|
3486
3374
|
function handleTouchMove(event) {
|
|
3487
|
-
if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3375
|
+
if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3488
3376
|
return;
|
|
3489
3377
|
}
|
|
3490
3378
|
const touch = event.touches[0];
|
|
@@ -3504,7 +3392,7 @@ function useDismiss(context, props = {}) {
|
|
|
3504
3392
|
}
|
|
3505
3393
|
}
|
|
3506
3394
|
function handleTouchMoveCapture(event) {
|
|
3507
|
-
const target = getTarget(event);
|
|
3395
|
+
const target = clamp.getTarget(event);
|
|
3508
3396
|
function callback() {
|
|
3509
3397
|
handleTouchMove(event);
|
|
3510
3398
|
target?.removeEventListener(event.type, callback);
|
|
@@ -3512,7 +3400,7 @@ function useDismiss(context, props = {}) {
|
|
|
3512
3400
|
target?.addEventListener(event.type, callback);
|
|
3513
3401
|
}
|
|
3514
3402
|
function handleTouchEnd(event) {
|
|
3515
|
-
if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3403
|
+
if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || clamp.isEventTargetWithin(event, store.select('floatingElement')) || clamp.isEventTargetWithin(event, store.select('domReferenceElement'))) {
|
|
3516
3404
|
return;
|
|
3517
3405
|
}
|
|
3518
3406
|
if (touchStateRef.current.dismissOnTouchEnd) {
|
|
@@ -3522,7 +3410,7 @@ function useDismiss(context, props = {}) {
|
|
|
3522
3410
|
touchStateRef.current = null;
|
|
3523
3411
|
}
|
|
3524
3412
|
function handleTouchEndCapture(event) {
|
|
3525
|
-
const target = getTarget(event);
|
|
3413
|
+
const target = clamp.getTarget(event);
|
|
3526
3414
|
function callback() {
|
|
3527
3415
|
handleTouchEnd(event);
|
|
3528
3416
|
target?.removeEventListener(event.type, callback);
|
|
@@ -3591,10 +3479,10 @@ function useDismiss(context, props = {}) {
|
|
|
3591
3479
|
if (!open || !enabled || event.button !== 0) {
|
|
3592
3480
|
return;
|
|
3593
3481
|
}
|
|
3594
|
-
const target = getTarget(event.nativeEvent);
|
|
3482
|
+
const target = clamp.getTarget(event.nativeEvent);
|
|
3595
3483
|
// Only treat presses that start within the floating DOM subtree as inside.
|
|
3596
3484
|
// This avoids suppressing parent dismissal when interacting with nested portals.
|
|
3597
|
-
if (!contains(store.select('floatingElement'), target)) {
|
|
3485
|
+
if (!clamp.contains(store.select('floatingElement'), target)) {
|
|
3598
3486
|
return;
|
|
3599
3487
|
}
|
|
3600
3488
|
if (!pressStartedInsideRef.current) {
|
|
@@ -4100,11 +3988,11 @@ function mergeProps(userProps, propsList, elementKey) {
|
|
|
4100
3988
|
const outputProps = {};
|
|
4101
3989
|
if (elementKey === 'floating') {
|
|
4102
3990
|
outputProps.tabIndex = -1;
|
|
4103
|
-
outputProps[FOCUSABLE_ATTRIBUTE] = '';
|
|
3991
|
+
outputProps[clamp.FOCUSABLE_ATTRIBUTE] = '';
|
|
4104
3992
|
}
|
|
4105
3993
|
for (const key in userProps) {
|
|
4106
3994
|
if (isItem && userProps) {
|
|
4107
|
-
if (key === ACTIVE_KEY || key === SELECTED_KEY) {
|
|
3995
|
+
if (key === clamp.ACTIVE_KEY || key === clamp.SELECTED_KEY) {
|
|
4108
3996
|
continue;
|
|
4109
3997
|
}
|
|
4110
3998
|
}
|
|
@@ -4129,7 +4017,7 @@ function mergeProps(userProps, propsList, elementKey) {
|
|
|
4129
4017
|
function mutablyMergeProps(outputProps, props, isItem, eventHandlers) {
|
|
4130
4018
|
for (const key in props) {
|
|
4131
4019
|
const value = props[key];
|
|
4132
|
-
if (isItem && (key === ACTIVE_KEY || key === SELECTED_KEY)) {
|
|
4020
|
+
if (isItem && (key === clamp.ACTIVE_KEY || key === clamp.SELECTED_KEY)) {
|
|
4133
4021
|
continue;
|
|
4134
4022
|
}
|
|
4135
4023
|
if (!key.startsWith('on')) {
|
|
@@ -4166,7 +4054,7 @@ function useRole(context, props = {}) {
|
|
|
4166
4054
|
} = props;
|
|
4167
4055
|
const defaultReferenceId = clamp.useId();
|
|
4168
4056
|
const referenceId = domReference?.id || defaultReferenceId;
|
|
4169
|
-
const floatingId = React__namespace.useMemo(() => getFloatingFocusElement(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
|
|
4057
|
+
const floatingId = React__namespace.useMemo(() => clamp.getFloatingFocusElement(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
|
|
4170
4058
|
const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
|
|
4171
4059
|
const parentId = useFloatingParentNodeId();
|
|
4172
4060
|
const isNested = parentId != null;
|
|
@@ -5498,14 +5386,14 @@ function useDialogRoot(params) {
|
|
|
5498
5386
|
if ('touches' in event && event.touches.length !== 1) {
|
|
5499
5387
|
return false;
|
|
5500
5388
|
}
|
|
5501
|
-
const target = getTarget(event);
|
|
5389
|
+
const target = clamp.getTarget(event);
|
|
5502
5390
|
if (isTopmost && !disablePointerDismissal) {
|
|
5503
5391
|
const eventTarget = target;
|
|
5504
5392
|
// Only close if the click occurred on the dialog's owning backdrop.
|
|
5505
5393
|
// This supports multiple modal dialogs that aren't nested in the React tree:
|
|
5506
5394
|
// https://github.com/mui/base-ui/issues/1320
|
|
5507
5395
|
if (modal) {
|
|
5508
|
-
return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === eventTarget || store.context.backdropRef.current === eventTarget || contains(eventTarget, popupElement) && !eventTarget?.hasAttribute('data-base-ui-portal') : true;
|
|
5396
|
+
return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === eventTarget || store.context.backdropRef.current === eventTarget || clamp.contains(eventTarget, popupElement) && !eventTarget?.hasAttribute('data-base-ui-portal') : true;
|
|
5509
5397
|
}
|
|
5510
5398
|
return true;
|
|
5511
5399
|
}
|
|
@@ -6310,7 +6198,7 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
|
|
|
6310
6198
|
function handlePointerEnterOrMove(event) {
|
|
6311
6199
|
handleTouchModalityChange(event);
|
|
6312
6200
|
if (event.pointerType !== 'touch') {
|
|
6313
|
-
const isTargetRootChild = contains(rootRef.current, event.target);
|
|
6201
|
+
const isTargetRootChild = clamp.contains(rootRef.current, event.target);
|
|
6314
6202
|
setHovering(isTargetRootChild);
|
|
6315
6203
|
}
|
|
6316
6204
|
}
|
|
@@ -6839,10 +6727,6 @@ function mergeHiddenState(prevState, nextState) {
|
|
|
6839
6727
|
return nextState;
|
|
6840
6728
|
}
|
|
6841
6729
|
|
|
6842
|
-
exports.ARROW_DOWN = ARROW_DOWN$1;
|
|
6843
|
-
exports.ARROW_LEFT = ARROW_LEFT$1;
|
|
6844
|
-
exports.ARROW_RIGHT = ARROW_RIGHT$1;
|
|
6845
|
-
exports.ARROW_UP = ARROW_UP$1;
|
|
6846
6730
|
exports.BASE_UI_SWIPE_IGNORE_SELECTOR = BASE_UI_SWIPE_IGNORE_SELECTOR;
|
|
6847
6731
|
exports.COMPOSITE_KEYS = COMPOSITE_KEYS;
|
|
6848
6732
|
exports.CommonPopupDataAttributes = CommonPopupDataAttributes;
|
|
@@ -6877,10 +6761,7 @@ exports.ScrollAreaRoot = ScrollAreaRoot;
|
|
|
6877
6761
|
exports.ScrollAreaRootCssVars = ScrollAreaRootCssVars;
|
|
6878
6762
|
exports.ScrollAreaViewport = ScrollAreaViewport;
|
|
6879
6763
|
exports.Store = Store;
|
|
6880
|
-
exports.TYPEABLE_SELECTOR = TYPEABLE_SELECTOR;
|
|
6881
6764
|
exports.TYPEAHEAD_RESET_MS = TYPEAHEAD_RESET_MS;
|
|
6882
|
-
exports.activeElement = activeElement;
|
|
6883
|
-
exports.contains = contains;
|
|
6884
6765
|
exports.createAttribute = createAttribute;
|
|
6885
6766
|
exports.createGridCellMap = createGridCellMap;
|
|
6886
6767
|
exports.createInitialPopupStoreState = createInitialPopupStoreState;
|
|
@@ -6889,7 +6770,6 @@ exports.enqueueFocus = enqueueFocus;
|
|
|
6889
6770
|
exports.fastComponent = fastComponent;
|
|
6890
6771
|
exports.fastComponentRef = fastComponentRef;
|
|
6891
6772
|
exports.findNonDisabledListIndex = findNonDisabledListIndex;
|
|
6892
|
-
exports.getFloatingFocusElement = getFloatingFocusElement;
|
|
6893
6773
|
exports.getGridCellIndexOfCorner = getGridCellIndexOfCorner;
|
|
6894
6774
|
exports.getGridCellIndices = getGridCellIndices;
|
|
6895
6775
|
exports.getGridNavigatedIndex = getGridNavigatedIndex;
|
|
@@ -6900,16 +6780,11 @@ exports.getNodeChildren = getNodeChildren;
|
|
|
6900
6780
|
exports.getOffset = getOffset;
|
|
6901
6781
|
exports.getTabbableAfterElement = getTabbableAfterElement;
|
|
6902
6782
|
exports.getTabbableBeforeElement = getTabbableBeforeElement;
|
|
6903
|
-
exports.getTarget = getTarget;
|
|
6904
6783
|
exports.inertValue = inertValue;
|
|
6905
6784
|
exports.isElementVisible = isElementVisible;
|
|
6906
6785
|
exports.isIndexOutOfListBounds = isIndexOutOfListBounds;
|
|
6907
6786
|
exports.isListIndexDisabled = isListIndexDisabled;
|
|
6908
6787
|
exports.isOutsideEvent = isOutsideEvent;
|
|
6909
|
-
exports.isTargetInsideEnabledTrigger = isTargetInsideEnabledTrigger;
|
|
6910
|
-
exports.isTypeableCombobox = isTypeableCombobox;
|
|
6911
|
-
exports.isTypeableElement = isTypeableElement;
|
|
6912
|
-
exports.matchesFocusVisible = matchesFocusVisible;
|
|
6913
6788
|
exports.popupStateMapping = popupStateMapping;
|
|
6914
6789
|
exports.popupStoreSelectors = popupStoreSelectors;
|
|
6915
6790
|
exports.pressableTriggerOpenStateMapping = pressableTriggerOpenStateMapping;
|