@lumx/react 3.6.7-alpha.5 → 3.6.7-alpha.6
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/index.d.ts +0 -2
- package/index.js +7 -12
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/popover/Popover.tsx +1 -5
- package/src/hooks/useFocusTrap.ts +4 -10
- package/src/utils/focus/getFocusableElements.ts +1 -5
package/index.d.ts
CHANGED
|
@@ -794,8 +794,6 @@ interface PopoverProps extends GenericProps, HasTheme {
|
|
|
794
794
|
placement?: Placement;
|
|
795
795
|
/** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
|
|
796
796
|
usePortal?: boolean;
|
|
797
|
-
/** The element in which the focus trap should be set. Default to popover. */
|
|
798
|
-
focusTrapZoneElement?: RefObject<HTMLElement>;
|
|
799
797
|
/** Z-axis position. */
|
|
800
798
|
zIndex?: number;
|
|
801
799
|
/** On close callback (on click away or Escape pressed). */
|
package/index.js
CHANGED
|
@@ -2668,8 +2668,7 @@ const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="
|
|
|
2668
2668
|
|
|
2669
2669
|
const isNotDisabled = element => !element.matches(DISABLED_SELECTOR);
|
|
2670
2670
|
function getFocusableElements(element) {
|
|
2671
|
-
|
|
2672
|
-
return focusableElements;
|
|
2671
|
+
return Array.from(element.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
|
|
2673
2672
|
}
|
|
2674
2673
|
|
|
2675
2674
|
/**
|
|
@@ -2729,15 +2728,13 @@ function useFocusTrap(focusZoneElement, focusElement) {
|
|
|
2729
2728
|
evt.preventDefault();
|
|
2730
2729
|
return;
|
|
2731
2730
|
}
|
|
2732
|
-
const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : document.activeElement;
|
|
2733
|
-
console.log('active', activeElement);
|
|
2734
2731
|
if (
|
|
2735
2732
|
// No previous focus
|
|
2736
|
-
!activeElement ||
|
|
2733
|
+
!document.activeElement ||
|
|
2737
2734
|
// Previous focus is at the end of the focus zone.
|
|
2738
|
-
!evt.shiftKey && activeElement === focusable.last ||
|
|
2735
|
+
!evt.shiftKey && document.activeElement === focusable.last ||
|
|
2739
2736
|
// Previous focus is outside the focus zone
|
|
2740
|
-
!focusZoneElement.contains(activeElement)) {
|
|
2737
|
+
!focusZoneElement.contains(document.activeElement)) {
|
|
2741
2738
|
focusable.first.focus();
|
|
2742
2739
|
evt.preventDefault();
|
|
2743
2740
|
return;
|
|
@@ -2746,7 +2743,7 @@ function useFocusTrap(focusZoneElement, focusElement) {
|
|
|
2746
2743
|
// Focus order reversed
|
|
2747
2744
|
evt.shiftKey &&
|
|
2748
2745
|
// Previous focus is at the start of the focus zone.
|
|
2749
|
-
activeElement === focusable.first) {
|
|
2746
|
+
document.activeElement === focusable.first) {
|
|
2750
2747
|
focusable.last.focus();
|
|
2751
2748
|
evt.preventDefault();
|
|
2752
2749
|
}
|
|
@@ -6541,7 +6538,7 @@ function usePopoverStyle(_ref5) {
|
|
|
6541
6538
|
};
|
|
6542
6539
|
}
|
|
6543
6540
|
|
|
6544
|
-
const _excluded$m = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "
|
|
6541
|
+
const _excluded$m = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "offset", "placement", "style", "theme", "zIndex"];
|
|
6545
6542
|
|
|
6546
6543
|
/**
|
|
6547
6544
|
* Defines the props of the component.
|
|
@@ -6594,7 +6591,6 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
6594
6591
|
boundaryRef,
|
|
6595
6592
|
fitToAnchorWidth,
|
|
6596
6593
|
fitWithinViewportHeight,
|
|
6597
|
-
focusTrapZoneElement,
|
|
6598
6594
|
offset,
|
|
6599
6595
|
placement,
|
|
6600
6596
|
style,
|
|
@@ -6628,12 +6624,11 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
6628
6624
|
anchorRef,
|
|
6629
6625
|
parentElement
|
|
6630
6626
|
}, popperElement);
|
|
6631
|
-
const focusZoneElement = (focusTrapZoneElement === null || focusTrapZoneElement === void 0 ? void 0 : focusTrapZoneElement.current) || (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current);
|
|
6632
6627
|
useCallbackOnEscape(onClose, isOpen && closeOnEscape);
|
|
6633
6628
|
|
|
6634
6629
|
/** Only set focus within if the focus trap is disabled as they interfere with one another. */
|
|
6635
6630
|
useFocus(focusElement === null || focusElement === void 0 ? void 0 : focusElement.current, !withFocusTrap && isOpen && isPositioned);
|
|
6636
|
-
useFocusTrap(withFocusTrap && isOpen &&
|
|
6631
|
+
useFocusTrap(withFocusTrap && isOpen && (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current), focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
|
|
6637
6632
|
const clickAwayRefs = useRef([popoverRef, anchorRef]);
|
|
6638
6633
|
const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
|
|
6639
6634
|
return isOpen ? renderPopover( /*#__PURE__*/React.createElement(Component, _extends({}, forwardedProps, {
|