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

package/src/index.ts

@@ -15,6 +15,18 @@ export {
 
 export { createTextFieldState, type TextFieldStateOptions, type TextFieldState } from "./textfield";
 
+export {
+  createTokenFieldState,
+  TokenFieldValue,
+  type TokenFieldStateOptions,
+  type TokenFieldState,
+  type TokenFieldSegment,
+  type TextSegment,
+  type TokenSegment,
+  type Position,
+  type TokenFieldValueOptions,
+} from "./tokenfield";
+
 export {
   createCheckboxGroupState,
   type CheckboxGroupProps,
@@ -67,6 +79,8 @@ export {
   createMenuTriggerState,
   type MenuStateProps,
   type MenuState,
+  type MenuTriggerType,
+  type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
 } from "./collections";
@@ -355,6 +369,7 @@ export {
   type DropStateOptions,
   type DropState,
   createDraggableCollectionState,
+  getKeysForDrag,
   type DraggableCollectionStateOptions,
   type DraggableCollectionState,
   createDroppableCollectionState,

package/src/menu/index.ts

@@ -10,6 +10,8 @@ export {
   createMenuTriggerState,
   type MenuStateProps,
   type MenuState,
+  type MenuTriggerType,
+  type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
 } from "../collections/createMenuState";

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,9 +48,30 @@ 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. */
@@ -46,6 +88,12 @@ 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. */
@@ -115,64 +163,51 @@ 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;
@@ -184,15 +219,30 @@ export function createNumberFieldState(
     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 +259,7 @@ export function createNumberFieldState(
     ensureInitialized();
     const p = getProps();
     if (p.value !== undefined) {
-      return applyConstraints(p.value);
+      return constrainForCommit(p.value);
     }
     return numberValue();
   });
@@ -222,34 +272,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
@@ -263,13 +324,14 @@ export function createNumberFieldState(
   const commit = () => {
     ensureInitialized();
     const p = getProps();
-    const input = inputValue();
+    const input = readNow(inputValue);
 
     if (input === "" || 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 +339,21 @@ 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));
 
     p.onChange?.(parsed);
+    if (parsed !== previous) {
+      validation.commitValidation();
+    }
   };
 
   // Check if can increment
@@ -352,6 +417,7 @@ export function createNumberFieldState(
     setNumberValue(current);
     setInputValueInternal(formatNumber(current));
     p.onChange?.(current);
+    validation.commitValidation();
   };
 
   // Decrement by step
@@ -365,6 +431,7 @@ export function createNumberFieldState(
     setNumberValue(current);
     setInputValueInternal(formatNumber(current));
     p.onChange?.(current);
+    validation.commitValidation();
   };
 
   // Set to max
@@ -380,6 +447,7 @@ export function createNumberFieldState(
     setNumberValue(snapped);
     setInputValueInternal(formatNumber(snapped));
     p.onChange?.(snapped);
+    validation.commitValidation();
   };
 
   // Set to min
@@ -394,9 +462,22 @@ export function createNumberFieldState(
     setNumberValue(p.minValue);
     setInputValueInternal(formatNumber(p.minValue));
     p.onChange?.(p.minValue);
+    validation.commitValidation();
+  };
+
+  const setNumberValuePublic = (value: number) => {
+    ensureInitialized();
+    setNumberValue(value);
+    setInputValueInternal(formatNumber(value));
+    getProps().onChange?.(value);
   };
 
   return {
+    realtimeValidation: validation.realtimeValidation,
+    displayValidation: validation.displayValidation,
+    updateValidation: validation.updateValidation,
+    resetValidation: validation.resetValidation,
+    commitValidation: validation.commitValidation,
     get inputValue() {
       ensureInitialized();
       syncControlledValue();
@@ -411,6 +492,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/radio/createRadioGroupState.ts

@@ -1,3 +1,17 @@
+/*
+ * 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/radio/useRadioGroupState.ts
+
 /**
  * Radio group state for Solid Stately
  *
@@ -7,8 +21,8 @@
  * This is a 1:1 port of @react-stately/radio's useRadioGroupState.
  */
 
-import { createMemo, createSignal, Accessor, untrack } from "solid-js";
-import { type MaybeAccessor, access } from "../utils";
+import { createMemo, Accessor, untrack } from "solid-js";
+import { createInternalSignal, type MaybeAccessor, access } from "../utils";
 import { createId } from "../ssr";
 import {
   createFormValidationState,
@@ -123,15 +137,15 @@ export function createRadioGroupState(props: MaybeAccessor<RadioGroupProps> = {}
 
   // Create internal signal for uncontrolled mode
   // Initialize with defaultValue only (not value, which is for controlled mode)
-  const [internalValue, setInternalValue] = createSignal<string | null>(
+  const [internalValue, setInternalValue] = createInternalSignal<string | null>(
     initialProps.defaultValue ?? null,
   );
-  const [lastFocusedValue, setLastFocusedValueInternal] = createSignal<string | null>(null);
+  const [lastFocusedValue, setLastFocusedValueInternal] = createInternalSignal<string | null>(null);
 
   // SolidJS-specific: Version counter for triggering DOM sync across all radios
   // This handles the case where native radio behavior causes DOM state to desync
   // from our reactive state (e.g., clicking a radio unchecks siblings in the DOM)
-  const [syncVersion, setSyncVersion] = createSignal(0);
+  const [syncVersion, setSyncVersion] = createInternalSignal(0);
 
   const controlledValue = createMemo<string | null | undefined>(() => {
     const value = getProps().value;

package/src/searchfield/createSearchFieldState.ts

@@ -1,10 +1,25 @@
+/*
+ * 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/searchfield/useSearchFieldState.ts
+
 /**
  * Creates state for a search field component.
  * Based on @react-stately/searchfield useSearchFieldState.
  */
 
-import { type Accessor, createSignal, createMemo } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, access, type MaybeAccessor } from "../utils";
 
 export interface SearchFieldStateProps {
   /** The current value (controlled). */
@@ -32,7 +47,7 @@ export function createSearchFieldState(
 
   const isControlled = () => getProps().value !== undefined;
 
-  const [internalValue, setInternalValue] = createSignal(getProps().defaultValue ?? "");
+  const [internalValue, setInternalValue] = createInternalSignal(getProps().defaultValue ?? "");
 
   const value = createMemo(() => {
     const p = getProps();