@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/datepicker/createTimeSegment.ts

@@ -0,0 +1,370 @@
+/**
+ * createTimeSegment hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a time segment.
+ * Based on @react-aria/datepicker useDateSegment semantics (time-field scope).
+ */
+
+import { createMemo, createSignal } from 'solid-js';
+import { useLocale } from '../i18n';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import type { TimeFieldState, TimeSegment, TimeSegmentType } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaTimeSegmentProps {
+  /** The segment data. */
+  segment: TimeSegment;
+}
+
+export interface TimeSegmentAria {
+  /** Props for the segment element. */
+  segmentProps: Record<string, unknown>;
+  /** Whether the segment is focused. */
+  isFocused: boolean;
+  /** Whether the segment is editable. */
+  isEditable: boolean;
+  /** Whether the segment is a placeholder. */
+  isPlaceholder: boolean;
+  /** The text to display. */
+  text: string;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a time segment.
+ */
+export function createTimeSegment<T extends TimeFieldState>(
+  props: MaybeAccessor<AriaTimeSegmentProps>,
+  state: T,
+  ref?: () => HTMLElement | null
+): TimeSegmentAria {
+  const getProps = () => access(props);
+  const [isFocused, setIsFocused] = createSignal(false);
+  const [enteredKeys, setEnteredKeys] = createSignal('');
+  const [isComposing, setIsComposing] = createSignal(false);
+  const locale = useLocale();
+
+  const segment = createMemo(() => getProps().segment);
+
+  const isEditable = createMemo(() => {
+    const seg = segment();
+    return seg.isEditable && !state.isDisabled() && !state.isReadOnly();
+  });
+
+  const focusSegment = (target: 'first' | 'last' | 'prev' | 'next') => {
+    const el = ref?.();
+    if (!el) return;
+
+    const container = el.parentElement;
+    if (!container) return;
+
+    const segments = Array.from(
+      container.querySelectorAll<HTMLElement>('[role="spinbutton"]')
+    );
+
+    if (segments.length === 0) return;
+
+    if (target === 'first') {
+      segments[0]?.focus();
+      return;
+    }
+
+    if (target === 'last') {
+      segments[segments.length - 1]?.focus();
+      return;
+    }
+
+    const currentIndex = segments.indexOf(el);
+    if (currentIndex < 0) return;
+
+    const nextIndex = target === 'next' ? currentIndex + 1 : currentIndex - 1;
+    if (nextIndex >= 0 && nextIndex < segments.length) {
+      segments[nextIndex]?.focus();
+    }
+  };
+
+  const clearCurrentSegment = (type: TimeSegmentType) => {
+    state.clearSegment(type);
+    setEnteredKeys('');
+  };
+
+  const handleNumericInput = (
+    key: string,
+    type: TimeSegmentType,
+    seg: TimeSegment
+  ) => {
+    const newKeys = enteredKeys() + key;
+    const numValue = parseInt(newKeys, 10);
+    const maxValue = seg.maxValue ?? 99;
+    const minValue = seg.minValue ?? 0;
+    const maxDigits = String(maxValue).length;
+
+    if (numValue <= maxValue) {
+      state.setSegment(type, numValue);
+
+      const potentialNextValue = parseInt(newKeys + '0', 10);
+      if (potentialNextValue > maxValue || newKeys.length >= maxDigits) {
+        setEnteredKeys('');
+        focusSegment('next');
+      } else {
+        setEnteredKeys(newKeys);
+      }
+    } else {
+      const singleValue = parseInt(key, 10);
+      if (singleValue >= minValue && singleValue <= maxValue) {
+        state.setSegment(type, singleValue);
+        const potentialNextValue = parseInt(key + '0', 10);
+        if (potentialNextValue > maxValue || key.length >= maxDigits) {
+          setEnteredKeys('');
+          focusSegment('next');
+        } else {
+          setEnteredKeys(key);
+        }
+      } else {
+        setEnteredKeys('');
+      }
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isEditable()) return;
+    if (isComposing()) return;
+
+    const seg = segment();
+    const type = seg.type;
+
+    if (type === 'literal') return;
+
+    switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault();
+        focusSegment(locale().direction === 'rtl' ? 'prev' : 'next');
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        focusSegment(locale().direction === 'rtl' ? 'next' : 'prev');
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        state.incrementSegment(type);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        state.decrementSegment(type);
+        break;
+      case 'Home':
+        e.preventDefault();
+        focusSegment('first');
+        break;
+      case 'End':
+        e.preventDefault();
+        focusSegment('last');
+        break;
+      case 'Backspace':
+        e.preventDefault();
+        if (seg.isPlaceholder) {
+          focusSegment('prev');
+        } else {
+          clearCurrentSegment(type);
+        }
+        break;
+      case 'Delete':
+        e.preventDefault();
+        clearCurrentSegment(type);
+        break;
+      default:
+        const normalizedDigit = normalizeDigit(e.key);
+        if (normalizedDigit) {
+          e.preventDefault();
+          handleNumericInput(normalizedDigit, type, seg);
+        }
+        break;
+    }
+  };
+
+  const handleBeforeInput = (e: InputEvent) => {
+    if (!isEditable()) return;
+    if (isComposing()) return;
+
+    const seg = segment();
+    if (seg.type === 'literal') return;
+
+    if (e.inputType === 'deleteContentBackward' || e.inputType === 'deleteContentForward') {
+      e.preventDefault();
+      clearCurrentSegment(seg.type);
+      return;
+    }
+
+    if (e.inputType === 'insertText' && e.data) {
+      const normalizedDigit = normalizeDigit(e.data);
+      if (!normalizedDigit) return;
+      e.preventDefault();
+      handleNumericInput(normalizedDigit, seg.type, seg);
+    }
+  };
+
+  const handleCompositionStart = () => {
+    if (!isEditable()) return;
+    setIsComposing(true);
+    setEnteredKeys('');
+  };
+
+  const handleCompositionEnd = (e: CompositionEvent) => {
+    if (!isEditable()) return;
+    setIsComposing(false);
+
+    const seg = segment();
+    if (seg.type === 'literal') return;
+
+    const digits = extractNormalizedDigits(e.data ?? '');
+    if (digits.length === 0) return;
+
+    for (const digit of digits) {
+      handleNumericInput(digit, seg.type, seg);
+    }
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    setEnteredKeys('');
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setEnteredKeys('');
+
+    const maybeState = state as unknown as { confirmPlaceholder?: () => void };
+    maybeState.confirmPlaceholder?.();
+  };
+
+  const segmentProps = createMemo(() => {
+    const seg = segment();
+    const type = seg.type;
+
+    if (type === 'literal') {
+      return {
+        'aria-hidden': true,
+      };
+    }
+
+    return {
+      role: 'spinbutton',
+      tabIndex: isEditable() ? 0 : -1,
+      'aria-label': getSegmentLabel(type, locale().locale),
+      'aria-valuenow': seg.value,
+      'aria-valuemin': seg.minValue,
+      'aria-valuemax': seg.maxValue,
+      'aria-valuetext': seg.isPlaceholder ? seg.placeholder : seg.text,
+      'aria-readonly': state.isReadOnly() || undefined,
+      'aria-disabled': state.isDisabled() || undefined,
+      'aria-invalid': state.isInvalid() || undefined,
+      contentEditable: isEditable(),
+      suppressContentEditableWarning: true,
+      inputMode: 'numeric' as const,
+      autoCorrect: 'off',
+      enterKeyHint: 'next' as const,
+      spellCheck: false,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onBeforeInput: handleBeforeInput,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      onMouseDown: (e: MouseEvent) => {
+        e.preventDefault();
+      },
+    };
+  });
+
+  const text = createMemo(() => {
+    const seg = segment();
+    return seg.isPlaceholder ? seg.placeholder : seg.text;
+  });
+
+  return {
+    get segmentProps() {
+      return segmentProps();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isEditable() {
+      return isEditable();
+    },
+    get isPlaceholder() {
+      return segment().isPlaceholder;
+    },
+    get text() {
+      return text();
+    },
+  };
+}
+
+// ============================================
+// HELPERS
+// ============================================
+
+type EditableTimeSegmentType = Exclude<TimeSegmentType, 'literal'>;
+
+const SEGMENT_LABELS: Record<string, Record<EditableTimeSegmentType, string>> = {
+  en: {
+    hour: 'Hour',
+    minute: 'Minute',
+    second: 'Second',
+    dayPeriod: 'AM/PM',
+  },
+  es: {
+    hour: 'Hora',
+    minute: 'Minuto',
+    second: 'Segundo',
+    dayPeriod: 'AM/PM',
+  },
+};
+
+function getSegmentLabel(type: TimeSegmentType, locale: string): string {
+  if (type === 'literal') return '';
+
+  const language = locale.toLowerCase().split('-')[0] ?? 'en';
+  const labels = SEGMENT_LABELS[language] ?? SEGMENT_LABELS.en;
+  return labels[type];
+}
+
+function normalizeDigit(input: string): string | null {
+  if (/^[0-9]$/.test(input)) {
+    return input;
+  }
+
+  const code = input.codePointAt(0);
+  if (code === undefined) return null;
+
+  if (code >= 0x0660 && code <= 0x0669) {
+    return String(code - 0x0660);
+  }
+
+  if (code >= 0x06f0 && code <= 0x06f9) {
+    return String(code - 0x06f0);
+  }
+
+  if (code >= 0xff10 && code <= 0xff19) {
+    return String(code - 0xff10);
+  }
+
+  return null;
+}
+
+function extractNormalizedDigits(input: string): string[] {
+  const digits: string[] = [];
+  for (const char of input) {
+    const normalized = normalizeDigit(char);
+    if (normalized) {
+      digits.push(normalized);
+    }
+  }
+  return digits;
+}

package/src/datepicker/index.ts

@@ -19,6 +19,13 @@ export {
   type TimeFieldAria,
 } from './createTimeField';
 
+// Time Segment
+export {
+  createTimeSegment,
+  type AriaTimeSegmentProps,
+  type TimeSegmentAria,
+} from './createTimeSegment';
+
 // Date Picker
 export {
   createDatePicker,
@@ -26,3 +33,10 @@ export {
   type DatePickerAria,
   type DatePickerState,
 } from './createDatePicker';
+
+// Date Range Picker
+export {
+  createDateRangePicker,
+  type AriaDateRangePickerProps,
+  type DateRangePickerAria,
+} from './createDateRangePicker';

package/src/dialog/createDialog.ts

@@ -1,120 +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
-  }
-}
+/*
+ * 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

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

package/src/dialog/types.ts

@@ -1,19 +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;
-}
+/**
+ * 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;
+}