@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/overlays/createModal.tsx

@@ -12,9 +12,9 @@ import {
   type JSX,
   type Accessor,
   type ParentComponent,
-} from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { isServer } from 'solid-js/web';
+} from "solid-js";
+import { Portal } from "solid-js/web";
+import { isServer } from "solid-js/web";
 
 export interface ModalProviderProps {
   children: JSX.Element;
@@ -69,11 +69,7 @@ export const ModalProvider: ParentComponent<ModalProviderProps> = (props) => {
     },
   };
 
-  return (
-    <ModalContext.Provider value={context}>
-      {props.children}
-    </ModalContext.Provider>
-  );
+  return <ModalContext.Provider value={context}>{props.children}</ModalContext.Provider>;
 };
 
 /**
@@ -85,7 +81,8 @@ export const UNSAFE_PortalProvider: ParentComponent<PortalProviderProps> = (prop
   return (
     <PortalContext.Provider
       value={{
-        getContainer: props.getContainer === null ? undefined : props.getContainer ?? parent.getContainer,
+        getContainer:
+          props.getContainer === null ? undefined : (props.getContainer ?? parent.getContainer),
       }}
     >
       {props.children}
@@ -103,7 +100,7 @@ export function useUNSAFE_PortalContext(): PortalProviderContextValue {
 export interface ModalProviderAria {
   /** Props to be spread on the container element. */
   modalProviderProps: {
-    'aria-hidden'?: true;
+    "aria-hidden"?: true;
   };
 }
 
@@ -115,7 +112,7 @@ export function useModalProvider(): ModalProviderAria {
   const context = useContext(ModalContext);
   return {
     modalProviderProps: {
-      get 'aria-hidden'() {
+      get "aria-hidden"() {
         return context && context.modalCount() > 0 ? true : undefined;
       },
     },
@@ -172,12 +169,15 @@ export const OverlayContainer: ParentComponent<OverlayContainerProps> = (props)
   }
 
   const portalContext = useUNSAFE_PortalContext();
-  const portalContainer = () => props.portalContainer ?? portalContext.getContainer?.() ?? document.body;
+  const portalContainer = () =>
+    props.portalContainer ?? portalContext.getContainer?.() ?? 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.');
+    if (container?.closest("[data-overlay-container]")) {
+      throw new Error(
+        "An OverlayContainer must not be inside another container. Please change the portalContainer prop.",
+      );
     }
   });
 
@@ -196,7 +196,7 @@ export interface AriaModalOptions {
 export interface ModalAria {
   /** Props for the modal content element. */
   modalProps: {
-    'data-ismodal': boolean;
+    "data-ismodal": boolean;
   };
 }
 
@@ -211,7 +211,7 @@ export function createModal(options?: AriaModalOptions): ModalAria {
   const context = useContext(ModalContext);
 
   if (!context) {
-    throw new Error('Modal is not contained within a provider');
+    throw new Error("Modal is not contained within a provider");
   }
 
   createEffect(() => {
@@ -232,7 +232,7 @@ export function createModal(options?: AriaModalOptions): ModalAria {
 
   return {
     modalProps: {
-      'data-ismodal': !options?.isDisabled,
+      "data-ismodal": !options?.isDisabled,
     },
   };
 }

package/src/overlays/createOverlay.ts

@@ -3,9 +3,10 @@
  * Based on @react-aria/overlays useOverlay.
  */
 
-import { createEffect, onCleanup, type JSX } from 'solid-js';
-import { createInteractOutside } from './createInteractOutside';
-import { createFocusWithin } from '../interactions/createFocusWithin';
+import { createEffect, onCleanup, type JSX } from "solid-js";
+import { createInteractOutside } from "./createInteractOutside";
+import { createFocusWithin } from "../interactions/createFocusWithin";
+import { getOwnerDocument, nodeContains } from "../utils";
 
 export interface AriaOverlayProps {
   /** Whether the overlay is currently open. */
@@ -48,10 +49,7 @@ const visibleOverlays: Array<() => Element | null> = [];
  * 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 {
+export function createOverlay(props: AriaOverlayProps, ref: () => Element | null): OverlayAria {
   const onClose = () => props.onClose;
   const shouldCloseOnBlur = () => props.shouldCloseOnBlur;
   const isOpen = () => props.isOpen ?? false;
@@ -116,6 +114,38 @@ export function createOverlay(
     });
   });
 
+  createEffect(() => {
+    if (!isOpen() || !shouldCloseOnBlur()) {
+      return;
+    }
+
+    const overlay = ref();
+    if (!overlay) {
+      return;
+    }
+
+    const ownerDocument = getOwnerDocument(overlay);
+    const onFocusIn = (event: FocusEvent) => {
+      if (!isOpen()) {
+        return;
+      }
+
+      const currentOverlay = ref();
+      const target = event.target as Element | null;
+      if (!currentOverlay || !target || nodeContains(currentOverlay, target)) {
+        return;
+      }
+
+      const shouldClose = shouldCloseOnInteractOutside();
+      if (!shouldClose || shouldClose(target)) {
+        onHide();
+      }
+    };
+
+    ownerDocument.addEventListener("focusin", onFocusIn, true);
+    onCleanup(() => ownerDocument.removeEventListener("focusin", onFocusIn, true));
+  });
+
   // Handle focus within for blur detection
   const { focusWithinProps } = createFocusWithin({
     get isDisabled() {
@@ -138,7 +168,7 @@ export function createOverlay(
 
   // Handle the escape key
   const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {
-    if (e.key === 'Escape' && !isKeyboardDismissDisabled() && !e.isComposing) {
+    if (e.key === "Escape" && !isKeyboardDismissDisabled() && !e.isComposing) {
       e.stopPropagation();
       e.preventDefault();
       onHide();

package/src/overlays/createOverlayTrigger.ts

@@ -3,22 +3,22 @@
  * 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';
+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';
+  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;
+    "aria-haspopup"?: boolean | "listbox";
+    "aria-expanded": boolean;
+    "aria-controls"?: string;
     onPress: () => void;
   };
   /** Props for the overlay container element. */
@@ -37,7 +37,7 @@ export const onCloseMap = new WeakMap<Element, () => void>();
 export function createOverlayTrigger(
   props: MaybeAccessor<OverlayTriggerProps>,
   state: OverlayTriggerState,
-  ref?: () => Element | null
+  ref?: () => Element | null,
 ): OverlayTriggerAria {
   const propsAccessor = () => access(props);
   const overlayId = createId();
@@ -55,25 +55,25 @@ export function createOverlayTrigger(
   // 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 getAriaHasPopup = (): boolean | "listbox" | undefined => {
     const type = propsAccessor().type;
-    if (type === 'menu') {
+    if (type === "menu") {
       return true;
-    } else if (type === 'listbox') {
-      return 'listbox';
+    } else if (type === "listbox") {
+      return "listbox";
     }
     return undefined;
   };
 
   return {
     triggerProps: {
-      get 'aria-haspopup'() {
+      get "aria-haspopup"() {
         return getAriaHasPopup();
       },
-      get 'aria-expanded'() {
+      get "aria-expanded"() {
         return state.isOpen();
       },
-      get 'aria-controls'() {
+      get "aria-controls"() {
         return state.isOpen() ? overlayId : undefined;
       },
       onPress: state.toggle,

package/src/overlays/createPreventScroll.ts

@@ -3,15 +3,15 @@
  * Based on @react-aria/overlays usePreventScroll.
  */
 
-import { createEffect, onCleanup } from 'solid-js';
-import { isIOS, getScrollParent, isScrollable, willOpenKeyboard, chain } from '../utils';
+import { createEffect, onCleanup } from "solid-js";
+import { isIOS, getScrollParent, isScrollable, willOpenKeyboard, chain } from "../utils";
 
 export interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
   isDisabled?: boolean;
 }
 
-const visualViewport = typeof document !== 'undefined' && window.visualViewport;
+const visualViewport = typeof document !== "undefined" && window.visualViewport;
 
 // The number of active createPreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
 let preventScrollCount = 0;
@@ -57,14 +57,14 @@ function preventScrollStandard(): () => void {
 
   if (scrollbarWidth > 0) {
     // Use scrollbar-gutter when supported because it also works for fixed positioned elements.
-    if ('scrollbarGutter' in document.documentElement.style) {
-      restoreFns.push(setStyle(document.documentElement, 'scrollbarGutter', 'stable'));
+    if ("scrollbarGutter" in document.documentElement.style) {
+      restoreFns.push(setStyle(document.documentElement, "scrollbarGutter", "stable"));
     } else {
-      restoreFns.push(setStyle(document.documentElement, 'paddingRight', `${scrollbarWidth}px`));
+      restoreFns.push(setStyle(document.documentElement, "paddingRight", `${scrollbarWidth}px`));
     }
   }
 
-  restoreFns.push(setStyle(document.documentElement, 'overflow', 'hidden'));
+  restoreFns.push(setStyle(document.documentElement, "overflow", "hidden"));
 
   return () => {
     restoreFns.forEach((fn) => fn());
@@ -112,8 +112,8 @@ function preventScrollMobileSafari(): () => void {
 
     // If this is a focused input element with a selected range, allow user to drag the selection handles.
     if (
-      'selectionStart' in target &&
-      'selectionEnd' in target &&
+      "selectionStart" in target &&
+      "selectionEnd" in target &&
       (target.selectionStart as number) < (target.selectionEnd as number) &&
       target.ownerDocument.activeElement === target
     ) {
@@ -125,7 +125,7 @@ function preventScrollMobileSafari(): () => void {
   // of a nested scrollable area, otherwise mobile Safari will start scrolling
   // the window instead.
   // This must be applied before the touchstart event as of iOS 26, so inject it as a <style> element.
-  const style = document.createElement('style');
+  const style = document.createElement("style");
   style.textContent = `
 @layer {
   * {
@@ -152,7 +152,10 @@ function preventScrollMobileSafari(): () => void {
     // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to
     // the element will prevent vertical page scrolling. We can't add that automatically
     // because it must be set before the touchstart event.
-    if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) {
+    if (
+      scrollable.scrollHeight === scrollable.clientHeight &&
+      scrollable.scrollWidth === scrollable.clientWidth
+    ) {
       e.preventDefault();
     }
   };
@@ -170,7 +173,7 @@ function preventScrollMobileSafari(): () => void {
       // the same input again, it is already focused, so no blur event will fire,
       // resulting in the flow above never running and Safari's native scrolling occurring.
       // Instead, move focus to the parent focusable element (e.g. the dialog).
-      const focusable = target.parentElement?.closest('[tabindex]') as HTMLElement | null;
+      const focusable = target.parentElement?.closest("[tabindex]") as HTMLElement | null;
       focusable?.focus({ preventScroll: true });
     }
   };
@@ -179,7 +182,8 @@ function preventScrollMobileSafari(): () => void {
   const focus = HTMLElement.prototype.focus;
   HTMLElement.prototype.focus = function (opts) {
     // Track whether the keyboard was already visible before.
-    const wasKeyboardVisible = document.activeElement != null && willOpenKeyboard(document.activeElement);
+    const wasKeyboardVisible =
+      document.activeElement != null && willOpenKeyboard(document.activeElement);
 
     // Focus the element without scrolling the page.
     focus.call(this, { ...opts, preventScroll: true });
@@ -190,9 +194,9 @@ function preventScrollMobileSafari(): () => void {
   };
 
   const removeEvents = chain(
-    addEvent(document, 'touchstart', onTouchStart, { passive: false, capture: true }),
-    addEvent(document, 'touchmove', onTouchMove, { passive: false, capture: true }),
-    addEvent(document, 'blur', onBlur, true)
+    addEvent(document, "touchstart", onTouchStart, { passive: false, capture: true }),
+    addEvent(document, "touchmove", onTouchMove, { passive: false, capture: true }),
+    addEvent(document, "blur", onBlur, true),
   );
 
   return () => {
@@ -204,7 +208,9 @@ function preventScrollMobileSafari(): () => void {
 
 // Sets a CSS property on an element, and returns a function to revert it to the previous value.
 function setStyle(element: HTMLElement, styleName: string, value: string): () => void {
-  const cur = element.style.getPropertyValue(styleName) || (element.style as unknown as Record<string, string>)[styleName];
+  const cur =
+    element.style.getPropertyValue(styleName) ||
+    (element.style as unknown as Record<string, string>)[styleName];
   (element.style as unknown as Record<string, string>)[styleName] = value;
 
   return () => {
@@ -217,7 +223,7 @@ function addEvent<K extends keyof GlobalEventHandlersEventMap>(
   target: Document | Window,
   event: K,
   handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => void,
-  options?: boolean | AddEventListenerOptions
+  options?: boolean | AddEventListenerOptions,
 ): () => void {
   target.addEventListener(event, handler as EventListener, options);
   return () => {
@@ -232,7 +238,7 @@ function scrollIntoViewWhenReady(target: Element, wasKeyboardVisible: boolean):
   } else {
     // Otherwise, wait for the visual viewport to resize before scrolling so we can
     // measure the correct position to scroll to.
-    visualViewport.addEventListener('resize', () => scrollIntoView(target), { once: true });
+    visualViewport.addEventListener("resize", () => scrollIntoView(target), { once: true });
   }
 }
 
@@ -242,21 +248,37 @@ function scrollIntoView(target: Element): void {
   while (nextTarget && nextTarget !== root) {
     // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
     const scrollableParent = getScrollParent(nextTarget);
-    if (scrollableParent !== document.documentElement && scrollableParent !== document.body && scrollableParent !== nextTarget) {
+    if (
+      scrollableParent !== document.documentElement &&
+      scrollableParent !== document.body &&
+      scrollableParent !== nextTarget
+    ) {
       const scrollableRect = scrollableParent.getBoundingClientRect();
       const targetRect = nextTarget.getBoundingClientRect();
-      if (targetRect.top < scrollableRect.top || targetRect.bottom > scrollableRect.top + nextTarget.clientHeight) {
+      if (
+        targetRect.top < scrollableRect.top ||
+        targetRect.bottom > scrollableRect.top + nextTarget.clientHeight
+      ) {
         let bottom = scrollableRect.bottom;
         if (visualViewport) {
           bottom = Math.min(bottom, visualViewport.offsetTop + visualViewport.height);
         }
 
         // Center within the viewport.
-        const adjustment = (targetRect.top - scrollableRect.top) - ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
+        const adjustment =
+          targetRect.top -
+          scrollableRect.top -
+          ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
         scrollableParent.scrollTo({
           // Clamp to the valid range to prevent over-scrolling.
-          top: Math.max(0, Math.min(scrollableParent.scrollHeight - scrollableParent.clientHeight, scrollableParent.scrollTop + adjustment)),
-          behavior: 'smooth'
+          top: Math.max(
+            0,
+            Math.min(
+              scrollableParent.scrollHeight - scrollableParent.clientHeight,
+              scrollableParent.scrollTop + adjustment,
+            ),
+          ),
+          behavior: "smooth",
         });
       }
     }

package/src/overlays/index.ts

@@ -1,5 +1,5 @@
 // Scroll prevention
-export { createPreventScroll, type PreventScrollOptions } from './createPreventScroll';
+export { createPreventScroll, type PreventScrollOptions } from "./createPreventScroll";
 
 // Overlay trigger
 export {
@@ -7,27 +7,16 @@ export {
   onCloseMap,
   type OverlayTriggerProps,
   type OverlayTriggerAria,
-} from './createOverlayTrigger';
+} from "./createOverlayTrigger";
 
 // Overlay behavior
-export {
-  createOverlay,
-  type AriaOverlayProps,
-  type OverlayAria,
-} from './createOverlay';
+export { createOverlay, type AriaOverlayProps, type OverlayAria } from "./createOverlay";
 
 // Interact outside detection
-export {
-  createInteractOutside,
-  type InteractOutsideProps,
-} from './createInteractOutside';
+export { createInteractOutside, type InteractOutsideProps } from "./createInteractOutside";
 
 // Aria hiding
-export {
-  ariaHideOutside,
-  keepVisible,
-  type AriaHideOutsideOptions,
-} from './ariaHideOutside';
+export { ariaHideOutside, keepVisible, type AriaHideOutsideOptions } from "./ariaHideOutside";
 
 // Modal
 export {
@@ -45,4 +34,4 @@ export {
   type PortalProviderContextValue,
   type AriaModalOptions,
   type ModalAria,
-} from './createModal';
+} from "./createModal";