@proyecto-viviana/solidaria-components 0.2.9 → 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>;
@@ -146,45 +130,49 @@ interface NumberFieldContextValue {
 export const NumberFieldContext = createContext<NumberFieldContextValue | null>(null);
 export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
 
-// ============================================
-// COMPONENTS
-// ============================================
-
 /**
  * A number field allows a user to enter a number and increment/decrement the value.
  */
 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'],
+    ["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',
-    ]
+      "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;
@@ -218,26 +206,24 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
     },
   });
 
-  // Ref for the input
   let inputRef: HTMLInputElement | undefined;
   const setInputRef = (el: HTMLInputElement) => {
     inputRef = el;
   };
 
-  // Create number field aria props
   const numberFieldAria = createNumberField(
     {
       get label() {
         return ariaProps.label;
       },
-      get 'aria-label'() {
-        return ariaProps['aria-label'];
+      get "aria-label"() {
+        return ariaProps["aria-label"];
       },
-      get 'aria-labelledby'() {
-        return ariaProps['aria-labelledby'];
+      get "aria-labelledby"() {
+        return ariaProps["aria-labelledby"];
       },
-      get 'aria-describedby'() {
-        return ariaProps['aria-describedby'];
+      get "aria-describedby"() {
+        return ariaProps["aria-describedby"];
       },
       get isDisabled() {
         return ariaProps.isDisabled;
@@ -295,10 +281,9 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
       },
     },
     state,
-    () => inputRef ?? null
+    () => inputRef ?? null,
   );
 
-  // Render props values
   const renderValues = createMemo<NumberFieldRenderProps>(() => ({
     isDisabled: ariaProps.isDisabled ?? false,
     isInvalid: ariaProps.isInvalid ?? false,
@@ -307,19 +292,42 @@ 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,
@@ -371,7 +379,7 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
           data-required={ariaProps.isRequired || undefined}
           data-readonly={ariaProps.isReadOnly || undefined}
         >
-          {renderProps.renderChildren()}
+          {fieldChildren()}
         </div>
       </NumberFieldContext.Provider>
     </NumberFieldStateContext.Provider>
@@ -381,16 +389,20 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
 /**
  * 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}
@@ -401,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;
@@ -415,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>
   );
 }
@@ -428,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, domProps] = 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(),
@@ -454,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 = () => {
@@ -477,6 +485,14 @@ 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
@@ -485,6 +501,7 @@ export function NumberFieldInput(props: NumberFieldInputProps): JSX.Element {
       {...cleanInputProps()}
       {...cleanFocusProps()}
       {...cleanHoverProps()}
+      onInput={handleInput}
       class={renderProps.class()}
       style={renderProps.style()}
       data-focused={isFocused() || undefined}
@@ -500,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, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
+  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.incrementButtonProps.onClick as ((e?: MouseEvent) => void) | undefined)?.();
+      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 = () => {
@@ -559,19 +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>
   );
 }
 
@@ -579,57 +586,47 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
  * The decrement button for a number field.
  */
 export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
+  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.decrementButtonProps.onClick as ((e?: MouseEvent) => void) | undefined)?.();
+      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 = () => {
@@ -638,23 +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;