@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/utils/scrollIntoView.ts

@@ -0,0 +1,181 @@
+/**
+ * Scroll-into-view utilities.
+ * Based on @react-aria/utils scrollIntoView (react-aria/src/utils/scrollIntoView.ts).
+ */
+
+import { getScrollParents } from "./dom";
+import { isIOS } from "./platform";
+import { isTestEnv } from "./env";
+
+interface ScrollIntoViewOpts {
+  /** The position to align items along the block axis in. */
+  block?: ScrollLogicalPosition;
+  /** The position to align items along the inline axis in. */
+  inline?: ScrollLogicalPosition;
+}
+
+interface ScrollIntoViewportOpts {
+  /** The optional containing element of the target to be centered in the viewport. */
+  containingElement?: Element | null;
+}
+
+/**
+ * Scrolls `scrollView` so that `element` is visible.
+ * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
+ * but doesn't affect parents above `scrollView`.
+ */
+export function scrollIntoView(
+  scrollView: HTMLElement,
+  element: HTMLElement,
+  opts: ScrollIntoViewOpts = {},
+): void {
+  const { block = "nearest", inline = "nearest" } = opts;
+
+  if (scrollView === element) {
+    return;
+  }
+
+  let y = scrollView.scrollTop;
+  let x = scrollView.scrollLeft;
+
+  const target = element.getBoundingClientRect();
+  const view = scrollView.getBoundingClientRect();
+  const itemStyle = window.getComputedStyle(element);
+  const viewStyle = window.getComputedStyle(scrollView);
+  const root = document.scrollingElement || document.documentElement;
+  const isRoot = scrollView === root;
+
+  const viewTop = scrollView === root ? 0 : view.top;
+  const viewBottom = scrollView === root ? scrollView.clientHeight : view.bottom;
+  const viewLeft = scrollView === root ? 0 : view.left;
+  const viewRight = scrollView === root ? scrollView.clientWidth : view.right;
+
+  const scrollMarginTop = parseFloat(itemStyle.scrollMarginTop) || 0;
+  const scrollMarginBottom = parseFloat(itemStyle.scrollMarginBottom) || 0;
+  const scrollMarginLeft = parseFloat(itemStyle.scrollMarginLeft) || 0;
+  const scrollMarginRight = parseFloat(itemStyle.scrollMarginRight) || 0;
+
+  const scrollPaddingTop = parseFloat(viewStyle.scrollPaddingTop) || 0;
+  const scrollPaddingBottom = parseFloat(viewStyle.scrollPaddingBottom) || 0;
+  const scrollPaddingLeft = parseFloat(viewStyle.scrollPaddingLeft) || 0;
+  const scrollPaddingRight = parseFloat(viewStyle.scrollPaddingRight) || 0;
+
+  const borderTopWidth = parseFloat(viewStyle.borderTopWidth) || 0;
+  const borderBottomWidth = parseFloat(viewStyle.borderBottomWidth) || 0;
+  const borderLeftWidth = parseFloat(viewStyle.borderLeftWidth) || 0;
+  const borderRightWidth = parseFloat(viewStyle.borderRightWidth) || 0;
+
+  const scrollAreaTop = target.top - scrollMarginTop;
+  const scrollAreaBottom = target.bottom + scrollMarginBottom;
+  const scrollAreaLeft = target.left - scrollMarginLeft;
+  const scrollAreaRight = target.right + scrollMarginRight;
+
+  const scrollBarOffsetX = scrollView === root ? 0 : borderLeftWidth + borderRightWidth;
+  const scrollBarOffsetY = scrollView === root ? 0 : borderTopWidth + borderBottomWidth;
+  const scrollBarWidth =
+    scrollView === root ? 0 : scrollView.offsetWidth - scrollView.clientWidth - scrollBarOffsetX;
+  const scrollBarHeight =
+    scrollView === root ? 0 : scrollView.offsetHeight - scrollView.clientHeight - scrollBarOffsetY;
+
+  const scrollPortTop = viewTop + (isRoot ? 0 : borderTopWidth) + scrollPaddingTop;
+  const scrollPortBottom =
+    viewBottom - (isRoot ? 0 : borderBottomWidth) - scrollPaddingBottom - scrollBarHeight;
+  let scrollPortLeft = viewLeft + (isRoot ? 0 : borderLeftWidth) + scrollPaddingLeft;
+  let scrollPortRight = viewRight - (isRoot ? 0 : borderRightWidth) - scrollPaddingRight;
+
+  // IOS always positions the scrollbar on the right ¯\_(ツ)_/¯
+  if (viewStyle.direction === "rtl" && !isIOS()) {
+    scrollPortLeft += scrollBarWidth;
+  } else {
+    scrollPortRight -= scrollBarWidth;
+  }
+
+  const shouldScrollBlock = scrollAreaTop < scrollPortTop || scrollAreaBottom > scrollPortBottom;
+  const shouldScrollInline = scrollAreaLeft < scrollPortLeft || scrollAreaRight > scrollPortRight;
+
+  if (shouldScrollBlock && block === "start") {
+    y += scrollAreaTop - scrollPortTop;
+  } else if (shouldScrollBlock && block === "center") {
+    y += (scrollAreaTop + scrollAreaBottom) / 2 - (scrollPortTop + scrollPortBottom) / 2;
+  } else if (shouldScrollBlock && block === "end") {
+    y += scrollAreaBottom - scrollPortBottom;
+  } else if (shouldScrollBlock && block === "nearest") {
+    const start = scrollAreaTop - scrollPortTop;
+    const end = scrollAreaBottom - scrollPortBottom;
+    y += Math.abs(start) <= Math.abs(end) ? start : end;
+  }
+
+  if (shouldScrollInline && inline === "start") {
+    x += scrollAreaLeft - scrollPortLeft;
+  } else if (shouldScrollInline && inline === "center") {
+    x += (scrollAreaLeft + scrollAreaRight) / 2 - (scrollPortLeft + scrollPortRight) / 2;
+  } else if (shouldScrollInline && inline === "end") {
+    x += scrollAreaRight - scrollPortRight;
+  } else if (shouldScrollInline && inline === "nearest") {
+    const start = scrollAreaLeft - scrollPortLeft;
+    const end = scrollAreaRight - scrollPortRight;
+    x += Math.abs(start) <= Math.abs(end) ? start : end;
+  }
+
+  if (isTestEnv()) {
+    scrollView.scrollLeft = x;
+    scrollView.scrollTop = y;
+    return;
+  }
+
+  scrollView.scrollTo({ left: x, top: y });
+}
+
+/**
+ * Scrolls the `targetElement` so it is visible in the viewport. Accepts an optional
+ * `opts.containingElement` that will be centered in the viewport prior to scrolling the
+ * targetElement into view. If scrolling is prevented on the body (e.g. targetElement is in a
+ * popover), this will only scroll the scroll parents of the targetElement up to but not including
+ * the body itself.
+ */
+export function scrollIntoViewport(
+  targetElement: Element | null,
+  opts: ScrollIntoViewportOpts = {},
+): void {
+  const { containingElement } = opts;
+  if (targetElement && targetElement.isConnected) {
+    const root = document.scrollingElement || document.documentElement;
+    const isScrollPrevented = window.getComputedStyle(root).overflow === "hidden";
+    if (!isScrollPrevented) {
+      const { left: originalLeft, top: originalTop } = targetElement.getBoundingClientRect();
+
+      // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()
+      // won't cause a scroll if the element is already focused and doesn't behave consistently when an element is partially out of view horizontally vs vertically
+      targetElement?.scrollIntoView?.({ block: "nearest" });
+      const { left: newLeft, top: newTop } = targetElement.getBoundingClientRect();
+      // Account for sub pixel differences from rounding
+      if (Math.abs(originalLeft - newLeft) > 1 || Math.abs(originalTop - newTop) > 1) {
+        containingElement?.scrollIntoView?.({ block: "center", inline: "center" });
+        targetElement.scrollIntoView?.({ block: "nearest" });
+      }
+    } else {
+      const { left: originalLeft, top: originalTop } = targetElement.getBoundingClientRect();
+
+      // If scrolling is prevented, we don't want to scroll the body since it might move the overlay partially offscreen and the user can't scroll it back into view.
+      let scrollParents = getScrollParents(targetElement, true);
+      for (const scrollParent of scrollParents) {
+        scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
+      }
+      const { left: newLeft, top: newTop } = targetElement.getBoundingClientRect();
+      // Account for sub pixel differences from rounding
+      if (Math.abs(originalLeft - newLeft) > 1 || Math.abs(originalTop - newTop) > 1) {
+        scrollParents = containingElement ? getScrollParents(containingElement, true) : [];
+        // scroll containing element into view first, then rescroll target element into view like the non chrome flow above
+        for (const scrollParent of scrollParents) {
+          scrollIntoView(scrollParent as HTMLElement, containingElement as HTMLElement, {
+            block: "center",
+            inline: "center",
+          });
+        }
+        for (const scrollParent of getScrollParents(targetElement, true)) {
+          scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
+        }
+      }
+    }
+  }
+}

package/src/utils/textSelection.ts

@@ -7,14 +7,14 @@
  * we can just set it on the target element.
  */
 
-import { isIOS } from './platform';
-import { getOwnerDocument } from './dom';
+import { isIOS } from "./platform";
+import { getOwnerDocument } from "./dom";
 
-type State = 'default' | 'disabled' | 'restoring';
+type State = "default" | "disabled" | "restoring";
 
 // Global state to manage text selection across multiple press interactions
-let state: State = 'default';
-let savedUserSelect = '';
+let state: State = "default";
+let savedUserSelect = "";
 let modifiedElementMap = new WeakMap<HTMLElement, string>();
 
 /**
@@ -24,18 +24,18 @@ let modifiedElementMap = new WeakMap<HTMLElement, string>();
 export function disableTextSelection(target?: HTMLElement): void {
   if (isIOS()) {
     // iOS requires disabling selection on the entire page
-    if (state === 'default') {
+    if (state === "default") {
       const documentElement = getOwnerDocument(target).documentElement;
       savedUserSelect = documentElement.style.webkitUserSelect;
-      documentElement.style.webkitUserSelect = 'none';
+      documentElement.style.webkitUserSelect = "none";
     }
-    state = 'disabled';
+    state = "disabled";
   } else if (target) {
     // On other platforms, just disable on the target
     const element = target as HTMLElement;
     if (!modifiedElementMap.has(element)) {
       modifiedElementMap.set(element, element.style.userSelect);
-      element.style.userSelect = 'none';
+      element.style.userSelect = "none";
     }
   }
 }
@@ -47,11 +47,11 @@ export function disableTextSelection(target?: HTMLElement): void {
 export function restoreTextSelection(target?: HTMLElement): void {
   if (isIOS()) {
     // Don't restore if another press is active
-    if (state !== 'disabled') {
+    if (state !== "disabled") {
       return;
     }
 
-    state = 'restoring';
+    state = "restoring";
 
     // Wait for iOS to finish any pending selection actions
     // 300ms is the iOS long-press delay
@@ -59,15 +59,15 @@ export function restoreTextSelection(target?: HTMLElement): void {
       // Use runAfterTransition to avoid CSS recomputation during animation
       runAfterTransition(() => {
         // Only restore if still in 'restoring' state (no new press started)
-        if (state === 'restoring') {
+        if (state === "restoring") {
           const documentElement = getOwnerDocument(target).documentElement;
           if (savedUserSelect) {
             documentElement.style.webkitUserSelect = savedUserSelect;
           } else {
-            documentElement.style.removeProperty('-webkit-user-select');
+            documentElement.style.removeProperty("-webkit-user-select");
           }
-          savedUserSelect = '';
-          state = 'default';
+          savedUserSelect = "";
+          state = "default";
         }
       });
     }, 300);
@@ -79,7 +79,7 @@ export function restoreTextSelection(target?: HTMLElement): void {
       if (savedValue) {
         element.style.userSelect = savedValue;
       } else {
-        element.style.removeProperty('user-select');
+        element.style.removeProperty("user-select");
       }
       modifiedElementMap.delete(element);
     }

package/src/visually-hidden/createVisuallyHidden.ts

@@ -7,14 +7,10 @@
  * Port of react-aria's useVisuallyHidden.
  */
 
-import { type Accessor, type JSX, createMemo, createSignal } from 'solid-js';
-import { createFocusWithin } from '../interactions/createFocusWithin';
-import { access, type MaybeAccessor } from '../utils';
-import { mergeProps } from '../utils/mergeProps';
-
-// ============================================
-// TYPES
-// ============================================
+import { type Accessor, type JSX, createMemo, createSignal } from "solid-js";
+import { createFocusWithin } from "../interactions/createFocusWithin";
+import { access, type MaybeAccessor } from "../utils";
+import { mergeProps } from "../utils/mergeProps";
 
 export interface AriaVisuallyHiddenProps {
   /** Inline styles to merge with the visually hidden styles. */
@@ -28,31 +24,23 @@ export interface VisuallyHiddenAria {
   visuallyHiddenProps: Accessor<JSX.HTMLAttributes<HTMLElement>>;
 }
 
-// ============================================
-// STYLES
-// ============================================
-
 /**
  * CSS styles that visually hide an element while keeping it accessible.
  * These styles ensure the element is read by screen readers but not visible on screen.
  */
 export const visuallyHiddenStyles: JSX.CSSProperties = {
-  border: '0',
-  clip: 'rect(0 0 0 0)',
-  'clip-path': 'inset(50%)',
-  height: '1px',
-  margin: '-1px',
-  overflow: 'hidden',
-  padding: '0',
-  position: 'absolute',
-  width: '1px',
-  'white-space': 'nowrap',
+  border: "0",
+  clip: "rect(0 0 0 0)",
+  "clip-path": "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: "0",
+  position: "absolute",
+  width: "1px",
+  "white-space": "nowrap",
 };
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Provides props for an element that hides its children visually
  * but keeps content visible to assistive technology.
@@ -87,7 +75,7 @@ export const visuallyHiddenStyles: JSX.CSSProperties = {
  * ```
  */
 export function createVisuallyHidden(
-  props: MaybeAccessor<AriaVisuallyHiddenProps> = {}
+  props: MaybeAccessor<AriaVisuallyHiddenProps> = {},
 ): VisuallyHiddenAria {
   const [isFocused, setIsFocused] = createSignal(false);
 
@@ -129,7 +117,7 @@ export function createVisuallyHidden(
             },
           }
         : {},
-      { style: combinedStyles() }
+      { style: combinedStyles() },
     ),
   }));
 

package/src/visually-hidden/index.ts

@@ -3,4 +3,4 @@ export {
   visuallyHiddenStyles,
   type AriaVisuallyHiddenProps,
   type VisuallyHiddenAria,
-} from './createVisuallyHidden';
+} from "./createVisuallyHidden";

package/dist/i18n/NumberFormatter.d.ts

@@ -1,43 +0,0 @@
-/**
- * NumberFormatter for solidaria
- *
- * A wrapper around Intl.NumberFormat with caching and polyfills.
- *
- * Port of @internationalized/number NumberFormatter.
- */
-export interface NumberFormatOptions extends Intl.NumberFormatOptions {
-    /** Overrides default numbering system for the current locale. */
-    numberingSystem?: string;
-}
-interface NumberRangeFormatPart extends Intl.NumberFormatPart {
-    source: 'startRange' | 'endRange' | 'shared';
-}
-/**
- * A wrapper around Intl.NumberFormat providing additional options, polyfills, and caching.
- *
- * @example
- * ```ts
- * const formatter = new NumberFormatter('en-US', {
- *   style: 'currency',
- *   currency: 'USD',
- * });
- * formatter.format(1234.56); // '$1,234.56'
- * ```
- */
-export declare class NumberFormatter implements Intl.NumberFormat {
-    private numberFormatter;
-    private options;
-    constructor(locale: string, options?: NumberFormatOptions);
-    /** Formats a number value as a string, according to the locale and options. */
-    format(value: number): string;
-    /** Formats a number to an array of parts. */
-    formatToParts(value: number): Intl.NumberFormatPart[];
-    /** Formats a number range as a string. */
-    formatRange(start: number, end: number): string;
-    /** Formats a number range as an array of parts. */
-    formatRangeToParts(start: number, end: number): NumberRangeFormatPart[];
-    /** Returns the resolved formatting options. */
-    resolvedOptions(): Intl.ResolvedNumberFormatOptions;
-}
-export {};
-//# sourceMappingURL=NumberFormatter.d.ts.map

package/dist/i18n/NumberFormatter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumberFormatter.d.ts","sourceRoot":"","sources":["../../src/i18n/NumberFormatter.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA6CH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB;IACnE,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,UAAU,qBAAsB,SAAQ,IAAI,CAAC,gBAAgB;IAC3D,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;CAC9C;AAuGD;;;;;;;;;;;GAWG;AACH,qBAAa,eAAgB,YAAW,IAAI,CAAC,YAAY;IACvD,OAAO,CAAC,eAAe,CAAoB;IAC3C,OAAO,CAAC,OAAO,CAAsB;gBAEzB,MAAM,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB;IAK7D,+EAA+E;IAC/E,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAyB7B,6CAA6C;IAC7C,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE;IAIrD,0CAA0C;IAC1C,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM;IAa/C,mDAAmD;IACnD,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,qBAAqB,EAAE;IAkBvE,+CAA+C;IAC/C,eAAe,IAAI,IAAI,CAAC,2BAA2B;CAkBpD"}