@lumx/react 2.2.12-alpha.2 → 2.2.14

package/esm/_internal/Popover2.js

@@ -2114,6 +2114,30 @@ var usePopper = function usePopper(referenceElement, popperElement, options) {
   };
 };
 
+/**
+ * Hook that allows to control when there is a focus event within a given element, meaning
+ * that any element within the given target will trigger the focus in and focus out events.
+ * @param options - UseFocusWithinOptions
+ */
+var useFocusWithin = function useFocusWithin(_ref) {
+  var element = _ref.element,
+      onFocusIn = _ref.onFocusIn,
+      onFocusOut = _ref.onFocusOut;
+  useEffect(function () {
+    if (element) {
+      element.addEventListener('focusin', onFocusIn);
+      element.addEventListener('focusout', onFocusOut);
+    }
+
+    return function () {
+      if (element) {
+        element.removeEventListener('focusin', onFocusIn);
+        element.removeEventListener('focusout', onFocusOut);
+      }
+    };
+  }, [onFocusIn, element, onFocusOut]);
+};
+
 /**
  * Different possible placements for the popover.
  */
@@ -2275,7 +2299,9 @@ var Popover = forwardRef(function (props, ref) {
       style = props.style,
       usePortal = props.usePortal,
       zIndex = props.zIndex,
-      forwardedProps = _objectWithoutProperties(props, ["anchorRef", "boundaryRef", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "fitToAnchorWidth", "fitWithinViewportHeight", "focusElement", "hasArrow", "isOpen", "offset", "onClose", "placement", "style", "usePortal", "zIndex"]); // eslint-disable-next-line react-hooks/rules-of-hooks
+      _props$focusAnchorOnC = props.focusAnchorOnClose,
+      focusAnchorOnClose = _props$focusAnchorOnC === void 0 ? true : _props$focusAnchorOnC,
+      forwardedProps = _objectWithoutProperties(props, ["anchorRef", "boundaryRef", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "fitToAnchorWidth", "fitWithinViewportHeight", "focusElement", "hasArrow", "isOpen", "offset", "onClose", "placement", "style", "usePortal", "zIndex", "focusAnchorOnClose"]); // eslint-disable-next-line react-hooks/rules-of-hooks
 
 
   var _useState = useState(),
@@ -2291,6 +2317,45 @@ var Popover = forwardRef(function (props, ref) {
 
 
   var clickAwayRef = useRef(null);
+  /**
+   * Track whether the focus is currently set in the
+   * popover.
+   * */
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  var isFocusedWithin = useRef(false); // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  useFocusWithin({
+    element: popperElement || null,
+    onFocusIn: function onFocusIn() {
+      isFocusedWithin.current = true;
+    },
+    onFocusOut: function onFocusOut() {
+      isFocusedWithin.current = false;
+    }
+  });
+  /** Action on close */
+
+  var handleClose = function handleClose() {
+    if (!onClose) {
+      return;
+    }
+    /**
+     * If the focus is currently within the popover
+     * when the popover closes, reset the focus back to the anchor element
+     * unless specifically requested not to.
+     */
+
+
+    if (isFocusedWithin.current && focusAnchorOnClose) {
+      var _anchorRef$current;
+
+      (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.focus();
+    }
+
+    onClose();
+  };
+
   var modifiers = [];
   var actualOffset = [(_ref5 = offset === null || offset === void 0 ? void 0 : offset.along) !== null && _ref5 !== void 0 ? _ref5 : 0, ((_ref6 = offset === null || offset === void 0 ? void 0 : offset.away) !== null && _ref6 !== void 0 ? _ref6 : 0) + (hasArrow ? ARROW_SIZE : 0)];
   modifiers.push({
@@ -2365,7 +2430,7 @@ var Popover = forwardRef(function (props, ref) {
     return newStyles;
   }, [style, styles.popper, zIndex, fitWithinViewportHeight]); // eslint-disable-next-line react-hooks/rules-of-hooks
 
-  useCallbackOnEscape(onClose, isOpen && closeOnEscape); // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallbackOnEscape(handleClose, isOpen && closeOnEscape); // eslint-disable-next-line react-hooks/rules-of-hooks
 
   useFocus(focusElement === null || focusElement === void 0 ? void 0 : focusElement.current, isOpen && ((_ref8 = state === null || state === void 0 ? void 0 : (_state$rects = state.rects) === null || _state$rects === void 0 ? void 0 : (_state$rects$popper2 = _state$rects.popper) === null || _state$rects$popper2 === void 0 ? void 0 : _state$rects$popper2.y) !== null && _ref8 !== void 0 ? _ref8 : -1) >= 0); // eslint-disable-next-line react-hooks/rules-of-hooks
 
@@ -2379,7 +2444,7 @@ var Popover = forwardRef(function (props, ref) {
     })),
     style: popoverStyle
   }, attributes.popper), React.createElement(ClickAwayProvider, {
-    callback: closeOnClickAway && onClose,
+    callback: closeOnClickAway && handleClose,
     refs: clickAwayRefs
   }, hasArrow && React.createElement("div", {
     ref: setArrowElement,
@@ -2391,5 +2456,5 @@ Popover.displayName = COMPONENT_NAME;
 Popover.className = CLASSNAME;
 Popover.defaultProps = DEFAULT_PROPS;
 
-export { Placement as P, Popover as a, usePopper as b, useFocus as u };
+export { Placement as P, Popover as a, useFocusWithin as b, usePopper as c, useFocus as u };
 //# sourceMappingURL=Popover2.js.map