@ariakit/react-components 0.1.0

package/src/dialog/utils/disable-accessibility-tree-outside.ts

@@ -0,0 +1,30 @@
+import { isBackdrop } from "./is-backdrop.ts";
+import { setAttribute } from "./orchestrate.ts";
+import { walkTreeOutside } from "./walk-tree-outside.ts";
+
+type Elements = Array<Element | null>;
+
+export function hideElementFromAccessibilityTree(element: Element) {
+  return setAttribute(element, "aria-hidden", "true");
+}
+
+export function disableAccessibilityTreeOutside(
+  id: string,
+  elements: Elements,
+) {
+  const cleanups: Array<() => void> = [];
+  const ids = elements.map((el) => el?.id);
+
+  walkTreeOutside(id, elements, (element) => {
+    if (isBackdrop(element, ...ids)) return;
+    cleanups.unshift(hideElementFromAccessibilityTree(element));
+  });
+
+  const restoreAccessibilityTree = () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+
+  return restoreAccessibilityTree;
+}

package/src/dialog/utils/disable-tree.ts

@@ -0,0 +1,81 @@
+import { contains, getAllTabbableIn, chain, noop } from "@ariakit/utils";
+import { hideElementFromAccessibilityTree } from "./disable-accessibility-tree-outside.ts";
+import { isBackdrop } from "./is-backdrop.ts";
+import { isFocusTrap } from "./is-focus-trap.ts";
+import {
+  assignStyle,
+  orchestrate,
+  setAttribute,
+  setProperty,
+} from "./orchestrate.ts";
+import { supportsInert } from "./supports-inert.ts";
+import { walkTreeOutside } from "./walk-tree-outside.ts";
+
+type Elements = Array<Element | null>;
+
+export function disableTree(
+  element: Element | HTMLElement,
+  ignoredElements?: Elements,
+) {
+  if (!("style" in element)) return noop;
+
+  if (supportsInert()) {
+    return setProperty(element, "inert", true);
+  }
+
+  const tabbableElements = getAllTabbableIn(element, true);
+  const enableElements = tabbableElements.map((element) => {
+    if (ignoredElements?.some((el) => el && contains(el, element))) return noop;
+    const restoreFocusMethod = orchestrate(element, "focus", () => {
+      element.focus = noop;
+      return () => {
+        // @ts-expect-error Delete focus method to restore original behavior
+        delete element.focus;
+      };
+    });
+    return chain(setAttribute(element, "tabindex", "-1"), restoreFocusMethod);
+  });
+
+  return chain(
+    ...enableElements,
+    hideElementFromAccessibilityTree(element),
+    assignStyle(element, {
+      pointerEvents: "none",
+      userSelect: "none",
+      cursor: "default",
+    }),
+  );
+}
+
+export function disableTreeOutside(id: string, elements: Elements) {
+  const cleanups: Array<() => void> = [];
+  const ids = elements.map((el) => el?.id);
+
+  walkTreeOutside(
+    id,
+    elements,
+    (element) => {
+      if (isBackdrop(element, ...ids)) return;
+      // Ignore focus trap elements connected to any of the dialog elements. See
+      // dialog-menu "move back to menu button with Shift+Tab" test.
+      if (isFocusTrap(element, ...ids)) return;
+      cleanups.unshift(disableTree(element, elements));
+    },
+    (element) => {
+      // Parent accessible elements that are not part of the modal context
+      // should have their role set to "none" so that they are not exposed to
+      // screen readers.
+      if (!element.hasAttribute("role")) return;
+      if (elements.some((el) => el && contains(el, element))) return;
+      cleanups.unshift(setAttribute(element, "role", "none"));
+    },
+  );
+
+  const restoreTreeOutside = () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+
+  return restoreTreeOutside;
+}

package/src/dialog/utils/is-backdrop.ts

@@ -0,0 +1,12 @@
+export function isBackdrop(
+  element?: Element | null,
+  ...ids: Array<string | null | undefined>
+) {
+  if (!element) return false;
+  const backdrop = element.getAttribute("data-backdrop");
+  if (backdrop == null) return false;
+  if (backdrop === "") return true;
+  if (backdrop === "true") return true;
+  if (!ids.length) return true;
+  return ids.some((id) => backdrop === id);
+}

package/src/dialog/utils/is-focus-trap.ts

@@ -0,0 +1,11 @@
+export function isFocusTrap(
+  element?: Element | null,
+  ...ids: Array<string | null | undefined>
+) {
+  if (!element) return false;
+  const attr = element.getAttribute("data-focus-trap");
+  if (attr == null) return false;
+  if (!ids.length) return true;
+  if (attr === "") return false;
+  return ids.some((id) => attr === id);
+}

package/src/dialog/utils/mark-tree-outside.ts

@@ -0,0 +1,67 @@
+import { chain } from "@ariakit/utils";
+import { isBackdrop } from "./is-backdrop.ts";
+import { setProperty } from "./orchestrate.ts";
+import { walkTreeOutside } from "./walk-tree-outside.ts";
+
+type Elements = Array<Element | null>;
+
+function getPropertyName(id = "", ancestor = false) {
+  return `__ariakit-dialog-${ancestor ? "ancestor" : "outside"}${
+    id ? `-${id}` : ""
+  }` as keyof Element;
+}
+
+export function markElement(element: Element, id = "") {
+  return chain(
+    setProperty(element, getPropertyName(), true),
+    setProperty(element, getPropertyName(id), true),
+  );
+}
+
+export function markAncestor(element: Element, id = "") {
+  return chain(
+    setProperty(element, getPropertyName("", true), true),
+    setProperty(element, getPropertyName(id, true), true),
+  );
+}
+
+export function isElementMarked(element: Element, id?: string) {
+  const ancestorProperty = getPropertyName(id, true);
+  if (element[ancestorProperty]) return true;
+  const elementProperty = getPropertyName(id);
+  do {
+    if (element[elementProperty]) return true;
+    if (!element.parentElement) return false;
+    element = element.parentElement;
+    // oxlint-disable-next-line no-constant-condition
+  } while (true);
+}
+
+export function markTreeOutside(id: string, elements: Elements) {
+  const cleanups: Array<() => void> = [];
+  const ids = elements.map((el) => el?.id);
+
+  walkTreeOutside(
+    id,
+    elements,
+    (element) => {
+      if (isBackdrop(element, ...ids)) return;
+      cleanups.unshift(markElement(element, id));
+    },
+    (ancestor, element) => {
+      // See https://github.com/ariakit/ariakit/issues/2687
+      const isAnotherDialogAncestor =
+        element.hasAttribute("data-dialog") && element.id !== id;
+      if (isAnotherDialogAncestor) return;
+      cleanups.unshift(markAncestor(ancestor, id));
+    },
+  );
+
+  const restoreAccessibilityTree = () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+
+  return restoreAccessibilityTree;
+}

package/src/dialog/utils/orchestrate.ts

@@ -0,0 +1,123 @@
+const cleanups = new WeakMap<Element, Map<string, () => void>>();
+
+export function orchestrate(
+  element: Element,
+  key: string,
+  setup: () => () => void,
+) {
+  if (!cleanups.has(element)) {
+    cleanups.set(element, new Map());
+  }
+
+  const elementCleanups = cleanups.get(element)!;
+  const prevCleanup = elementCleanups.get(key);
+
+  if (!prevCleanup) {
+    elementCleanups.set(key, setup());
+    return () => {
+      elementCleanups.get(key)?.();
+      elementCleanups.delete(key);
+    };
+  }
+
+  const cleanup = setup();
+
+  const nextCleanup = () => {
+    cleanup();
+    prevCleanup();
+    elementCleanups.delete(key);
+  };
+
+  elementCleanups.set(key, nextCleanup);
+
+  return () => {
+    const isCurrent = elementCleanups.get(key) === nextCleanup;
+    if (!isCurrent) return;
+    cleanup();
+    elementCleanups.set(key, prevCleanup);
+  };
+}
+
+export function setAttribute(element: Element, attr: string, value: string) {
+  const setup = () => {
+    const previousValue = element.getAttribute(attr);
+    element.setAttribute(attr, value);
+    return () => {
+      if (previousValue == null) {
+        element.removeAttribute(attr);
+      } else {
+        element.setAttribute(attr, previousValue);
+      }
+    };
+  };
+
+  return orchestrate(element, attr, setup);
+}
+
+export function setProperty<T extends Element, K extends keyof T & string>(
+  element: T,
+  property: K,
+  value: T[K],
+) {
+  const setup = () => {
+    const exists = property in element;
+    const previousValue = element[property];
+    element[property] = value;
+    return () => {
+      if (!exists) {
+        delete element[property];
+      } else {
+        element[property] = previousValue;
+      }
+    };
+  };
+
+  // Debug
+  // const unsetProperty = orchestrate(element, property, setup);
+  // const unsetAttribute = setAttribute(element, property, `${value}`);
+  // return () => {
+  //   unsetProperty();
+  //   unsetAttribute();
+  // };
+
+  return orchestrate(element, property, setup);
+}
+
+export function assignStyle(
+  element: HTMLElement | null | undefined,
+  style: Partial<CSSStyleDeclaration>,
+) {
+  if (!element) return () => {};
+
+  const setup = () => {
+    const prevStyle = element.style.cssText;
+    Object.assign(element.style, style);
+    return () => {
+      element.style.cssText = prevStyle;
+    };
+  };
+
+  return orchestrate(element, "style", setup);
+}
+
+export function setCSSProperty(
+  element: HTMLElement | null | undefined,
+  property: string,
+  value: string,
+) {
+  if (!element) return () => {};
+
+  const setup = () => {
+    const previousValue = element.style.getPropertyValue(property);
+    element.style.setProperty(property, value);
+    return () => {
+      if (previousValue) {
+        element.style.setProperty(property, previousValue);
+      } else {
+        element.style.removeProperty(property);
+      }
+    };
+  };
+
+  return orchestrate(element, property, setup);
+}

package/src/dialog/utils/prepend-hidden-dismiss.ts

@@ -0,0 +1,35 @@
+import { getDocument } from "@ariakit/utils";
+
+export function prependHiddenDismiss(
+  container: HTMLElement,
+  onClick: () => unknown,
+) {
+  const document = getDocument(container);
+  const button = document.createElement("button");
+  button.type = "button";
+  button.tabIndex = -1;
+  button.textContent = "Dismiss popup";
+
+  // Visually hidden styles
+  Object.assign(button.style, {
+    border: "0px",
+    clip: "rect(0 0 0 0)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: "0px",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: "1px",
+  });
+
+  button.addEventListener("click", onClick);
+  container.prepend(button);
+
+  const removeHiddenDismiss = () => {
+    button.removeEventListener("click", onClick);
+    button.remove();
+  };
+
+  return removeHiddenDismiss;
+}

package/src/dialog/utils/supports-inert.ts

@@ -0,0 +1,5 @@
+export function supportsInert() {
+  // Debug
+  // return false;
+  return "inert" in HTMLElement.prototype;
+}

package/src/dialog/utils/use-hide-on-interact-outside.ts

@@ -0,0 +1,181 @@
+import { useStoreState } from "@ariakit/react-store";
+import { useEvent, useSafeLayoutEffect } from "@ariakit/react-utils";
+import {
+  contains,
+  getDocument,
+  getWindow,
+  addGlobalEventListener,
+} from "@ariakit/utils";
+import type { MutableRefObject } from "react";
+import { useEffect, useRef } from "react";
+import type { DialogStore } from "../dialog-store.ts";
+import type { DialogOptions } from "../dialog.tsx";
+import { isElementMarked } from "./mark-tree-outside.ts";
+import { usePreviousMouseDownRef } from "./use-previous-mouse-down-ref.ts";
+
+interface EventOutsideOptions {
+  store: DialogStore;
+  type: string;
+  listener: (event: Event) => void;
+  capture?: boolean;
+  domReady?: boolean | HTMLElement | null;
+}
+
+function isInDocument(target: Element) {
+  if (target.tagName === "HTML") return true;
+  return contains(getDocument(target).body, target);
+}
+
+function isDisclosure(disclosure: Element | null, target: Element) {
+  if (!disclosure) return false;
+  if (contains(disclosure, target)) return true;
+  const activeId = target.getAttribute("aria-activedescendant");
+  if (activeId) {
+    const activeElement = getDocument(disclosure).getElementById(activeId);
+    if (activeElement) {
+      return contains(disclosure, activeElement);
+    }
+  }
+  return false;
+}
+
+function isMouseEventOnDialog(event: Event | MouseEvent, dialog: Element) {
+  if (!("clientY" in event)) return false;
+  const rect = dialog.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return false;
+  return (
+    rect.top <= event.clientY &&
+    event.clientY <= rect.top + rect.height &&
+    rect.left <= event.clientX &&
+    event.clientX <= rect.left + rect.width
+  );
+}
+
+function useEventOutside({
+  store,
+  type,
+  listener,
+  capture,
+  domReady,
+}: EventOutsideOptions) {
+  const callListener = useEvent(listener);
+  const open = useStoreState(store, "open");
+  const contentElement = useStoreState(store, "contentElement");
+  const focusedRef = useRef(false);
+
+  useSafeLayoutEffect(() => {
+    if (!open) return;
+    if (!domReady) return;
+    if (!contentElement) return;
+    const onFocus = () => {
+      focusedRef.current = true;
+    };
+    contentElement.addEventListener("focusin", onFocus, true);
+    return () => contentElement.removeEventListener("focusin", onFocus, true);
+  }, [open, domReady, contentElement]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onEvent = (event: Event) => {
+      const { contentElement, disclosureElement } = store.getState();
+      const target = event.target as Element | null;
+      if (!contentElement) return;
+      if (!target) return;
+      // When an element is unmounted right after it receives focus, the focus
+      // event is triggered after that, when the element isn't part of the
+      // current document anymore. We just ignore it.
+      if (!isInDocument(target)) return;
+      // Event inside dialog
+      if (contains(contentElement, target)) return;
+      // Event on disclosure
+      if (isDisclosure(disclosureElement, target)) return;
+      // Event on focus trap
+      if (target.hasAttribute("data-focus-trap")) return;
+      // Clicked on dialog's bounding box
+      if (isMouseEventOnDialog(event, contentElement)) return;
+      // We need to check if the content element has been focused at least once
+      // before checking if it's marked. This is so hovercards and tooltips
+      // don't stay open when new nodes are added to the DOM and focused.
+      const focused = focusedRef.current;
+      if (focused && !isElementMarked(target, contentElement.id)) return;
+      // Finally, if the target has been marked as "outside" or is an ancestor
+      // of the content element, we call the listener.
+      callListener(event);
+    };
+    const win = contentElement ? getWindow(contentElement) : undefined;
+    return addGlobalEventListener(type, onEvent, capture, win);
+  }, [open, capture, store, type, callListener, contentElement]);
+}
+
+function shouldHideOnInteractOutside(
+  hideOnInteractOutside: DialogOptions["hideOnInteractOutside"],
+  event: Event,
+) {
+  if (typeof hideOnInteractOutside === "function") {
+    return hideOnInteractOutside(event);
+  }
+  return !!hideOnInteractOutside;
+}
+
+export function useHideOnInteractOutside(
+  store: DialogStore,
+  hideOnInteractOutside: DialogOptions["hideOnInteractOutside"],
+  domReady?: boolean | HTMLElement | null,
+  interactedOutsideRef?: MutableRefObject<boolean>,
+) {
+  const open = useStoreState(store, "open");
+  const contentElement = useStoreState(store, "contentElement");
+  const contentWindow = contentElement ? getWindow(contentElement) : undefined;
+  const previousMouseDownRef = usePreviousMouseDownRef(open, contentWindow);
+  const props = { store, domReady, capture: true };
+
+  useEventOutside({
+    ...props,
+    type: "click",
+    listener: (event) => {
+      const { contentElement } = store.getState();
+      const previousMouseDown = previousMouseDownRef.current as Element | null;
+      // If there's no previously mousedown'd element, this probably means that
+      // the dialog opened with a mousedown event, and a subsequent click event
+      // was dispatched outside of the dialog. See form-select example. We just
+      // ignore this.
+      if (!previousMouseDown) return;
+      // This prevents the dialog from closing by dragging the cursor (for
+      // example, selecting some text inside the dialog and releasing the mouse
+      // outside of it). See:
+      // - https://github.com/ariakit/ariakit/issues/1336
+      // - https://github.com/ariakit/ariakit/issues/2330
+      if (!isElementMarked(previousMouseDown, contentElement?.id)) return;
+      if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return;
+      if (interactedOutsideRef) {
+        interactedOutsideRef.current = true;
+      }
+      store.hide();
+    },
+  });
+
+  useEventOutside({
+    ...props,
+    type: "focusin",
+    listener: (event) => {
+      const { contentElement } = store.getState();
+      if (!contentElement) return;
+      // Fix for https://github.com/ariakit/ariakit/issues/619
+      if (event.target === getDocument(contentElement)) return;
+      if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return;
+      store.hide();
+    },
+  });
+
+  useEventOutside({
+    ...props,
+    type: "contextmenu",
+    listener: (event) => {
+      if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return;
+      if (interactedOutsideRef) {
+        interactedOutsideRef.current = true;
+      }
+      store.hide();
+    },
+  });
+}

package/src/dialog/utils/use-nested-dialogs.tsx

@@ -0,0 +1,55 @@
+import { useSafeLayoutEffect } from "@ariakit/react-utils";
+import type { WrapElement } from "@ariakit/react-utils";
+import { sync } from "@ariakit/store";
+import { chain } from "@ariakit/utils";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import type { DialogStore } from "../dialog-store.ts";
+
+const NestedDialogsContext = createContext<{
+  store?: DialogStore;
+  add?: (store: DialogStore) => () => void;
+}>({});
+
+export function useNestedDialogs(store: DialogStore) {
+  const context = useContext(NestedDialogsContext);
+  const [dialogs, setDialogs] = useState<DialogStore[]>([]);
+
+  const add = useCallback(
+    (dialog: DialogStore) => {
+      setDialogs((dialogs) => [...dialogs, dialog]);
+      return chain(context.add?.(dialog), () => {
+        setDialogs((dialogs) => dialogs.filter((d) => d !== dialog));
+      });
+    },
+    [context],
+  );
+
+  // If it's a nested dialog, add it to the context
+  useSafeLayoutEffect(() => {
+    return sync(store, ["open", "contentElement"], (state) => {
+      if (!state.open) return;
+      if (!state.contentElement) return;
+      return context.add?.(store);
+    });
+  }, [store, context]);
+
+  // Provider
+  const providerValue = useMemo(() => ({ store, add }), [store, add]);
+
+  const wrapElement: WrapElement = useCallback(
+    (element) => (
+      <NestedDialogsContext.Provider value={providerValue}>
+        {element}
+      </NestedDialogsContext.Provider>
+    ),
+    [providerValue],
+  );
+
+  return { wrapElement, nestedDialogs: dialogs };
+}

package/src/dialog/utils/use-prevent-body-scroll.ts

@@ -0,0 +1,86 @@
+// Based on https://github.com/floating-ui/floating-ui/blob/1201e72e67a80e479122293d46d96c9bbc8f156d/packages/react-dom-interactions/src/FloatingOverlay.tsx
+import { getDocument, getWindow, chain, isApple, isMac } from "@ariakit/utils";
+import { useEffect } from "react";
+import { assignStyle, setCSSProperty } from "./orchestrate.ts";
+import { useRootDialog } from "./use-root-dialog.ts";
+
+function getPaddingProperty(documentElement: HTMLElement) {
+  // RTL <body> scrollbar
+  const documentLeft = documentElement.getBoundingClientRect().left;
+  const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft;
+  return scrollbarX ? "paddingLeft" : "paddingRight";
+}
+
+export function usePreventBodyScroll(
+  contentElement: HTMLElement | null,
+  contentId?: string,
+  enabled?: boolean,
+) {
+  const isRootDialog = useRootDialog({
+    attribute: "data-dialog-prevent-body-scroll",
+    contentElement,
+    contentId,
+    enabled,
+  });
+
+  useEffect(() => {
+    if (!isRootDialog()) return;
+    if (!contentElement) return;
+    const doc = getDocument(contentElement);
+    const win = getWindow(contentElement);
+    const { documentElement, body } = doc;
+    const cssScrollbarWidth =
+      documentElement.style.getPropertyValue("--scrollbar-width");
+    const scrollbarWidth = cssScrollbarWidth
+      ? Number.parseInt(cssScrollbarWidth, 10)
+      : win.innerWidth - documentElement.clientWidth;
+
+    const setScrollbarWidthProperty = () =>
+      setCSSProperty(
+        documentElement,
+        "--scrollbar-width",
+        `${scrollbarWidth}px`,
+      );
+
+    const paddingProperty = getPaddingProperty(documentElement);
+
+    const setStyle = () =>
+      assignStyle(body, {
+        overflow: "hidden",
+        [paddingProperty]: `${scrollbarWidth}px`,
+      });
+
+    // Only iOS doesn't respect `overflow: hidden` on document.body
+    const setIOSStyle = () => {
+      const { scrollX, scrollY, visualViewport } = win;
+
+      // iOS 12 does not support `visuaViewport`.
+      const offsetLeft = visualViewport?.offsetLeft ?? 0;
+      const offsetTop = visualViewport?.offsetTop ?? 0;
+
+      const restoreStyle = assignStyle(body, {
+        position: "fixed",
+        overflow: "hidden",
+        top: `${-(scrollY - Math.floor(offsetTop))}px`,
+        left: `${-(scrollX - Math.floor(offsetLeft))}px`,
+        right: "0",
+        [paddingProperty]: `${scrollbarWidth}px`,
+      });
+
+      return () => {
+        restoreStyle();
+        // istanbul ignore next: JSDOM doesn't implement window.scrollTo
+        if (process.env.NODE_ENV !== "test") {
+          win.scrollTo({ left: scrollX, top: scrollY, behavior: "instant" });
+        }
+      };
+    };
+
+    const isIOS = isApple() && !isMac();
+
+    return chain(
+      setScrollbarWidthProperty(),
+      isIOS ? setIOSStyle() : setStyle(),
+    );
+  }, [isRootDialog, contentElement]);
+}