@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/overlays/createInteractOutside.ts

@@ -1,149 +0,0 @@
-/**
- * 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

@@ -1,202 +0,0 @@
-/**
- * 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

@@ -1,155 +0,0 @@
-/**
- * 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

@@ -1,85 +0,0 @@
-/**
- * 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,
-    },
-  };
-}