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

package/src/color/createColorArea.ts

@@ -1,14 +1,33 @@
+/*
+ * 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/color/useColorArea.ts
+
 /**
  * createColorArea hook.
  *
  * Provides ARIA attributes and keyboard/pointer handling for a 2D color area.
+ *
+ * Ported from packages/react-aria/src/color/useColorArea.ts.
  */
 
-import { createMemo, createSignal, type Accessor } from "solid-js";
+import { onOwnedCleanup } from "../utils/owner";
+import { createMemo, createSignal } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color, ColorAreaState, ColorChannel } from "@proyecto-viviana/solid-stately";
 import { parseColor } from "@proyecto-viviana/solid-stately";
 import { useLocale } from "../i18n";
 import { createId } from "../ssr";
+import { focusWithoutScrolling } from "../utils/focus";
 import { createColorStringFormatter } from "./intl";
 import type { AriaColorAreaOptions, ColorAreaAria } from "./types";
 
@@ -19,6 +38,8 @@ export function createColorArea(
   props: Accessor<AriaColorAreaOptions>,
   state: Accessor<ColorAreaState>,
   areaRef: Accessor<HTMLDivElement | null>,
+  inputXRef?: Accessor<HTMLInputElement | null | undefined>,
+  inputYRef?: Accessor<HTMLInputElement | null | undefined>,
 ): ColorAreaAria {
   const getProps = () => props();
   const getState = () => state();
@@ -76,6 +97,55 @@ export function createColorArea(
     );
   };
 
+  const getXInput = () => {
+    const fromRef = inputXRef?.() ?? getProps().inputXRef?.();
+    if (fromRef) return fromRef;
+    const resolvedId = getProps().id ? `${getProps().id}-x` : xInputId;
+    const byId =
+      typeof document !== "undefined"
+        ? (document.getElementById(resolvedId) as HTMLInputElement | null)
+        : null;
+    if (byId) return byId;
+    const area = areaRef();
+    if (!area) return null;
+    return (
+      area.querySelector<HTMLInputElement>('input[type="range"][aria-orientation="horizontal"]') ??
+      area.querySelectorAll<HTMLInputElement>('input[type="range"]')[0] ??
+      null
+    );
+  };
+
+  const getYInput = () => {
+    const fromRef = inputYRef?.() ?? getProps().inputYRef?.();
+    if (fromRef) return fromRef;
+    const resolvedId = getProps().id ? `${getProps().id}-y` : yInputId;
+    const byId =
+      typeof document !== "undefined"
+        ? (document.getElementById(resolvedId) as HTMLInputElement | null)
+        : null;
+    if (byId) return byId;
+    const area = areaRef();
+    if (!area) return null;
+    return (
+      area.querySelector<HTMLInputElement>('input[type="range"][aria-orientation="vertical"]') ??
+      area.querySelectorAll<HTMLInputElement>('input[type="range"]')[1] ??
+      null
+    );
+  };
+
+  const focusInput = (axis: "x" | "y" = "x") => {
+    const el = axis === "y" ? getYInput() : getXInput();
+    if (el) {
+      focusWithoutScrolling(el);
+      queueMicrotask(() => {
+        const current = axis === "y" ? getYInput() : getXInput();
+        if (current) {
+          focusWithoutScrolling(current);
+        }
+      });
+    }
+  };
+
   const updateFromInput = (e: Event, axis: "x" | "y") => {
     const target = e.target as HTMLInputElement;
     const nextValue = parseFloat(target.value);
@@ -88,53 +158,170 @@ export function createColorArea(
     }
   };
 
-  // Calculate position from pointer event
-  const getPositionFromEvent = (e: MouseEvent | PointerEvent) => {
+  let startPointerPos = { x: 0, y: 0 };
+  let startThumbPos = { x: 0, y: 0 };
+  let lastMovePos: { x: number; y: number } | null = null;
+  let cleanupDragListeners: (() => void) | undefined;
+
+  const installDragListeners = () => {
+    if (typeof window === "undefined") return;
+    cleanupDragListeners?.();
+
+    const onPointerMove = (e: PointerEvent) => {
+      if (!getState().isDragging) return;
+      handleMove(e.clientX, e.clientY);
+    };
+
+    const onPointerEnd = (e: PointerEvent) => {
+      endDragging(e.currentTarget, e.pointerId);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerEnd);
+    window.addEventListener("pointercancel", onPointerEnd);
+
+    cleanupDragListeners = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerEnd);
+      window.removeEventListener("pointercancel", onPointerEnd);
+    };
+  };
+
+  const handleMove = (clientX: number, clientY: number) => {
+    if (lastMovePos && lastMovePos.x === clientX && lastMovePos.y === clientY) return;
+    lastMovePos = { x: clientX, y: clientY };
+
     const area = areaRef();
-    if (!area) return null;
+    if (!area) return;
 
     const rect = area.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) return null;
+    if (rect.width === 0 || rect.height === 0) return;
+
+    const deltaX = clientX - startPointerPos.x;
+    const deltaY = clientY - startPointerPos.y;
+
+    const normalizedDeltaX = (isRTL() ? -deltaX : deltaX) / rect.width;
+    const normalizedDeltaY = deltaY / rect.height;
 
-    const physicalX = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const x = isRTL() ? 1 - physicalX : physicalX;
-    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    const newX = Math.max(0, Math.min(1, startThumbPos.x + normalizedDeltaX));
+    const newY = Math.max(0, Math.min(1, startThumbPos.y + normalizedDeltaY));
 
-    return { x, y };
+    getState().setColorFromPoint(newX, newY);
   };
 
-  // Handle pointer down
-  const onPointerDown = (e: PointerEvent) => {
+  const endDragging = (target?: EventTarget | null, pointerId?: number) => {
+    cleanupDragListeners?.();
+    cleanupDragListeners = undefined;
+    lastMovePos = null;
+
+    if (getState().isDragging) {
+      getState().setDragging(false);
+      if (pointerId !== undefined && target && (target as HTMLElement).releasePointerCapture) {
+        try {
+          (target as HTMLElement).releasePointerCapture(pointerId);
+        } catch {}
+      }
+      focusInput(focusedInput() ?? "x");
+    }
+  };
+
+  const startDragging = (
+    clientX: number,
+    clientY: number,
+    fromThumb: boolean,
+    target?: HTMLElement | null,
+    pointerId?: number,
+  ) => {
     if (getProps().isDisabled || getState().isDisabled) return;
+    if (getState().isDragging) return;
+
+    setValueChangedViaKeyboard(false);
+    setValueChangedViaInputChangeEvent(false);
+
+    const s = getState();
+    if (fromThumb) {
+      startThumbPos = s.getThumbPosition();
+    } else {
+      const area = areaRef();
+      if (!area) return;
+      const rect = area.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) return;
 
-    const pos = getPositionFromEvent(e);
-    if (!pos) return;
+      const physicalX = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const x = isRTL() ? 1 - physicalX : physicalX;
+      const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
 
-    getState().setColorFromPoint(pos.x, pos.y);
-    getState().setDragging(true);
+      s.setColorFromPoint(x, y);
+      startThumbPos = { x, y };
+    }
 
-    // Capture pointer for dragging
-    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    startPointerPos = { x: clientX, y: clientY };
+    lastMovePos = { x: clientX, y: clientY };
+    focusInput(focusedInput() ?? "x");
+    s.setDragging(true);
+
+    if (pointerId !== undefined && target?.setPointerCapture) {
+      try {
+        target.setPointerCapture(pointerId);
+      } catch {}
+    }
+
+    installDragListeners();
   };
 
-  // Handle pointer move
-  const onPointerMove = (e: PointerEvent) => {
-    if (!getState().isDragging) return;
+  const onThumbPointerDown = (e: PointerEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+    if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    startDragging(e.clientX, e.clientY, true, e.currentTarget as HTMLElement, e.pointerId);
+  };
+
+  const onThumbMouseDown = (e: MouseEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+    if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
 
-    const pos = getPositionFromEvent(e);
-    if (!pos) return;
+    e.stopPropagation();
+    e.preventDefault();
 
-    getState().setColorFromPoint(pos.x, pos.y);
+    startDragging(e.clientX, e.clientY, true);
+  };
+
+  const onAreaPointerDown = (e: PointerEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+    if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+
+    e.preventDefault();
+
+    startDragging(e.clientX, e.clientY, false, e.currentTarget as HTMLElement, e.pointerId);
+  };
+
+  const onAreaMouseDown = (e: MouseEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+    if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
+
+    e.preventDefault();
+
+    startDragging(e.clientX, e.clientY, false);
+  };
+
+  const onPointerMove = (e: PointerEvent) => {
+    if (!getState().isDragging) return;
+    handleMove(e.clientX, e.clientY);
   };
 
-  // Handle pointer up
   const onPointerUp = (e: PointerEvent) => {
     if (getState().isDragging) {
-      getState().setDragging(false);
-      (e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
+      endDragging(e.currentTarget, e.pointerId);
     }
   };
 
+  onOwnedCleanup(() => {
+    cleanupDragListeners?.();
+  });
+
   const onKeyDown = (e: KeyboardEvent) => {
     if (getProps().isDisabled || getState().isDisabled) return;
 
@@ -153,6 +340,7 @@ export function createColorArea(
         } else {
           s.incrementX(xStep);
         }
+        focusedAxis = "x";
         break;
       case "ArrowLeft":
         if (isRTL()) {
@@ -160,6 +348,7 @@ export function createColorArea(
         } else {
           s.decrementX(xStep);
         }
+        focusedAxis = "x";
         break;
       case "ArrowUp":
         s.incrementY(yStep);
@@ -183,6 +372,7 @@ export function createColorArea(
         } else {
           s.decrementX(s.xChannelPageStep);
         }
+        focusedAxis = "x";
         break;
       case "End":
         if (isRTL()) {
@@ -190,6 +380,7 @@ export function createColorArea(
         } else {
           s.incrementX(s.xChannelPageStep);
         }
+        focusedAxis = "x";
         break;
       default:
         handled = false;
@@ -200,6 +391,7 @@ export function createColorArea(
       setValueChangedViaKeyboard(true);
       s.setDragging(true);
       s.setDragging(false);
+      focusInput(focusedAxis);
       e.preventDefault();
       e.stopPropagation();
     }
@@ -224,9 +416,10 @@ export function createColorArea(
       role: "group" as const,
       "aria-label": colorAreaLabel(),
       "aria-labelledby": p["aria-labelledby"],
-      onPointerDown,
+      onPointerDown: onAreaPointerDown,
       onPointerMove,
       onPointerUp,
+      onMouseDown: onAreaMouseDown,
       style: {
         position: "relative" as const,
         "touch-action": "none",
@@ -350,6 +543,10 @@ export function createColorArea(
         "touch-action": "none",
         "forced-color-adjust": "none" as const,
       },
+      onPointerDown: onThumbPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onMouseDown: onThumbMouseDown,
       onKeyDown,
       onFocusOut,
       "data-dragging": s.isDragging || undefined,
@@ -365,7 +562,7 @@ export function createColorArea(
 
     return {
       type: "range",
-      id: p.id ?? xInputId,
+      id: p.id ? `${p.id}-x` : xInputId,
       "aria-label": colorInputLabel(),
       "aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
       "aria-valuetext": getAriaValueTextForChannel(s.xChannel),
@@ -410,7 +607,7 @@ export function createColorArea(
 
     return {
       type: "range",
-      id: p.id ?? yInputId,
+      id: p.id ? `${p.id}-y` : yInputId,
       "aria-label": colorInputLabel(),
       "aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
       "aria-valuetext": getAriaValueTextForChannel(s.yChannel),

package/src/color/createColorField.ts

@@ -1,12 +1,34 @@
+/*
+ * 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/color/useColorField.ts
+
 /**
  * createColorField hook.
  *
  * Provides ARIA attributes and keyboard handling for a color input field.
+ *
+ * Ported from packages/react-aria/src/color/useColorField.ts.
  */
 
-import { createEffect, createMemo, type Accessor } from "solid-js";
-import type { ColorFieldState } from "@proyecto-viviana/solid-stately";
+import { createMemo, createTrackedEffect } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createFormValidationState, type ColorFieldState } from "@proyecto-viviana/solid-stately";
 import { createId } from "../ssr";
+import { createField } from "../label";
+import { createKeyboard } from "../interactions/createKeyboard";
+import { createFormValidation } from "../form/createFormValidation";
+import { ariaTrueFalse } from "../utils/domAttrs";
+import type { JSX } from "@solidjs/web";
 import type { AriaColorFieldOptions, ColorFieldAria } from "./types";
 
 /**
@@ -22,11 +44,9 @@ export function createColorField(
 
   const generatedInputId = createId();
   const labelId = createId();
-  const descriptionId = createId();
-  const errorMessageId = createId();
 
   let didAutoFocus = false;
-  createEffect(() => {
+  createTrackedEffect(() => {
     const input = inputRef();
     if (!didAutoFocus && getProps().autoFocus && input) {
       didAutoFocus = true;
@@ -39,6 +59,47 @@ export function createColorField(
   const isInvalid = () => getProps().isInvalid || getState().isInvalid;
   const validationBehavior = () => getProps().validationBehavior ?? "native";
 
+  const validationState = createFormValidationState({
+    get value() {
+      return getState().inputValue;
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
+    get validationBehavior() {
+      return validationBehavior();
+    },
+  });
+
+  createFormValidation(
+    {
+      get validationBehavior() {
+        return validationBehavior();
+      },
+    },
+    validationState,
+    () => inputRef() ?? undefined,
+  );
+
+  // RAC `useColorField` reaches `useField` through `useFormattedTextField` /
+  // `useTextField`. Description and error slot ids (and the input's
+  // `aria-describedby`) live in `createField`; do not hand-mint
+  // `createId()` for those slots.
+  const field = createField({
+    get description() {
+      return getProps().description;
+    },
+    get errorMessage() {
+      return getProps().errorMessage;
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
+    get "aria-describedby"() {
+      return getProps()["aria-describedby"];
+    },
+  });
+
   const onKeyDown = (e: KeyboardEvent) => {
     const s = getState();
 
@@ -56,10 +117,10 @@ export function createColorField(
         s.decrement();
         break;
       case "PageUp":
-        s.incrementToMax();
+        s.increment();
         break;
       case "PageDown":
-        s.decrementToMin();
+        s.decrement();
         break;
       case "Home":
         s.decrementToMin();
@@ -76,6 +137,23 @@ export function createColorField(
     }
   };
 
+  const { keyboardProps } = createKeyboard({
+    shortcuts: {
+      Enter: () => {
+        const s = getState();
+        if (isDisabled() || isReadOnly()) {
+          return { shouldPreventDefault: false };
+        }
+        s.commit();
+        const commitValidation = (s as ColorFieldState & { commitValidation?: () => void })
+          .commitValidation;
+        commitValidation?.();
+        return { shouldPreventDefault: false };
+      },
+    },
+    onKeyDown,
+  });
+
   const onWheel = (e: WheelEvent) => {
     const p = getProps();
     const s = getState();
@@ -89,9 +167,9 @@ export function createColorField(
       return;
     }
 
-    if (e.deltaY < 0) {
+    if (e.deltaY > 0) {
       s.increment();
-    } else if (e.deltaY > 0) {
+    } else if (e.deltaY < 0) {
       s.decrement();
     } else {
       return;
@@ -107,13 +185,9 @@ export function createColorField(
     };
   });
 
-  const descriptionProps = createMemo(() => ({
-    id: descriptionId,
-  }));
+  const descriptionProps = () => field.descriptionProps;
 
-  const errorMessageProps = createMemo(() => ({
-    id: getProps()["aria-errormessage"] ?? errorMessageId,
-  }));
+  const errorMessageProps = () => field.errorMessageProps;
 
   const inputProps = createMemo(() => {
     const s = getState();
@@ -122,7 +196,6 @@ export function createColorField(
       s.channel && s.colorValue ? s.colorValue.getChannelName(s.channel, "en-US") : undefined;
     const required = p.isRequired || s.isRequired;
     const invalid = isInvalid();
-    const describedBy = p["aria-describedby"];
 
     return {
       id: p.id ?? generatedInputId,
@@ -147,11 +220,13 @@ export function createColorField(
       spellCheck: "false",
       "aria-label": p["aria-label"] ?? channelLabel,
       "aria-labelledby": p["aria-labelledby"],
-      "aria-describedby": describedBy,
+      "aria-describedby": field.fieldProps["aria-describedby"],
       "aria-details": p["aria-details"],
-      "aria-errormessage": invalid ? (p["aria-errormessage"] ?? errorMessageId) : undefined,
-      "aria-invalid": invalid || undefined,
-      "aria-required": validationBehavior() === "aria" && required ? true : undefined,
+      "aria-errormessage": invalid
+        ? (p["aria-errormessage"] ?? field.errorMessageProps.id)
+        : undefined,
+      "aria-invalid": invalid ? ariaTrueFalse(true) : undefined,
+      "aria-required": validationBehavior() === "aria" && required ? "true" : undefined,
       role: s.channel ? undefined : ("textbox" as const),
       "aria-valuenow": undefined,
       "aria-valuemin": undefined,
@@ -171,7 +246,8 @@ export function createColorField(
       onBlur: () => {
         s.commit();
       },
-      onKeyDown,
+      onKeyDown: keyboardProps.onKeyDown,
+      onKeyUp: keyboardProps.onKeyUp,
       onWheel,
     };
   });
@@ -181,7 +257,7 @@ export function createColorField(
       return labelProps();
     },
     get inputProps() {
-      return inputProps();
+      return inputProps() as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
     get descriptionProps() {
       return descriptionProps();

package/src/color/createColorSlider.ts

@@ -1,10 +1,28 @@
+/*
+ * 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/color/useColorSlider.ts
+
 /**
  * createColorSlider hook.
  *
  * Provides ARIA attributes and keyboard handling for a color slider.
+ *
+ * Ported from packages/react-aria/src/color/useColorSlider.ts.
  */
 
-import { createMemo, onCleanup, type Accessor } from "solid-js";
+import { onOwnedCleanup } from "../utils/owner";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { ColorSliderState } from "@proyecto-viviana/solid-stately";
 import { useLocale } from "../i18n";
 import { createId } from "../ssr";
@@ -144,7 +162,7 @@ export function createColorSlider(
     };
   };
 
-  onCleanup(() => {
+  onOwnedCleanup(() => {
     cleanupPointerDrag?.();
     cleanupMouseDrag?.();
   });
@@ -247,6 +265,8 @@ export function createColorSlider(
     }
 
     if (handled) {
+      s.setDragging(true);
+      s.setDragging(false);
       e.preventDefault();
       e.stopPropagation();
     }
@@ -292,7 +312,6 @@ export function createColorSlider(
   // Track props
   const trackProps = createMemo(() => {
     const s = getState();
-    const p = getProps();
     const bg = generateBackground();
     return {
       id: trackElementId(),
@@ -383,6 +402,8 @@ export function createColorSlider(
       onChange: (e: Event) => {
         const target = e.target as HTMLInputElement;
         s.setThumbValue(parseFloat(target.value));
+        s.setDragging(true);
+        s.setDragging(false);
       },
       onFocus: () => {
         // Focus handling

package/src/color/createColorSwatch.ts

@@ -1,10 +1,27 @@
+/*
+ * Copyright 2024 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/color/useColorSwatch.ts
+
 /**
  * createColorSwatch hook.
  *
  * Provides ARIA attributes for a color swatch display.
+ *
+ * Ported from packages/react-aria/src/color/useColorSwatch.ts.
  */
 
-import { createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import { normalizeColor } from "@proyecto-viviana/solid-stately";
 import { useLocale } from "../i18n";
 import { createId } from "../ssr";