@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/src/overlays/createPreventScroll.ts

@@ -1,10 +1,35 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/overlays/usePreventScroll.ts
+
 /**
  * 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";
+import { createTrackedEffect } from "solid-js";
+import {
+  chain,
+  getActiveElement,
+  getEventTarget,
+  getScrollParent,
+  isIOS,
+  isScrollable,
+  isWebKit,
+  willOpenKeyboard,
+} from "../utils";
+import { addEvent, setStyle } from "../utils/dom";
+import { getNonce } from "../utils/getNonce";
 
 export interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
@@ -23,7 +48,9 @@ let restore: (() => void) | undefined;
  * shift due to the scrollbars disappearing.
  */
 export function createPreventScroll(options: PreventScrollOptions = {}): void {
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     const isDisabled = options.isDisabled;
 
     if (isDisabled) {
@@ -32,20 +59,24 @@ export function createPreventScroll(options: PreventScrollOptions = {}): void {
 
     preventScrollCount++;
     if (preventScrollCount === 1) {
-      if (isIOS()) {
+      if (isIOS() && isWebKit()) {
         restore = preventScrollMobileSafari();
       } else {
         restore = preventScrollStandard();
       }
     }
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       preventScrollCount--;
       if (preventScrollCount === 0 && restore) {
         restore();
         restore = undefined;
       }
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 }
 
@@ -53,22 +84,15 @@ export function createPreventScroll(options: PreventScrollOptions = {}): void {
 // 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> = [];
-
+  const restoreOverflow = setStyle(document.documentElement, "overflow", "hidden");
+  let restoreGutter: (() => void) | undefined;
   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`));
-    }
+    restoreGutter =
+      "scrollbarGutter" in document.documentElement.style
+        ? setStyle(document.documentElement, "scrollbar-gutter", "stable")
+        : setStyle(document.documentElement, "padding-right", `${scrollbarWidth}px`);
   }
-
-  restoreFns.push(setStyle(document.documentElement, "overflow", "hidden"));
-
-  return () => {
-    restoreFns.forEach((fn) => fn());
-  };
+  return chain(restoreGutter, restoreOverflow);
 }
 
 // Mobile Safari is a whole different beast. Even with overflow: hidden,
@@ -95,12 +119,16 @@ function preventScrollStandard(): () => void {
 //    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 {
+  // Set overflow hidden so scrollIntoViewport() sees isScrollPrevented and
+  // scrolls only scroll parents instead of calling native scrollIntoView() which moves the window.
+  const restoreOverflow = setStyle(document.documentElement, "overflow", "hidden");
+
   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;
+    const target = getEventTarget(e) as Element;
     scrollable = isScrollable(target) ? target : getScrollParent(target, true);
     allowTouchMove = false;
 
@@ -110,6 +138,11 @@ function preventScrollMobileSafari(): () => void {
       allowTouchMove = true;
     }
 
+    // If this is a range input, allow touch move to allow user to adjust the slider value
+    if (e.composedPath().some((el) => el instanceof HTMLInputElement && el.type === "range")) {
+      allowTouchMove = true;
+    }
+
     // If this is a focused input element with a selected range, allow user to drag the selection handles.
     if (
       "selectionStart" in target &&
@@ -126,6 +159,13 @@ function preventScrollMobileSafari(): () => void {
   // 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");
+  // RAC usePreventScroll.ts:139-142 — a CSP-restricted page blocks an
+  // unlabelled inline <style>, and this one carries the overscroll containment
+  // the touch handlers below depend on.
+  const nonce = getNonce();
+  if (nonce) {
+    style.nonce = nonce;
+  }
   style.textContent = `
 @layer {
   * {
@@ -161,7 +201,7 @@ function preventScrollMobileSafari(): () => void {
   };
 
   const onBlur = (e: FocusEvent) => {
-    const target = e.target as HTMLElement;
+    const target = getEventTarget(e) 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.
@@ -180,54 +220,44 @@ function preventScrollMobileSafari(): () => void {
 
   // 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);
-    }
-  };
+  Reflect.defineProperty(HTMLElement.prototype, "focus", {
+    configurable: true,
+    writable: true,
+    value: function (opts?: FocusOptions) {
+      // Track whether the keyboard was already visible before.
+      const activeElement = getActiveElement();
+      const wasKeyboardVisible = activeElement != null && willOpenKeyboard(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),
+    addEvent(document, "touchstart", onTouchStart as EventListener, {
+      passive: false,
+      capture: true,
+    }),
+    addEvent(document, "touchmove", onTouchMove as EventListener, {
+      passive: false,
+      capture: true,
+    }),
+    addEvent(document, "blur", onBlur as EventListener, true),
   );
 
   return () => {
+    restoreOverflow();
     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);
+    Reflect.defineProperty(HTMLElement.prototype, "focus", {
+      configurable: true,
+      writable: true,
+      value: focus,
+    });
   };
 }
 

package/src/overlays/index.ts

@@ -35,3 +35,5 @@ export {
   type AriaModalOptions,
   type ModalAria,
 } from "./createModal";
+
+export { overlaysIntlStrings, type OverlaysIntlStrings } from "./intl";

package/src/overlays/intl/ar-AE.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "تجاهل"
+}

package/src/overlays/intl/bg-BG.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Отхвърляне"
+}

package/src/overlays/intl/cs-CZ.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Odstranit"
+}

package/src/overlays/intl/da-DK.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Luk"
+}

package/src/overlays/intl/de-DE.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Schließen"
+}

package/src/overlays/intl/el-GR.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Απόρριψη"
+}

package/src/overlays/intl/en-US.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Dismiss"
+}

package/src/overlays/intl/es-ES.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Descartar"
+}

package/src/overlays/intl/et-EE.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Lõpeta"
+}

package/src/overlays/intl/fi-FI.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Hylkää"
+}

package/src/overlays/intl/fr-FR.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Rejeter"
+}

package/src/overlays/intl/he-IL.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "התעלם"
+}

package/src/overlays/intl/hr-HR.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Odbaci"
+}

package/src/overlays/intl/hu-HU.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Elutasítás"
+}

package/src/overlays/intl/index.ts

@@ -0,0 +1,122 @@
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/ar-AE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/bg-BG.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/cs-CZ.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/da-DK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/de-DE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/el-GR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/en-US.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/es-ES.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/et-EE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/fi-FI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/fr-FR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/he-IL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/hr-HR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/hu-HU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/it-IT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/ja-JP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/ko-KR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/lt-LT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/lv-LV.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/nb-NO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/nl-NL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/pl-PL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/pt-BR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/pt-PT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/ro-RO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/ru-RU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/sk-SK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/sl-SI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/sr-SP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/sv-SE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/tr-TR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/uk-UA.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/zh-CN.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/overlays/zh-TW.json
+
+// Ported from @react-aria/overlays intl catalog.
+
+/**
+ * overlays internationalization strings.
+ *
+ * Copied verbatim from @react-aria/overlays intl JSON (RAC 1.21.0 / react-aria pin f56660b).
+ * LocalizedStringDictionary resolves the locale fallback chain
+ * (locale → language → sibling region → en-US).
+ */
+
+import type { LocalizedStrings } from "@internationalized/string";
+
+import arAE from "./ar-AE.json" with { type: "json" };
+import bgBG from "./bg-BG.json" with { type: "json" };
+import csCZ from "./cs-CZ.json" with { type: "json" };
+import daDK from "./da-DK.json" with { type: "json" };
+import deDE from "./de-DE.json" with { type: "json" };
+import elGR from "./el-GR.json" with { type: "json" };
+import enUS from "./en-US.json" with { type: "json" };
+import esES from "./es-ES.json" with { type: "json" };
+import etEE from "./et-EE.json" with { type: "json" };
+import fiFI from "./fi-FI.json" with { type: "json" };
+import frFR from "./fr-FR.json" with { type: "json" };
+import heIL from "./he-IL.json" with { type: "json" };
+import hrHR from "./hr-HR.json" with { type: "json" };
+import huHU from "./hu-HU.json" with { type: "json" };
+import itIT from "./it-IT.json" with { type: "json" };
+import jaJP from "./ja-JP.json" with { type: "json" };
+import koKR from "./ko-KR.json" with { type: "json" };
+import ltLT from "./lt-LT.json" with { type: "json" };
+import lvLV from "./lv-LV.json" with { type: "json" };
+import nbNO from "./nb-NO.json" with { type: "json" };
+import nlNL from "./nl-NL.json" with { type: "json" };
+import plPL from "./pl-PL.json" with { type: "json" };
+import ptBR from "./pt-BR.json" with { type: "json" };
+import ptPT from "./pt-PT.json" with { type: "json" };
+import roRO from "./ro-RO.json" with { type: "json" };
+import ruRU from "./ru-RU.json" with { type: "json" };
+import skSK from "./sk-SK.json" with { type: "json" };
+import slSI from "./sl-SI.json" with { type: "json" };
+import srSP from "./sr-SP.json" with { type: "json" };
+import svSE from "./sv-SE.json" with { type: "json" };
+import trTR from "./tr-TR.json" with { type: "json" };
+import ukUA from "./uk-UA.json" with { type: "json" };
+import zhCN from "./zh-CN.json" with { type: "json" };
+import zhTW from "./zh-TW.json" with { type: "json" };
+
+export type OverlaysIntlStrings = {
+  dismiss: string;
+};
+
+export const overlaysIntlStrings: LocalizedStrings<keyof OverlaysIntlStrings, string> = {
+  "ar-AE": arAE,
+  "bg-BG": bgBG,
+  "cs-CZ": csCZ,
+  "da-DK": daDK,
+  "de-DE": deDE,
+  "el-GR": elGR,
+  "en-US": enUS,
+  "es-ES": esES,
+  "et-EE": etEE,
+  "fi-FI": fiFI,
+  "fr-FR": frFR,
+  "he-IL": heIL,
+  "hr-HR": hrHR,
+  "hu-HU": huHU,
+  "it-IT": itIT,
+  "ja-JP": jaJP,
+  "ko-KR": koKR,
+  "lt-LT": ltLT,
+  "lv-LV": lvLV,
+  "nb-NO": nbNO,
+  "nl-NL": nlNL,
+  "pl-PL": plPL,
+  "pt-BR": ptBR,
+  "pt-PT": ptPT,
+  "ro-RO": roRO,
+  "ru-RU": ruRU,
+  "sk-SK": skSK,
+  "sl-SI": slSI,
+  "sr-SP": srSP,
+  "sv-SE": svSE,
+  "tr-TR": trTR,
+  "uk-UA": ukUA,
+  "zh-CN": zhCN,
+  "zh-TW": zhTW,
+};

package/src/overlays/intl/it-IT.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Ignora"
+}

package/src/overlays/intl/ja-JP.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "閉じる"
+}

package/src/overlays/intl/ko-KR.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "무시"
+}

package/src/overlays/intl/lt-LT.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Atmesti"
+}

package/src/overlays/intl/lv-LV.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Nerādīt"
+}

package/src/overlays/intl/nb-NO.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Lukk"
+}

package/src/overlays/intl/nl-NL.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Negeren"
+}

package/src/overlays/intl/pl-PL.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Zignoruj"
+}

package/src/overlays/intl/pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Descartar"
+}

package/src/overlays/intl/pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Dispensar"
+}

package/src/overlays/intl/ro-RO.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Revocare"
+}

package/src/overlays/intl/ru-RU.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Пропустить"
+}

package/src/overlays/intl/sk-SK.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Zrušiť"
+}

package/src/overlays/intl/sl-SI.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Opusti"
+}

package/src/overlays/intl/sr-SP.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Odbaci"
+}

package/src/overlays/intl/sv-SE.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Avvisa"
+}

package/src/overlays/intl/tr-TR.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Kapat"
+}

package/src/overlays/intl/uk-UA.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "Скасувати"
+}

package/src/overlays/intl/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "取消"
+}

package/src/overlays/intl/zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "dismiss": "關閉"
+}

package/src/popover/calculatePosition.ts

@@ -1,6 +1,20 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/overlays/calculatePosition.ts
+
 /**
  * Position calculation utilities for popovers and overlays.
- * Ported from @react-aria/overlays calculatePosition.ts
+ * Ported from packages/react-aria/src/overlays/calculatePosition.ts.
  */
 
 // Types
@@ -157,9 +171,13 @@ function getContainerDimensions(
     scroll.top = documentElement.scrollTop || (containerNode as HTMLElement).scrollTop;
     scroll.left = documentElement.scrollLeft || (containerNode as HTMLElement).scrollLeft;
 
+    // The goal of the below is to get a top/left value that represents the top/left of the visual viewport with
+    // respect to the layout viewport origin. This combined with the scrollTop/scrollLeft will allow us to calculate
+    // coordinates/values with respect to the visual viewport or with respect to the layout viewport.
+    // Uses pageTop/pageLeft instead of offsetTop/offsetLeft because WebKit misreports those during pans.
     if (visualViewport) {
-      top = visualViewport.offsetTop;
-      left = visualViewport.offsetLeft;
+      top = Math.max(0, visualViewport.pageTop - (scroll.top ?? 0));
+      left = Math.max(0, visualViewport.pageLeft - (scroll.left ?? 0));
     }
   } else {
     ({ width, height, top, left } = getElementOffset(containerNode, false));