@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/numberfield/createNumberField.ts

@@ -3,23 +3,25 @@
  * Based on @react-aria/numberfield useNumberField.
  */
 
-import { type JSX, createMemo } from 'solid-js';
-import { createLabel } from '../label/createLabel';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { NumberFieldState } from '@proyecto-viviana/solid-stately';
+import { type JSX, createMemo } from "solid-js";
+import { createLabel } from "../label/createLabel";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { mergeProps } from "../utils/mergeProps";
+import { createId } from "../ssr";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import type { NumberFieldState } from "@proyecto-viviana/solid-stately";
+import type { AriaButtonProps } from "../button/types";
+import type { PressEvent } from "../interactions";
 
 export interface AriaNumberFieldProps {
   /** A label for the number field. */
   label?: JSX.Element;
   /** An accessible label for the number field. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The element ID that labels the number field. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The element ID that describes the number field. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Whether the number field is disabled. */
   isDisabled?: boolean;
   /** Whether the number field is read-only. */
@@ -66,9 +68,9 @@ export interface NumberFieldAria {
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
   /** Props for the increment button. */
-  incrementButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  incrementButtonProps: AriaButtonProps;
   /** Props for the decrement button. */
-  decrementButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  decrementButtonProps: AriaButtonProps;
   /** Props for the description element. */
   descriptionProps: JSX.HTMLAttributes<HTMLElement>;
   /** Props for the error message element. */
@@ -81,7 +83,7 @@ export interface NumberFieldAria {
 export function createNumberField(
   props: MaybeAccessor<AriaNumberFieldProps>,
   state: NumberFieldState,
-  inputRef?: () => HTMLInputElement | null
+  inputRef?: () => HTMLInputElement | null,
 ): NumberFieldAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -101,26 +103,26 @@ export function createNumberField(
     get label() {
       return getProps().label;
     },
-    get 'aria-label'() {
-      return getProps()['aria-label'];
+    get "aria-label"() {
+      return getProps()["aria-label"];
     },
-    get 'aria-labelledby'() {
-      return getProps()['aria-labelledby'];
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
     },
-    labelElementType: 'span',
+    labelElementType: "span",
   });
 
   // Get the label text for button aria-labels
   const getLabelText = (): string => {
     const p = getProps();
-    if (p['aria-label']) return p['aria-label'];
-    if (typeof p.label === 'string') return p.label;
-    return 'value';
+    if (p["aria-label"]) return p["aria-label"];
+    if (typeof p.label === "string") return p.label;
+    return "value";
   };
 
   // Filter DOM props
   const domProps = createMemo(() =>
-    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true })
+    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true }),
   );
 
   // Handle input change
@@ -154,31 +156,31 @@ export function createNumberField(
     }
 
     switch (e.key) {
-      case 'ArrowUp':
+      case "ArrowUp":
         e.preventDefault();
         state.increment();
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         e.preventDefault();
         state.decrement();
         break;
-      case 'PageUp':
+      case "PageUp":
         e.preventDefault();
         state.incrementToMax();
         break;
-      case 'PageDown':
+      case "PageDown":
         e.preventDefault();
         state.decrementToMin();
         break;
-      case 'Home':
+      case "Home":
         e.preventDefault();
         state.decrementToMin();
         break;
-      case 'End':
+      case "End":
         e.preventDefault();
         state.incrementToMax();
         break;
-      case 'Enter':
+      case "Enter":
         state.commit();
         break;
     }
@@ -190,28 +192,81 @@ export function createNumberField(
     getProps().onKeyUp?.(e);
   };
 
-  // Handle increment button
-  const onIncrementPress = () => {
-    state.increment();
-    // Return focus to input
-    inputRef?.()?.focus();
+  const onButtonPressStart = (e: PressEvent) => {
+    const input = inputRef?.();
+
+    // Keep existing input focus in place. This avoids hiding software keyboards
+    // and prevents a blur/refocus flicker when mouse pressing the steppers.
+    if (input && input.ownerDocument.activeElement === input) {
+      return;
+    }
+
+    if (e.pointerType === "mouse") {
+      input?.focus();
+    } else if (e.target instanceof HTMLElement) {
+      e.target.focus();
+    }
+  };
+
+  let incrementTouchPressUp = false;
+  let decrementTouchPressUp = false;
+
+  const onIncrementPressStart = (e: PressEvent) => {
+    if (e.pointerType !== "touch") {
+      state.increment();
+    } else {
+      incrementTouchPressUp = false;
+    }
+
+    onButtonPressStart(e);
+  };
+
+  const onIncrementPressUp = (e: PressEvent) => {
+    if (e.pointerType === "touch") {
+      incrementTouchPressUp = true;
+    }
+  };
+
+  const onIncrementPressEnd = (e: PressEvent) => {
+    if (e.pointerType === "touch" && incrementTouchPressUp) {
+      state.increment();
+    }
+
+    incrementTouchPressUp = false;
+  };
+
+  const onDecrementPressStart = (e: PressEvent) => {
+    if (e.pointerType !== "touch") {
+      state.decrement();
+    } else {
+      decrementTouchPressUp = false;
+    }
+
+    onButtonPressStart(e);
+  };
+
+  const onDecrementPressUp = (e: PressEvent) => {
+    if (e.pointerType === "touch") {
+      decrementTouchPressUp = true;
+    }
   };
 
-  // Handle decrement button
-  const onDecrementPress = () => {
-    state.decrement();
-    // Return focus to input
-    inputRef?.()?.focus();
+  const onDecrementPressEnd = (e: PressEvent) => {
+    if (e.pointerType === "touch" && decrementTouchPressUp) {
+      state.decrement();
+    }
+
+    decrementTouchPressUp = false;
   };
 
   // Build aria-describedby
   const getAriaDescribedBy = () => {
     const p = getProps();
     const parts: string[] = [];
-    if (p['aria-describedby']) parts.push(p['aria-describedby']);
+    if (p["aria-describedby"]) parts.push(p["aria-describedby"]);
     if (p.description) parts.push(descriptionId);
     if (p.isInvalid && p.errorMessage) parts.push(errorMessageId);
-    return parts.length > 0 ? parts.join(' ') : undefined;
+    return parts.length > 0 ? parts.join(" ") : undefined;
   };
 
   return {
@@ -220,9 +275,9 @@ export function createNumberField(
     },
     get groupProps() {
       return {
-        role: 'group',
-        'aria-disabled': getProps().isDisabled || undefined,
-        'aria-invalid': getProps().isInvalid || undefined,
+        role: "group",
+        "aria-disabled": getProps().isDisabled || undefined,
+        "aria-invalid": getProps().isInvalid || undefined,
       } as JSX.HTMLAttributes<HTMLElement>;
     },
     get inputProps() {
@@ -235,22 +290,24 @@ export function createNumberField(
         fieldProps as Record<string, unknown>,
         {
           id: inputId,
-          type: 'text',
-          inputMode: 'decimal' as const,
-          autoComplete: 'off',
-          autoCorrect: 'off',
+          type: "text",
+          inputMode: "decimal" as const,
+          autoComplete: "off",
+          autoCorrect: "off",
           spellcheck: false,
-          role: 'spinbutton',
-          'aria-valuenow': isNaN(state.numberValue()) ? undefined : state.numberValue(),
-          'aria-valuemin': state.minValue(),
-          'aria-valuemax': state.maxValue(),
-          'aria-valuetext': isNaN(state.numberValue()) ? undefined : state.inputValue(),
-          'aria-invalid': p.isInvalid || undefined,
-          'aria-required': p.isRequired || undefined,
-          'aria-describedby': getAriaDescribedBy(),
+          role: "spinbutton",
+          "aria-valuenow": isNaN(state.numberValue()) ? undefined : state.numberValue(),
+          "aria-valuemin": state.minValue(),
+          "aria-valuemax": state.maxValue(),
+          "aria-valuetext": isNaN(state.numberValue()) ? undefined : state.inputValue(),
+          "aria-invalid": p.isInvalid || undefined,
+          "aria-required": p.isRequired || undefined,
+          "aria-describedby": getAriaDescribedBy(),
           disabled: isDisabled || undefined,
           readOnly: isReadOnly || undefined,
+          required: p.isRequired || undefined,
           value: state.inputValue(),
+          onInput: onInputChange,
           onChange: onInputChange,
           onFocus: onInputFocus,
           onBlur: onInputBlur,
@@ -262,40 +319,40 @@ export function createNumberField(
           name: p.name,
           form: p.form,
           autoFocus: p.autoFocus,
-        } as Record<string, unknown>
+        } as Record<string, unknown>,
       ) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
     get incrementButtonProps() {
-      const p = getProps();
-      const isDisabled = p.isDisabled ?? state.isDisabled();
-      const canIncrement = state.canIncrement();
-
       return {
         id: incrementId,
-        type: 'button' as const,
-        tabIndex: -1, // Exclude from tab order
-        'aria-label': `Increase ${getLabelText()}`,
-        'aria-controls': inputId,
-        disabled: isDisabled || !canIncrement,
-        onClick: onIncrementPress,
-        onMouseDown: (e: MouseEvent) => e.preventDefault(), // Prevent focus
-      } as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+        "aria-label": `Increase ${getLabelText()}`,
+        "aria-controls": inputId,
+        excludeFromTabOrder: true,
+        preventFocusOnPress: true,
+        allowFocusWhenDisabled: true,
+        get isDisabled() {
+          return !state.canIncrement();
+        },
+        onPressStart: onIncrementPressStart,
+        onPressUp: onIncrementPressUp,
+        onPressEnd: onIncrementPressEnd,
+      } as AriaButtonProps;
     },
     get decrementButtonProps() {
-      const p = getProps();
-      const isDisabled = p.isDisabled ?? state.isDisabled();
-      const canDecrement = state.canDecrement();
-
       return {
         id: decrementId,
-        type: 'button' as const,
-        tabIndex: -1, // Exclude from tab order
-        'aria-label': `Decrease ${getLabelText()}`,
-        'aria-controls': inputId,
-        disabled: isDisabled || !canDecrement,
-        onClick: onDecrementPress,
-        onMouseDown: (e: MouseEvent) => e.preventDefault(), // Prevent focus
-      } as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+        "aria-label": `Decrease ${getLabelText()}`,
+        "aria-controls": inputId,
+        excludeFromTabOrder: true,
+        preventFocusOnPress: true,
+        allowFocusWhenDisabled: true,
+        get isDisabled() {
+          return !state.canDecrement();
+        },
+        onPressStart: onDecrementPressStart,
+        onPressUp: onDecrementPressUp,
+        onPressEnd: onDecrementPressEnd,
+      } as AriaButtonProps;
     },
     get descriptionProps() {
       return {

package/src/numberfield/index.ts

@@ -2,4 +2,4 @@ export {
   createNumberField,
   type AriaNumberFieldProps,
   type NumberFieldAria,
-} from './createNumberField';
+} from "./createNumberField";

package/src/overlays/ariaHideOutside.ts

@@ -3,9 +3,9 @@
  * Based on @react-aria/overlays ariaHideOutside.
  */
 
-import { getOwnerWindow } from '../utils';
+import { getOwnerWindow } from "../utils";
 
-const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
+const supportsInert = typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
 
 export interface AriaHideOutsideOptions {
   /** The root element to start hiding from. */
@@ -37,7 +37,7 @@ const observerStack: ObserverWrapper[] = [];
  */
 export function ariaHideOutside(
   targets: Element[],
-  options?: AriaHideOutsideOptions | Element
+  options?: AriaHideOutsideOptions | Element,
 ): () => void {
   const windowObj = getOwnerWindow(targets?.[0]);
   const opts = options instanceof windowObj.Element ? { root: options } : options;
@@ -49,16 +49,16 @@ export function ariaHideOutside(
   const getHidden = (element: Element): boolean => {
     return shouldUseInert && element instanceof windowObj.HTMLElement
       ? element.inert
-      : element.getAttribute('aria-hidden') === 'true';
+      : element.getAttribute("aria-hidden") === "true";
   };
 
   const setHidden = (element: Element, hidden: boolean): void => {
     if (shouldUseInert && element instanceof windowObj.HTMLElement) {
       element.inert = hidden;
     } else if (hidden) {
-      element.setAttribute('aria-hidden', 'true');
+      element.setAttribute("aria-hidden", "true");
     } else {
-      element.removeAttribute('aria-hidden');
+      element.removeAttribute("aria-hidden");
       if (element instanceof windowObj.HTMLElement) {
         // We only ever call setHidden with hidden = false when the nodeCount is 1 aka
         // we are trying to make the element visible to screen readers again, so remove inert as well
@@ -86,7 +86,9 @@ export function ariaHideOutside(
 
   const walk = (walkRoot: Element): void => {
     // Keep live announcer and top layer elements (e.g. toasts) visible.
-    for (const element of walkRoot.querySelectorAll('[data-live-announcer], [data-solidaria-top-layer]')) {
+    for (const element of walkRoot.querySelectorAll(
+      "[data-live-announcer], [data-solidaria-top-layer]",
+    )) {
       visibleNodes.add(element);
     }
 
@@ -98,7 +100,9 @@ export function ariaHideOutside(
       if (
         hiddenNodes.has(node) ||
         visibleNodes.has(node) ||
-        (node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
+        (node.parentElement &&
+          hiddenNodes.has(node.parentElement) &&
+          node.parentElement.getAttribute("role") !== "row")
       ) {
         return NodeFilter.FILTER_REJECT;
       }
@@ -140,7 +144,7 @@ export function ariaHideOutside(
 
   const observer = new MutationObserver((changes) => {
     for (const change of changes) {
-      if (change.type !== 'childList') {
+      if (change.type !== "childList") {
         continue;
       }
 
@@ -150,7 +154,7 @@ export function ariaHideOutside(
         for (const node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&
-            (node.dataset.liveAnnouncer === 'true' || node.dataset.solidariaTopLayer === 'true')
+            (node.dataset.liveAnnouncer === "true" || node.dataset.solidariaTopLayer === "true")
           ) {
             visibleNodes.add(node);
           } else if (node instanceof Element) {

package/src/overlays/createInteractOutside.ts

@@ -3,8 +3,8 @@
  * Based on @react-aria/interactions useInteractOutside.
  */
 
-import { createEffect, onCleanup } from 'solid-js';
-import { getOwnerDocument } from '../utils';
+import { createEffect, onCleanup } from "solid-js";
+import { getOwnerDocument } from "../utils";
 
 export interface InteractOutsideProps {
   /** Reference to the element to detect interactions outside of. */
@@ -51,7 +51,7 @@ export function createInteractOutside(props: InteractOutsideProps): void {
     };
 
     // Use pointer events if available. Otherwise, fall back to mouse and touch events.
-    if (typeof PointerEvent !== 'undefined') {
+    if (typeof PointerEvent !== "undefined") {
       const onClick = (e: PointerEvent) => {
         if (isPointerDown && isValidEvent(e, ref)) {
           triggerInteractOutside(e);
@@ -61,12 +61,12 @@ export function createInteractOutside(props: InteractOutsideProps): void {
 
       // Use click instead of pointerup to avoid Android Chrome issue
       // https://issues.chromium.org/issues/40732224
-      documentObject.addEventListener('pointerdown', onPointerDown as EventListener, true);
-      documentObject.addEventListener('click', onClick as EventListener, true);
+      documentObject.addEventListener("pointerdown", onPointerDown as EventListener, true);
+      documentObject.addEventListener("click", onClick as EventListener, true);
 
       onCleanup(() => {
-        documentObject.removeEventListener('pointerdown', onPointerDown as EventListener, true);
-        documentObject.removeEventListener('click', onClick as EventListener, true);
+        documentObject.removeEventListener("pointerdown", onPointerDown as EventListener, true);
+        documentObject.removeEventListener("click", onClick as EventListener, true);
       });
     } else {
       // Fallback for environments without PointerEvent (mainly tests)
@@ -105,24 +105,27 @@ export function createInteractOutside(props: InteractOutsideProps): void {
         }
       };
 
-      documentObject.addEventListener('mousedown', onMouseDown as EventListener, true);
-      documentObject.addEventListener('mouseup', onMouseUp as EventListener, true);
-      documentObject.addEventListener('touchstart', onTouchStart as EventListener, true);
-      documentObject.addEventListener('touchend', onTouchEnd as EventListener, true);
+      documentObject.addEventListener("mousedown", onMouseDown as EventListener, true);
+      documentObject.addEventListener("mouseup", onMouseUp as EventListener, true);
+      documentObject.addEventListener("touchstart", onTouchStart as EventListener, true);
+      documentObject.addEventListener("touchend", onTouchEnd as EventListener, true);
 
       onCleanup(() => {
-        documentObject.removeEventListener('mousedown', onMouseDown as EventListener, true);
-        documentObject.removeEventListener('mouseup', onMouseUp as EventListener, true);
-        documentObject.removeEventListener('touchstart', onTouchStart as EventListener, true);
-        documentObject.removeEventListener('touchend', onTouchEnd as EventListener, true);
+        documentObject.removeEventListener("mousedown", onMouseDown as EventListener, true);
+        documentObject.removeEventListener("mouseup", onMouseUp as EventListener, true);
+        documentObject.removeEventListener("touchstart", onTouchStart as EventListener, true);
+        documentObject.removeEventListener("touchend", onTouchEnd as EventListener, true);
       });
     }
   });
 }
 
-function isValidEvent(event: PointerEvent | MouseEvent | TouchEvent, ref: () => Element | null): boolean {
+function isValidEvent(
+  event: PointerEvent | MouseEvent | TouchEvent,
+  ref: () => Element | null,
+): boolean {
   // Only handle primary button clicks
-  if ('button' in event && event.button > 0) {
+  if ("button" in event && event.button > 0) {
     return false;
   }
 
@@ -133,7 +136,7 @@ function isValidEvent(event: PointerEvent | MouseEvent | TouchEvent, ref: () =>
       return false;
     }
     // If the target is within a top layer element (e.g. toasts), ignore
-    if ((event.target as Element).closest?.('[data-solidaria-top-layer]')) {
+    if ((event.target as Element).closest?.("[data-solidaria-top-layer]")) {
       return false;
     }
   }

package/src/overlays/createModal.tsx

@@ -12,9 +12,9 @@ import {
   type JSX,
   type Accessor,
   type ParentComponent,
-} from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { isServer } from 'solid-js/web';
+} from "solid-js";
+import { Portal } from "solid-js/web";
+import { isServer } from "solid-js/web";
 
 export interface ModalProviderProps {
   children: JSX.Element;
@@ -69,11 +69,7 @@ export const ModalProvider: ParentComponent<ModalProviderProps> = (props) => {
     },
   };
 
-  return (
-    <ModalContext.Provider value={context}>
-      {props.children}
-    </ModalContext.Provider>
-  );
+  return <ModalContext.Provider value={context}>{props.children}</ModalContext.Provider>;
 };
 
 /**
@@ -85,7 +81,8 @@ export const UNSAFE_PortalProvider: ParentComponent<PortalProviderProps> = (prop
   return (
     <PortalContext.Provider
       value={{
-        getContainer: props.getContainer === null ? undefined : props.getContainer ?? parent.getContainer,
+        getContainer:
+          props.getContainer === null ? undefined : (props.getContainer ?? parent.getContainer),
       }}
     >
       {props.children}
@@ -103,7 +100,7 @@ export function useUNSAFE_PortalContext(): PortalProviderContextValue {
 export interface ModalProviderAria {
   /** Props to be spread on the container element. */
   modalProviderProps: {
-    'aria-hidden'?: true;
+    "aria-hidden"?: true;
   };
 }
 
@@ -115,7 +112,7 @@ export function useModalProvider(): ModalProviderAria {
   const context = useContext(ModalContext);
   return {
     modalProviderProps: {
-      get 'aria-hidden'() {
+      get "aria-hidden"() {
         return context && context.modalCount() > 0 ? true : undefined;
       },
     },
@@ -172,12 +169,15 @@ export const OverlayContainer: ParentComponent<OverlayContainerProps> = (props)
   }
 
   const portalContext = useUNSAFE_PortalContext();
-  const portalContainer = () => props.portalContainer ?? portalContext.getContainer?.() ?? document.body;
+  const portalContainer = () =>
+    props.portalContainer ?? portalContext.getContainer?.() ?? document.body;
 
   createEffect(() => {
     const container = portalContainer();
-    if (container?.closest('[data-overlay-container]')) {
-      throw new Error('An OverlayContainer must not be inside another container. Please change the portalContainer prop.');
+    if (container?.closest("[data-overlay-container]")) {
+      throw new Error(
+        "An OverlayContainer must not be inside another container. Please change the portalContainer prop.",
+      );
     }
   });
 
@@ -196,7 +196,7 @@ export interface AriaModalOptions {
 export interface ModalAria {
   /** Props for the modal content element. */
   modalProps: {
-    'data-ismodal': boolean;
+    "data-ismodal": boolean;
   };
 }
 
@@ -211,7 +211,7 @@ export function createModal(options?: AriaModalOptions): ModalAria {
   const context = useContext(ModalContext);
 
   if (!context) {
-    throw new Error('Modal is not contained within a provider');
+    throw new Error("Modal is not contained within a provider");
   }
 
   createEffect(() => {
@@ -232,7 +232,7 @@ export function createModal(options?: AriaModalOptions): ModalAria {
 
   return {
     modalProps: {
-      'data-ismodal': !options?.isDisabled,
+      "data-ismodal": !options?.isDisabled,
     },
   };
 }