@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.1

package/src/numberfield/createNumberFieldState.ts

@@ -1,10 +1,31 @@
+/*
+ * 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-stately/src/numberfield/useNumberFieldState.ts
+
 /**
  * State management for NumberField.
  * Based on @react-stately/numberfield useNumberFieldState.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { NumberFormatter, NumberParser } from "@internationalized/number";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
+import {
+  createFormValidationState,
+  type FormValidationState,
+  type ValidationFunction,
+} from "../form";
 
 export interface NumberFieldStateProps {
   /** The current value (controlled). */
@@ -27,12 +48,36 @@ export interface NumberFieldStateProps {
   locale?: string;
   /** Number format options. */
   formatOptions?: Intl.NumberFormatOptions;
+  /** Whether the number field is invalid (controlled). */
+  isInvalid?: boolean;
+  /** @deprecated Use isInvalid instead. */
+  validationState?: "valid" | "invalid";
+  /** Custom validation function. */
+  validate?: ValidationFunction<number>;
+  /**
+   * Whether to use native HTML form validation or ARIA validation semantics.
+   * @default "native"
+   */
+  validationBehavior?: "aria" | "native";
+  /** Field name(s) for server error lookup. */
+  name?: string | string[];
+  /**
+   * Controls the behavior of the number field when the user blurs the field after
+   * editing. `'snap'` clamps to min/max and snaps to step. `'validate'` leaves the
+   * value and reports native range/step validity.
+   *
+   * @default "snap"
+   */
+  commitBehavior?: "snap" | "validate";
 }
 
-export interface NumberFieldState {
+export interface NumberFieldState extends FormValidationState {
   /** The current input value as a string. */
   inputValue: Accessor<string>;
-  /** The current numeric value. */
+  /**
+   * The currently parsed number value, or NaN if the input could not be parsed.
+   * Updated from the input text as the user types.
+   */
   numberValue: Accessor<number>;
   /** Whether the value can be incremented. */
   canIncrement: Accessor<boolean>;
@@ -46,12 +91,18 @@ export interface NumberFieldState {
   minValue: Accessor<number | undefined>;
   /** The maximum value. */
   maxValue: Accessor<number | undefined>;
+  /** The configured step, or undefined when the field uses the default step. */
+  step: Accessor<number | undefined>;
+  /** The default numeric value, used on native form reset. */
+  defaultNumberValue: number;
+  /** Sets the number value and reformats the input. */
+  setNumberValue: (value: number) => void;
   /** Set the input value. */
   setInputValue: (value: string) => void;
   /** Validate a partial input value. */
   validate: (value: string) => boolean;
-  /** Commit the current input value. */
-  commit: () => void;
+  /** Commit the current input value, or an override when a paste replaces it. */
+  commit: (value?: string) => void;
   /** Increment the value by step. */
   increment: () => void;
   /** Decrement the value by step. */
@@ -94,13 +145,60 @@ function clamp(value: number, min?: number, max?: number): number {
 }
 
 /**
- * Snaps a value to the nearest step.
+ * Rounds to the decimal precision implied by a step, including exponential steps.
  */
-function snapToStep(value: number, step: number, min?: number): number {
-  const base = min ?? 0;
-  const diff = value - base;
-  const steps = Math.round(diff / step);
-  return handleDecimalOperation("+", base, steps * step);
+function roundToStepPrecision(value: number, step: number): number {
+  let roundedValue = value;
+  let precision = 0;
+  const stepString = step.toString();
+  const eIndex = stepString.toLowerCase().indexOf("e-");
+  if (eIndex > 0) {
+    precision = Math.abs(Math.floor(Math.log10(Math.abs(step)))) + eIndex;
+  } else {
+    const pointIndex = stepString.indexOf(".");
+    if (pointIndex >= 0) {
+      precision = stepString.length - pointIndex;
+    }
+  }
+  if (precision > 0) {
+    const pow = Math.pow(10, precision);
+    roundedValue = Math.round(roundedValue * pow) / pow;
+  }
+  return roundedValue;
+}
+
+/**
+ * Snaps to the nearest step, then to the last in-range step when that exceeds max.
+ * A negative halfway rounds away from the step base.
+ */
+function snapValueToStep(
+  value: number,
+  min: number | undefined,
+  max: number | undefined,
+  step: number,
+): number {
+  const minNumber = Number(min);
+  const maxNumber = Number(max);
+  const remainder = (value - (isNaN(minNumber) ? 0 : minNumber)) % step;
+  let snappedValue = roundToStepPrecision(
+    Math.abs(remainder) * 2 >= step
+      ? value + Math.sign(remainder) * (step - Math.abs(remainder))
+      : value - remainder,
+    step,
+  );
+
+  if (!isNaN(minNumber)) {
+    if (snappedValue < minNumber) {
+      snappedValue = minNumber;
+    } else if (!isNaN(maxNumber) && snappedValue > maxNumber) {
+      snappedValue =
+        minNumber + Math.floor(roundToStepPrecision((maxNumber - minNumber) / step, step)) * step;
+    }
+  } else if (!isNaN(maxNumber) && snappedValue > maxNumber) {
+    snappedValue = Math.floor(roundToStepPrecision(maxNumber / step, step)) * step;
+  }
+
+  return roundToStepPrecision(snappedValue, step);
 }
 
 function isValidStep(step: number | undefined): step is number {
@@ -115,84 +213,86 @@ export function createNumberFieldState(
 ): NumberFieldState {
   const getProps = () => access(props);
 
+  // Internal signals
+  const [inputValue, setInputValueInternal] = createInternalSignal<string>("");
+  const [numberValue, setNumberValue] = createInternalSignal<number>(NaN);
+
   // Get locale and formatter
   const locale = () => getProps().locale ?? "en-US";
   const formatOptions = () => getProps().formatOptions ?? {};
 
-  // Create number formatter
-  const formatter = createMemo(() => {
-    return new Intl.NumberFormat(locale(), formatOptions());
+  const numberParser = createMemo(() => {
+    return new NumberParser(locale(), formatOptions());
   });
 
-  // Create number parser (simplified - real implementation would be more robust)
-  const parseNumber = (value: string): number => {
-    if (!value || value === "" || value === "-") return NaN;
-
-    // Handle locale-specific decimal separators
-    const opts = formatOptions();
-    const testNumber = formatter().format(1.1);
-    const decimalSeparator = testNumber.charAt(1);
-
-    // Normalize the input
-    let normalized = value;
-    if (decimalSeparator !== ".") {
-      normalized = normalized.replace(decimalSeparator, ".");
-    }
-
-    // Remove grouping separators and currency symbols
-    normalized = normalized.replace(/[^\d.-]/g, "");
-
-    const parsed = parseFloat(normalized);
-    if (isNaN(parsed)) return parsed;
+  const numberingSystem = createMemo(() => {
+    return numberParser().getNumberingSystem(inputValue());
+  });
 
-    if (opts.style === "percent") {
-      return parsed / 100;
-    }
+  const formatter = createMemo(() => {
+    return new NumberFormatter(locale(), {
+      ...formatOptions(),
+      numberingSystem: numberingSystem(),
+    });
+  });
 
-    return parsed;
+  const parseNumber = (value: string): number => {
+    return numberParser().parse(value);
   };
 
   // Format a number to string
   const formatNumber = (value: number): string => {
-    if (isNaN(value)) return "";
+    if (isNaN(value) || value === null) return "";
     return formatter().format(value);
   };
 
   // Determine step value
   const hasCustomStep = createMemo(() => isValidStep(getProps().step));
+  const shouldSnap = () => (getProps().commitBehavior ?? "snap") === "snap";
 
   const step = createMemo(() => {
     const p = getProps();
     if (hasCustomStep()) return p.step as number;
-    // Default step for percent is 0.01
-    if (p.formatOptions?.style === "percent") return 0.01;
+    const resolved = formatter().resolvedOptions();
+    if (resolved.style === "percent") return 0.01;
     return 1;
   });
 
-  // Internal signals
-  const [inputValue, setInputValueInternal] = createSignal<string>("");
-  const [numberValue, setNumberValue] = createSignal<number>(NaN);
-
   const applyConstraints = (value: number): number => {
     const p = getProps();
     if (isNaN(value)) return NaN;
 
     if (hasCustomStep()) {
-      return clamp(snapToStep(value, step(), p.minValue), p.minValue, p.maxValue);
+      return snapValueToStep(value, p.minValue, p.maxValue, step());
     }
 
     return clamp(value, p.minValue, p.maxValue);
   };
 
+  let initialNumberValue = NaN;
+  let capturedDefaultNumberValue = NaN;
+
+  const constrainForCommit = (value: number): number => {
+    if (!shouldSnap()) return value;
+    return applyConstraints(value);
+  };
+
   // Initialize from props
   const initValue = () => {
     const p = getProps();
     const initial = p.value ?? p.defaultValue;
-    if (initial != null) {
-      const constrained = applyConstraints(initial);
-      setNumberValue(constrained);
-      setInputValueInternal(formatNumber(constrained));
+    if (initial != null && !isNaN(initial)) {
+      const next = constrainForCommit(initial);
+      setNumberValue(next);
+      setInputValueInternal(formatNumber(next));
+      initialNumberValue = next;
+    } else {
+      initialNumberValue = NaN;
     }
+    const defaultValue = p.defaultValue ?? NaN;
+    capturedDefaultNumberValue = isNaN(defaultValue)
+      ? initialNumberValue
+      : constrainForCommit(defaultValue);
   };
 
   // Call init on first access
@@ -209,7 +309,7 @@ export function createNumberFieldState(
     ensureInitialized();
     const p = getProps();
     if (p.value !== undefined) {
-      return applyConstraints(p.value);
+      return constrainForCommit(p.value);
     }
     return numberValue();
   });
@@ -222,34 +322,45 @@ export function createNumberFieldState(
       return;
     }
 
-    const constrained = applyConstraints(p.value);
-    if (lastControlledValue === undefined || !Object.is(lastControlledValue, constrained)) {
-      lastControlledValue = constrained;
-      setNumberValue(constrained);
-      setInputValueInternal(formatNumber(constrained));
+    const next = constrainForCommit(p.value);
+    if (lastControlledValue === undefined || !Object.is(lastControlledValue, next)) {
+      lastControlledValue = next;
+      setNumberValue(next);
+      setInputValueInternal(formatNumber(next));
     }
   };
 
   const parsedInputValue = () => {
     ensureInitialized();
     syncControlledValue();
-    return parseNumber(inputValue());
+    return parseNumber(readNow(inputValue));
   };
 
+  const validation = createFormValidationState({
+    get value() {
+      ensureInitialized();
+      return actualNumberValue();
+    },
+    get isInvalid() {
+      return getProps().isInvalid;
+    },
+    get validationState() {
+      return getProps().validationState;
+    },
+    get validate() {
+      return getProps().validate;
+    },
+    get name() {
+      return getProps().name;
+    },
+    get validationBehavior() {
+      return getProps().validationBehavior ?? "native";
+    },
+  });
+
   // Validate partial input
   const validate = (value: string): boolean => {
-    if (value === "" || value === "-") return true;
-
-    // Allow partial decimal input like "1."
-    const opts = formatOptions();
-    const testNumber = formatter().format(1.1);
-    const decimalSeparator = testNumber.charAt(1);
-
-    // Check if it's a valid partial number
-    const pattern = new RegExp(
-      `^-?\\d*${decimalSeparator === "." ? "\\." : decimalSeparator}?\\d*$`,
-    );
-    return pattern.test(value);
+    return numberParser().isValidPartialNumber(value, getProps().minValue, getProps().maxValue);
   };
 
   // Set input value with validation
@@ -259,17 +370,18 @@ export function createNumberFieldState(
     setInputValueInternal(value);
   };
 
-  // Commit the current input value
-  const commit = () => {
+  // Commit the current input value, or an override when a paste replaces it.
+  const commit = (override?: string) => {
     ensureInitialized();
     const p = getProps();
-    const input = inputValue();
+    const input = override === undefined ? readNow(inputValue) : override;
 
-    if (input === "" || input === "-") {
+    if (input === "") {
       // Clear value
       setNumberValue(NaN);
-      setInputValueInternal(p.value === undefined ? "" : formatNumber(actualNumberValue()));
+      setInputValueInternal(p.value === undefined ? "" : formatNumber(readNow(actualNumberValue)));
       p.onChange?.(NaN);
+      validation.commitValidation();
       return;
     }
 
@@ -277,18 +389,22 @@ export function createNumberFieldState(
 
     if (isNaN(parsed)) {
       // Invalid input - revert to current value
-      setInputValueInternal(formatNumber(actualNumberValue()));
+      setInputValueInternal(formatNumber(readNow(actualNumberValue)));
       return;
     }
 
-    // Clamp and optionally snap to custom step.
-    parsed = applyConstraints(parsed);
+    const previous = readNow(actualNumberValue);
+    parsed = constrainForCommit(parsed);
+    parsed = numberParser().parse(formatNumber(parsed));
 
-    // Update state
     setNumberValue(parsed);
-    setInputValueInternal(formatNumber(parsed));
+    // A controlled field keeps the current number until its value prop updates.
+    setInputValueInternal(formatNumber(p.value === undefined ? parsed : previous));
 
     p.onChange?.(parsed);
+    if (parsed !== previous) {
+      validation.commitValidation();
+    }
   };
 
   // Check if can increment
@@ -302,7 +418,7 @@ export function createNumberFieldState(
 
     if (p.maxValue == null) return true;
     return (
-      snapToStep(current, step(), p.minValue) > current ||
+      snapValueToStep(current, p.minValue, p.maxValue, step()) > current ||
       handleDecimalOperation("+", current, step()) <= p.maxValue
     );
   });
@@ -318,7 +434,7 @@ export function createNumberFieldState(
 
     if (p.minValue == null) return true;
     return (
-      snapToStep(current, step(), p.minValue) < current ||
+      snapValueToStep(current, p.minValue, p.maxValue, step()) < current ||
       handleDecimalOperation("-", current, step()) >= p.minValue
     );
   });
@@ -329,16 +445,31 @@ export function createNumberFieldState(
 
     if (isNaN(parsed)) {
       const base = isNaN(minOrMaxValue) ? 0 : minOrMaxValue;
-      return clamp(snapToStep(base, step(), p.minValue), p.minValue, p.maxValue);
+      return snapValueToStep(base, p.minValue, p.maxValue, step());
     }
 
-    const snapped = snapToStep(parsed, step(), p.minValue);
+    const snapped = snapValueToStep(parsed, p.minValue, p.maxValue, step());
     if ((operation === "+" && snapped > parsed) || (operation === "-" && snapped < parsed)) {
-      return clamp(snapped, p.minValue, p.maxValue);
+      return snapped;
     }
 
-    const next = handleDecimalOperation(operation, parsed, step());
-    return clamp(snapToStep(next, step(), p.minValue), p.minValue, p.maxValue);
+    return snapValueToStep(
+      handleDecimalOperation(operation, parsed, step()),
+      p.minValue,
+      p.maxValue,
+      step(),
+    );
+  };
+
+  // Pin reformats the text when the committed number changes. A controlled
+  // step leaves the text alone until `value` updates, unless the step lands
+  // on that same number and has to replace what the user typed.
+  const commitSteppedNumber = (next: number, refreshWhenUnchanged: boolean) => {
+    const committed = readNow(actualNumberValue);
+    setNumberValue(next);
+    if (getProps().value === undefined || (refreshWhenUnchanged && next === committed)) {
+      setInputValueInternal(formatNumber(next));
+    }
   };
 
   // Increment by step
@@ -349,9 +480,9 @@ export function createNumberFieldState(
     if (p.isDisabled || p.isReadOnly) return;
 
     const current = safeNextStep("+", p.minValue);
-    setNumberValue(current);
-    setInputValueInternal(formatNumber(current));
+    commitSteppedNumber(current, true);
     p.onChange?.(current);
+    validation.commitValidation();
   };
 
   // Decrement by step
@@ -362,9 +493,9 @@ export function createNumberFieldState(
     if (p.isDisabled || p.isReadOnly) return;
 
     const current = safeNextStep("-", p.maxValue);
-    setNumberValue(current);
-    setInputValueInternal(formatNumber(current));
+    commitSteppedNumber(current, true);
     p.onChange?.(current);
+    validation.commitValidation();
   };
 
   // Set to max
@@ -376,13 +507,13 @@ export function createNumberFieldState(
 
     if (p.maxValue == null) return;
 
-    const snapped = snapToStep(p.maxValue, step(), p.minValue);
-    setNumberValue(snapped);
-    setInputValueInternal(formatNumber(snapped));
+    const snapped = snapValueToStep(p.maxValue, p.minValue, p.maxValue, step());
+    commitSteppedNumber(snapped, false);
     p.onChange?.(snapped);
+    validation.commitValidation();
   };
 
-  // Set to min
+  // Set to min. Pin sets the raw minimum, not a snapped step.
   const decrementToMin = () => {
     ensureInitialized();
     syncControlledValue();
@@ -391,19 +522,31 @@ export function createNumberFieldState(
 
     if (p.minValue == null) return;
 
-    setNumberValue(p.minValue);
-    setInputValueInternal(formatNumber(p.minValue));
+    commitSteppedNumber(p.minValue, false);
     p.onChange?.(p.minValue);
+    validation.commitValidation();
+  };
+
+  const setNumberValuePublic = (value: number) => {
+    ensureInitialized();
+    commitSteppedNumber(value, false);
+    getProps().onChange?.(value);
   };
 
   return {
+    realtimeValidation: validation.realtimeValidation,
+    displayValidation: validation.displayValidation,
+    updateValidation: validation.updateValidation,
+    resetValidation: validation.resetValidation,
+    commitValidation: validation.commitValidation,
     get inputValue() {
       ensureInitialized();
       syncControlledValue();
       return inputValue;
     },
+    // Parsed text. Form validation reads the committed number separately.
     get numberValue() {
-      return actualNumberValue;
+      return parsedInputValue;
     },
     canIncrement,
     canDecrement,
@@ -411,6 +554,12 @@ export function createNumberFieldState(
     isReadOnly: () => getProps().isReadOnly ?? false,
     minValue: () => getProps().minValue,
     maxValue: () => getProps().maxValue,
+    step: () => getProps().step,
+    get defaultNumberValue() {
+      ensureInitialized();
+      return capturedDefaultNumberValue;
+    },
+    setNumberValue: setNumberValuePublic,
     setInputValue,
     validate,
     commit,

package/src/overlays/createOverlayTriggerState.ts

@@ -1,10 +1,24 @@
+/*
+ * 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-stately/src/overlays/useOverlayTriggerState.ts
+
 /**
  * Manages state for an overlay trigger.
  * Based on @react-stately/overlays useOverlayTriggerState.
  */
 
-import { createSignal, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 
 export interface OverlayTriggerProps {
   /** Whether the overlay is open by default (uncontrolled). */
@@ -26,6 +40,10 @@ export interface OverlayTriggerState {
   close(): void;
   /** Toggles the overlay's visibility. */
   toggle(): void;
+  /** Cursor position relative to the window viewport. */
+  readonly point: Accessor<{ x: number; y: number } | null>;
+  /** Sets the cursor position relative to the window viewport. */
+  setPoint(point: { x: number; y: number }): void;
 }
 
 /**
@@ -37,7 +55,10 @@ export function createOverlayTriggerState(
 ): OverlayTriggerState {
   const propsAccessor = () => access(props);
 
-  const [internalOpen, setInternalOpen] = createSignal(propsAccessor().defaultOpen ?? false);
+  const [internalOpen, setInternalOpen] = createInternalSignal(
+    propsAccessor().defaultOpen ?? false,
+  );
+  const [point, setPoint] = createInternalSignal<{ x: number; y: number } | null>(null);
 
   const isOpen: Accessor<boolean> = () => {
     const p = propsAccessor();
@@ -54,7 +75,11 @@ export function createOverlayTriggerState(
 
   const open = () => setOpen(true);
   const close = () => setOpen(false);
-  const toggle = () => setOpen(!isOpen());
+  const toggle = () => {
+    const p = propsAccessor();
+    const open = p.isOpen !== undefined ? p.isOpen : readNow(internalOpen);
+    setOpen(!open);
+  };
 
   return {
     isOpen,
@@ -62,5 +87,7 @@ export function createOverlayTriggerState(
     open,
     close,
     toggle,
+    point,
+    setPoint,
   };
 }

package/src/private/flags/flags.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2023 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-stately/src/flags/flags.ts
+
+let shadowDOMEnabled = false;
+
+/** Enables React Stately's opt-in Shadow DOM behavior across the port stack. */
+export function enableShadowDOM(): void {
+  shadowDOMEnabled = true;
+}
+
+/** Returns whether opt-in Shadow DOM behavior is enabled. */
+export function shadowDOM(): boolean {
+  return shadowDOMEnabled;
+}