@cahyo-dimas/freeday 1.7.0

package/adapters/react/components/FdyDatepicker.tsx

@@ -0,0 +1,354 @@
+import type { JSX } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { usePopover } from '../usePopover';
+
+// React port of adapters/vue/components/FdyDatepicker.vue over freeday's `.fdy-datepicker` /
+// `.fdy-cal__*` classes (see src/components/datepicker.css). Re-implements the single-date
+// calendar behavior (month grid, keyboard nav, min/max clamping, Intl locale formatting) as a
+// controlled React component (`value` + `onChange` in place of Vue's `v-model`). Open/close
+// (outside-click + focusout) mirrors the already-approved FdyCombo.tsx pattern. Range mode is
+// out of scope (v1 = single date).
+
+interface DayCell {
+  date: Date;
+  iso: string;
+  label: number;
+  ariaLabel: string;
+  outside: boolean;
+  today: boolean;
+  selected: boolean;
+  disabled: boolean;
+  focusable: boolean;
+}
+
+export interface FdyDatepickerProps {
+  value: string | null;
+  onChange: (value: string) => void;
+  min?: string;
+  max?: string;
+  locale?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+  id?: string;
+  ariaLabelledby?: string;
+}
+
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+function toISO(d: Date): string {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function parseISO(s: string | null | undefined): Date | null {
+  if (s === null || s === undefined || s === '') return null;
+  const parts: string[] = s.split('-');
+  if (parts.length !== 3) return null;
+  const y: number = Number(parts[0]);
+  const m: number = Number(parts[1]);
+  const day: number = Number(parts[2]);
+  const d: Date = new Date(y, m - 1, day);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function startOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function sameDay(a: Date | null, b: Date | null): boolean {
+  return a !== null && b !== null && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function addDays(d: Date, n: number): Date {
+  const x: Date = new Date(d);
+  x.setDate(x.getDate() + n);
+  return x;
+}
+function addMonths(d: Date, n: number): Date {
+  const x: Date = new Date(d);
+  x.setMonth(x.getMonth() + n);
+  return x;
+}
+
+function dayClassName(cell: DayCell): string {
+  let cls = 'fdy-cal__day';
+  if (cell.outside) cls += ' is-outside';
+  if (cell.today) cls += ' is-today';
+  if (cell.selected) cls += ' is-selected';
+  return cls;
+}
+
+export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
+  const baseId: string = useId();
+  const triggerId: string = props.id ?? `${baseId}-trigger`;
+  const titleId: string = `${baseId}-title`;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const dayRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+  // Set by moveFocus/openPanel, consumed by the focus-sync effect below (React's analogue of
+  // Vue's `nextTick(focusCell)`); nav-button clicks intentionally leave this untouched so they
+  // don't steal DOM focus off the button, matching the Vue template's behavior.
+  const pendingFocusRef = useRef<string | null>(null);
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  // Render the calendar panel in the top layer (popover) so it never gets clipped by a card or
+  // scroll container; positions against the trigger.
+  usePopover(panelRef, triggerRef, open);
+
+  // Popover attr for React 18 (JSX may not type it): set once on mount.
+  useEffect((): void => {
+    panelRef.current?.setAttribute('popover', 'manual');
+  }, []);
+
+  const selectedDate: Date | null = useMemo((): Date | null => parseISO(props.value), [props.value]);
+  const minDate: Date | null = useMemo((): Date | null => parseISO(props.min), [props.min]);
+  const maxDate: Date | null = useMemo((): Date | null => parseISO(props.max), [props.max]);
+  const isDisabled: boolean = props.disabled === true;
+  const isInvalid: boolean = props.invalid === true;
+  const displayPlaceholder: string = props.placeholder ?? 'Pilih tanggal';
+
+  const [viewMonth, setViewMonth] = useState<Date>((): Date => startOfMonth(parseISO(props.value) ?? new Date()));
+  const [focusDate, setFocusDate] = useState<Date>((): Date => parseISO(props.value) ?? new Date());
+
+  // Keep the roving-tabindex cell inside the visible month so the grid stays keyboard-reachable
+  // after navigating with Home/End/PageUp/PageDown (mirrors freeday-datepicker.js's clamp).
+  const effectiveFocusDate: Date = useMemo((): Date => {
+    if (focusDate.getMonth() === viewMonth.getMonth() && focusDate.getFullYear() === viewMonth.getFullYear()) return focusDate;
+    const daysInMonth: number = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 0).getDate();
+    return new Date(viewMonth.getFullYear(), viewMonth.getMonth(), Math.min(focusDate.getDate(), daysInMonth));
+  }, [focusDate, viewMonth]);
+
+  const monthFmt: Intl.DateTimeFormat = useMemo(
+    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }),
+    [props.locale],
+  );
+  const valueFmt: Intl.DateTimeFormat = useMemo(
+    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { day: '2-digit', month: 'short', year: 'numeric' }),
+    [props.locale],
+  );
+  const dayLabelFmt: Intl.DateTimeFormat = useMemo(
+    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),
+    [props.locale],
+  );
+  const dowFmt: Intl.DateTimeFormat = useMemo(
+    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { weekday: 'short' }),
+    [props.locale],
+  );
+
+  const displayValue: string = selectedDate !== null ? valueFmt.format(selectedDate) : displayPlaceholder;
+
+  const weekdayHeaders: string[] = useMemo((): string[] => {
+    const monday: Date = new Date(2024, 0, 1); // a known Monday
+    return Array.from({ length: 7 }, (_unused: unknown, i: number): string => dowFmt.format(addDays(monday, i)));
+  }, [dowFmt]);
+
+  function isDayDisabled(d: Date): boolean {
+    if (minDate !== null && startOfDay(d).getTime() < startOfDay(minDate).getTime()) return true;
+    if (maxDate !== null && startOfDay(d).getTime() > startOfDay(maxDate).getTime()) return true;
+    return false;
+  }
+
+  const gridCells: DayCell[] = useMemo((): DayCell[] => {
+    const first: Date = new Date(viewMonth.getFullYear(), viewMonth.getMonth(), 1);
+    const offset: number = (first.getDay() + 6) % 7; // Monday-first
+    const startCell: Date = addDays(first, -offset);
+    const today: Date = new Date();
+    const focus: Date = effectiveFocusDate;
+    const cells: DayCell[] = [];
+    for (let i = 0; i < 42; i++) {
+      const d: Date = addDays(startCell, i);
+      cells.push({
+        date: d,
+        iso: toISO(d),
+        label: d.getDate(),
+        ariaLabel: dayLabelFmt.format(d),
+        outside: d.getMonth() !== viewMonth.getMonth(),
+        today: sameDay(d, today),
+        selected: sameDay(d, selectedDate),
+        disabled: isDayDisabled(d),
+        focusable: sameDay(d, focus),
+      });
+    }
+    return cells;
+    // Deps intentionally mirror the port recipe, not every closure read: minDate/maxDate,
+    // dayLabelFmt and effectiveFocusDate all derive deterministically from the listed deps
+    // within the same render pass, so this stays in sync without listing them separately.
+  }, [viewMonth, props.value, props.min, props.max, props.locale]);
+
+  // Focus the roving-tabindex cell after a render triggered by moveFocus/openPanel (React's
+  // analogue of Vue's `nextTick(focusCell)`). Runs after every render; cheap no-op otherwise.
+  useEffect((): void => {
+    if (pendingFocusRef.current === null) return;
+    const iso: string = pendingFocusRef.current;
+    pendingFocusRef.current = null;
+    dayRefs.current[iso]?.focus();
+  });
+
+  function moveFocus(next: Date): void {
+    setFocusDate(next);
+    setViewMonth(new Date(next.getFullYear(), next.getMonth(), 1));
+    pendingFocusRef.current = toISO(next);
+  }
+
+  function pick(d: Date): void {
+    if (isDayDisabled(d)) return;
+    const day: Date = startOfDay(d);
+    setFocusDate(day);
+    const iso: string = toISO(day);
+    props.onChange(iso);
+    closePanel(true);
+  }
+
+  function openPanel(): void {
+    if (isDisabled || open) return;
+    const next: Date = selectedDate ?? focusDate ?? new Date();
+    setFocusDate(next);
+    setViewMonth(new Date(next.getFullYear(), next.getMonth(), 1));
+    setOpen(true);
+    pendingFocusRef.current = toISO(next);
+  }
+
+  function closePanel(returnFocus: boolean): void {
+    if (!open) return;
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  }
+
+  function toggle(): void {
+    if (open) closePanel(false);
+    else openPanel();
+  }
+
+  function onGridKeydown(e: React.KeyboardEvent<HTMLDivElement>): void {
+    const f: Date = effectiveFocusDate;
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        moveFocus(addDays(f, -1));
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        moveFocus(addDays(f, 1));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        moveFocus(addDays(f, -7));
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        moveFocus(addDays(f, 7));
+        break;
+      case 'Home':
+        e.preventDefault();
+        moveFocus(addDays(f, -((f.getDay() + 6) % 7)));
+        break;
+      case 'End':
+        e.preventDefault();
+        moveFocus(addDays(f, 6 - ((f.getDay() + 6) % 7)));
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        moveFocus(addMonths(f, e.shiftKey ? -12 : -1));
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        moveFocus(addMonths(f, e.shiftKey ? 12 : 1));
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        pick(f);
+        break;
+      case 'Escape':
+        e.preventDefault();
+        closePanel(true);
+        break;
+      default:
+        break;
+    }
+  }
+
+  // Close when focus leaves the control entirely (e.g. Shift+Tab off the trigger).
+  const onFocusout = (e: React.FocusEvent<HTMLDivElement>): void => {
+    const next: EventTarget | null = e.relatedTarget;
+    if (rootRef.current !== null && !(next instanceof Node && rootRef.current.contains(next))) closePanel(false);
+  };
+
+  // Close when a pointer lands outside the whole control.
+  useEffect((): void | (() => void) => {
+    if (!open) return;
+    const onDocPointerDown = (e: MouseEvent): void => {
+      const t: EventTarget | null = e.target;
+      if (rootRef.current !== null && t instanceof Node && !rootRef.current.contains(t)) closePanel(false);
+    };
+    document.addEventListener('mousedown', onDocPointerDown);
+    return (): void => document.removeEventListener('mousedown', onDocPointerDown);
+  }, [open]);
+
+  return (
+    <div ref={rootRef} className={isInvalid ? 'fdy-datepicker fdy-datepicker--error' : 'fdy-datepicker'} onBlur={onFocusout}>
+      <button
+        id={triggerId}
+        ref={triggerRef}
+        type="button"
+        className={open ? 'fdy-datepicker__trigger is-open' : 'fdy-datepicker__trigger'}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-labelledby={props.ariaLabelledby}
+        aria-invalid={isInvalid ? 'true' : undefined}
+        aria-describedby={props.describedby}
+        disabled={isDisabled}
+        onClick={toggle}
+      >
+        <span className={selectedDate === null ? 'fdy-datepicker__value fdy-datepicker__value--placeholder' : 'fdy-datepicker__value'}>
+          {displayValue}
+        </span>
+        <span className="fdy-datepicker__icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="4" width="18" height="18" rx="2"></rect>
+            <path d="M16 2v4M8 2v4M3 10h18"></path>
+          </svg>
+        </span>
+      </button>
+
+      <div ref={panelRef} className="fdy-datepicker__panel" role="dialog" aria-modal="false" aria-labelledby={titleId} hidden={!open}>
+        <div className="fdy-cal__head">
+          <button type="button" className="fdy-cal__nav" aria-label="Bulan sebelumnya" onClick={(): void => setViewMonth(addMonths(viewMonth, -1))}>
+            &lsaquo;
+          </button>
+          <div id={titleId} className="fdy-cal__title">{monthFmt.format(viewMonth)}</div>
+          <button type="button" className="fdy-cal__nav" aria-label="Bulan berikutnya" onClick={(): void => setViewMonth(addMonths(viewMonth, 1))}>
+            &rsaquo;
+          </button>
+        </div>
+        <div className="fdy-cal__grid" role="grid" aria-labelledby={titleId} onKeyDown={onGridKeydown}>
+          {weekdayHeaders.map((w: string): JSX.Element => (
+            <div key={w} className="fdy-cal__dow" role="columnheader" aria-label={w}>{w}</div>
+          ))}
+          {gridCells.map((cell: DayCell): JSX.Element => (
+            <button
+              key={cell.iso}
+              ref={(el: HTMLButtonElement | null): void => {
+                dayRefs.current[cell.iso] = el;
+              }}
+              type="button"
+              className={dayClassName(cell)}
+              role="gridcell"
+              aria-label={cell.ariaLabel}
+              aria-selected={cell.selected ? 'true' : undefined}
+              disabled={cell.disabled}
+              tabIndex={cell.focusable ? 0 : -1}
+              onClick={(): void => pick(cell.date)}
+            >
+              {cell.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/adapters/react/index.d.ts

@@ -0,0 +1,37 @@
+import type { RefObject } from 'react';
+
+export interface UseFreedayReturn {
+  /** Manually re-run all Freeday enhancers over the scoped subtree. */
+  rehydrate: () => void;
+}
+
+/**
+ * Auto-initialise Freeday enhancers over a component's subtree on mount and
+ * after every commit. Pass a ref to scope the work; omit it to scan the whole
+ * document.
+ */
+export declare function useFreeday(rootRef?: RefObject<HTMLElement | null>): UseFreedayReturn;
+
+/** `event.detail` shapes for the bubbling `fdy-*` CustomEvents. */
+export interface FdyChangeDetail { value: string }
+export interface FdyAutocompleteSelectDetail { value: string }
+export interface FdyCascadeChangeDetail { value: string; path: string; labels: string[] }
+export interface FdyDatepickerChangeDetail { value: string; date: Date | null }
+export interface FdyTimeSelectDetail { value: string }
+export interface FdyDatetimeChangeDetail { date: string; time: string; value: string }
+export interface FdyMaskDetail { value: string; raw: string }
+export interface FdyFormInvalidDetail { invalid: HTMLElement[] }
+export interface FdyChipChangeDetail { value: string; pressed: boolean; selected: string[] }
+export interface FdyChipRemoveDetail { value: string }
+export interface FdyCflSelectDetail { row?: unknown; rows?: unknown[] }
+export interface FdyTableChangeDetail { page: number; sort: string | null; query: string }
+
+// Re-exports of React components and hooks
+export { usePopover } from './usePopover';
+export { FdyCombo, type FdyComboProps, type FdyComboOption } from './components/FdyCombo';
+export { FdyDatepicker, type FdyDatepickerProps } from './components/FdyDatepicker';
+export { FdyDateRange, type FdyDateRangeProps, type DateRangeValue } from './components/FdyDateRange';
+export { FdyAutocomplete, type FdyAutocompleteProps } from './components/FdyAutocomplete';
+export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components/FdyCascade';
+export { FdyCfl, type FdyCflProps, type CflColumn, type CflPage } from './components/FdyCfl';
+export { FdyChart, type FdyChartProps, type FdyChartSeries } from './components/FdyChart';

package/adapters/react/index.js

@@ -0,0 +1,9 @@
+export { useFreeday } from './useFreeday.js';
+export { usePopover } from './usePopover.ts';
+export { FdyCombo } from './components/FdyCombo.tsx';
+export { FdyDatepicker } from './components/FdyDatepicker.tsx';
+export { FdyDateRange } from './components/FdyDateRange.tsx';
+export { FdyAutocomplete } from './components/FdyAutocomplete.tsx';
+export { FdyCascade } from './components/FdyCascade.tsx';
+export { FdyCfl } from './components/FdyCfl.tsx';
+export { FdyChart } from './components/FdyChart.tsx';

package/adapters/react/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["react"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

package/adapters/react/useFreeday.js

@@ -0,0 +1,44 @@
+/* Freeday — React adapter (thin). The enhancers stay the source of truth; this
+ * hook re-runs every registered window.Freeday*.initAll() over a subtree after
+ * React commits, so [data-fdy-*] markup rendered by React gets enhanced (and
+ * re-enhanced after updates). Enhancers are idempotent, so the repeated calls
+ * are safe. Requires `import 'freeday'` once at app entry to register them.
+ *
+ * Usage:
+ *   const root = useRef(null);
+ *   useFreeday(root);            // scopes init to this component's subtree
+ *   // <div ref={root}> ...[data-fdy-*] markup... </div>
+ *
+ * Events are native bubbling CustomEvents — add listeners on the root (they
+ * bubble) and read event.detail. See index.d.ts for the detail types.
+ */
+import { useEffect, useCallback } from 'react';
+
+// Discover Freeday enhancer namespaces once (all registered by the time an app
+// mounts, since `import 'freeday'` runs first). Each exposes initAll(el?).
+var _apis = null;
+function freedayApis() {
+  if (_apis) return _apis;
+  _apis = [];
+  var names = Object.getOwnPropertyNames(window);
+  for (var i = 0; i < names.length; i++) {
+    var key = names[i];
+    if (key.slice(0, 7) === 'Freeday') {
+      var api = window[key];
+      if (api && typeof api.initAll === 'function') _apis.push(api);
+    }
+  }
+  return _apis;
+}
+
+export function useFreeday(rootRef) {
+  var rehydrate = useCallback(function () {
+    var el = rootRef && rootRef.current ? rootRef.current : undefined;
+    var apis = freedayApis();
+    for (var i = 0; i < apis.length; i++) apis[i].initAll(el);
+  }, [rootRef]);
+  // No dependency array: runs after every commit (mount + updates), mirroring
+  // the Vue adapter's onMounted + onUpdated.
+  useEffect(rehydrate);
+  return { rehydrate: rehydrate };
+}

package/adapters/react/usePopover.ts

@@ -0,0 +1,64 @@
+import { useEffect, type RefObject } from 'react';
+
+// React port of adapters/vue/usePopover.ts. Lifts a dropdown panel into the top layer via the
+// native Popover API so it escapes any ancestor overflow clip (a .fdy-card, a scroll container),
+// then positions it `fixed` against its trigger (flip above when there's no room below; match the
+// trigger width). Degrades to the panel's own [hidden]/absolute CSS where Popover is unavailable.
+
+interface PopoverElement extends HTMLElement {
+  showPopover(): void;
+  hidePopover(): void;
+}
+
+const GAP = 4; // ~ --space-1
+const supported: boolean =
+  typeof HTMLElement !== 'undefined'
+  && typeof (HTMLElement.prototype as Partial<PopoverElement>).showPopover === 'function';
+
+function place(panel: HTMLElement, trigger: HTMLElement): void {
+  const r: DOMRect = trigger.getBoundingClientRect();
+  panel.style.position = 'fixed';
+  panel.style.margin = '0';
+  panel.style.inset = 'auto';
+  panel.style.minWidth = `${r.width}px`;
+  const ph: number = panel.offsetHeight;
+  const pw: number = panel.offsetWidth;
+  const vw: number = document.documentElement.clientWidth;
+  const vh: number = document.documentElement.clientHeight;
+  const below: number = vh - r.bottom - GAP;
+  const above: number = r.top - GAP;
+  const top: number = ph <= below || below >= above ? r.bottom + GAP : Math.max(GAP, r.top - GAP - ph);
+  let left: number = r.left;
+  if (left + pw > vw - GAP) left = Math.max(GAP, vw - GAP - pw);
+  panel.style.top = `${Math.round(top)}px`;
+  panel.style.left = `${Math.round(left)}px`;
+}
+
+export function usePopover(
+  panelRef: RefObject<HTMLElement | null>,
+  triggerRef: RefObject<HTMLElement | null>,
+  open: boolean,
+): void {
+  useEffect((): void | (() => void) => {
+    const panel: PopoverElement | null = panelRef.current as PopoverElement | null;
+    const trigger: HTMLElement | null = triggerRef.current;
+    if (!supported || panel === null || trigger === null) return;
+
+    function reposition(): void {
+      if (panel !== null && trigger !== null && panel.matches(':popover-open')) place(panel, trigger);
+    }
+
+    if (open) {
+      if (!panel.matches(':popover-open')) panel.showPopover();
+      place(panel, trigger);
+      window.addEventListener('scroll', reposition, true);
+      window.addEventListener('resize', reposition);
+      return (): void => {
+        window.removeEventListener('scroll', reposition, true);
+        window.removeEventListener('resize', reposition);
+        if (panel.matches(':popover-open')) panel.hidePopover();
+      };
+    }
+    return;
+  }, [open, panelRef, triggerRef]);
+}