@clayui/shared/lib/esm/Overlay.js

ClayShared component

import { hideOthers, supportsInert, suppressOthers } from "aria-hidden";
import React, { useCallback, useEffect, useRef } from "react";
import { Keys } from "./Keys";
import { ClayPortal } from "./Portal";
import { useInteractOutside } from "./useInteractOutside";
const overlayStack = [];
function Overlay({
  children,
  inert,
  isCloseOnInteractOutside = false,
  isKeyboardDismiss = false,
  isModal = false,
  isOpen = false,
  menuClassName,
  menuRef,
  onClose,
  portalRef,
  suppress,
  triggerRef
}) {
  const unsuppressCallbackRef = useRef(null);
  const isInert = (isModal || inert) && supportsInert();
  const onHide = useCallback(
    (action) => {
      if (overlayStack[overlayStack.length - 1]?.menu === menuRef) {
        onClose(action);
      }
    },
    [onClose]
  );
  useEvent(
    "focus",
    useCallback(
      (event) => {
        if (portalRef && !portalRef.current?.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
          onHide("blur");
        }
      },
      [onHide]
    ),
    isOpen,
    true,
    [isOpen, onHide]
  );
  useEvent(
    "keydown",
    useCallback(
      (event) => {
        if (event.key === Keys.Esc && overlayStack[overlayStack.length - 1]?.menu === menuRef) {
          event.stopImmediatePropagation();
          event.preventDefault();
          if (triggerRef.current) {
            if (unsuppressCallbackRef.current) {
              unsuppressCallbackRef.current();
              unsuppressCallbackRef.current = null;
            }
            triggerRef.current.focus();
          }
          onClose("escape");
        }
      },
      [onClose]
    ),
    isOpen && isKeyboardDismiss,
    true,
    [isOpen, onClose]
  );
  useInteractOutside({
    isDisabled: isOpen ? !isCloseOnInteractOutside : true,
    onInteract: (event) => {
      if (event.button === 0) {
        onHide("blur");
      }
    },
    onInteractStart: (event) => {
      if (overlayStack[overlayStack.length - 1]?.menu === menuRef) {
        if (unsuppressCallbackRef.current) {
          unsuppressCallbackRef.current();
          unsuppressCallbackRef.current = null;
        }
        if (isModal) {
          event.stopPropagation();
          event.preventDefault();
        }
      }
    },
    ref: portalRef ?? menuRef,
    triggerRef
  });
  useEffect(() => {
    if (isOpen) {
      overlayStack.push({
        inert: isInert,
        menu: menuRef
      });
    }
    return () => {
      const index = overlayStack.findIndex(
        (object) => object.menu === menuRef
      );
      if (index >= 0) {
        overlayStack.splice(index, 1);
      }
    };
  }, [isOpen, menuRef]);
  useEffect(() => {
    const currentMenuRef = menuRef?.current;
    const previousOverlayStacks = overlayStack.slice(0, -1);
    const previouslyHidden = previousOverlayStacks.findIndex(
      (object) => object.inert === void 0
    ) >= 0;
    const previouslyInert = previousOverlayStacks.findIndex(
      (object) => object.inert === true
    ) >= 0;
    if (currentMenuRef && isOpen) {
      const parentMenuElements = previousOverlayStacks.map(({ menu }) => menu.current).filter((element) => Boolean(element)).filter((element) => element !== currentMenuRef);
      const primaryElements = suppress ? suppress.map((ref) => ref.current) : [currentMenuRef];
      const elements = primaryElements.concat(parentMenuElements);
      const hiddenElement = currentMenuRef.closest("[aria-hidden]") || currentMenuRef.closest("[inert]");
      hiddenElement?.removeAttribute("data-suppressed");
      hiddenElement?.removeAttribute("data-aria-hidden");
      hiddenElement?.removeAttribute("aria-hidden");
      hiddenElement?.removeAttribute("inert");
      if (isInert) {
        unsuppressCallbackRef.current = suppressOthers(elements);
      } else {
        unsuppressCallbackRef.current = hideOthers(elements);
      }
      return () => {
        if (unsuppressCallbackRef.current) {
          unsuppressCallbackRef.current();
        }
        if (isInert && !previouslyInert) {
          document.querySelectorAll("[inert]").forEach((element) => {
            element.removeAttribute("inert");
          });
        } else if (!isInert && !previouslyHidden) {
          document.querySelectorAll("[aria-hidden]").forEach((element) => {
            element.removeAttribute("aria-hidden");
          });
        }
        unsuppressCallbackRef.current = null;
      };
    }
  }, [isModal, inert, isOpen]);
  return /* @__PURE__ */ React.createElement(ClayPortal, { className: menuClassName, subPortalRef: portalRef }, isModal && /* @__PURE__ */ React.createElement("span", { "data-focus-scope-start": "true" }), children, isModal && /* @__PURE__ */ React.createElement("span", { "data-focus-scope-end": "true" }));
}
function useEvent(name, onEvent, conditional, capture, deps = []) {
  useEffect(() => {
    if (conditional) {
      document.addEventListener(name, onEvent, capture);
      return () => {
        document.removeEventListener(name, onEvent, capture);
      };
    }
  }, deps);
}
export {
  Overlay
};