@nepdatejs/react 0.0.0-stage → 0.1.0

package/src/multi-date-picker.tsx

@@ -0,0 +1,243 @@
+import { useEffect, useRef, type CSSProperties, type ReactElement } from 'react';
+import {
+  getLocale,
+  type CalendarDate,
+  type CalendarSystem,
+  type LocaleCode,
+  type Weekday,
+} from '@nepdatejs/core';
+import type { EventMarker, HolidayInput, HolidayLookup } from '@nepdatejs/calendar';
+import type { DateDetail } from '@nepdatejs/datepicker';
+import { restoreFocus, type PanelLayout } from '@nepdatejs/dom';
+import { CalendarBody } from './calendar-body';
+import { useMultiDatePicker } from './hooks';
+import { Icon } from './icons';
+import { usePanel } from './panel';
+import { PANEL_WIDTH } from './presets';
+
+export interface MultiDatePickerProps {
+  /** AD "YYYY-MM-DD" days. */
+  value?: readonly string[] | undefined;
+  defaultValue?: readonly string[] | undefined;
+  onChange?:
+    ((value: readonly string[], dates: readonly DateDetail[]) => void) | undefined;
+  calendar?: CalendarSystem | undefined;
+  defaultCalendar?: CalendarSystem | undefined;
+  onCalendarChange?: ((calendar: CalendarSystem) => void) | undefined;
+  /** Earliest and latest allowed days, as AD "YYYY-MM-DD". */
+  min?: string | undefined;
+  max?: string | undefined;
+  /** The most days that may be chosen. */
+  maxDates?: number | undefined;
+  isDateDisabled?: ((date: CalendarDate) => boolean) | undefined;
+  holidays?: readonly HolidayInput[] | HolidayLookup | undefined;
+  events?: ((date: CalendarDate) => readonly EventMarker[]) | undefined;
+  locale?: LocaleCode | undefined;
+  weekStartsOn?: Weekday | undefined;
+  weekendDays?: readonly Weekday[] | undefined;
+  showOtherCalendar?: boolean | undefined;
+  /** Close the panel after each click. Default false. */
+  closeOnSelect?: boolean | undefined;
+  /** Add the dashes of YYYY-MM-DD while the user types digits. Default true. */
+  mask?: boolean | undefined;
+  /** Show the calendar in the page, always open, instead of in a popover. */
+  inline?: boolean | undefined;
+  /** 'sheet' opens a bottom sheet; 'popover' sits beside the field; 'auto' (default) uses the sheet below 480px. */
+  panelLayout?: PanelLayout | undefined;
+  /** Submit each day under this name, one hidden input per day. */
+  name?: string | undefined;
+  id?: string | undefined;
+  placeholder?: string | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  clearable?: boolean | undefined;
+  today?: CalendarDate | undefined;
+  theme?: 'light' | 'dark' | 'auto' | undefined;
+  className?: string | undefined;
+  'aria-label'?: string | undefined;
+}
+
+/**
+ * Several separate BS/AD days in one field (PICK-001): click days in the
+ * panel to add or remove them, or type them separated by commas. The value is
+ * the sorted AD days as "YYYY-MM-DD" strings.
+ */
+export function MultiDatePicker({
+  name,
+  placeholder,
+  required,
+  disabled = false,
+  clearable = true,
+  panelLayout,
+  theme,
+  className,
+  'aria-label': ariaLabel,
+  ...options
+}: MultiDatePickerProps): ReactElement {
+  const picker = useMultiDatePicker(options);
+  const { state, store, calendar } = picker;
+  const labels = getLocale(options.locale);
+  const field = useRef<HTMLDivElement | null>(null);
+  const box = useRef<HTMLDivElement | null>(null);
+  const panel = useRef<HTMLDivElement | null>(null);
+  const input = useRef<HTMLInputElement | null>(null);
+
+  usePanel(
+    state.open && !state.inline,
+    { anchor: box, panel, field, returnFocus: input },
+    () => {
+      store.actions.close();
+    },
+    calendar.focusGrid,
+    PANEL_WIDTH,
+    panelLayout,
+  );
+
+  // A form reset puts the field back to its default value.
+  useEffect(() => {
+    const form = input.current?.form;
+    if (!form) {
+      return undefined;
+    }
+    const reset = (): void => {
+      store.actions.reset();
+    };
+    form.addEventListener('reset', reset);
+
+    return () => {
+      form.removeEventListener('reset', reset);
+    };
+  }, [store]);
+
+  useEffect(() => {
+    input.current?.setCustomValidity(state.error?.message ?? '');
+  }, [state.error]);
+
+  return (
+    <div
+      ref={field}
+      className={className ? `ndp-field ${className}` : 'ndp-field'}
+      data-ndp-theme={theme}
+    >
+      <div
+        ref={box}
+        className="ndp-input"
+        data-invalid={state.error !== null || undefined}
+        data-disabled={disabled || undefined}
+      >
+        <input
+          ref={input}
+          className="ndp-input__control"
+          {...picker.getInputProps()}
+          aria-label={ariaLabel}
+          placeholder={placeholder ?? state.placeholder}
+          required={required}
+          disabled={disabled}
+        />
+        <span className="ndp-input__actions">
+          {clearable && state.text !== '' && !disabled && (
+            <button
+              className="ndp-icon-button"
+              {...picker.getClearProps()}
+              onClick={() => {
+                store.actions.clear();
+                input.current?.focus();
+              }}
+            >
+              <Icon name="close" />
+            </button>
+          )}
+          {!state.inline && (
+            <button
+              className="ndp-icon-button"
+              disabled={disabled}
+              {...picker.getToggleProps()}
+            >
+              <Icon name="calendar" />
+            </button>
+          )}
+        </span>
+      </div>
+      {state.error && (
+        <p id={picker.ids.hint} className="ndp-hint" data-error aria-live="polite">
+          {state.error.message}
+        </p>
+      )}
+      {name !== undefined &&
+        state.value.map((day) => (
+          <input key={day} type="hidden" name={name} value={day} disabled={disabled} />
+        ))}
+      {state.open && (
+        <div
+          ref={panel}
+          className="ndp-panel"
+          popover={state.inline ? undefined : 'manual'}
+          data-layout={state.inline ? 'inline' : undefined}
+          style={
+            state.inline
+              ? ({ '--ndp-panel-width': `${String(PANEL_WIDTH)}px` } as CSSProperties)
+              : undefined
+          }
+          data-ndp-theme={theme}
+          {...picker.getPanelProps()}
+          aria-label={
+            ariaLabel
+              ? `${ariaLabel}: ${labels.labels.calendar}`
+              : labels.labels.chooseDate
+          }
+        >
+          <CalendarBody
+            bindings={{
+              ...calendar,
+              getDayProps: (cell) => ({
+                ...calendar.getDayProps(cell),
+                onClick: () => {
+                  if (
+                    !cell.isDisabled &&
+                    store.actions.select(cell.date) &&
+                    !store.getState().open
+                  ) {
+                    restoreFocus(input.current);
+                  }
+                },
+              }),
+            }}
+          />
+          <div className="ndp-panel__footer">
+            {state.canSwitchCalendar ? (
+              <div
+                className="ndp-segment"
+                role="group"
+                aria-label={labels.labels.calendar}
+              >
+                {(['BS', 'AD'] as const).map((option) => (
+                  <button
+                    key={option}
+                    className="ndp-segment__item"
+                    {...picker.getCalendarOptionProps(option)}
+                  >
+                    {labels.calendarNames[option]}
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <span />
+            )}
+            {!state.inline && (
+              <button
+                type="button"
+                className="ndp-button"
+                onClick={() => {
+                  store.actions.close();
+                  restoreFocus(input.current);
+                }}
+              >
+                {labels.labels.done}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/panel.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, type RefObject } from 'react';
+import {
+  onBackdropPointer,
+  onEscape,
+  onOutsidePointer,
+  restoreFocus,
+  trackPosition,
+  type PanelLayout,
+} from '@nepdatejs/dom';
+import { useIsomorphicLayoutEffect } from './use-store';
+
+/**
+ * While `open`: show the panel in the top layer beside the anchor, close on an
+ * outside pointer, a tap on a bottom sheet's backdrop, or Escape (returning focus to `returnFocus`), and move focus
+ * into the calendar.
+ */
+export function usePanel(
+  open: boolean,
+  refs: {
+    anchor: RefObject<HTMLElement | null>;
+    panel: RefObject<HTMLDivElement | null>;
+    field: RefObject<HTMLElement | null>;
+    returnFocus: RefObject<HTMLElement | null>;
+  },
+  close: () => void,
+  focusGrid: () => void,
+  width = 320,
+  layout: PanelLayout = 'auto',
+): void {
+  const closeRef = useRef(close);
+  closeRef.current = close;
+
+  useIsomorphicLayoutEffect(() => {
+    const anchor = refs.anchor.current;
+    const panel = refs.panel.current;
+    if (!open || !anchor || !panel) {
+      return undefined;
+    }
+    const stopTracking = trackPosition(anchor, panel, { width, layout });
+    const stopOutside = onOutsidePointer(
+      () => [refs.field.current, refs.panel.current],
+      () => {
+        closeRef.current();
+      },
+    );
+    const stopBackdrop = onBackdropPointer(panel, () => {
+      closeRef.current();
+    });
+    const stopEscape = onEscape(() => {
+      closeRef.current();
+      restoreFocus(refs.returnFocus.current);
+    });
+
+    return () => {
+      stopTracking();
+      stopOutside();
+      stopBackdrop();
+      stopEscape();
+    };
+  }, [open, width, layout]);
+
+  useEffect(() => {
+    if (open) {
+      focusGrid();
+    }
+  }, [open]);
+}

package/src/presets.tsx

@@ -0,0 +1,44 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { PresetState } from '@nepdatejs/datepicker';
+
+/** Panel widths: calendar alone, plus presets column, plus time columns. */
+export const PANEL_WIDTH = 320;
+export const PANEL_WIDTH_WITH_PRESETS = 492;
+export const TIME_COLUMNS_WIDTH = 136;
+
+/** The panel body: the shortcut list (when there are presets), then the calendar and anything else. */
+export function PanelBody({
+  presets,
+  label,
+  onPreset,
+  children,
+}: {
+  presets: readonly PresetState[];
+  label: string;
+  onPreset: (id: string) => void;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <div className="ndp-panel__body">
+      {presets.length > 0 && (
+        <div className="ndp-presets" role="group" aria-label={label}>
+          {presets.map((preset) => (
+            <button
+              key={preset.id}
+              type="button"
+              className="ndp-preset"
+              aria-pressed={preset.isActive}
+              disabled={preset.isDisabled}
+              onClick={() => {
+                onPreset(preset.id);
+              }}
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}

package/src/server.ts

@@ -0,0 +1,8 @@
+/** @nepdatejs/react/server: components without hooks, safe in React Server Components. */
+export {
+  bothDates,
+  DateText,
+  shortDate,
+  ShortDate,
+  type DateTextProps,
+} from './date-text';

package/src/time-columns.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useRef, type ReactElement } from 'react';
+import { getLocale, type LocaleCode } from '@nepdatejs/core';
+import type { TimeCell } from '@nepdatejs/datepicker';
+
+/** Hour and minute columns (Figma "Time Item"); the selected items scroll into view. */
+export function TimeColumns({
+  hours,
+  minutes,
+  locale,
+  onHour,
+  onMinute,
+}: {
+  hours: readonly TimeCell[];
+  minutes: readonly TimeCell[];
+  locale?: LocaleCode | undefined;
+  onHour: (hour: number) => void;
+  onMinute: (minute: number) => void;
+}): ReactElement {
+  const root = useRef<HTMLDivElement | null>(null);
+  const labels = getLocale(locale).labels;
+
+  useEffect(() => {
+    for (const item of root.current?.querySelectorAll<HTMLElement>(
+      '[aria-pressed="true"]',
+    ) ?? []) {
+      if (typeof item.scrollIntoView === 'function') {
+        item.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, []);
+
+  const column = (
+    label: string,
+    cells: readonly TimeCell[],
+    pick: (value: number) => void,
+  ): ReactElement => (
+    <div className="ndp-time__column" role="group" aria-label={label}>
+      {cells.map((cell) => (
+        <button
+          key={cell.value}
+          type="button"
+          className="ndp-time-item"
+          aria-pressed={cell.isSelected}
+          onClick={() => {
+            pick(cell.value);
+          }}
+        >
+          {cell.label}
+        </button>
+      ))}
+    </div>
+  );
+
+  return (
+    <div ref={root} className="ndp-time" role="group" aria-label={labels.time}>
+      {column(labels.hour, hours, onHour)}
+      {column(labels.minute, minutes, onMinute)}
+    </div>
+  );
+}

package/src/use-store.ts

@@ -0,0 +1,113 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+
+interface StoreLike<O, S> {
+  getState(): S;
+  subscribe(listener: () => void): () => void;
+  setOptions(changes: Partial<O>): void;
+}
+
+/** useLayoutEffect in the browser, useEffect on the server (no warning). */
+export const useIsomorphicLayoutEffect: typeof useEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+type Fn = (...args: never[]) => unknown;
+
+/**
+ * Create a store once and keep its options in step with props, without
+ * loops: functions are wrapped once so their identity never changes, and data
+ * options are compared by value, so inline objects and arrays are fine.
+ */
+export function useStore<O extends object, S, T extends StoreLike<O, S>>(
+  create: (options: O) => T,
+  options: O,
+): { store: T; state: S } {
+  const latest = useRef(options);
+  latest.current = options;
+  const wrappers = useRef(new Map<string, Fn>());
+
+  const prepare = (input: O): O => {
+    const out: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(input)) {
+      if (typeof value === 'function') {
+        let wrapper = wrappers.current.get(key);
+        if (!wrapper) {
+          wrapper = (...args: never[]) =>
+            ((latest.current as Record<string, unknown>)[key] as Fn | undefined)?.(
+              ...args,
+            );
+          wrappers.current.set(key, wrapper);
+        }
+        out[key] = wrapper;
+      } else {
+        out[key] = value;
+      }
+    }
+
+    return out as O;
+  };
+
+  const [store] = useState(() => create(prepare(options)));
+  const previous = useRef<O>(prepare(options));
+
+  useIsomorphicLayoutEffect(() => {
+    const next = prepare(options) as Record<string, unknown>;
+    const before = previous.current as Record<string, unknown>;
+    const changes: Record<string, unknown> = {};
+    for (const key of new Set([...Object.keys(before), ...Object.keys(next)])) {
+      if (!deepEqual(before[key], next[key])) {
+        changes[key] = next[key];
+      }
+    }
+    previous.current = next as O;
+    if (Object.keys(changes).length > 0) {
+      store.setOptions(changes as Partial<O>);
+    }
+  });
+
+  const state = useSyncExternalStore(
+    (listener) => store.subscribe(listener),
+    () => store.getState(),
+    () => store.getState(),
+  );
+
+  return { store, state };
+}
+
+/** Structural equality for plain data (dates, ranges, lists); identity for everything else. */
+export function deepEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+    return false;
+  }
+  if (Array.isArray(a) || Array.isArray(b)) {
+    return (
+      Array.isArray(a) &&
+      Array.isArray(b) &&
+      a.length === b.length &&
+      a.every((item, index) => deepEqual(item, b[index]))
+    );
+  }
+  if (
+    Object.getPrototypeOf(a) !== Object.prototype ||
+    Object.getPrototypeOf(b) !== Object.prototype
+  ) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+
+  return (
+    keysA.length === keysB.length &&
+    keysA.every((key) =>
+      deepEqual((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key]),
+    )
+  );
+}