@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/NumberField.tsx

@@ -5,24 +5,16 @@
  * Port of react-aria-components/src/NumberField.tsx
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  splitProps,
-  useContext,
-} from 'solid-js';
+import { type JSX, createContext, createMemo, splitProps, useContext } from "solid-js";
 import {
   createNumberField,
+  createButton,
   createFocusRing,
   createHover,
-  createPress,
   type AriaNumberFieldProps,
-} from '@proyecto-viviana/solidaria';
-import {
-  createNumberFieldState,
-  type NumberFieldState,
-} from '@proyecto-viviana/solid-stately';
+  type AriaButtonProps,
+} from "@proyecto-viviana/solidaria";
+import { createNumberFieldState, type NumberFieldState } from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -30,11 +22,7 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
 
 export interface NumberFieldRenderProps {
   /** Whether the number field is disabled. */
@@ -49,7 +37,7 @@ export interface NumberFieldRenderProps {
   value: number;
 }
 
-export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label'>, SlotProps {
+export interface NumberFieldProps extends Omit<AriaNumberFieldProps, "label">, SlotProps {
   /** The current value (controlled). */
   value?: number;
   /** The default value (uncontrolled). */
@@ -123,15 +111,11 @@ export interface NumberFieldDecrementButtonProps extends SlotProps {
   style?: StyleOrFunction<NumberFieldButtonRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 interface NumberFieldContextValue {
   state: NumberFieldState;
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-  incrementButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-  decrementButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  incrementButtonProps: AriaButtonProps;
+  decrementButtonProps: AriaButtonProps;
   labelProps: JSX.HTMLAttributes<HTMLElement>;
   groupProps: JSX.HTMLAttributes<HTMLElement>;
   descriptionProps: JSX.HTMLAttributes<HTMLElement>;
@@ -140,13 +124,11 @@ interface NumberFieldContextValue {
   isInvalid: boolean;
   isRequired: boolean;
   isReadOnly: boolean;
+  setInputRef: (el: HTMLInputElement) => void;
 }
 
 export const NumberFieldContext = createContext<NumberFieldContextValue | null>(null);
-
-// ============================================
-// COMPONENTS
-// ============================================
+export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
 
 /**
  * A number field allows a user to enter a number and increment/decrement the value.
@@ -154,12 +136,43 @@ export const NumberFieldContext = createContext<NumberFieldContextValue | null>(
 export function NumberField(props: NumberFieldProps): JSX.Element {
   const [local, stateProps, ariaProps, rest] = splitProps(
     props,
-    ['children', 'class', 'style', 'slot'],
-    ['value', 'defaultValue', 'onChange', 'minValue', 'maxValue', 'step', 'locale', 'formatOptions'],
-    ['label', 'aria-label', 'aria-labelledby', 'aria-describedby', 'isDisabled', 'isReadOnly', 'isRequired', 'isInvalid', 'description', 'errorMessage', 'id', 'autoFocus', 'name']
+    ["children", "class", "style", "slot"],
+    [
+      "value",
+      "defaultValue",
+      "onChange",
+      "minValue",
+      "maxValue",
+      "step",
+      "locale",
+      "formatOptions",
+    ],
+    [
+      "label",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "isDisabled",
+      "isReadOnly",
+      "isRequired",
+      "isInvalid",
+      "description",
+      "errorMessage",
+      "id",
+      "autoFocus",
+      "name",
+      "form",
+      "onFocus",
+      "onBlur",
+      "onFocusChange",
+      "onKeyDown",
+      "onKeyUp",
+      "onPaste",
+      "onCopy",
+      "onCut",
+    ],
   );
 
-  // Create number field state
   const state = createNumberFieldState({
     get value() {
       return stateProps.value;
@@ -193,21 +206,84 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
     },
   });
 
-  // Ref for the input
   let inputRef: HTMLInputElement | undefined;
+  const setInputRef = (el: HTMLInputElement) => {
+    inputRef = el;
+  };
+
+  const numberFieldAria = createNumberField(
+    {
+      get label() {
+        return ariaProps.label;
+      },
+      get "aria-label"() {
+        return ariaProps["aria-label"];
+      },
+      get "aria-labelledby"() {
+        return ariaProps["aria-labelledby"];
+      },
+      get "aria-describedby"() {
+        return ariaProps["aria-describedby"];
+      },
+      get isDisabled() {
+        return ariaProps.isDisabled;
+      },
+      get isReadOnly() {
+        return ariaProps.isReadOnly;
+      },
+      get isRequired() {
+        return ariaProps.isRequired;
+      },
+      get isInvalid() {
+        return ariaProps.isInvalid;
+      },
+      get description() {
+        return ariaProps.description;
+      },
+      get errorMessage() {
+        return ariaProps.errorMessage;
+      },
+      get id() {
+        return ariaProps.id;
+      },
+      get autoFocus() {
+        return ariaProps.autoFocus;
+      },
+      get name() {
+        return ariaProps.name;
+      },
+      get form() {
+        return ariaProps.form;
+      },
+      get onFocus() {
+        return ariaProps.onFocus;
+      },
+      get onBlur() {
+        return ariaProps.onBlur;
+      },
+      get onFocusChange() {
+        return ariaProps.onFocusChange;
+      },
+      get onKeyDown() {
+        return ariaProps.onKeyDown;
+      },
+      get onKeyUp() {
+        return ariaProps.onKeyUp;
+      },
+      get onPaste() {
+        return ariaProps.onPaste;
+      },
+      get onCopy() {
+        return ariaProps.onCopy;
+      },
+      get onCut() {
+        return ariaProps.onCut;
+      },
+    },
+    state,
+    () => inputRef ?? null,
+  );
 
-  // Create number field aria props
-  const {
-    labelProps,
-    groupProps,
-    inputProps,
-    incrementButtonProps,
-    decrementButtonProps,
-    descriptionProps,
-    errorMessageProps,
-  } = createNumberField(ariaProps, state, () => inputRef ?? null);
-
-  // Render props values
   const renderValues = createMemo<NumberFieldRenderProps>(() => ({
     isDisabled: ariaProps.isDisabled ?? false,
     isInvalid: ariaProps.isInvalid ?? false,
@@ -216,65 +292,117 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
     value: state.numberValue(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-NumberField',
+      defaultClassName: "solidaria-NumberField",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
-  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+  const childRenderValues: NumberFieldRenderProps = {
+    get isDisabled() {
+      return ariaProps.isDisabled ?? false;
+    },
+    get isInvalid() {
+      return ariaProps.isInvalid ?? false;
+    },
+    get isRequired() {
+      return ariaProps.isRequired ?? false;
+    },
+    get isReadOnly() {
+      return ariaProps.isReadOnly ?? false;
+    },
+    get value() {
+      return state.numberValue();
+    },
+  };
+
+  const fieldChildren = () => {
+    const children = local.children;
+    return typeof children === "function" ? children(childRenderValues) : children;
+  };
+
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
+
+  const contextValue: NumberFieldContextValue = {
+    state,
+    get inputProps() {
+      return numberFieldAria.inputProps;
+    },
+    get incrementButtonProps() {
+      return numberFieldAria.incrementButtonProps;
+    },
+    get decrementButtonProps() {
+      return numberFieldAria.decrementButtonProps;
+    },
+    get labelProps() {
+      return numberFieldAria.labelProps;
+    },
+    get groupProps() {
+      return numberFieldAria.groupProps;
+    },
+    get descriptionProps() {
+      return numberFieldAria.descriptionProps;
+    },
+    get errorMessageProps() {
+      return numberFieldAria.errorMessageProps;
+    },
+    get isDisabled() {
+      return ariaProps.isDisabled ?? false;
+    },
+    get isInvalid() {
+      return ariaProps.isInvalid ?? false;
+    },
+    get isRequired() {
+      return ariaProps.isRequired ?? false;
+    },
+    get isReadOnly() {
+      return ariaProps.isReadOnly ?? false;
+    },
+    setInputRef,
+  };
 
   return (
-    <NumberFieldContext.Provider
-      value={{
-        state,
-        inputProps,
-        incrementButtonProps,
-        decrementButtonProps,
-        labelProps,
-        groupProps,
-        descriptionProps,
-        errorMessageProps,
-        isDisabled: ariaProps.isDisabled ?? false,
-        isInvalid: ariaProps.isInvalid ?? false,
-        isRequired: ariaProps.isRequired ?? false,
-        isReadOnly: ariaProps.isReadOnly ?? false,
-      }}
-    >
-      <div
-        {...domProps()}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-disabled={ariaProps.isDisabled || undefined}
-        data-invalid={ariaProps.isInvalid || undefined}
-        data-required={ariaProps.isRequired || undefined}
-        data-readonly={ariaProps.isReadOnly || undefined}
-      >
-        {renderProps.renderChildren()}
-      </div>
-    </NumberFieldContext.Provider>
+    <NumberFieldStateContext.Provider value={state}>
+      <NumberFieldContext.Provider value={contextValue}>
+        <div
+          {...domProps()}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={ariaProps.isDisabled || undefined}
+          data-invalid={ariaProps.isInvalid || undefined}
+          data-required={ariaProps.isRequired || undefined}
+          data-readonly={ariaProps.isReadOnly || undefined}
+        >
+          {fieldChildren()}
+        </div>
+      </NumberFieldContext.Provider>
+    </NumberFieldStateContext.Provider>
   );
 }
 
 /**
  * The label for a number field.
  */
-export function NumberFieldLabel(props: { children?: JSX.Element; class?: string; style?: JSX.CSSProperties }): JSX.Element {
+export function NumberFieldLabel(props: {
+  children?: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}): JSX.Element {
   const context = useContext(NumberFieldContext);
   if (!context) {
-    throw new Error('NumberFieldLabel must be used within a NumberField');
+    throw new Error("NumberFieldLabel must be used within a NumberField");
   }
 
   return (
     <span
       {...context.labelProps}
-      class={props.class ?? 'solidaria-NumberField-label'}
+      class={props.class ?? "solidaria-NumberField-label"}
       style={props.style}
     >
       {props.children}
@@ -285,13 +413,13 @@ export function NumberFieldLabel(props: { children?: JSX.Element; class?: string
 /**
  * The input group for a number field (contains input and buttons).
  */
-export function NumberFieldGroup(props: { children?: JSX.Element; class?: string; style?: JSX.CSSProperties }): JSX.Element {
+export function NumberFieldGroup(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
+  const [local, domProps] = splitProps(props, ["children", "class", "style"]);
   const context = useContext(NumberFieldContext);
   if (!context) {
-    throw new Error('NumberFieldGroup must be used within a NumberField');
+    throw new Error("NumberFieldGroup must be used within a NumberField");
   }
 
-  // Extract ref to avoid type issues
   const cleanGroupProps = () => {
     const { ref: _ref, ...rest } = context.groupProps as Record<string, unknown>;
     return rest;
@@ -299,11 +427,12 @@ export function NumberFieldGroup(props: { children?: JSX.Element; class?: string
 
   return (
     <div
+      {...domProps}
       {...cleanGroupProps()}
-      class={props.class ?? 'solidaria-NumberField-group'}
-      style={props.style}
+      class={local.class ?? "solidaria-NumberField-group"}
+      style={local.style}
     >
-      {props.children}
+      {local.children}
     </div>
   );
 }
@@ -312,24 +441,21 @@ export function NumberFieldGroup(props: { children?: JSX.Element; class?: string
  * The input element for a number field.
  */
 export function NumberFieldInput(props: NumberFieldInputProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot"]);
 
   const context = useContext(NumberFieldContext);
   if (!context) {
-    throw new Error('NumberFieldInput must be used within a NumberField');
+    throw new Error("NumberFieldInput must be used within a NumberField");
   }
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return context.isDisabled;
     },
   });
 
-  // Render props values
   const renderValues = createMemo<NumberFieldInputRenderProps>(() => ({
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
@@ -338,19 +464,17 @@ export function NumberFieldInput(props: NumberFieldInputProps): JSX.Element {
     isInvalid: context.isInvalid,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-NumberField-input',
+      defaultClassName: "solidaria-NumberField-input",
     },
-    renderValues
+    renderValues,
   );
 
-  // Remove ref from spread props
   const cleanInputProps = () => {
-    const { ref: _ref, ...rest } = context.inputProps as Record<string, unknown>;
+    const { ref: _ref, onInput: _onInput, ...rest } = context.inputProps as Record<string, unknown>;
     return rest;
   };
   const cleanFocusProps = () => {
@@ -361,12 +485,23 @@ export function NumberFieldInput(props: NumberFieldInputProps): JSX.Element {
     const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;
     return rest;
   };
+  const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {
+    (
+      context.inputProps as unknown as { onInput?: JSX.EventHandler<HTMLInputElement, InputEvent> }
+    ).onInput?.(event);
+    (domProps as unknown as { onInput?: JSX.EventHandler<HTMLInputElement, InputEvent> }).onInput?.(
+      event,
+    );
+  };
 
   return (
     <input
+      {...domProps}
+      ref={context.setInputRef}
       {...cleanInputProps()}
       {...cleanFocusProps()}
       {...cleanHoverProps()}
+      onInput={handleInput}
       class={renderProps.class()}
       style={renderProps.style()}
       data-focused={isFocused() || undefined}
@@ -382,57 +517,47 @@ export function NumberFieldInput(props: NumberFieldInputProps): JSX.Element {
  * The increment button for a number field.
  */
 export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
 
   const context = useContext(NumberFieldContext);
   if (!context) {
-    throw new Error('NumberFieldIncrementButton must be used within a NumberField');
+    throw new Error("NumberFieldIncrementButton must be used within a NumberField");
   }
 
-  // Create press
-  const { isPressed, pressProps } = createPress({
+  const isDisabled = () => context.isDisabled || !context.state.canIncrement();
+
+  const buttonAria = createButton({
+    ...(context.incrementButtonProps as Record<string, unknown>),
+    elementType: "div",
     get isDisabled() {
-      return context.isDisabled || !context.state.canIncrement();
-    },
-    onPress: () => {
-      context.state.increment();
+      return isDisabled();
     },
   });
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return context.isDisabled || !context.state.canIncrement();
     },
   });
 
-  const isDisabled = () => context.isDisabled || !context.state.canIncrement();
-
-  // Render props values
   const renderValues = createMemo<NumberFieldButtonRenderProps>(() => ({
-    isPressed: isPressed(),
+    isPressed: buttonAria.isPressed(),
     isHovered: isHovered(),
     isDisabled: isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-NumberField-increment',
+      defaultClassName: "solidaria-NumberField-increment",
     },
-    renderValues
+    renderValues,
   );
 
-  // Remove ref from spread props
   const cleanButtonProps = () => {
-    const { ref: _ref, ...rest } = context.incrementButtonProps as Record<string, unknown>;
-    return rest;
-  };
-  const cleanPressProps = () => {
-    const { ref: _ref, ...rest } = pressProps as Record<string, unknown>;
+    const { ref: _ref, ...rest } = buttonAria.buttonProps as Record<string, unknown>;
     return rest;
   };
   const cleanHoverProps = () => {
@@ -441,18 +566,19 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
   };
 
   return (
-    <button
+    <div
+      {...domProps}
       {...cleanButtonProps()}
-      {...cleanPressProps()}
       {...cleanHoverProps()}
+      aria-disabled={isDisabled() || undefined}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-pressed={isPressed() || undefined}
+      data-pressed={buttonAria.isPressed() || undefined}
       data-hovered={isHovered() || undefined}
       data-disabled={isDisabled() || undefined}
     >
       {renderProps.renderChildren()}
-    </button>
+    </div>
   );
 }
 
@@ -460,57 +586,47 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
  * The decrement button for a number field.
  */
 export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
 
   const context = useContext(NumberFieldContext);
   if (!context) {
-    throw new Error('NumberFieldDecrementButton must be used within a NumberField');
+    throw new Error("NumberFieldDecrementButton must be used within a NumberField");
   }
 
-  // Create press
-  const { isPressed, pressProps } = createPress({
+  const isDisabled = () => context.isDisabled || !context.state.canDecrement();
+
+  const buttonAria = createButton({
+    ...(context.decrementButtonProps as Record<string, unknown>),
+    elementType: "div",
     get isDisabled() {
-      return context.isDisabled || !context.state.canDecrement();
-    },
-    onPress: () => {
-      context.state.decrement();
+      return isDisabled();
     },
   });
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return context.isDisabled || !context.state.canDecrement();
     },
   });
 
-  const isDisabled = () => context.isDisabled || !context.state.canDecrement();
-
-  // Render props values
   const renderValues = createMemo<NumberFieldButtonRenderProps>(() => ({
-    isPressed: isPressed(),
+    isPressed: buttonAria.isPressed(),
     isHovered: isHovered(),
     isDisabled: isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-NumberField-decrement',
+      defaultClassName: "solidaria-NumberField-decrement",
     },
-    renderValues
+    renderValues,
   );
 
-  // Remove ref from spread props
   const cleanButtonProps = () => {
-    const { ref: _ref, ...rest } = context.decrementButtonProps as Record<string, unknown>;
-    return rest;
-  };
-  const cleanPressProps = () => {
-    const { ref: _ref, ...rest } = pressProps as Record<string, unknown>;
+    const { ref: _ref, ...rest } = buttonAria.buttonProps as Record<string, unknown>;
     return rest;
   };
   const cleanHoverProps = () => {
@@ -519,22 +635,22 @@ export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProp
   };
 
   return (
-    <button
+    <div
+      {...domProps}
       {...cleanButtonProps()}
-      {...cleanPressProps()}
       {...cleanHoverProps()}
+      aria-disabled={isDisabled() || undefined}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-pressed={isPressed() || undefined}
+      data-pressed={buttonAria.isPressed() || undefined}
       data-hovered={isHovered() || undefined}
       data-disabled={isDisabled() || undefined}
     >
       {renderProps.renderChildren()}
-    </button>
+    </div>
   );
 }
 
-// Attach sub-components
 NumberField.Label = NumberFieldLabel;
 NumberField.Group = NumberFieldGroup;
 NumberField.Input = NumberFieldInput;