@lumx/react 3.6.7-alpha.4 → 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 +3 -14
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/popover/Popover.tsx +1 -5
- package/src/hooks/useFocusTrap.ts +0 -7
- package/src/utils/focus/getFirstAndLastFocusable.ts +0 -1
- 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
|
/**
|
|
@@ -2680,7 +2679,6 @@ function getFocusableElements(element) {
|
|
|
2680
2679
|
*/
|
|
2681
2680
|
function getFirstAndLastFocusable(parentElement) {
|
|
2682
2681
|
const focusableElements = getFocusableElements(parentElement);
|
|
2683
|
-
console.log('focusableElements', focusableElements);
|
|
2684
2682
|
|
|
2685
2683
|
// First non disabled element.
|
|
2686
2684
|
const first = focusableElements[0];
|
|
@@ -2724,12 +2722,6 @@ function useFocusTrap(focusZoneElement, focusElement) {
|
|
|
2724
2722
|
return;
|
|
2725
2723
|
}
|
|
2726
2724
|
const focusable = getFirstAndLastFocusable(focusZoneElement);
|
|
2727
|
-
console.log('data', {
|
|
2728
|
-
focusable,
|
|
2729
|
-
activeElement: document.activeElement,
|
|
2730
|
-
endOfFocusZone: !evt.shiftKey && document.activeElement === focusable.last,
|
|
2731
|
-
isInFocusZone: focusZoneElement.contains(document.activeElement)
|
|
2732
|
-
});
|
|
2733
2725
|
|
|
2734
2726
|
// Prevent focus switch if no focusable available.
|
|
2735
2727
|
if (!focusable.first) {
|
|
@@ -2743,7 +2735,6 @@ function useFocusTrap(focusZoneElement, focusElement) {
|
|
|
2743
2735
|
!evt.shiftKey && document.activeElement === focusable.last ||
|
|
2744
2736
|
// Previous focus is outside the focus zone
|
|
2745
2737
|
!focusZoneElement.contains(document.activeElement)) {
|
|
2746
|
-
console.log('focus first');
|
|
2747
2738
|
focusable.first.focus();
|
|
2748
2739
|
evt.preventDefault();
|
|
2749
2740
|
return;
|
|
@@ -6547,7 +6538,7 @@ function usePopoverStyle(_ref5) {
|
|
|
6547
6538
|
};
|
|
6548
6539
|
}
|
|
6549
6540
|
|
|
6550
|
-
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"];
|
|
6551
6542
|
|
|
6552
6543
|
/**
|
|
6553
6544
|
* Defines the props of the component.
|
|
@@ -6600,7 +6591,6 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
6600
6591
|
boundaryRef,
|
|
6601
6592
|
fitToAnchorWidth,
|
|
6602
6593
|
fitWithinViewportHeight,
|
|
6603
|
-
focusTrapZoneElement,
|
|
6604
6594
|
offset,
|
|
6605
6595
|
placement,
|
|
6606
6596
|
style,
|
|
@@ -6634,12 +6624,11 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
6634
6624
|
anchorRef,
|
|
6635
6625
|
parentElement
|
|
6636
6626
|
}, popperElement);
|
|
6637
|
-
const focusZoneElement = (focusTrapZoneElement === null || focusTrapZoneElement === void 0 ? void 0 : focusTrapZoneElement.current) || (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current);
|
|
6638
6627
|
useCallbackOnEscape(onClose, isOpen && closeOnEscape);
|
|
6639
6628
|
|
|
6640
6629
|
/** Only set focus within if the focus trap is disabled as they interfere with one another. */
|
|
6641
6630
|
useFocus(focusElement === null || focusElement === void 0 ? void 0 : focusElement.current, !withFocusTrap && isOpen && isPositioned);
|
|
6642
|
-
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);
|
|
6643
6632
|
const clickAwayRefs = useRef([popoverRef, anchorRef]);
|
|
6644
6633
|
const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
|
|
6645
6634
|
return isOpen ? renderPopover( /*#__PURE__*/React.createElement(Component, _extends({}, forwardedProps, {
|