@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/toast/createToastRegion.ts

@@ -7,19 +7,20 @@
  * Port of @react-aria/toast useToastRegion.
  */
 
-import { type JSX, createMemo } from 'solid-js';
-import { type ToastState } from '@proyecto-viviana/solid-stately';
-import { createHover } from '../interactions/createHover';
-
-// ============================================
-// TYPES
-// ============================================
+import { type Accessor, type JSX, createEffect, createMemo, onCleanup } from "solid-js";
+import { type ToastState } from "@proyecto-viviana/solid-stately";
+import { createHover } from "../interactions/createHover";
+import { getInteractionModality } from "../interactions/createInteractionModality";
+import { createLandmark } from "../landmark/createLandmark";
+import { focusWithoutScrolling } from "../utils/focus";
 
 export interface AriaToastRegionProps<T> {
   /** The toast state from createToastState. */
   state: ToastState<T>;
+  /** The toast region element. Required for landmark navigation and focus recovery. */
+  ref?: Accessor<HTMLElement | undefined>;
   /** An accessible label for the region. */
-  'aria-label'?: string;
+  "aria-label"?: string;
 }
 
 export interface ToastRegionAria {
@@ -27,10 +28,6 @@ export interface ToastRegionAria {
   regionProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the accessibility implementation for a ToastRegion component.
  *
@@ -59,41 +56,187 @@ export interface ToastRegionAria {
  * ```
  */
 export function createToastRegion<T>(props: AriaToastRegionProps<T>): ToastRegionAria {
-  // Pause timers on hover
+  const visibleToasts = () =>
+    typeof props.state.visibleToasts === "function" ? props.state.visibleToasts() : [];
+  const regionRef = () => props.ref?.();
+  const activeRegionRef = () => (visibleToasts().length > 0 ? regionRef() : undefined);
+
+  const { landmarkProps } = createLandmark(
+    () => ({
+      role: "region",
+      "aria-label": props["aria-label"] ?? "Notifications",
+    }),
+    activeRegionRef,
+  );
+
+  let isHovered = false;
+  let isFocused = false;
+  let toastElements: HTMLElement[] = [];
+  let previousVisibleToasts = visibleToasts();
+  let focusedToastIndex = -1;
+  let lastFocused: HTMLElement | null = null;
+
+  const updateTimers = () => {
+    if (isHovered || isFocused) {
+      props.state.pauseAll();
+    } else {
+      props.state.resumeAll();
+    }
+  };
+
   const { hoverProps } = createHover({
     onHoverStart: () => {
-      props.state.pauseAll();
+      isHovered = true;
+      updateTimers();
     },
     onHoverEnd: () => {
-      props.state.resumeAll();
+      isHovered = false;
+      updateTimers();
     },
   });
 
-  // Pause timers on focus
-  const handleFocus = () => {
-    props.state.pauseAll();
+  const getToastElements = () => {
+    const element = regionRef();
+    return element ? [...element.querySelectorAll<HTMLElement>('[role="alertdialog"]')] : [];
+  };
+
+  const restoreLastFocused = () => {
+    if (!lastFocused?.isConnected) {
+      lastFocused = null;
+      return;
+    }
+
+    if (getInteractionModality() === "pointer") {
+      focusWithoutScrolling(lastFocused);
+    } else {
+      lastFocused.focus();
+    }
+
+    lastFocused = null;
+  };
+
+  const handleFocusIn = (e: FocusEvent) => {
+    const currentTarget = e.currentTarget as HTMLElement;
+    const relatedTarget = e.relatedTarget as HTMLElement | null;
+
+    if (!isFocused) {
+      isFocused = true;
+      if (relatedTarget && !currentTarget.contains(relatedTarget)) {
+        lastFocused = relatedTarget;
+      }
+      updateTimers();
+    }
+
+    toastElements = getToastElements();
+    const target =
+      e.target instanceof Element ? e.target.closest<HTMLElement>('[role="alertdialog"]') : null;
+    focusedToastIndex = target ? toastElements.findIndex((toast) => toast === target) : -1;
   };
 
-  const handleBlur = (e: FocusEvent) => {
-    // Only resume if focus moved outside the region
+  const handleFocusOut = (e: FocusEvent) => {
     const target = e.relatedTarget as HTMLElement | null;
     const currentTarget = e.currentTarget as HTMLElement;
     if (!target || !currentTarget.contains(target)) {
-      props.state.resumeAll();
+      isFocused = false;
+      focusedToastIndex = -1;
+      updateTimers();
     }
   };
 
+  createEffect(() => {
+    const currentVisibleToasts = visibleToasts();
+    const element = regionRef();
+
+    if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {
+      toastElements = [];
+      previousVisibleToasts = currentVisibleToasts;
+      return;
+    }
+
+    toastElements = getToastElements();
+
+    const unchanged =
+      previousVisibleToasts.length === currentVisibleToasts.length &&
+      currentVisibleToasts.every((toast, index) => toast.key === previousVisibleToasts[index]?.key);
+
+    if (unchanged) {
+      previousVisibleToasts = currentVisibleToasts;
+      return;
+    }
+
+    const allToasts = previousVisibleToasts.map((toast, index) => ({
+      index,
+      isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key),
+    }));
+    const removedFocusedToastIndex = allToasts.findIndex(
+      (toast) => toast.index === focusedToastIndex && toast.isRemoved,
+    );
+
+    if (removedFocusedToastIndex > -1) {
+      if (getInteractionModality() === "pointer" && lastFocused?.isConnected) {
+        focusWithoutScrolling(lastFocused);
+      } else {
+        let index = 0;
+        let nextToast: number | undefined;
+        let previousToast: number | undefined;
+
+        while (index <= removedFocusedToastIndex) {
+          if (!allToasts[index]?.isRemoved) {
+            previousToast = Math.max(0, index - 1);
+          }
+          index++;
+        }
+
+        while (index < allToasts.length) {
+          if (!allToasts[index]?.isRemoved) {
+            nextToast = index - 1;
+            break;
+          }
+          index++;
+        }
+
+        if (previousToast === undefined && nextToast === undefined) {
+          previousToast = 0;
+        }
+
+        if (
+          previousToast !== undefined &&
+          previousToast >= 0 &&
+          previousToast < toastElements.length
+        ) {
+          focusWithoutScrolling(toastElements[previousToast]);
+        } else if (nextToast !== undefined && nextToast >= 0 && nextToast < toastElements.length) {
+          focusWithoutScrolling(toastElements[nextToast]);
+        }
+      }
+    }
+
+    previousVisibleToasts = currentVisibleToasts;
+  });
+
+  createEffect(() => {
+    if (visibleToasts().length === 0) {
+      restoreLastFocused();
+    }
+  });
+
+  onCleanup(() => {
+    restoreLastFocused();
+  });
+
   // Region props
   const regionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
+    ...landmarkProps,
     ...hoverProps,
-    role: 'region' as const,
-    'aria-label': props['aria-label'] ?? 'Notifications',
     tabIndex: -1,
-    onFocusIn: handleFocus,
-    onFocusOut: handleBlur,
+    "data-solidaria-top-layer": "true",
+    onFocusIn: handleFocusIn,
+    onFocusOut: handleFocusOut,
   }));
 
   return {
-    get regionProps() { return regionProps(); },
+    get regionProps() {
+      return regionProps();
+    },
   };
 }

package/src/toast/index.ts

@@ -1,11 +1,7 @@
-export {
-  createToast,
-  type AriaToastProps,
-  type ToastAria,
-} from './createToast';
+export { createToast, type AriaToastProps, type ToastAria } from "./createToast";
 
 export {
   createToastRegion,
   type AriaToastRegionProps,
   type ToastRegionAria,
-} from './createToastRegion';
+} from "./createToastRegion";

package/src/toggle/createToggle.ts

@@ -6,19 +6,16 @@
  * This is a 1:1 port of @react-aria/toggle's useToggle hook.
  */
 
-import { JSX, Accessor, createEffect } from 'solid-js';
-import { createPress } from '../interactions/createPress';
-import { createFocusable } from '../interactions/createFocusable';
-import { mergeProps } from '../utils/mergeProps';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { isDevEnv } from '../utils/env';
-import { type ToggleState } from '@proyecto-viviana/solid-stately';
-import { type PressEvent } from '../interactions/PressEvent';
-
-// ============================================
-// TYPES
-// ============================================
+import { JSX, Accessor, createEffect } from "solid-js";
+import { createPress } from "../interactions/createPress";
+import { createFocusable } from "../interactions/createFocusable";
+import { mergeProps } from "../utils/mergeProps";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import { isDevEnv } from "../utils/env";
+import { createSlotId } from "../ssr";
+import { type ToggleState } from "@proyecto-viviana/solid-stately";
+import { type PressEvent } from "../interactions/PressEvent";
 
 export interface AriaToggleProps {
   /** Whether the element should be selected (controlled). */
@@ -44,15 +41,15 @@ export interface AriaToggleProps {
   /** The element's children. */
   children?: JSX.Element;
   /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Identifies the element (or elements) that provide an error message for the object. */
-  'aria-errormessage'?: string;
+  "aria-errormessage"?: string;
   /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */
-  'aria-controls'?: string;
+  "aria-controls"?: string;
   /** The element's unique identifier. */
   id?: string;
   /** Handler that is called when the press is released over the target. */
@@ -88,6 +85,10 @@ export interface ToggleAria {
   labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
   /** Props to be spread on the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
   /** Whether the toggle is selected. */
   isSelected: Accessor<boolean>;
   /** Whether the toggle is in a pressed state. */
@@ -100,17 +101,13 @@ export interface ToggleAria {
   isInvalid: boolean;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Handles interactions for toggle elements, e.g. Checkboxes and Switches.
  */
 export function createToggle(
   props: MaybeAccessor<AriaToggleProps>,
   state: ToggleState,
-  ref: () => HTMLInputElement | null
+  ref: () => HTMLInputElement | null,
 ): ToggleAria {
   const getProps = () => access(props);
 
@@ -122,45 +119,93 @@ export function createToggle(
 
   // Handle press state for keyboard interactions and cases where labelProps is not used.
   const { pressProps, isPressed } = createPress({
-    get onPressStart() { return getProps().onPressStart; },
-    get onPressEnd() { return getProps().onPressEnd; },
-    get onPressChange() { return getProps().onPressChange; },
-    get onPress() { return getProps().onPress; },
-    get onPressUp() { return getProps().onPressUp; },
-    get isDisabled() { return isDisabled(); },
+    get onPressStart() {
+      return getProps().onPressStart;
+    },
+    get onPressEnd() {
+      return getProps().onPressEnd;
+    },
+    get onPressChange() {
+      return getProps().onPressChange;
+    },
+    get onPress() {
+      return getProps().onPress;
+    },
+    get onPressUp() {
+      return getProps().onPressUp;
+    },
+    get onClick() {
+      return getProps().onClick;
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
   });
 
   // Handle press state on the label.
   const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({
-    get onPressStart() { return getProps().onPressStart; },
-    get onPressEnd() { return getProps().onPressEnd; },
-    get onPressChange() { return getProps().onPressChange; },
-    get onPressUp() { return getProps().onPressUp; },
+    get onPressStart() {
+      return getProps().onPressStart;
+    },
+    get onPressEnd() {
+      return getProps().onPressEnd;
+    },
+    get onPressChange() {
+      return getProps().onPressChange;
+    },
+    get onPressUp() {
+      return getProps().onPressUp;
+    },
+    get onClick() {
+      return getProps().onClick;
+    },
     onPress(e: PressEvent) {
       getProps().onPress?.(e);
       state.toggle();
       ref()?.focus();
     },
-    get isDisabled() { return isDisabled() || isReadOnly(); },
+    get isDisabled() {
+      return isDisabled() || isReadOnly();
+    },
   });
 
   // Handle focusable - extract the relevant props for createFocusable
-  const { focusableProps } = createFocusable({
-    get isDisabled() { return isDisabled(); },
-    get autoFocus() { return getProps().autoFocus; },
-    get onFocus() { return getProps().onFocus; },
-    get onBlur() { return getProps().onBlur; },
-    get onFocusChange() { return getProps().onFocusChange; },
-    get onKeyDown() { return getProps().onKeyDown; },
-    get onKeyUp() { return getProps().onKeyUp; },
-    get excludeFromTabOrder() { return getProps().excludeFromTabOrder; },
-  }, ref as unknown as (el: HTMLElement) => void);
+  const { focusableProps } = createFocusable(
+    {
+      get isDisabled() {
+        return isDisabled();
+      },
+      get autoFocus() {
+        return getProps().autoFocus;
+      },
+      get onFocus() {
+        return getProps().onFocus;
+      },
+      get onBlur() {
+        return getProps().onBlur;
+      },
+      get onFocusChange() {
+        return getProps().onFocusChange;
+      },
+      get onKeyDown() {
+        return getProps().onKeyDown;
+      },
+      get onKeyUp() {
+        return getProps().onKeyUp;
+      },
+      get excludeFromTabOrder() {
+        return getProps().excludeFromTabOrder;
+      },
+    },
+    ref as unknown as (el: HTMLElement) => void,
+  );
 
   // Combine press and focusable props for input
   const interactions = mergeProps(pressProps, focusableProps);
 
   // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+  const domProps = () =>
+    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
 
   // Handle input change
   const onChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
@@ -182,38 +227,55 @@ export function createToggle(
   createEffect(() => {
     const p = getProps();
     const hasChildren = p.children != null;
-    const hasAriaLabel = p['aria-label'] != null || p['aria-labelledby'] != null;
+    const hasAriaLabel = p["aria-label"] != null || p["aria-labelledby"] != null;
     if (!hasChildren && !hasAriaLabel && isDevEnv()) {
-      console.warn('If you do not provide children, you must specify an aria-label for accessibility');
+      console.warn(
+        "If you do not provide children, you must specify an aria-label for accessibility",
+      );
     }
   });
 
   // Combined pressed state
   const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();
 
+  // Mint ids for the description and error message slots. Copied from createField
+  // because we don't want the label behavior that provides — the id resolves only
+  // once an element with that id is actually rendered (e.g. via TextContext slots).
+  const descriptionId = createSlotId();
+  const errorMessageId = createSlotId();
+
   return {
     labelProps: mergeProps(labelPressProps, {
       onClick: (e: MouseEvent) => e.preventDefault(),
-    }),
+    }) as JSX.LabelHTMLAttributes<HTMLLabelElement>,
     get inputProps() {
       const p = getProps();
       return mergeProps(domProps(), {
-        'aria-invalid': isInvalid() || undefined,
-        'aria-errormessage': p['aria-errormessage'],
-        'aria-controls': p['aria-controls'],
-        'aria-readonly': isReadOnly() || undefined,
+        "aria-invalid": isInvalid() || undefined,
+        "aria-errormessage": p["aria-errormessage"],
+        "aria-controls": p["aria-controls"],
+        "aria-readonly": isReadOnly() || undefined,
+        "aria-describedby":
+          [descriptionId(), errorMessageId(), p["aria-describedby"]].filter(Boolean).join(" ") ||
+          undefined,
         onChange,
         disabled: isDisabled(),
         ...(p.value == null ? {} : { value: p.value }),
         name: p.name,
         form: p.form,
-        type: 'checkbox' as const,
+        type: "checkbox" as const,
         ...interactions,
         // Stop click propagation to prevent labelProps.onClick from calling preventDefault
         // which would prevent the checkbox from toggling in JSDOM/testing-library environments
         onClick: (e: MouseEvent) => e.stopPropagation(),
       }) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
+    get descriptionProps() {
+      return { id: descriptionId() };
+    },
+    get errorMessageProps() {
+      return { id: errorMessageId() };
+    },
     isSelected: state.isSelected,
     isPressed: combinedIsPressed,
     isDisabled: isDisabled(),

package/src/toggle/createToggleState.ts

@@ -6,12 +6,8 @@
  * This is a 1:1 port of @react-stately/toggle's useToggleState.
  */
 
-import { createSignal, Accessor } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, Accessor } from "solid-js";
+import { type MaybeAccessor, access } from "../utils/reactivity";
 
 export interface ToggleStateOptions {
   /** Whether the element should be selected (controlled). */
@@ -35,10 +31,6 @@ export interface ToggleState {
   toggle(): void;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for toggle components like checkboxes and switches.
  */

package/src/toggle/index.ts

@@ -1,7 +1,6 @@
-// Re-export state from solid-stately
-export { createToggleState } from '@proyecto-viviana/solid-stately';
-export type { ToggleStateOptions, ToggleState } from '@proyecto-viviana/solid-stately';
+export { createToggleState } from "@proyecto-viviana/solid-stately";
+export type { ToggleStateOptions, ToggleState } from "@proyecto-viviana/solid-stately";
 
 // ARIA hook (solidaria-specific)
-export { createToggle } from './createToggle';
-export type { AriaToggleProps, ToggleAria } from './createToggle';
+export { createToggle } from "./createToggle";
+export type { AriaToggleProps, ToggleAria } from "./createToggle";