@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.10

package/es/DatePicker/type.d.mts

@@ -1,35 +1,302 @@
-import { InputSize, InputVariant } from "../Input/type.mjs";
-import { CalendarMode } from "./calendar.mjs";
-import { CSSProperties, ReactNode } from "react";
+import { GenerateConfig } from "./core/generate/index.mjs";
+import { BaseInfo, CellRender, CellRenderInfo, Components, Locale, PanelMode, PickerMode, PickerRef, RangePickerRef, SharedPanelProps, ValueDate } from "./core/interface.mjs";
+import { RangePickerProps as RangePickerProps$1 } from "./core/PickerInput/RangePicker.mjs";
+import { PickerProps as PickerProps$1 } from "./core/PickerInput/SinglePicker.mjs";
+import "./core/index.mjs";
+import { CSSProperties, ComponentType, FocusEvent, MouseEvent, ReactNode, Ref } from "react";
+import { Dayjs } from "dayjs";
 //#region src/DatePicker/type.d.ts
-interface PickerCommonProps {
-  allowClear?: boolean;
-  className?: string;
-  disabled?: boolean;
-  disabledDate?: (date: Date) => boolean;
-  format?: string | ((date: Date) => string);
-  max?: Date;
-  min?: Date;
+/** rc-picker's locale (texts and formats) plus antd's per-`picker` placeholders. */
+export interface PickerLocaleLang extends Locale {
+  monthPlaceholder?: string;
+  placeholder?: string;
+  quarterPlaceholder?: string;
+  rangeMonthPlaceholder?: [string, string];
+  rangePlaceholder?: [string, string];
+  rangeQuarterPlaceholder?: [string, string];
+  rangeWeekPlaceholder?: [string, string];
+  rangeYearPlaceholder?: [string, string];
+  weekPlaceholder?: string;
+  yearPlaceholder?: string;
+}
+/** Placeholders of `picker="time"`. */
+export interface TimePickerLocale {
+  placeholder?: string;
+  rangePlaceholder?: [string, string];
+}
+/** antd's `PickerLocale`, the shape of the `locale` prop. */
+export interface PickerLocale {
+  /** @deprecated Kept for antd parity; use `lang.fieldDateFormat`. */
+  dateFormat?: string;
+  /** @deprecated Kept for antd parity; use `lang.fieldDateTimeFormat`. */
+  dateTimeFormat?: string;
+  lang: PickerLocaleLang;
+  /** @deprecated Kept for antd parity; use `lang.fieldMonthFormat`. */
+  monthFormat?: string;
+  timePickerLocale: TimePickerLocale;
+  /** @deprecated Kept for antd parity; use `lang.fieldWeekFormat`. */
+  weekFormat?: string;
+}
+/**
+ * The `locale` prop: a full `PickerLocale` (e.g. a spread of an exported default locale) or
+ * only the fields to change — `lang` and `timePickerLocale` are merged field by field over the
+ * default locale generated from `@lobehub/ui/i18n`.
+ */
+export type PickerLocaleInput = Omit<Partial<PickerLocale>, 'lang' | 'timePickerLocale'> & {
+  lang?: Partial<PickerLocaleLang>;
+  timePickerLocale?: TimePickerLocale;
+};
+/** A `presets` entry: `value` may be a function, evaluated when the preset is hovered or picked. */
+export type PresetDate<T = Date> = ValueDate<T>;
+/** `components`: replace a panel (`date` / `week` / … / `time`), the `input` or the OK `button`. */
+export type PickerComponents = Components<Date>;
+/** Props a custom panel in `components` receives (`value`, `onSelect`, `onHover`, …). */
+export type PickerPanelProps<DateType extends object = Date> = SharedPanelProps<DateType>;
+export type PickerSize = 'large' | 'medium' | 'small';
+export type PickerVariant = 'outlined' | 'borderless' | 'filled' | 'underlined';
+export type PickerStatus = 'error' | 'warning';
+export type PickerPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+/** @deprecated Use `PickerMode` (the `picker` prop) instead. */
+export type CalendarMode = 'date' | 'month' | 'year';
+/** Semantic parts of the input box (Semantic DOM). */
+export type PickerSemanticName = 'root' | 'prefix' | 'input' | 'suffix';
+/** Semantic parts of the popup (Semantic DOM, `classNames.popup` / `styles.popup`). */
+export type PickerPopupSemanticName = 'root' | 'container' | 'header' | 'body' | 'content' | 'item' | 'footer';
+export interface PickerSemanticClassNames extends Partial<Record<PickerSemanticName, string>> {
+  /** A string is the popup `root` class. */
+  popup?: string | Partial<Record<PickerPopupSemanticName, string>>;
+}
+export interface PickerSemanticStyles extends Partial<Record<PickerSemanticName, CSSProperties>> {
+  popup?: Partial<Record<PickerPopupSemanticName, CSSProperties>>;
+}
+/** `classNames`: an object, or a function of `{ props }` returning one. */
+export type PickerClassNames<P = any> = PickerSemanticClassNames | ((info: {
+  props: P;
+}) => PickerSemanticClassNames);
+/** `styles`: an object, or a function of `{ props }` returning one. */
+export type PickerStyles<P = any> = PickerSemanticStyles | ((info: {
+  props: P;
+}) => PickerSemanticStyles);
+/** Props rc-picker owns internally or that lobe wires up itself. */
+type InternalRcProps = 'classNames' | 'generateConfig' | 'inlinePopup' | 'locale' | 'prefixCls' | 'styles';
+type MultipleRcProps = 'maxTagCount' | 'multiple' | 'removeIcon' | 'tagRender';
+type ValueRcProps = 'changeOnBlur' | 'defaultValue' | 'onCalendarChange' | 'onChange' | 'onOk' | 'placeholder' | 'placement' | 'size' | 'value';
+interface LobePickerProps {
+  /**
+   * @deprecated Use `needConfirm={false}` instead: the value is committed when the popup
+   * closes, without the OK button. Ignored when `needConfirm` is set.
+   */
+  changeOnBlur?: boolean;
+  /** @deprecated Use `classNames.popup.root` instead. */
+  dropdownClassName?: string;
+  /**
+   * Popup position relative to the input.
+   * @default 'bottomLeft' ('bottomRight' when `direction="rtl"`)
+   */
+  placement?: PickerPlacement;
+  /** @deprecated Use `classNames.popup.root` instead. */
+  popupClassName?: string;
+  /** @deprecated Use `styles.popup.root` instead. */
+  popupStyle?: CSSProperties;
+  /** Lobe look: drop shadow under the input box. */
   shadow?: boolean;
-  size?: InputSize;
-  style?: CSSProperties;
-  variant?: InputVariant;
-}
-export interface DatePickerProps extends PickerCommonProps {
-  defaultValue?: Date | null;
-  footer?: ReactNode;
-  mode?: CalendarMode;
-  onChange?: (date: Date | null) => void;
+  /** @default 'medium' */
+  size?: PickerSize;
+  status?: PickerStatus;
+  /** @default 'outlined' (light) / 'filled' (dark) */
+  variant?: PickerVariant;
+}
+/** Props `tagRender` receives for each picked date in `multiple` mode. */
+export interface PickerTagProps<DateType extends object = Date> {
+  closable: boolean;
+  disabled: boolean;
+  /** The date formatted with `format`. */
+  label: ReactNode;
+  /** Removes the date from the value. */
+  onClose: (event?: MouseEvent<HTMLElement>) => void;
+  value: DateType;
+}
+/** `dateString` of a value: a string per date in `multiple` mode. */
+export type PickerDateStrings<ValueType> = ValueType extends readonly unknown[] ? string[] : string | null;
+/**
+ * Date inputs the previous lobe DatePicker took (native `Date`), plus date strings and
+ * timestamps. On the dayjs pickers they are converted to `Dayjs`; callbacks always get `Dayjs`.
+ */
+export type LegacyDateInput = Date | string | number;
+/** A date prop value: `Dayjs` or a `LegacyDateInput` on the dayjs pickers, else `DateType`. */
+export type PickerDateInput<DateType> = DateType extends Dayjs ? Dayjs | LegacyDateInput : DateType extends Date ? Dayjs | LegacyDateInput : DateType;
+/** Range `onChange` dates: never `null` on the default (native `Date`) picker, as before. */
+export type RangeChangeDates<DateType extends object> = DateType extends Date ? DateRangeValue<DateType> : DateRangeValue<DateType> | null;
+export type RangeChangeStrings<DateType extends object> = DateType extends Date ? [string, string] : [string, string] | null;
+/** `PickerDateInput` for a single value or each date of a `multiple` array. */
+export type PickerValueInput<ValueType> = ValueType extends readonly (infer D)[] ? PickerDateInput<D>[] : PickerDateInput<ValueType>;
+/**
+ * antd's `PickerPropsWithMultiple`: `InnerPickerProps` with the value props typed by
+ * `ValueType` — `DateType` for one date, `DateType[]` with `multiple`.
+ */
+export type PickerPropsWithMultiple<DateType, InnerPickerProps, ValueType = DateType> = Omit<InnerPickerProps, 'defaultValue' | 'onCalendarChange' | 'onChange' | 'onOk' | 'value'> & {
+  /** Also takes a native `Date`, date string or timestamp (converted to `Dayjs`). */
+  defaultValue?: PickerValueInput<ValueType> | null;
+  onCalendarChange?(date: ValueType | null, dateString: PickerDateStrings<ValueType>, info: BaseInfo): void;
+  /** Cleared: `null` for one date, `[]` with `multiple`. */
+  onChange?(date: ValueType | null, dateString: PickerDateStrings<ValueType>): void;
+  onOk?(date?: ValueType | null): void;
+  /** Also takes a native `Date`, date string or timestamp (converted to `Dayjs`). */
+  value?: PickerValueInput<ValueType> | null;
+};
+/**
+ * DatePicker props other than the value ones, which `PickerPropsWithMultiple` adds.
+ * `DateType` is the date library's type (`Dayjs`, or another one with `generatePicker`).
+ */
+export interface DatePickerBaseProps<DateType extends object = Date> extends Omit<PickerProps$1<DateType>, InternalRcProps | MultipleRcProps | ValueRcProps>, LobePickerProps {
+  /** Semantic DOM class names: `root` / `prefix` / `input` / `suffix` and `popup.*`. */
+  classNames?: PickerClassNames<DatePickerBaseProps<DateType>>;
+  /**
+   * antd `PickerLocale`: `lang` texts and formats (`fieldDateFormat`, `yearFormat`,
+   * `shortWeekDays`, …) and `timePickerLocale`. Defaults to the locale generated from the
+   * `@lobehub/ui/i18n` resources in context.
+   */
+  locale?: PickerLocaleInput;
+  /**
+   * `multiple`: at most this many tags; `'responsive'` fits as many as the width allows.
+   * The rest collapse into a `+ N ...` tag.
+   */
+  maxTagCount?: number | 'responsive';
+  /**
+   * Pick several dates, shown as tags; clicking a picked cell again removes it. Works on
+   * every `picker` except with `showTime`. Values are `Dayjs[]`, sorted unless
+   * `order={false}`. No OK button (`needConfirm` defaults to `false`): `onCalendarChange`
+   * fires on each click and `onChange` once the popup closes.
+   */
+  multiple?: boolean;
+  /**
+   * `multiple`: sort the picked dates; `false` keeps them in picking order.
+   * @default true
+   */
+  order?: boolean;
   placeholder?: string;
-  value?: Date | null;
+  ref?: Ref<PickerRef>;
+  /** `multiple`: the remove icon of each tag. */
+  removeIcon?: ReactNode;
+  /** Semantic DOM styles: `root` / `prefix` / `input` / `suffix` and `popup.*`. */
+  styles?: PickerStyles<DatePickerBaseProps<DateType>>;
+  /** `multiple`: render each picked date's tag, e.g. with base-ui `Tag`. */
+  tagRender?: (props: PickerTagProps<DateType>) => ReactNode;
+}
+/**
+ * `ValueType` is `Dayjs` (default) or `Dayjs[]` with `multiple`; `<DatePicker multiple>`
+ * infers `Dayjs[]` by itself.
+ */
+export type DatePickerProps<ValueType = Date> = PickerPropsWithMultiple<Date, DatePickerBaseProps, ValueType>;
+export type DateRangeValue<DateType extends object = Date> = [DateType | null, DateType | null];
+/** Which end of a range an event belongs to. */
+export interface RangeInfo {
+  range: 'start' | 'end';
 }
-export type DateRangeValue = [Date | null, Date | null];
-export interface DateRangePickerProps extends PickerCommonProps {
-  defaultValue?: DateRangeValue;
-  onChange?: (range: DateRangeValue) => void;
+/** `info.from` is the end picked first in the current range selection. */
+export type RangeDisabledDate<DateType extends object = Date> = (current: DateType, info: {
+  from?: DateType;
+  type: PanelMode;
+}) => boolean;
+type RangeRcProps = 'allowEmpty' | 'disabled' | 'disabledDate' | 'id' | 'onBlur' | 'onFocus' | 'order';
+export interface DateRangePickerProps<DateType extends object = Date> extends Omit<RangePickerProps$1<DateType>, InternalRcProps | RangeRcProps | ValueRcProps>, LobePickerProps {
+  /**
+   * Allow leaving the start / end empty; `true` applies to both ends.
+   * @default [false, false]
+   */
+  allowEmpty?: boolean | [boolean, boolean];
+  /** Semantic DOM class names, see `DatePickerProps['classNames']`. */
+  classNames?: PickerClassNames<DateRangePickerProps<DateType>>;
+  /** Each end also takes a native `Date`, date string or timestamp (converted to `Dayjs`). */
+  defaultValue?: [PickerDateInput<DateType> | null | undefined, PickerDateInput<DateType> | null | undefined];
+  /** Disable the whole picker, or each end separately with `[start, end]`. */
+  disabled?: boolean | [boolean, boolean];
+  /** Receives `info.from` once one end is picked, e.g. to limit the range length. */
+  disabledDate?: RangeDisabledDate<DateType>;
+  /** Ids of the start and end inputs. */
+  id?: {
+    end?: string;
+    start?: string;
+  };
+  /** antd `PickerLocale`, see `DatePickerProps['locale']`. */
+  locale?: PickerLocaleInput;
+  onBlur?: (event: FocusEvent<HTMLElement>, info: RangeInfo) => void;
+  onCalendarChange?(dates: DateRangeValue<DateType>, dateStrings: [string, string], info: RangeInfo): void;
+  /** Cleared: `null` (antd). */
+  /** Cleared: `[null, null]` on the default (native `Date`) picker, `null` on the dayjs one (antd). */
+  onChange?(dates: RangeChangeDates<DateType>, dateStrings: RangeChangeStrings<DateType>): void;
+  onFocus?: (event: FocusEvent<HTMLElement>, info: RangeInfo) => void;
+  onOk?(dates: DateRangeValue<DateType>): void;
+  /**
+   * Swap the ends when the end is earlier than the start; `false` keeps them as entered.
+   * @default true
+   */
+  order?: boolean;
   placeholder?: [string, string];
-  value?: DateRangeValue;
+  /** `focus(index)` / `focus({ index })` focuses the start (`0`) or end (`1`) input. */
+  ref?: Ref<RangePickerRef>;
+  /** Semantic DOM styles, see `DatePickerProps['styles']`. */
+  styles?: PickerStyles<DateRangePickerProps<DateType>>;
+  /** Each end also takes a native `Date`, date string or timestamp (converted to `Dayjs`). */
+  value?: [PickerDateInput<DateType> | null | undefined, PickerDateInput<DateType> | null | undefined] | null;
+}
+/** antd `PickerProps<DateType>`: DatePicker props over any date library's type. */
+export type PickerProps<DateType extends object = Date, ValueType = DateType> = PickerPropsWithMultiple<DateType, DatePickerBaseProps<DateType>, ValueType>;
+/** Props of `DatePicker.WeekPicker` / `MonthPicker` / … : `picker` is fixed. */
+export type PresetPickerProps<DateType extends object = Date, ValueType = DateType> = Omit<PickerProps<DateType, ValueType>, 'picker'>;
+export type WeekPickerProps<ValueType = Date> = PresetPickerProps<Date, ValueType>;
+export type MonthPickerProps<ValueType = Date> = PresetPickerProps<Date, ValueType>;
+export type YearPickerProps<ValueType = Date> = PresetPickerProps<Date, ValueType>;
+export type QuarterPickerProps<ValueType = Date> = PresetPickerProps<Date, ValueType>;
+/** antd `GenericTimePickerProps`: `DatePicker.TimePicker` has no `picker` / `showTime`. */
+export type GenericTimePickerProps<DateType extends object = Date, ValueType = DateType> = Omit<PickerProps<DateType, ValueType>, 'picker' | 'showTime'>;
+export type TimePickerProps<ValueType = Date> = GenericTimePickerProps<Date, ValueType>;
+/** antd-style alias of `DateRangePickerProps`. */
+export type RangePickerProps<DateType extends object = Date> = DateRangePickerProps<DateType>;
+/** antd `DatePickerSemanticType`: the Semantic DOM `classNames` / `styles` shapes. */
+export interface DatePickerSemanticType {
+  classNames?: PickerSemanticClassNames;
+  styles?: PickerSemanticStyles;
+}
+/**
+ * A single-date picker component: `multiple` (as `IsMultiple`) picks `DateType[]` values,
+ * otherwise `DateType`; a `value` / `defaultValue` infers `ValueType` directly.
+ */
+export interface SinglePickerComponent<DateType extends object, InnerProps = DatePickerBaseProps<DateType>> {
+  <IsMultiple extends boolean = false, ValueType = IsMultiple extends true ? DateType[] : DateType>(props: PickerPropsWithMultiple<DateType, InnerProps, ValueType> & {
+    multiple?: IsMultiple;
+  }): ReactNode;
+  displayName?: string;
+}
+export interface RangePickerComponent<DateType extends object> {
+  (props: DateRangePickerProps<DateType>): ReactNode;
+  displayName?: string;
+}
+/** What `generatePicker(generateConfig)` returns: DatePicker with its static pickers. */
+export interface GeneratedDatePicker<DateType extends object> extends SinglePickerComponent<DateType> {
+  MonthPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
+  QuarterPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
+  RangePicker: RangePickerComponent<DateType>;
+  TimePicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker' | 'showTime'>>;
+  WeekPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
+  YearPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
+}
+/** The default `DatePicker` (native `Date`) or `DayjsDatePicker`, with antd's pure panels and `generatePicker`. */
+export interface DatePickerType<D extends object = Date> extends GeneratedDatePicker<D> {
+  /** Debug only: the popup panel rendered inline, always open (antd `render-panel`). */
+  _InternalPanelDoNotUseOrYouWillBeFired: ComponentType<PickerPropsWithMultiple<D, DatePickerBaseProps<D>, any>>;
+  /** Debug only: the RangePicker popup panel rendered inline, always open. */
+  _InternalRangePanelDoNotUseOrYouWillBeFired: ComponentType<DateRangePickerProps<D>>;
+  generatePicker: <DateType extends object>(generateConfig: GenerateConfig<DateType>) => GeneratedDatePicker<DateType>;
 }
+/** `DayjsDatePicker`: the antd-aligned DatePicker over `Dayjs`. */
+export type DayjsDatePickerType = DatePickerType<Dayjs>;
+/** `DayjsDatePicker` props: values and callbacks use `Dayjs` (`Dayjs[]` with `multiple`). */
+export type DayjsDatePickerProps<ValueType = Dayjs> = PickerPropsWithMultiple<Dayjs, DatePickerBaseProps<Dayjs>, ValueType>;
+/** `DayjsDateRangePicker` props. */
+export type DayjsDateRangePickerProps = DateRangePickerProps<Dayjs>;
+/** `DayjsDateRangePicker` value: `[Dayjs | null, Dayjs | null]`. */
+export type DayjsDateRangeValue = DateRangeValue<Dayjs>;
 //#endregion
-export type { CalendarMode };
+export type { CellRender, CellRenderInfo, GenerateConfig, PanelMode, PickerMode, PickerRef, RangePickerRef };
 //# sourceMappingURL=type.d.mts.map

package/es/DatePicker/usePanelKeyboard.mjs

@@ -0,0 +1,230 @@
+"use client";
+import generateConfig from "./generateConfig.mjs";
+import { PREFIX_CLS } from "./style.mjs";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/DatePicker/usePanelKeyboard.tsx
+const isGridMode = (mode) => mode === "month" || mode === "quarter" || mode === "year" || mode === "decade";
+/** Cell steps per panel: one cell (←/→), one row (↑/↓) and one page (PageUp/PageDown). */
+const GRID = {
+	decade: {
+		col: 10,
+		page: 100,
+		row: 30,
+		unit: "year"
+	},
+	month: {
+		col: 1,
+		page: 12,
+		row: 3,
+		unit: "month"
+	},
+	quarter: {
+		col: 3,
+		page: 12,
+		row: 12,
+		unit: "month"
+	},
+	year: {
+		col: 1,
+		page: 10,
+		row: 3,
+		unit: "year"
+	}
+};
+const defaultConfig = generateConfig;
+/** Months since year 0, to compare tiles by position. */
+const monthIndex = (date, config) => config.getYear(date) * 12 + config.getMonth(date);
+/** First cell of the page `date` is on: Jan / Q1 of its year, first year of its decade… */
+const getPageStart = (date, mode, config = defaultConfig) => {
+	const year = config.getYear(date);
+	const startYear = mode === "year" ? Math.floor(year / 10) * 10 : mode === "decade" ? Math.floor(year / 100) * 100 : year;
+	const start = config.setDate(config.setMonth(config.setYear(date, startYear), 0), 1);
+	return config.setHour(config.setMinute(config.setSecond(config.setMillisecond(start, 0), 0), 0), 0);
+};
+const getPageEnd = (date, mode, config) => {
+	const start = getPageStart(date, mode, config);
+	if (mode === "month") return config.setMonth(start, 11);
+	if (mode === "quarter") return config.setMonth(start, 9);
+	return config.addYear(start, mode === "year" ? 9 : 90);
+};
+/** Whether `a` and `b` fall in the same tile of a `mode` panel. */
+const isSameCell = (a, b, mode, config = defaultConfig) => {
+	const yearA = config.getYear(a);
+	const yearB = config.getYear(b);
+	if (mode === "decade") return Math.floor(yearA / 10) === Math.floor(yearB / 10);
+	if (mode === "year") return yearA === yearB;
+	if (mode === "quarter") return yearA === yearB && Math.floor(config.getMonth(a) / 3) === Math.floor(config.getMonth(b) / 3);
+	return yearA === yearB && config.getMonth(a) === config.getMonth(b);
+};
+/**
+* Where `key` moves the active tile of a `mode` panel, or `undefined` for other keys.
+* `rtl` mirrors ←/→.
+*/
+const moveGridCell = (date, key, mode, rtl = false, config = defaultConfig) => {
+	const { col, page, row, unit } = GRID[mode];
+	const add = (diff) => unit === "year" ? config.addYear(date, diff) : config.addMonth(date, diff);
+	switch (key) {
+		case "ArrowLeft": return add(rtl ? col : -col);
+		case "ArrowRight": return add(rtl ? -col : col);
+		case "ArrowUp": return add(-row);
+		case "ArrowDown": return add(row);
+		case "PageUp": return add(-page);
+		case "PageDown": return add(page);
+		case "Home": return getPageStart(date, mode, config);
+		case "End": return getPageEnd(date, mode, config);
+	}
+};
+const ACTIVE_CLS = `${PREFIX_CLS}-cell-keyboard-active`;
+const toPair = (value) => Array.isArray(value) ? [value[0] ?? void 0, value[1] ?? void 0] : [value ?? void 0, void 0];
+/** The selection the keys start from; with `multiple`, the last picked date. */
+const toValuePair = (value, range) => !range && Array.isArray(value) ? toPair(value.at(-1)) : toPair(value);
+/**
+* lobe enhancement over rc-picker (ADR §8 step 6): arrow keys, PageUp / PageDown and
+* Home / End move an active tile on the month, quarter, year and decade panels while
+* focus stays in the input, and Enter picks it — as a click on that tile would.
+*
+* rc-picker has no grid navigation of its own, so this is layered on top: a capture
+* listener reads the keys before rc-picker's input handlers, the active tile is marked
+* through `cellRender`, and `pickerValue` is driven so the active tile stays on screen.
+* The date and week panels keep the input's text-editing keys, as in antd.
+*/
+const usePanelKeyboard = ({ cellRender, dateRender, defaultOpen, defaultPickerValue, defaultValue, direction, generateConfig: config = defaultConfig, mode, monthCellRender, onChange, onFocus, onOpenChange, onPanelChange, onPickerValueChange, open, picker = "date", pickerValue, range, value }) => {
+	const scopeId = useId();
+	const scopeClassName = `${PREFIX_CLS}-kb-${scopeId.replaceAll(/[^\w-]/g, "")}`;
+	const [innerOpen, setInnerOpen] = useState(!!defaultOpen);
+	const mergedOpen = open ?? innerOpen;
+	const [activeIndex, setActiveIndex] = useState(0);
+	const [innerMode, setInnerMode] = useState(picker);
+	const [innerPickerValue, setInnerPickerValue] = useState([void 0, void 0]);
+	const [activeCell, setActiveCell] = useState();
+	const [innerValue, setInnerValue] = useState();
+	const panelMode = (Array.isArray(mode) ? mode[activeIndex] : mode) ?? innerMode;
+	const resetKey = `${mergedOpen}|${activeIndex}|${picker}`;
+	const [prevResetKey, setPrevResetKey] = useState(resetKey);
+	if (prevResetKey !== resetKey) {
+		setPrevResetKey(resetKey);
+		setInnerMode(picker);
+		setActiveCell(void 0);
+	}
+	const [prevPanelMode, setPrevPanelMode] = useState(panelMode);
+	if (prevPanelMode !== panelMode) {
+		setPrevPanelMode(panelMode);
+		setActiveCell(void 0);
+	}
+	const mergedPickerValue = pickerValue === void 0 ? innerPickerValue : toPair(pickerValue);
+	const state = {
+		activeCell,
+		activeIndex,
+		config,
+		defaultPickerValue: toPair(defaultPickerValue),
+		direction,
+		mergedPickerValue,
+		onPickerValueChange,
+		panelMode,
+		picker,
+		range,
+		value: value === void 0 ? innerValue ?? toValuePair(defaultValue, range) : toValuePair(value, range)
+	};
+	const stateRef = useRef(state);
+	stateRef.current = state;
+	const commitPickerValue = useCallback((next) => {
+		const { activeIndex, mergedPickerValue, onPickerValueChange, panelMode, range } = stateRef.current;
+		const nextPair = [...mergedPickerValue];
+		nextPair[activeIndex] = next;
+		setInnerPickerValue(nextPair);
+		if (range) onPickerValueChange?.(nextPair, {
+			mode: [panelMode, panelMode],
+			range: activeIndex === 1 ? "end" : "start",
+			source: "panel"
+		});
+		else onPickerValueChange?.(next, {
+			mode: panelMode,
+			source: "panel"
+		});
+	}, []);
+	useEffect(() => {
+		if (!mergedOpen) return;
+		const onKeyDown = (event) => {
+			const { activeCell, activeIndex, config, defaultPickerValue, direction, mergedPickerValue, panelMode, picker, range, value } = stateRef.current;
+			if (!isGridMode(panelMode) || event.altKey || event.ctrlKey || event.metaKey) return;
+			if (!(event.target instanceof Element) || !event.target.closest(`.${scopeClassName}`)) return;
+			if (event.key === "Enter") {
+				if (!activeCell) return;
+				const cells = [...document.querySelectorAll(`.${scopeClassName} .${ACTIVE_CLS}`)].map((node) => node.closest("td")).filter((node) => !!node);
+				const cell = cells.find((node) => node.classList.contains(`${PREFIX_CLS}-cell-in-view`));
+				event.preventDefault();
+				event.stopPropagation();
+				(cell ?? cells[0])?.click();
+				return;
+			}
+			const pageDate = mergedPickerValue[activeIndex] ?? defaultPickerValue[activeIndex] ?? value[activeIndex] ?? config.getNow();
+			const rtl = direction === "rtl";
+			const pages = range && panelMode === picker ? 2 : 1;
+			const pageIndex = (date) => monthIndex(getPageStart(date, panelMode, config), config);
+			const firstPage = pageIndex(pageDate);
+			const lastPage = pageIndex(moveGridCell(pageDate, "PageDown", panelMode, rtl, config));
+			const isVisible = (date) => {
+				const page = pageIndex(date);
+				return page === firstPage || pages === 2 && page === lastPage;
+			};
+			const selected = value[activeIndex];
+			const base = activeCell && isVisible(activeCell) ? activeCell : selected && isVisible(selected) ? selected : void 0;
+			const next = base ? moveGridCell(base, event.key, panelMode, rtl, config) : moveGridCell(pageDate, event.key, panelMode, rtl, config) && pageDate;
+			if (!next) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setActiveCell(next);
+			if (pageIndex(next) < firstPage) commitPickerValue(next);
+			else if (!isVisible(next)) commitPickerValue(pages === 2 ? moveGridCell(next, "PageUp", panelMode, rtl, config) : next);
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		return () => document.removeEventListener("keydown", onKeyDown, true);
+	}, [
+		mergedOpen,
+		scopeClassName,
+		commitPickerValue
+	]);
+	const mergedCellRender = (current, info) => {
+		let node = info.originNode;
+		if (cellRender) node = cellRender(current, info);
+		else if (dateRender && info.type === "date") node = dateRender(current, info.today);
+		else if (monthCellRender && info.type === "month") node = monthCellRender(current, info.locale);
+		if (!activeCell || info.type !== panelMode || !isGridMode(info.type)) return node;
+		if (!isSameCell(current, activeCell, info.type, config)) return node;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [node, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: ACTIVE_CLS
+		})] });
+	};
+	return {
+		cellRender: mergedCellRender,
+		onChange: (date, dateString) => {
+			setInnerValue(toValuePair(date, range));
+			onChange?.(date, dateString);
+		},
+		onFocus: (event, info) => {
+			if (range && info?.range) setActiveIndex(info.range === "end" ? 1 : 0);
+			onFocus?.(event, info);
+		},
+		onOpenChange: (next) => {
+			setInnerOpen(next);
+			onOpenChange?.(next);
+		},
+		onPanelChange: (date, nextMode) => {
+			setInnerMode(Array.isArray(nextMode) ? nextMode[stateRef.current.activeIndex] : nextMode);
+			onPanelChange?.(date, nextMode);
+		},
+		onPickerValueChange: (date, info) => {
+			setInnerPickerValue(toPair(date));
+			onPickerValueChange?.(date, info);
+		},
+		/** Controlled once known, so a key can move the visible page. */
+		pickerValue: pickerValue !== void 0 || innerPickerValue.some(Boolean) ? range ? mergedPickerValue : mergedPickerValue[0] : void 0,
+		scopeClassName
+	};
+};
+//#endregion
+export { getPageStart, isSameCell, moveGridCell, usePanelKeyboard };
+
+//# sourceMappingURL=usePanelKeyboard.mjs.map

package/es/DatePicker/usePanelKeyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelKeyboard.mjs","names":["dayjsGenerateConfig"],"sources":["../../src/DatePicker/usePanelKeyboard.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport type { GenerateConfig } from './core/generate';\nimport type { CellRender, PanelMode, PickerMode } from './core/interface';\nimport dayjsGenerateConfig from './generateConfig';\nimport { PREFIX_CLS } from './style';\n\n/** Panels with a fixed grid of month / quarter / year / decade tiles. */\nexport type GridPanelMode = 'decade' | 'month' | 'quarter' | 'year';\n\nconst isGridMode = (mode?: PanelMode): mode is GridPanelMode =>\n  mode === 'month' || mode === 'quarter' || mode === 'year' || mode === 'decade';\n\n/** Cell steps per panel: one cell (←/→), one row (↑/↓) and one page (PageUp/PageDown). */\nconst GRID: Record<\n  GridPanelMode,\n  { col: number; page: number; row: number; unit: 'month' | 'year' }\n> = {\n  decade: { col: 10, page: 100, row: 30, unit: 'year' },\n  month: { col: 1, page: 12, row: 3, unit: 'month' },\n  quarter: { col: 3, page: 12, row: 12, unit: 'month' },\n  year: { col: 1, page: 10, row: 3, unit: 'year' },\n};\n\n// Date math goes through rc-picker's `generateConfig`, so `generatePicker` works with any\n// date library; the default is the Dayjs one.\nconst defaultConfig = dayjsGenerateConfig as GenerateConfig<any>;\n\n/** Months since year 0, to compare tiles by position. */\nconst monthIndex = <D,>(date: D, config: GenerateConfig<D>) =>\n  config.getYear(date) * 12 + config.getMonth(date);\n\n/** First cell of the page `date` is on: Jan / Q1 of its year, first year of its decade… */\nexport const getPageStart = <D,>(\n  date: D,\n  mode: GridPanelMode,\n  config: GenerateConfig<D> = defaultConfig,\n) => {\n  const year = config.getYear(date);\n  const startYear =\n    mode === 'year'\n      ? Math.floor(year / 10) * 10\n      : mode === 'decade'\n        ? Math.floor(year / 100) * 100\n        : year;\n  const start = config.setDate(config.setMonth(config.setYear(date, startYear), 0), 1);\n  return config.setHour(\n    config.setMinute(config.setSecond(config.setMillisecond(start, 0), 0), 0),\n    0,\n  );\n};\n\nconst getPageEnd = <D,>(date: D, mode: GridPanelMode, config: GenerateConfig<D>) => {\n  const start = getPageStart(date, mode, config);\n  if (mode === 'month') return config.setMonth(start, 11);\n  if (mode === 'quarter') return config.setMonth(start, 9);\n  return config.addYear(start, mode === 'year' ? 9 : 90);\n};\n\n/** Whether `a` and `b` fall in the same tile of a `mode` panel. */\nexport const isSameCell = <D,>(\n  a: D,\n  b: D,\n  mode: GridPanelMode,\n  config: GenerateConfig<D> = defaultConfig,\n) => {\n  const yearA = config.getYear(a);\n  const yearB = config.getYear(b);\n  if (mode === 'decade') return Math.floor(yearA / 10) === Math.floor(yearB / 10);\n  if (mode === 'year') return yearA === yearB;\n  if (mode === 'quarter') {\n    return (\n      yearA === yearB && Math.floor(config.getMonth(a) / 3) === Math.floor(config.getMonth(b) / 3)\n    );\n  }\n  return yearA === yearB && config.getMonth(a) === config.getMonth(b);\n};\n\n/**\n * Where `key` moves the active tile of a `mode` panel, or `undefined` for other keys.\n * `rtl` mirrors ←/→.\n */\nexport const moveGridCell = <D,>(\n  date: D,\n  key: string,\n  mode: GridPanelMode,\n  rtl = false,\n  config: GenerateConfig<D> = defaultConfig,\n) => {\n  const { col, page, row, unit } = GRID[mode];\n  const add = (diff: number) =>\n    unit === 'year' ? config.addYear(date, diff) : config.addMonth(date, diff);\n  switch (key) {\n    case 'ArrowLeft': {\n      return add(rtl ? col : -col);\n    }\n    case 'ArrowRight': {\n      return add(rtl ? -col : col);\n    }\n    case 'ArrowUp': {\n      return add(-row);\n    }\n    case 'ArrowDown': {\n      return add(row);\n    }\n    case 'PageUp': {\n      return add(-page);\n    }\n    case 'PageDown': {\n      return add(page);\n    }\n    case 'Home': {\n      return getPageStart(date, mode, config);\n    }\n    case 'End': {\n      return getPageEnd(date, mode, config);\n    }\n  }\n};\n\nconst ACTIVE_CLS = `${PREFIX_CLS}-cell-keyboard-active`;\n\n/** A date of the picker's library (`Dayjs` by default). */\ntype DateValue = object;\ntype Pair = [DateValue | undefined, DateValue | undefined];\ntype MaybePair<T> = T | [T, T] | null | undefined;\n\nconst toPair = (value: MaybePair<DateValue | null | undefined>): Pair =>\n  Array.isArray(value)\n    ? [value[0] ?? undefined, value[1] ?? undefined]\n    : [value ?? undefined, undefined];\n\n/** The selection the keys start from; with `multiple`, the last picked date. */\nconst toValuePair = (\n  value: MaybePair<DateValue | null | undefined> | DateValue[],\n  range?: boolean,\n) =>\n  !range && Array.isArray(value) ? toPair(value.at(-1)) : toPair(value as MaybePair<DateValue>);\n\nexport interface PanelKeyboardOptions {\n  cellRender?: CellRender<any>;\n  dateRender?: (currentDate: any, today: any) => React.ReactNode;\n  defaultOpen?: boolean;\n  defaultPickerValue?: MaybePair<DateValue | null | undefined>;\n  /** An array with DatePicker `multiple`. */\n  defaultValue?: MaybePair<DateValue | null | undefined> | DateValue[];\n  direction?: 'ltr' | 'rtl';\n  generateConfig?: GenerateConfig<any>;\n  mode?: MaybePair<PanelMode>;\n  monthCellRender?: (currentDate: any, locale: any) => React.ReactNode;\n  onChange?: (...args: any[]) => void;\n  onFocus?: (...args: any[]) => void;\n  onOpenChange?: (open: boolean) => void;\n  onPanelChange?: (...args: any[]) => void;\n  onPickerValueChange?: (...args: any[]) => void;\n  open?: boolean;\n  picker?: PickerMode;\n  pickerValue?: MaybePair<DateValue | null | undefined>;\n  /** RangePicker: values, panel modes and picker values are `[start, end]` tuples. */\n  range?: boolean;\n  value?: MaybePair<DateValue | null | undefined> | DateValue[];\n}\n\n/**\n * lobe enhancement over rc-picker (ADR §8 step 6): arrow keys, PageUp / PageDown and\n * Home / End move an active tile on the month, quarter, year and decade panels while\n * focus stays in the input, and Enter picks it — as a click on that tile would.\n *\n * rc-picker has no grid navigation of its own, so this is layered on top: a capture\n * listener reads the keys before rc-picker's input handlers, the active tile is marked\n * through `cellRender`, and `pickerValue` is driven so the active tile stays on screen.\n * The date and week panels keep the input's text-editing keys, as in antd.\n */\nexport const usePanelKeyboard = ({\n  cellRender,\n  dateRender,\n  defaultOpen,\n  defaultPickerValue,\n  defaultValue,\n  direction,\n  generateConfig: config = defaultConfig,\n  mode,\n  monthCellRender,\n  onChange,\n  onFocus,\n  onOpenChange,\n  onPanelChange,\n  onPickerValueChange,\n  open,\n  picker = 'date',\n  pickerValue,\n  range,\n  value,\n}: PanelKeyboardOptions) => {\n  const scopeId = useId();\n  const scopeClassName = `${PREFIX_CLS}-kb-${scopeId.replaceAll(/[^\\w-]/g, '')}`;\n\n  const [innerOpen, setInnerOpen] = useState(!!defaultOpen);\n  const mergedOpen = open ?? innerOpen;\n  const [activeIndex, setActiveIndex] = useState<0 | 1>(0);\n  const [innerMode, setInnerMode] = useState<PanelMode>(picker);\n  const [innerPickerValue, setInnerPickerValue] = useState<Pair>([undefined, undefined]);\n  const [activeCell, setActiveCell] = useState<DateValue>();\n  // Uncontrolled: the last committed value, so the first key starts from it.\n  const [innerValue, setInnerValue] = useState<Pair>();\n\n  const controlledMode = Array.isArray(mode) ? mode[activeIndex] : mode;\n  const panelMode = controlledMode ?? innerMode;\n\n  // rc-picker resets the panel to `picker` on every opening and field switch; a new\n  // panel starts without a highlighted tile.\n  const resetKey = `${mergedOpen}|${activeIndex}|${picker}`;\n  const [prevResetKey, setPrevResetKey] = useState(resetKey);\n  if (prevResetKey !== resetKey) {\n    setPrevResetKey(resetKey);\n    setInnerMode(picker);\n    setActiveCell(undefined);\n  }\n  const [prevPanelMode, setPrevPanelMode] = useState(panelMode);\n  if (prevPanelMode !== panelMode) {\n    setPrevPanelMode(panelMode);\n    setActiveCell(undefined);\n  }\n\n  const mergedPickerValue: Pair =\n    pickerValue === undefined ? innerPickerValue : toPair(pickerValue);\n\n  const state = {\n    activeCell,\n    activeIndex,\n    config,\n    defaultPickerValue: toPair(defaultPickerValue),\n    direction,\n    mergedPickerValue,\n    onPickerValueChange,\n    panelMode,\n    picker,\n    range,\n    value:\n      value === undefined\n        ? (innerValue ?? toValuePair(defaultValue, range))\n        : toValuePair(value, range),\n  };\n  const stateRef = useRef(state);\n  stateRef.current = state;\n\n  const commitPickerValue = useCallback((next: DateValue) => {\n    const { activeIndex, mergedPickerValue, onPickerValueChange, panelMode, range } =\n      stateRef.current;\n    const nextPair: Pair = [...mergedPickerValue];\n    nextPair[activeIndex] = next;\n    setInnerPickerValue(nextPair);\n    if (range) {\n      onPickerValueChange?.(nextPair, {\n        mode: [panelMode, panelMode],\n        range: activeIndex === 1 ? 'end' : 'start',\n        source: 'panel',\n      });\n    } else {\n      onPickerValueChange?.(next, { mode: panelMode, source: 'panel' });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!mergedOpen) return;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      const {\n        activeCell,\n        activeIndex,\n        config,\n        defaultPickerValue,\n        direction,\n        mergedPickerValue,\n        panelMode,\n        picker,\n        range,\n        value,\n      } = stateRef.current;\n      if (!isGridMode(panelMode) || event.altKey || event.ctrlKey || event.metaKey) return;\n      if (!(event.target instanceof Element) || !event.target.closest(`.${scopeClassName}`)) return;\n\n      if (event.key === 'Enter') {\n        if (!activeCell) return;\n        const cells = [...document.querySelectorAll(`.${scopeClassName} .${ACTIVE_CLS}`)]\n          .map((node) => node.closest('td'))\n          .filter((node): node is HTMLTableCellElement => !!node);\n        const cell = cells.find((node) => node.classList.contains(`${PREFIX_CLS}-cell-in-view`));\n        event.preventDefault();\n        event.stopPropagation();\n        (cell ?? cells[0])?.click();\n        return;\n      }\n\n      // Until rc-picker reports a change, its panel date is the same fallback chain.\n      const pageDate =\n        mergedPickerValue[activeIndex] ??\n        defaultPickerValue[activeIndex] ??\n        value[activeIndex] ??\n        config.getNow();\n      const rtl = direction === 'rtl';\n      // Two side-by-side pages on a RangePicker showing its own `picker` panel.\n      const pages = range && panelMode === picker ? 2 : 1;\n      const pageIndex = (date: DateValue) =>\n        monthIndex(getPageStart(date, panelMode, config), config);\n      const firstPage = pageIndex(pageDate);\n      const lastPage = pageIndex(moveGridCell(pageDate, 'PageDown', panelMode, rtl, config)!);\n      const isVisible = (date: DateValue) => {\n        const page = pageIndex(date);\n        return page === firstPage || (pages === 2 && page === lastPage);\n      };\n\n      // The first key starts from the selected tile when on screen, otherwise from the page.\n      const selected = value[activeIndex];\n      const base =\n        activeCell && isVisible(activeCell)\n          ? activeCell\n          : selected && isVisible(selected)\n            ? selected\n            : undefined;\n      const next = base\n        ? moveGridCell(base, event.key, panelMode, rtl, config)\n        : moveGridCell(pageDate, event.key, panelMode, rtl, config) && pageDate;\n      if (!next) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n      setActiveCell(next);\n\n      if (pageIndex(next) < firstPage) {\n        commitPickerValue(next);\n      } else if (!isVisible(next)) {\n        commitPickerValue(\n          pages === 2 ? moveGridCell(next, 'PageUp', panelMode, rtl, config)! : next,\n        );\n      }\n    };\n\n    document.addEventListener('keydown', onKeyDown, true);\n    return () => document.removeEventListener('keydown', onKeyDown, true);\n  }, [mergedOpen, scopeClassName, commitPickerValue]);\n\n  const mergedCellRender: CellRender<any> = (current, info) => {\n    let node: React.ReactNode = info.originNode;\n    if (cellRender) node = cellRender(current, info);\n    // rc-picker's legacy aliases: only date / month cells, which always get a date.\n    else if (dateRender && info.type === 'date') node = dateRender(current, info.today);\n    else if (monthCellRender && info.type === 'month') {\n      node = monthCellRender(current, info.locale);\n    }\n\n    if (!activeCell || info.type !== panelMode || !isGridMode(info.type)) return node;\n    if (!isSameCell(current as DateValue, activeCell, info.type, config)) return node;\n    return (\n      <>\n        {node}\n        <span aria-hidden className={ACTIVE_CLS} />\n      </>\n    );\n  };\n\n  const hasPickerValue = pickerValue !== undefined || innerPickerValue.some(Boolean);\n\n  return {\n    cellRender: mergedCellRender,\n    onChange: (date: any, dateString: any) => {\n      setInnerValue(toValuePair(date, range));\n      onChange?.(date, dateString);\n    },\n    onFocus: (event: any, info?: { range?: 'end' | 'start' }) => {\n      if (range && info?.range) setActiveIndex(info.range === 'end' ? 1 : 0);\n      onFocus?.(event, info);\n    },\n    onOpenChange: (next: boolean) => {\n      setInnerOpen(next);\n      onOpenChange?.(next);\n    },\n    onPanelChange: (date: any, nextMode: any) => {\n      setInnerMode(Array.isArray(nextMode) ? nextMode[stateRef.current.activeIndex] : nextMode);\n      onPanelChange?.(date, nextMode);\n    },\n    onPickerValueChange: (date: any, info: any) => {\n      setInnerPickerValue(toPair(date));\n      onPickerValueChange?.(date, info);\n    },\n    /** Controlled once known, so a key can move the visible page. */\n    pickerValue: hasPickerValue\n      ? range\n        ? (mergedPickerValue as any)\n        : mergedPickerValue[0]\n      : undefined,\n    scopeClassName,\n  };\n};\n"],"mappings":"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"}