@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/overlays/createPreventScroll.ts

@@ -1,266 +1,266 @@
-/**
- * Prevents scrolling on the document body while mounted.
- * Based on @react-aria/overlays usePreventScroll.
- */
-
-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;
-
-// The number of active createPreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
-let preventScrollCount = 0;
-let restore: (() => void) | undefined;
-
-/**
- * Prevents scrolling on the document body on mount, and
- * restores it on unmount. Also ensures that content does not
- * shift due to the scrollbars disappearing.
- */
-export function createPreventScroll(options: PreventScrollOptions = {}): void {
-  createEffect(() => {
-    const isDisabled = options.isDisabled;
-
-    if (isDisabled) {
-      return;
-    }
-
-    preventScrollCount++;
-    if (preventScrollCount === 1) {
-      if (isIOS()) {
-        restore = preventScrollMobileSafari();
-      } else {
-        restore = preventScrollStandard();
-      }
-    }
-
-    onCleanup(() => {
-      preventScrollCount--;
-      if (preventScrollCount === 0 && restore) {
-        restore();
-        restore = undefined;
-      }
-    });
-  });
-}
-
-// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
-// add some padding to prevent the page from shifting when the scrollbar is hidden.
-function preventScrollStandard(): () => void {
-  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-  const restoreFns: Array<() => 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'));
-    } else {
-      restoreFns.push(setStyle(document.documentElement, 'paddingRight', `${scrollbarWidth}px`));
-    }
-  }
-
-  restoreFns.push(setStyle(document.documentElement, 'overflow', 'hidden'));
-
-  return () => {
-    restoreFns.forEach((fn) => fn());
-  };
-}
-
-// Mobile Safari is a whole different beast. Even with overflow: hidden,
-// it still scrolls the page in many situations:
-//
-// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
-// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
-//    it, so it becomes scrollable.
-// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
-//    This may cause even fixed position elements to scroll off the screen.
-// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
-//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
-//
-// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
-//
-// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
-//    on the window.
-// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
-//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
-//    by preventing default in a `touchmove` event. This is best effort: we can't prevent default when pinch
-//    zooming or when an element contains text selection, which may allow scrolling in some cases.
-// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
-// 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents
-//    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
-//    ourselves, without scrolling the whole page.
-function preventScrollMobileSafari(): () => void {
-  let scrollable: Element;
-  let allowTouchMove = false;
-
-  const onTouchStart = (e: TouchEvent) => {
-    // Store the nearest scrollable parent element from the element that the user touched.
-    const target = e.target as Element;
-    scrollable = isScrollable(target) ? target : getScrollParent(target, true);
-    allowTouchMove = false;
-
-    // If the target is selected, don't preventDefault in touchmove to allow user to adjust selection.
-    const selection = target.ownerDocument.defaultView!.getSelection();
-    if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
-      allowTouchMove = true;
-    }
-
-    // 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 &&
-      (target.selectionStart as number) < (target.selectionEnd as number) &&
-      target.ownerDocument.activeElement === target
-    ) {
-      allowTouchMove = true;
-    }
-  };
-
-  // Prevent scrolling up when at the top and scrolling down when at the bottom
-  // 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');
-  style.textContent = `
-@layer {
-  * {
-    overscroll-behavior: contain;
-  }
-}`.trim();
-  document.head.prepend(style);
-
-  const onTouchMove = (e: TouchEvent) => {
-    // Allow pinch-zooming.
-    if (e.touches.length === 2 || allowTouchMove) {
-      return;
-    }
-
-    // Prevent scrolling the window.
-    if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
-      e.preventDefault();
-      return;
-    }
-
-    // overscroll-behavior should prevent scroll chaining, but currently does not
-    // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452
-    // This checks that both the width and height do not overflow, otherwise we might
-    // 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) {
-      e.preventDefault();
-    }
-  };
-
-  const onBlur = (e: FocusEvent) => {
-    const target = e.target as HTMLElement;
-    const relatedTarget = e.relatedTarget as HTMLElement | null;
-    if (relatedTarget && willOpenKeyboard(relatedTarget)) {
-      // Focus without scrolling the whole page, and then scroll into view manually.
-      relatedTarget.focus({ preventScroll: true });
-      scrollIntoViewWhenReady(relatedTarget, willOpenKeyboard(target));
-    } else if (!relatedTarget) {
-      // When tapping the Done button on the keyboard, focus moves to the body.
-      // FocusScope will then restore focus back to the input. Later when tapping
-      // 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;
-      focusable?.focus({ preventScroll: true });
-    }
-  };
-
-  // Override programmatic focus to scroll into view without scrolling the whole page.
-  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);
-
-    // Focus the element without scrolling the page.
-    focus.call(this, { ...opts, preventScroll: true });
-
-    if (!opts || !opts.preventScroll) {
-      scrollIntoViewWhenReady(this, wasKeyboardVisible);
-    }
-  };
-
-  const removeEvents = chain(
-    addEvent(document, 'touchstart', onTouchStart, { passive: false, capture: true }),
-    addEvent(document, 'touchmove', onTouchMove, { passive: false, capture: true }),
-    addEvent(document, 'blur', onBlur, true)
-  );
-
-  return () => {
-    removeEvents();
-    style.remove();
-    HTMLElement.prototype.focus = focus;
-  };
-}
-
-// 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];
-  (element.style as unknown as Record<string, string>)[styleName] = value;
-
-  return () => {
-    (element.style as unknown as Record<string, string>)[styleName] = cur;
-  };
-}
-
-// Adds an event listener to an element, and returns a function to remove it.
-function addEvent<K extends keyof GlobalEventHandlersEventMap>(
-  target: Document | Window,
-  event: K,
-  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => void,
-  options?: boolean | AddEventListenerOptions
-): () => void {
-  target.addEventListener(event, handler as EventListener, options);
-  return () => {
-    target.removeEventListener(event, handler as EventListener, options);
-  };
-}
-
-function scrollIntoViewWhenReady(target: Element, wasKeyboardVisible: boolean): void {
-  if (wasKeyboardVisible || !visualViewport) {
-    // If the keyboard was already visible, scroll the target into view immediately.
-    scrollIntoView(target);
-  } 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 });
-  }
-}
-
-function scrollIntoView(target: Element): void {
-  const root = document.scrollingElement || document.documentElement;
-  let nextTarget: Element | null = target;
-  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) {
-      const scrollableRect = scrollableParent.getBoundingClientRect();
-      const targetRect = nextTarget.getBoundingClientRect();
-      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);
-        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'
-        });
-      }
-    }
-
-    nextTarget = scrollableParent.parentElement;
-  }
-}
+/**
+ * Prevents scrolling on the document body while mounted.
+ * Based on @react-aria/overlays usePreventScroll.
+ */
+
+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;
+
+// The number of active createPreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+let preventScrollCount = 0;
+let restore: (() => void) | undefined;
+
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+export function createPreventScroll(options: PreventScrollOptions = {}): void {
+  createEffect(() => {
+    const isDisabled = options.isDisabled;
+
+    if (isDisabled) {
+      return;
+    }
+
+    preventScrollCount++;
+    if (preventScrollCount === 1) {
+      if (isIOS()) {
+        restore = preventScrollMobileSafari();
+      } else {
+        restore = preventScrollStandard();
+      }
+    }
+
+    onCleanup(() => {
+      preventScrollCount--;
+      if (preventScrollCount === 0 && restore) {
+        restore();
+        restore = undefined;
+      }
+    });
+  });
+}
+
+// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
+// add some padding to prevent the page from shifting when the scrollbar is hidden.
+function preventScrollStandard(): () => void {
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+  const restoreFns: Array<() => 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'));
+    } else {
+      restoreFns.push(setStyle(document.documentElement, 'paddingRight', `${scrollbarWidth}px`));
+    }
+  }
+
+  restoreFns.push(setStyle(document.documentElement, 'overflow', 'hidden'));
+
+  return () => {
+    restoreFns.forEach((fn) => fn());
+  };
+}
+
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
+//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
+//    by preventing default in a `touchmove` event. This is best effort: we can't prevent default when pinch
+//    zooming or when an element contains text selection, which may allow scrolling in some cases.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents
+//    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
+//    ourselves, without scrolling the whole page.
+function preventScrollMobileSafari(): () => void {
+  let scrollable: Element;
+  let allowTouchMove = false;
+
+  const onTouchStart = (e: TouchEvent) => {
+    // Store the nearest scrollable parent element from the element that the user touched.
+    const target = e.target as Element;
+    scrollable = isScrollable(target) ? target : getScrollParent(target, true);
+    allowTouchMove = false;
+
+    // If the target is selected, don't preventDefault in touchmove to allow user to adjust selection.
+    const selection = target.ownerDocument.defaultView!.getSelection();
+    if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
+      allowTouchMove = true;
+    }
+
+    // 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 &&
+      (target.selectionStart as number) < (target.selectionEnd as number) &&
+      target.ownerDocument.activeElement === target
+    ) {
+      allowTouchMove = true;
+    }
+  };
+
+  // Prevent scrolling up when at the top and scrolling down when at the bottom
+  // 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');
+  style.textContent = `
+@layer {
+  * {
+    overscroll-behavior: contain;
+  }
+}`.trim();
+  document.head.prepend(style);
+
+  const onTouchMove = (e: TouchEvent) => {
+    // Allow pinch-zooming.
+    if (e.touches.length === 2 || allowTouchMove) {
+      return;
+    }
+
+    // Prevent scrolling the window.
+    if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+      e.preventDefault();
+      return;
+    }
+
+    // overscroll-behavior should prevent scroll chaining, but currently does not
+    // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452
+    // This checks that both the width and height do not overflow, otherwise we might
+    // 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) {
+      e.preventDefault();
+    }
+  };
+
+  const onBlur = (e: FocusEvent) => {
+    const target = e.target as HTMLElement;
+    const relatedTarget = e.relatedTarget as HTMLElement | null;
+    if (relatedTarget && willOpenKeyboard(relatedTarget)) {
+      // Focus without scrolling the whole page, and then scroll into view manually.
+      relatedTarget.focus({ preventScroll: true });
+      scrollIntoViewWhenReady(relatedTarget, willOpenKeyboard(target));
+    } else if (!relatedTarget) {
+      // When tapping the Done button on the keyboard, focus moves to the body.
+      // FocusScope will then restore focus back to the input. Later when tapping
+      // 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;
+      focusable?.focus({ preventScroll: true });
+    }
+  };
+
+  // Override programmatic focus to scroll into view without scrolling the whole page.
+  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);
+
+    // Focus the element without scrolling the page.
+    focus.call(this, { ...opts, preventScroll: true });
+
+    if (!opts || !opts.preventScroll) {
+      scrollIntoViewWhenReady(this, wasKeyboardVisible);
+    }
+  };
+
+  const removeEvents = chain(
+    addEvent(document, 'touchstart', onTouchStart, { passive: false, capture: true }),
+    addEvent(document, 'touchmove', onTouchMove, { passive: false, capture: true }),
+    addEvent(document, 'blur', onBlur, true)
+  );
+
+  return () => {
+    removeEvents();
+    style.remove();
+    HTMLElement.prototype.focus = focus;
+  };
+}
+
+// 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];
+  (element.style as unknown as Record<string, string>)[styleName] = value;
+
+  return () => {
+    (element.style as unknown as Record<string, string>)[styleName] = cur;
+  };
+}
+
+// Adds an event listener to an element, and returns a function to remove it.
+function addEvent<K extends keyof GlobalEventHandlersEventMap>(
+  target: Document | Window,
+  event: K,
+  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => void,
+  options?: boolean | AddEventListenerOptions
+): () => void {
+  target.addEventListener(event, handler as EventListener, options);
+  return () => {
+    target.removeEventListener(event, handler as EventListener, options);
+  };
+}
+
+function scrollIntoViewWhenReady(target: Element, wasKeyboardVisible: boolean): void {
+  if (wasKeyboardVisible || !visualViewport) {
+    // If the keyboard was already visible, scroll the target into view immediately.
+    scrollIntoView(target);
+  } 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 });
+  }
+}
+
+function scrollIntoView(target: Element): void {
+  const root = document.scrollingElement || document.documentElement;
+  let nextTarget: Element | null = target;
+  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) {
+      const scrollableRect = scrollableParent.getBoundingClientRect();
+      const targetRect = nextTarget.getBoundingClientRect();
+      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);
+        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'
+        });
+      }
+    }
+
+    nextTarget = scrollableParent.parentElement;
+  }
+}

package/src/overlays/index.ts

@@ -1,44 +1,48 @@
-// Scroll prevention
-export { createPreventScroll, type PreventScrollOptions } from './createPreventScroll';
-
-// Overlay trigger
-export {
-  createOverlayTrigger,
-  onCloseMap,
-  type OverlayTriggerProps,
-  type OverlayTriggerAria,
-} from './createOverlayTrigger';
-
-// Overlay behavior
-export {
-  createOverlay,
-  type AriaOverlayProps,
-  type OverlayAria,
-} from './createOverlay';
-
-// Interact outside detection
-export {
-  createInteractOutside,
-  type InteractOutsideProps,
-} from './createInteractOutside';
-
-// Aria hiding
-export {
-  ariaHideOutside,
-  keepVisible,
-  type AriaHideOutsideOptions,
-} from './ariaHideOutside';
-
-// Modal
-export {
-  ModalProvider,
-  OverlayProvider,
-  OverlayContainer,
-  useModalProvider,
-  createModal,
-  type ModalProviderProps,
-  type ModalProviderAria,
-  type OverlayContainerProps,
-  type AriaModalOptions,
-  type ModalAria,
-} from './createModal';
+// Scroll prevention
+export { createPreventScroll, type PreventScrollOptions } from './createPreventScroll';
+
+// Overlay trigger
+export {
+  createOverlayTrigger,
+  onCloseMap,
+  type OverlayTriggerProps,
+  type OverlayTriggerAria,
+} from './createOverlayTrigger';
+
+// Overlay behavior
+export {
+  createOverlay,
+  type AriaOverlayProps,
+  type OverlayAria,
+} from './createOverlay';
+
+// Interact outside detection
+export {
+  createInteractOutside,
+  type InteractOutsideProps,
+} from './createInteractOutside';
+
+// Aria hiding
+export {
+  ariaHideOutside,
+  keepVisible,
+  type AriaHideOutsideOptions,
+} from './ariaHideOutside';
+
+// Modal
+export {
+  ModalProvider,
+  OverlayProvider,
+  OverlayContainer,
+  UNSAFE_PortalProvider,
+  useModalProvider,
+  useUNSAFE_PortalContext,
+  createModal,
+  type ModalProviderProps,
+  type ModalProviderAria,
+  type OverlayContainerProps,
+  type PortalProviderProps,
+  type PortalProviderContextValue,
+  type AriaModalOptions,
+  type ModalAria,
+} from './createModal';