@nepdatejs/react 0.0.0-stage → 0.1.1

package/src/multi-date-picker.tsx

@@ -0,0 +1,245 @@
+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 { usePageLocale } from './page-locale';
+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 locale = usePageLocale(options.locale);
+  const picker = useMultiDatePicker({ ...options, locale });
+  const { state, store, calendar } = picker;
+  const labels = getLocale(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/page-locale.ts

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from 'react';
+import { getConfig, type LocaleCode } from '@nepdatejs/core';
+
+const neverChanges = (): (() => void) => () => undefined;
+
+/** Used on the server and while hydrating, so both render the same text. */
+function defaultLocale(): LocaleCode {
+  return getConfig().defaultLocale;
+}
+
+/** Nepali names and digits when the page language is Nepali. Browser only. */
+function pageLocale(): LocaleCode {
+  return document.documentElement.lang.toLowerCase().startsWith('ne')
+    ? 'ne'
+    : defaultLocale();
+}
+
+/** The given locale, or else the page's language. */
+export function usePageLocale(given: LocaleCode | undefined): LocaleCode {
+  const page = useSyncExternalStore(neverChanges, pageLocale, defaultLocale);
+
+  return given ?? page;
+}

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,196 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+
+interface StoreLike<O, S> {
+  getState(): S;
+  subscribe(listener: () => void): () => void;
+  setOptions(changes: Partial<O>): void;
+  readonly actions?: object;
+}
+
+/** Function options whose answers decide how the calendar's days look. */
+const DAY_FUNCTIONS = ['isDateDisabled', 'holidays', 'events'] as const;
+
+interface DayAnswers {
+  /** The days on screen; moving to another month isn't a change of answers. */
+  readonly days: string;
+  readonly answers: string;
+}
+
+/** 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));
+  const dayAnswers = useRef<DayAnswers | null>(null);
+  const storeValue = useRef(valueOf(store.getState()));
+
+  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;
+
+    // An inline function is wrapped once, so it never looks changed above. Ask it
+    // about the days on screen instead, and redraw only if an answer is different.
+    const current = askDayFunctions(options, store.getState());
+    const asked = dayAnswers.current;
+    dayAnswers.current = current;
+    if (asked?.days === current?.days && asked?.answers !== current?.answers) {
+      for (const key of DAY_FUNCTIONS) {
+        if (key in next) {
+          changes[key] = next[key];
+        }
+      }
+    }
+    if (Object.keys(changes).length > 0) {
+      store.setOptions(changes as Partial<O>);
+    }
+
+    // A controlled picker shows what its parent holds. If the person entered a
+    // date and the parent kept its value, put that value back.
+    const value = valueOf(store.getState());
+    const changedByUser = !deepEqual(value, storeValue.current) && !('value' in changes);
+    storeValue.current = value;
+    const held = next['value'];
+    if (
+      changedByUser &&
+      held !== undefined &&
+      isChosen(value) &&
+      !deepEqual(value, held)
+    ) {
+      (store.actions as { setValue?: (value: unknown) => void } | undefined)?.setValue?.(
+        held,
+      );
+      storeValue.current = valueOf(store.getState());
+    }
+  });
+
+  const state = useSyncExternalStore(
+    (listener) => store.subscribe(listener),
+    () => store.getState(),
+    () => store.getState(),
+  );
+
+  return { store, state };
+}
+
+function valueOf(state: unknown): unknown {
+  return (state as { value?: unknown }).value;
+}
+
+/** A finished value: not empty, half typed, or a range with one end still to pick. */
+function isChosen(value: unknown): boolean {
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+  if (typeof value === 'object' && value !== null) {
+    return Object.values(value).every((part) => part !== '');
+  }
+
+  return value !== '' && value !== undefined;
+}
+
+/** What the day functions say about the days on screen, or null when there are none. */
+function askDayFunctions(options: object, state: unknown): DayAnswers | null {
+  const given = DAY_FUNCTIONS.flatMap((key) => {
+    const option = (options as Record<string, unknown>)[key];
+
+    return typeof option === 'function' ? [option as (date: unknown) => unknown] : [];
+  });
+  if (given.length === 0) {
+    return null;
+  }
+  const { weeks, calendarState } = state as {
+    weeks?: readonly (readonly ({ date: unknown } | null)[])[];
+    calendarState?: { weeks: readonly (readonly ({ date: unknown } | null)[])[] };
+  };
+  const dates = (weeks ?? calendarState?.weeks ?? [])
+    .flat()
+    .flatMap((cell) => (cell ? [cell.date] : []));
+
+  return {
+    days: JSON.stringify(dates),
+    answers: JSON.stringify(dates.map((date) => given.map((ask) => ask(date)))),
+  };
+}
+
+/** 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]),
+    )
+  );
+}