@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/datepicker/createTimeField.ts

@@ -0,0 +1,154 @@
+/**
+ * createTimeField hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a time field component.
+ * Based on @react-aria/datepicker useTimeField
+ */
+
+import { createMemo } from 'solid-js';
+import { createId } from '../ssr';
+import { createLabel } from '../label/createLabel';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import { mergeProps } from '../utils/mergeProps';
+import type { TimeFieldState, TimeSegment, TimeValue } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaTimeFieldProps {
+  /** An ID for the time field. */
+  id?: string;
+  /** A visible label for the time field. */
+  label?: string;
+  /** An accessible label for the time field. */
+  'aria-label'?: string;
+  /** The ID of an element that labels the time field. */
+  'aria-labelledby'?: string;
+  /** The ID of an element that describes the time field. */
+  'aria-describedby'?: string;
+  /** Whether the time field is disabled. */
+  isDisabled?: boolean;
+  /** Whether the time field is read-only. */
+  isReadOnly?: boolean;
+  /** Whether the time field is required. */
+  isRequired?: boolean;
+  /** Whether the time field is invalid. */
+  isInvalid?: boolean;
+  /** Description text. */
+  description?: string;
+  /** Error message. */
+  errorMessage?: string;
+}
+
+export interface TimeFieldAria {
+  /** Props for the label element. */
+  labelProps: Record<string, unknown>;
+  /** Props for the field container element. */
+  fieldProps: Record<string, unknown>;
+  /** Props for the input container (holds segments). */
+  inputProps: Record<string, unknown>;
+  /** Props for the description element. */
+  descriptionProps: Record<string, unknown>;
+  /** Props for the error message element. */
+  errorMessageProps: Record<string, unknown>;
+  /** The segments to render. */
+  segments: TimeSegment[];
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a time field component.
+ */
+export function createTimeField<T extends TimeFieldState<TimeValue>>(
+  props: MaybeAccessor<AriaTimeFieldProps>,
+  state: T,
+  _ref?: () => HTMLElement | null
+): TimeFieldAria {
+  const getProps = () => access(props);
+  const id = createId(getProps().id);
+  const descriptionId = createId();
+  const errorMessageId = createId();
+
+  // Create label handling
+  const { labelProps, fieldProps: labelFieldProps } = createLabel({
+    get label() { return getProps().label; },
+    get 'aria-label'() { return getProps()['aria-label']; },
+    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
+    labelElementType: 'span',
+  });
+
+  // Build aria-describedby
+  const getAriaDescribedBy = () => {
+    const p = getProps();
+    const ids: string[] = [];
+    if (p['aria-describedby']) {
+      ids.push(p['aria-describedby']);
+    }
+    if (p.description) {
+      ids.push(descriptionId);
+    }
+    if (p.isInvalid && p.errorMessage) {
+      ids.push(errorMessageId);
+    }
+    return ids.length > 0 ? ids.join(' ') : undefined;
+  };
+
+  // Segments from state
+  const segments = createMemo(() => state.segments());
+
+  // Field container props
+  const fieldProps = createMemo(() => {
+    const p = getProps();
+
+    return mergeProps(labelFieldProps as Record<string, unknown>, {
+      id,
+      role: 'group',
+      'aria-disabled': p.isDisabled || state.isDisabled() || undefined,
+      'aria-readonly': p.isReadOnly || state.isReadOnly() || undefined,
+      'aria-required': p.isRequired || state.isRequired() || undefined,
+      'aria-invalid': p.isInvalid || state.isInvalid() || undefined,
+      'aria-describedby': getAriaDescribedBy(),
+    });
+  });
+
+  // Input container props
+  const inputProps = createMemo(() => ({
+    role: 'presentation',
+  }));
+
+  // Description props
+  const descriptionProps = createMemo(() => ({
+    id: descriptionId,
+  }));
+
+  // Error message props
+  const errorMessageProps = createMemo(() => ({
+    id: errorMessageId,
+    role: 'alert',
+  }));
+
+  return {
+    get labelProps() {
+      return labelProps as Record<string, unknown>;
+    },
+    get fieldProps() {
+      return fieldProps();
+    },
+    get inputProps() {
+      return inputProps();
+    },
+    get descriptionProps() {
+      return descriptionProps();
+    },
+    get errorMessageProps() {
+      return errorMessageProps();
+    },
+    get segments() {
+      return segments();
+    },
+  };
+}

package/src/datepicker/index.ts

@@ -0,0 +1,28 @@
+// Date Field
+export {
+  createDateField,
+  type AriaDateFieldProps,
+  type DateFieldAria,
+} from './createDateField';
+
+// Date Segment
+export {
+  createDateSegment,
+  type AriaDateSegmentProps,
+  type DateSegmentAria,
+} from './createDateSegment';
+
+// Time Field
+export {
+  createTimeField,
+  type AriaTimeFieldProps,
+  type TimeFieldAria,
+} from './createTimeField';
+
+// Date Picker
+export {
+  createDatePicker,
+  type AriaDatePickerProps,
+  type DatePickerAria,
+  type DatePickerState,
+} from './createDatePicker';

package/src/dialog/createDialog.ts

@@ -0,0 +1,120 @@
+/*
+ * 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 from React Aria:
+ * https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/dialog/src/useDialog.ts
+ */
+
+import { Accessor, createEffect, createMemo, createSignal, createUniqueId, onCleanup } from 'solid-js'
+import { filterDOMProps, focusSafely } from '../utils'
+import type { AriaLabelingProps, DOMProps } from './types'
+
+export interface AriaDialogProps extends DOMProps, AriaLabelingProps {
+  /**
+   * The role of the dialog element.
+   * @default 'dialog'
+   */
+  role?: 'dialog' | 'alertdialog'
+}
+
+export interface DialogAria {
+  /** Props for the dialog container element. */
+  dialogProps: Accessor<Record<string, any>>
+
+  /** Props for the dialog title element. */
+  titleProps: Accessor<Record<string, any>>
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a dialog component.
+ * A dialog is an overlay shown above other content in an application.
+ */
+export function createDialog(
+  props: AriaDialogProps | Accessor<AriaDialogProps>,
+  ref: Accessor<HTMLElement | undefined>
+): DialogAria {
+  // Support both direct props and accessor pattern
+  const getProps = typeof props === 'function' ? props : () => props
+
+  const role = () => getProps().role ?? 'dialog'
+  const generatedTitleId = createUniqueId()
+  const [isRefocusing, setIsRefocusing] = createSignal(false)
+
+  const titleId = createMemo(() => {
+    const p = getProps()
+    // Use provided aria-labelledby, or generated ID if no aria-label
+    if (p['aria-labelledby']) return undefined
+    return p['aria-label'] ? undefined : generatedTitleId
+  })
+
+  // Focus the dialog itself on mount, unless a child element is already focused.
+  // Only run on the client (SSR-safe)
+  createEffect(() => {
+    // Guard against SSR - document is not available on the server
+    if (typeof document === 'undefined') return
+
+    const dialogEl = ref()
+    if (dialogEl && !dialogEl.contains(document.activeElement)) {
+      focusSafely(dialogEl)
+
+      // Safari on iOS does not move the VoiceOver cursor to the dialog
+      // or announce that it has opened until it has rendered. A workaround
+      // is to wait for half a second, then blur and re-focus the dialog.
+      const timeout = setTimeout(() => {
+        // Check that the dialog is still focused, or focused was lost to the body.
+        if (document.activeElement === dialogEl || document.activeElement === document.body) {
+          setIsRefocusing(true)
+          dialogEl.blur()
+          focusSafely(dialogEl)
+          setIsRefocusing(false)
+        }
+      }, 500)
+
+      onCleanup(() => {
+        clearTimeout(timeout)
+      })
+    }
+  })
+
+  // Note: Focus containment is typically handled by createModal at a higher level
+  // For standalone dialogs, focus containment should be managed by the overlay system
+
+  const dialogProps = createMemo(() => {
+    const p = getProps()
+    return {
+      ...filterDOMProps(p),
+      role: role(),
+      tabIndex: -1,
+      'aria-label': p['aria-label'],
+      'aria-labelledby': p['aria-labelledby'] || titleId(),
+      'aria-describedby': p['aria-describedby'],
+      // Prevent blur events from reaching createOverlay, which may cause
+      // popovers to close. Since focus is contained within the dialog,
+      // we don't want this to occur due to the above createEffect.
+      onBlur: (e: FocusEvent) => {
+        if (isRefocusing()) {
+          e.stopPropagation()
+        }
+      }
+    }
+  })
+
+  const titlePropsValue = createMemo(() => ({
+    id: titleId()
+  }))
+
+  return {
+    dialogProps,
+    titleProps: titlePropsValue
+  }
+}

package/src/dialog/index.ts

@@ -0,0 +1,2 @@
+export { createDialog } from './createDialog'
+export type { AriaDialogProps, DialogAria } from './createDialog'

package/src/dialog/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Type definitions for dialog accessibility hooks
+ */
+
+export interface DOMProps {
+  /** The element's unique identifier. */
+  id?: string;
+}
+
+export interface AriaLabelingProps {
+  /** Defines a string value that labels the current element. */
+  'aria-label'?: string;
+  /** Identifies the element (or elements) that labels the current element. */
+  'aria-labelledby'?: string;
+  /** Identifies the element (or elements) that describes the object. */
+  'aria-describedby'?: string;
+  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
+  'aria-details'?: string;
+}

package/src/disclosure/createDisclosure.ts

@@ -0,0 +1,131 @@
+/**
+ * createDisclosure hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a disclosure component.
+ *
+ * Port of @react-aria/disclosure useDisclosure.
+ */
+
+import { type JSX, createEffect } from 'solid-js';
+import { type DisclosureState } from '@proyecto-viviana/solid-stately';
+import { createId, canUseDOM } from '../ssr';
+import { createPress } from '../interactions/createPress';
+import { mergeProps } from '../utils/mergeProps';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaDisclosureProps {
+  /** Whether the disclosure is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface DisclosureAria {
+  /** Props for the disclosure trigger button. */
+  buttonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  /** Props for the disclosure panel. */
+  panelProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a disclosure component.
+ *
+ * A disclosure is a widget that can be toggled to show or hide content.
+ * It consists of a trigger button and a panel.
+ *
+ * @example
+ * ```tsx
+ * import { createDisclosure } from 'solidaria';
+ * import { createDisclosureState } from 'solid-stately';
+ *
+ * function Disclosure(props) {
+ *   const state = createDisclosureState(props);
+ *   let panelRef;
+ *   const { buttonProps, panelProps } = createDisclosure(
+ *     { get isDisabled() { return props.isDisabled; } },
+ *     state,
+ *     () => panelRef
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <button {...buttonProps}>Toggle</button>
+ *       <div {...panelProps} ref={panelRef}>
+ *         {props.children}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function createDisclosure(
+  props: AriaDisclosureProps | (() => AriaDisclosureProps),
+  state: DisclosureState,
+  panelRef: () => HTMLElement | null
+): DisclosureAria {
+  // Handle both plain object and accessor function patterns
+  const getProps = typeof props === 'function' ? props : () => props;
+
+  const triggerId = createId();
+  const panelId = createId();
+
+  // Handle panel visibility with hidden attribute
+  createEffect(() => {
+    if (!canUseDOM) return;
+
+    const panel = panelRef();
+    if (!panel) return;
+
+    if (state.isExpanded()) {
+      panel.removeAttribute('hidden');
+    } else {
+      // Use 'until-found' for find-in-page support where available
+      panel.setAttribute('hidden', 'until-found');
+    }
+  });
+
+  // Use createPress for proper interaction handling (matches Select/Menu pattern)
+  const { pressProps } = createPress({
+    get isDisabled() {
+      return getProps().isDisabled;
+    },
+    onPress() {
+      state.toggle();
+    },
+  });
+
+  return {
+    // Button props - merge with pressProps for consistent interaction handling
+    // Using getter (not createMemo) to match createSelect pattern
+    get buttonProps(): JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+      const p = getProps();
+      // Note: Don't add duplicate onKeyDown handler here!
+      // createPress already handles Enter/Space via its onPress callback.
+      // Adding another toggle call would double-toggle (toggle on keydown, toggle again on keyup).
+      return mergeProps(
+        pressProps as Record<string, unknown>,
+        {
+          id: triggerId,
+          type: 'button',
+          'aria-expanded': state.isExpanded(),
+          'aria-controls': panelId,
+          disabled: p.isDisabled,
+        } as Record<string, unknown>
+      ) as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    },
+    // Panel props
+    get panelProps(): JSX.HTMLAttributes<HTMLElement> {
+      return {
+        id: panelId,
+        role: 'region',
+        'aria-labelledby': triggerId,
+        hidden: !state.isExpanded() || undefined,
+      };
+    },
+  };
+}

package/src/disclosure/createDisclosureGroup.ts

@@ -0,0 +1,62 @@
+/**
+ * createDisclosureGroup hook for Solidaria
+ *
+ * Provides accessibility implementation for a group of disclosures (accordion).
+ *
+ * Port of @react-aria/disclosure.
+ */
+
+import { type JSX, createMemo } from 'solid-js';
+import { type DisclosureGroupState } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaDisclosureGroupProps {
+  /** Whether the disclosure group is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface DisclosureGroupAria {
+  /** Props for the disclosure group container. */
+  groupProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides accessibility implementation for a group of disclosures (accordion).
+ *
+ * @example
+ * ```tsx
+ * import { createDisclosureGroup } from 'solidaria';
+ * import { createDisclosureGroupState } from 'solid-stately';
+ *
+ * function Accordion(props) {
+ *   const state = createDisclosureGroupState(props);
+ *   const { groupProps } = createDisclosureGroup(props, state);
+ *
+ *   return (
+ *     <div {...groupProps}>
+ *       {props.children}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function createDisclosureGroup(
+  props: AriaDisclosureGroupProps,
+  state: DisclosureGroupState
+): DisclosureGroupAria {
+  const groupProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
+    role: 'group',
+    'aria-disabled': props.isDisabled || state.isDisabled || undefined,
+  }));
+
+  return {
+    get groupProps() { return groupProps(); },
+  };
+}

package/src/disclosure/index.ts

@@ -0,0 +1,11 @@
+export {
+  createDisclosure,
+  type AriaDisclosureProps,
+  type DisclosureAria,
+} from './createDisclosure';
+
+export {
+  createDisclosureGroup,
+  type AriaDisclosureGroupProps,
+  type DisclosureGroupAria,
+} from './createDisclosureGroup';