@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/overlays/createInteractOutside.ts

@@ -0,0 +1,149 @@
+/**
+ * Detects interactions outside a given element.
+ * Based on @react-aria/interactions useInteractOutside.
+ */
+
+import { createEffect, onCleanup } from 'solid-js';
+import { getOwnerDocument } from '../utils';
+
+export interface InteractOutsideProps {
+  /** Reference to the element to detect interactions outside of. */
+  ref: () => Element | null;
+  /** Handler called when an interaction outside the element completes. */
+  onInteractOutside?: (e: PointerEvent) => void;
+  /** Handler called when an interaction outside the element starts. */
+  onInteractOutsideStart?: (e: PointerEvent) => void;
+  /** Whether the interact outside events should be disabled. */
+  isDisabled?: boolean;
+}
+
+/**
+ * Detects interactions outside a given element, used in components like
+ * Dialogs and Popovers so they can close when a user clicks outside them.
+ */
+export function createInteractOutside(props: InteractOutsideProps): void {
+  let isPointerDown = false;
+  let ignoreEmulatedMouseEvents = false;
+
+  createEffect(() => {
+    const { ref, onInteractOutside, onInteractOutsideStart, isDisabled } = props;
+
+    if (isDisabled) {
+      return;
+    }
+
+    const element = ref();
+    const documentObject = getOwnerDocument(element);
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (onInteractOutside && isValidEvent(e, ref)) {
+        if (onInteractOutsideStart) {
+          onInteractOutsideStart(e);
+        }
+        isPointerDown = true;
+      }
+    };
+
+    const triggerInteractOutside = (e: PointerEvent) => {
+      if (onInteractOutside) {
+        onInteractOutside(e);
+      }
+    };
+
+    // Use pointer events if available. Otherwise, fall back to mouse and touch events.
+    if (typeof PointerEvent !== 'undefined') {
+      const onClick = (e: PointerEvent) => {
+        if (isPointerDown && isValidEvent(e, ref)) {
+          triggerInteractOutside(e);
+        }
+        isPointerDown = false;
+      };
+
+      // Use click instead of pointerup to avoid Android Chrome issue
+      // https://issues.chromium.org/issues/40732224
+      documentObject.addEventListener('pointerdown', onPointerDown as EventListener, true);
+      documentObject.addEventListener('click', onClick as EventListener, true);
+
+      onCleanup(() => {
+        documentObject.removeEventListener('pointerdown', onPointerDown as EventListener, true);
+        documentObject.removeEventListener('click', onClick as EventListener, true);
+      });
+    } else {
+      // Fallback for environments without PointerEvent (mainly tests)
+      const onMouseUp = (e: MouseEvent) => {
+        if (ignoreEmulatedMouseEvents) {
+          ignoreEmulatedMouseEvents = false;
+        } else if (isPointerDown && isValidEvent(e as unknown as PointerEvent, ref)) {
+          triggerInteractOutside(e as unknown as PointerEvent);
+        }
+        isPointerDown = false;
+      };
+
+      const onTouchEnd = (e: TouchEvent) => {
+        ignoreEmulatedMouseEvents = true;
+        if (isPointerDown && isValidEvent(e as unknown as PointerEvent, ref)) {
+          triggerInteractOutside(e as unknown as PointerEvent);
+        }
+        isPointerDown = false;
+      };
+
+      const onMouseDown = (e: MouseEvent) => {
+        if (onInteractOutside && isValidEvent(e as unknown as PointerEvent, ref)) {
+          if (onInteractOutsideStart) {
+            onInteractOutsideStart(e as unknown as PointerEvent);
+          }
+          isPointerDown = true;
+        }
+      };
+
+      const onTouchStart = (e: TouchEvent) => {
+        if (onInteractOutside && isValidEvent(e as unknown as PointerEvent, ref)) {
+          if (onInteractOutsideStart) {
+            onInteractOutsideStart(e as unknown as PointerEvent);
+          }
+          isPointerDown = true;
+        }
+      };
+
+      documentObject.addEventListener('mousedown', onMouseDown as EventListener, true);
+      documentObject.addEventListener('mouseup', onMouseUp as EventListener, true);
+      documentObject.addEventListener('touchstart', onTouchStart as EventListener, true);
+      documentObject.addEventListener('touchend', onTouchEnd as EventListener, true);
+
+      onCleanup(() => {
+        documentObject.removeEventListener('mousedown', onMouseDown as EventListener, true);
+        documentObject.removeEventListener('mouseup', onMouseUp as EventListener, true);
+        documentObject.removeEventListener('touchstart', onTouchStart as EventListener, true);
+        documentObject.removeEventListener('touchend', onTouchEnd as EventListener, true);
+      });
+    }
+  });
+}
+
+function isValidEvent(event: PointerEvent | MouseEvent | TouchEvent, ref: () => Element | null): boolean {
+  // Only handle primary button clicks
+  if ('button' in event && event.button > 0) {
+    return false;
+  }
+
+  if (event.target) {
+    // If the event target is no longer in the document, ignore
+    const ownerDocument = (event.target as Element).ownerDocument;
+    if (!ownerDocument || !ownerDocument.documentElement.contains(event.target as Node)) {
+      return false;
+    }
+    // If the target is within a top layer element (e.g. toasts), ignore
+    if ((event.target as Element).closest?.('[data-solidaria-top-layer]')) {
+      return false;
+    }
+  }
+
+  const element = ref();
+  if (!element) {
+    return false;
+  }
+
+  // When the event source is inside a Shadow DOM, event.target is just the shadow root.
+  // Using event.composedPath instead means we can get the actual element inside the shadow root.
+  return !event.composedPath().includes(element);
+}

package/src/overlays/createModal.tsx

@@ -0,0 +1,202 @@
+/**
+ * Modal context and hooks for managing modal accessibility.
+ * Based on @react-aria/overlays useModal.
+ */
+
+import {
+  createContext,
+  createSignal,
+  useContext,
+  createEffect,
+  onCleanup,
+  type JSX,
+  type Accessor,
+  type ParentComponent,
+} from 'solid-js';
+import { Portal } from 'solid-js/web';
+import { isServer } from 'solid-js/web';
+
+export interface ModalProviderProps {
+  children: JSX.Element;
+}
+
+interface ModalContext {
+  parent: ModalContext | null;
+  modalCount: Accessor<number>;
+  addModal: () => void;
+  removeModal: () => void;
+}
+
+const ModalContext = createContext<ModalContext | null>(null);
+
+/**
+ * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals
+ * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.
+ * This is done recursively so that all parent providers are incremented and decremented.
+ * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its
+ * subtree from screen readers. This is done using SolidJS context in order to account for things
+ * like portals, which can cause the component tree and the DOM tree to differ significantly in structure.
+ */
+export const ModalProvider: ParentComponent<ModalProviderProps> = (props) => {
+  const parent = useContext(ModalContext);
+  const [modalCount, setModalCount] = createSignal(0);
+
+  const context: ModalContext = {
+    parent,
+    modalCount,
+    addModal() {
+      setModalCount((count) => count + 1);
+      if (parent) {
+        parent.addModal();
+      }
+    },
+    removeModal() {
+      setModalCount((count) => count - 1);
+      if (parent) {
+        parent.removeModal();
+      }
+    },
+  };
+
+  return (
+    <ModalContext.Provider value={context}>
+      {props.children}
+    </ModalContext.Provider>
+  );
+};
+
+export interface ModalProviderAria {
+  /** Props to be spread on the container element. */
+  modalProviderProps: {
+    'aria-hidden'?: true;
+  };
+}
+
+/**
+ * Used to determine if the tree should be aria-hidden based on how many
+ * modals are open.
+ */
+export function useModalProvider(): ModalProviderAria {
+  const context = useContext(ModalContext);
+  return {
+    modalProviderProps: {
+      get 'aria-hidden'() {
+        return context && context.modalCount() > 0 ? true : undefined;
+      },
+    },
+  };
+}
+
+/**
+ * Creates a root node that will be aria-hidden if there are other modals open.
+ */
+const OverlayContainerDOM: ParentComponent<ModalProviderProps> = (props) => {
+  const { modalProviderProps } = useModalProvider();
+  return (
+    <div data-overlay-container {...modalProviderProps}>
+      {props.children}
+    </div>
+  );
+};
+
+/**
+ * An OverlayProvider acts as a container for the top-level application.
+ * Any application that uses modal dialogs or other overlays should
+ * be wrapped in a `<OverlayProvider>`. This is used to ensure that
+ * the main content of the application is hidden from screen readers
+ * if a modal or other overlay is opened. Only the top-most modal or
+ * overlay should be accessible at once.
+ */
+export const OverlayProvider: ParentComponent<ModalProviderProps> = (props) => {
+  return (
+    <ModalProvider>
+      <OverlayContainerDOM>{props.children}</OverlayContainerDOM>
+    </ModalProvider>
+  );
+};
+
+export interface OverlayContainerProps extends ModalProviderProps {
+  /**
+   * The container element in which the overlay portal will be placed.
+   * @default document.body
+   */
+  portalContainer?: Element;
+}
+
+/**
+ * A container for overlays like modals and popovers. Renders the overlay
+ * into a Portal which is placed at the end of the document body.
+ * Also ensures that the overlay is hidden from screen readers if a
+ * nested modal is opened. Only the top-most modal or overlay should
+ * be accessible at once.
+ */
+export const OverlayContainer: ParentComponent<OverlayContainerProps> = (props) => {
+  // Don't render portal on server
+  if (isServer) {
+    return null;
+  }
+
+  const portalContainer = () => props.portalContainer ?? document.body;
+
+  createEffect(() => {
+    const container = portalContainer();
+    if (container?.closest('[data-overlay-container]')) {
+      throw new Error('An OverlayContainer must not be inside another container. Please change the portalContainer prop.');
+    }
+  });
+
+  return (
+    <Portal mount={portalContainer()}>
+      <OverlayProvider>{props.children}</OverlayProvider>
+    </Portal>
+  );
+};
+
+export interface AriaModalOptions {
+  /** Whether the modal is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface ModalAria {
+  /** Props for the modal content element. */
+  modalProps: {
+    'data-ismodal': boolean;
+  };
+}
+
+/**
+ * Hides content outside the current `<OverlayContainer>` from screen readers
+ * on mount and restores it on unmount. Typically used by modal dialogs and
+ * other types of overlays to ensure that only the top-most modal is
+ * accessible at once.
+ */
+export function createModal(options?: AriaModalOptions): ModalAria {
+  // Add aria-hidden to all parent providers on mount, and restore on unmount.
+  const context = useContext(ModalContext);
+
+  if (!context) {
+    throw new Error('Modal is not contained within a provider');
+  }
+
+  createEffect(() => {
+    if (options?.isDisabled || !context.parent) {
+      return;
+    }
+
+    // The immediate context is from the provider containing this modal, so we only
+    // want to trigger aria-hidden on its parents not on the modal provider itself.
+    context.parent.addModal();
+
+    onCleanup(() => {
+      if (context.parent) {
+        context.parent.removeModal();
+      }
+    });
+  });
+
+  return {
+    modalProps: {
+      'data-ismodal': !options?.isDisabled,
+    },
+  };
+}

package/src/overlays/createOverlay.ts

@@ -0,0 +1,155 @@
+/**
+ * Provides the behavior for overlays such as dialogs, popovers, and menus.
+ * Based on @react-aria/overlays useOverlay.
+ */
+
+import { createEffect, onCleanup, type JSX } from 'solid-js';
+import { createInteractOutside } from './createInteractOutside';
+import { createFocusWithin } from '../interactions/createFocusWithin';
+
+export interface AriaOverlayProps {
+  /** Whether the overlay is currently open. */
+  isOpen?: boolean;
+  /** Handler that is called when the overlay should close. */
+  onClose?: () => void;
+  /**
+   * Whether to close the overlay when the user interacts outside it.
+   * @default false
+   */
+  isDismissable?: boolean;
+  /** Whether the overlay should close when focus is lost or moves outside it. */
+  shouldCloseOnBlur?: boolean;
+  /**
+   * Whether pressing the escape key to close the overlay should be disabled.
+   * @default false
+   */
+  isKeyboardDismissDisabled?: boolean;
+  /**
+   * When user interacts with the argument element outside of the overlay ref,
+   * return true if onClose should be called. This gives you a chance to filter
+   * out interaction with elements that should not dismiss the overlay.
+   * By default, onClose will always be called on interaction outside the overlay ref.
+   */
+  shouldCloseOnInteractOutside?: (element: Element) => boolean;
+}
+
+export interface OverlayAria {
+  /** Props to apply to the overlay container element. */
+  overlayProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props to apply to the underlay element, if any. */
+  underlayProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+// Stack of visible overlays, used to ensure only topmost overlay closes
+const visibleOverlays: Array<() => Element | null> = [];
+
+/**
+ * Provides the behavior for overlays such as dialogs, popovers, and menus.
+ * Hides the overlay when the user interacts outside it, when the Escape key is pressed,
+ * or optionally, on blur. Only the top-most overlay will close at once.
+ */
+export function createOverlay(
+  props: AriaOverlayProps,
+  ref: () => Element | null
+): OverlayAria {
+  const {
+    onClose,
+    shouldCloseOnBlur,
+    isOpen,
+    isDismissable = false,
+    isKeyboardDismissDisabled = false,
+    shouldCloseOnInteractOutside,
+  } = props;
+
+  // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
+  createEffect(() => {
+    if (isOpen && !visibleOverlays.includes(ref)) {
+      visibleOverlays.push(ref);
+    }
+
+    onCleanup(() => {
+      const index = visibleOverlays.indexOf(ref);
+      if (index >= 0) {
+        visibleOverlays.splice(index, 1);
+      }
+    });
+  });
+
+  // Only hide the overlay when it is the topmost visible overlay in the stack
+  const onHide = () => {
+    if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {
+      onClose();
+    }
+  };
+
+  const onInteractOutsideStart = (e: PointerEvent) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
+      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }
+  };
+
+  const onInteractOutside = (e: PointerEvent) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
+      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      onHide();
+    }
+  };
+
+  // Handle clicking outside the overlay to close it
+  createInteractOutside({
+    ref,
+    onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined,
+    onInteractOutsideStart,
+    isDisabled: !isDismissable || !isOpen,
+  });
+
+  // Handle focus within for blur detection
+  const { focusWithinProps } = createFocusWithin({
+    isDisabled: !shouldCloseOnBlur,
+    onBlurWithin: (e) => {
+      // Do not close if relatedTarget is null, which means focus is lost to the body.
+      // That can happen when switching tabs, or due to a browser bug.
+      // Clicking on the body to close the overlay should already be handled by createInteractOutside.
+      if (!e.relatedTarget) {
+        return;
+      }
+
+      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) {
+        onClose?.();
+      }
+    },
+  });
+
+  // Handle the escape key
+  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {
+    if (e.key === 'Escape' && !isKeyboardDismissDisabled && !(e as any).nativeEvent?.isComposing) {
+      e.stopPropagation();
+      e.preventDefault();
+      onHide();
+    }
+  };
+
+  const onPointerDownUnderlay: JSX.EventHandler<HTMLElement, PointerEvent> = (e) => {
+    // Fixes a Firefox issue that starts text selection
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1675846
+    if (e.target === e.currentTarget) {
+      e.preventDefault();
+    }
+  };
+
+  return {
+    overlayProps: {
+      onKeyDown,
+      ...focusWithinProps,
+    },
+    underlayProps: {
+      onPointerDown: onPointerDownUnderlay,
+    },
+  };
+}

package/src/overlays/createOverlayTrigger.ts

@@ -0,0 +1,85 @@
+/**
+ * Handles the behavior and accessibility for an overlay trigger.
+ * Based on @react-aria/overlays useOverlayTrigger.
+ */
+
+import { createEffect } from 'solid-js';
+import type { OverlayTriggerState } from '@proyecto-viviana/solid-stately';
+import { createId } from '../ssr';
+import { access, type MaybeAccessor } from '../utils';
+
+export interface OverlayTriggerProps {
+  /** Type of overlay that is opened by the trigger. */
+  type: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
+}
+
+export interface OverlayTriggerAria {
+  /** Props for the trigger element. */
+  triggerProps: {
+    'aria-haspopup'?: boolean | 'listbox';
+    'aria-expanded': boolean;
+    'aria-controls'?: string;
+    onPress: () => void;
+  };
+  /** Props for the overlay container element. */
+  overlayProps: {
+    id: string;
+  };
+}
+
+// Map for storing close functions, used by useCloseOnScroll
+export const onCloseMap = new WeakMap<Element, () => void>();
+
+/**
+ * Handles the behavior and accessibility for an overlay trigger, e.g. a button
+ * that opens a popover, menu, or other overlay that is positioned relative to the trigger.
+ */
+export function createOverlayTrigger(
+  props: MaybeAccessor<OverlayTriggerProps>,
+  state: OverlayTriggerState,
+  ref?: () => Element | null
+): OverlayTriggerAria {
+  const propsAccessor = () => access(props);
+  const overlayId = createId();
+
+  // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll
+  // without forcing users to pass onClose.
+  createEffect(() => {
+    const element = ref?.();
+    if (element) {
+      onCloseMap.set(element, state.close);
+    }
+  });
+
+  // Aria 1.1 supports multiple values for aria-haspopup other than just menus.
+  // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup
+  // However, we only add it for menus for now because screen readers often
+  // announce it as a menu even for other values.
+  const getAriaHasPopup = (): boolean | 'listbox' | undefined => {
+    const type = propsAccessor().type;
+    if (type === 'menu') {
+      return true;
+    } else if (type === 'listbox') {
+      return 'listbox';
+    }
+    return undefined;
+  };
+
+  return {
+    triggerProps: {
+      get 'aria-haspopup'() {
+        return getAriaHasPopup();
+      },
+      get 'aria-expanded'() {
+        return state.isOpen();
+      },
+      get 'aria-controls'() {
+        return state.isOpen() ? overlayId : undefined;
+      },
+      onPress: state.toggle,
+    },
+    overlayProps: {
+      id: overlayId,
+    },
+  };
+}