@koslibs/components 1.15.0 → 1.16.0

package/dist/components/Datepicker/types.d.ts

@@ -0,0 +1,133 @@
+import type { ButtonHTMLAttributes, CSSProperties, MouseEvent } from 'react';
+import type { InputProps } from '../Input/index.js';
+import type { PopoverProps } from '../Popover/index.js';
+export type DatepickerRange = {
+    /**
+     * Начало включительного диапазона в формате YYYY-MM-DD.
+     */
+    from: string;
+    /**
+     * Конец включительного диапазона в формате YYYY-MM-DD.
+     */
+    to: string;
+};
+export type DatepickerChangePayload<Value = string | null> = {
+    /**
+     * Применённая дата или полный диапазон; null означает пустое значение.
+     */
+    value: Value;
+};
+type SingleProps = {
+    /**
+     * Выбор одной даты.
+     * @default 'single'
+     */
+    mode?: 'single';
+    /**
+     * Управляемая дата YYYY-MM-DD или null.
+     */
+    value?: string | null;
+    /**
+     * Начальная дата неуправляемого компонента.
+     */
+    defaultValue?: string | null;
+    /**
+     * Подтверждение по Apply. Клики дней и ручной ввод меняют только черновик.
+     */
+    onChange?: (event: MouseEvent<HTMLButtonElement>, payload: DatepickerChangePayload) => void;
+};
+type RangeProps = {
+    /**
+     * Выбор включительного диапазона дат.
+     */
+    mode: 'range';
+    /**
+     * Управляемый полный диапазон YYYY-MM-DD или null.
+     */
+    value?: DatepickerRange | null;
+    /**
+     * Начальный диапазон неуправляемого компонента.
+     */
+    defaultValue?: DatepickerRange | null;
+    /**
+     * Подтверждение полного корректного диапазона по Apply.
+     */
+    onChange?: (event: MouseEvent<HTMLButtonElement>, payload: DatepickerChangePayload<DatepickerRange | null>) => void;
+};
+export type DatepickerValueProps = SingleProps | RangeProps;
+export type DatepickerPanelProps = DatepickerValueProps & {
+    /**
+     * HTML-идентификатор панели.
+     */
+    id?: string;
+    /**
+     * Отмена черновика кнопкой Cancel или Escape. Панель остаётся видимой.
+     */
+    onCancel?: VoidFunction;
+    /**
+     * Класс панели.
+     */
+    className?: string;
+    /**
+     * Стили панели и её CSS-переменные.
+     */
+    style?: CSSProperties;
+    /**
+     * Идентификатор панели. Части: -date/-from/-to, -apply, -cancel,
+     * -count, -day-YYYY-MM-DD, -month-N, -months, -month-window, -calendar, -calendar-months,
+     * -previous/-next.
+     */
+    dataTestId?: string;
+};
+type FieldProps = Pick<InputProps, 'view' | 'size' | 'block' | 'label' | 'labelView' | 'hint' | 'error' | 'hasOutline' | 'clear' | 'labelClassName' | 'messageClassName'> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'name' | 'type' | 'style'> & {
+    /**
+     * Стили обёртки поля и её CSS-переменные.
+     */
+    style?: CSSProperties;
+    /**
+     * Сохраняет отображение и фокус, запрещая раскрытие и очистку.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Подпись пустого поля.
+     * @default 'Choose date' / 'Choose dates'
+     */
+    placeholder?: string;
+    /**
+     * Управляемая видимость панели. Disabled и readOnly скрывают её.
+     */
+    open?: boolean;
+    /**
+     * Начальная видимость неуправляемой панели.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Запрос изменения видимости панели.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Очистка вызывает только onClear. При управляемом value обновите его сами.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Имя в форме. Range отправляет name.from и name.to.
+     */
+    name?: string;
+    /**
+     * Класс всплывающей панели, отдельный от класса поля.
+     */
+    panelClassName?: string;
+    /**
+     * Контейнер портала, как в Popover.
+     */
+    getPortalContainer?: PopoverProps['getPortalContainer'];
+    /**
+     * Идентификатор кнопки поля. Части: -form-control, -field, -label,
+     * -value, -hint/-error, -clear, -popup, -panel и части панели.
+     */
+    dataTestId?: string;
+};
+export type DatepickerProps = FieldProps & DatepickerValueProps;
+export {};

package/dist/components/Datepicker/utils/date-utils.d.ts

@@ -0,0 +1,17 @@
+import type { DatepickerRange } from '../types.js';
+export declare const LAST_MONTH: number;
+export declare const MONTH_NAMES: string[];
+export declare function parseDate(value: string): {
+    year: number;
+    month: number;
+    day: number;
+} | null;
+export declare function formatDate(value: string): string;
+export declare function getMonthIndex(value: string): number;
+export declare function monthDate(monthIndex: number, day?: number): string;
+export declare function monthLabel(monthIndex: number): string;
+export declare function clampMonth(monthIndex: number, range?: boolean): number;
+export declare function getMonthDays(monthIndex: number): (string | null)[];
+export declare function countDays(from: string, to: string): number;
+export declare function today(): string;
+export declare function normalizeValue(mode: 'single' | 'range', value: unknown): string | DatepickerRange | null;

package/dist/components/Datepicker/utils/date-utils.js

@@ -0,0 +1,80 @@
+const LAST_MONTH = 119987;
+const MONTH_NAMES = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+];
+function daysInMonth(year, month) {
+    if (2 === month) return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0) ? 29 : 28;
+    return [
+        4,
+        6,
+        9,
+        11
+    ].includes(month) ? 30 : 31;
+}
+function parseDate(value) {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
+    const [year, month, day] = value.split('-').map(Number);
+    return year >= 1 && month >= 1 && month <= 12 && day >= 1 && day <= daysInMonth(year, month) ? {
+        year,
+        month,
+        day
+    } : null;
+}
+function ordinal(value) {
+    const { year, month, day } = parseDate(value);
+    const date = new Date(0);
+    date.setUTCFullYear(year, month - 1, day);
+    return date.getTime() / 86400000;
+}
+function formatDate(value) {
+    return value.split('-').reverse().join('/');
+}
+function getMonthIndex(value) {
+    const { year, month } = parseDate(value);
+    return (year - 1) * 12 + month - 1;
+}
+function monthDate(monthIndex, day = 1) {
+    return `${String(Math.floor(monthIndex / 12) + 1).padStart(4, '0')}-${String(monthIndex % 12 + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+}
+function monthLabel(monthIndex) {
+    return `${MONTH_NAMES[monthIndex % 12]} ${Math.floor(monthIndex / 12) + 1}`;
+}
+function clampMonth(monthIndex, range = false) {
+    return Math.min(LAST_MONTH - Number(range), Math.max(0, monthIndex));
+}
+function getMonthDays(monthIndex) {
+    const first = monthDate(monthIndex);
+    const offset = ((ordinal(first) + 3) % 7 + 7) % 7;
+    const length = daysInMonth(Math.floor(monthIndex / 12) + 1, monthIndex % 12 + 1);
+    return Array.from({
+        length: 7 * Math.ceil((offset + length) / 7)
+    }, (_, index)=>index < offset || index >= offset + length ? null : monthDate(monthIndex, index - offset + 1));
+}
+function countDays(from, to) {
+    return ordinal(to) - ordinal(from) + 1;
+}
+function today() {
+    const date = new Date();
+    return `${String(date.getFullYear()).padStart(4, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+function normalizeValue(mode, value) {
+    if ('single' === mode) return 'string' == typeof value && parseDate(value) ? value : null;
+    if (!value || 'object' != typeof value) return null;
+    const { from, to } = value;
+    return 'string' == typeof from && 'string' == typeof to && parseDate(from) && parseDate(to) && from <= to ? {
+        from,
+        to
+    } : null;
+}
+export { LAST_MONTH, MONTH_NAMES, clampMonth, countDays, formatDate, getMonthDays, getMonthIndex, monthDate, monthLabel, normalizeValue, parseDate, today };

package/dist/components/Datepicker/utils/range-scroll-geometry.d.ts

@@ -0,0 +1,15 @@
+export type MonthPosition = {
+    month: number;
+    fraction: number;
+};
+type MonthRow = {
+    month: number;
+    start: number;
+    contentEnd: number;
+    end: number;
+};
+export type MonthGeometry = readonly MonthRow[];
+export declare function measureMonths(elements: ReadonlyMap<number, HTMLElement>): MonthGeometry;
+export declare function positionAt(geometry: MonthGeometry, offset: number): MonthPosition | null;
+export declare function offsetFor(geometry: MonthGeometry, position: MonthPosition): number | null;
+export {};

package/dist/components/Datepicker/utils/range-scroll-geometry.js

@@ -0,0 +1,29 @@
+function measureMonths(elements) {
+    const measured = Array.from(elements, ([month, element])=>{
+        const start = element.offsetTop;
+        return {
+            month,
+            start,
+            contentEnd: start + element.offsetHeight
+        };
+    }).sort((first, second)=>first.month - second.month);
+    if (!measured.length || measured[0].contentEnd <= measured[0].start) return [];
+    return measured.map((row, index)=>({
+            ...row,
+            end: measured[index + 1]?.start ?? row.contentEnd
+        }));
+}
+function positionAt(geometry, offset) {
+    const index = Math.max(0, geometry.findLastIndex((row)=>row.start <= offset));
+    const row = geometry[index];
+    if (!row || row.end <= row.start) return null;
+    return {
+        month: row.month,
+        fraction: Math.max(0, Math.min(1, (offset - row.start) / (row.end - row.start)))
+    };
+}
+function offsetFor(geometry, position) {
+    const row = geometry.find((candidate)=>candidate.month === position.month);
+    return row ? row.start + position.fraction * (row.end - row.start) : null;
+}
+export { measureMonths, offsetFor, positionAt };

package/dist/components/Datepicker/vars.css

@@ -0,0 +1,26 @@
+@import "../Input/vars.css";
+
+:root {
+  --datepicker-width: 320px;
+  --datepicker-panel-width: 360px;
+  --datepicker-range-width: 560px;
+  --datepicker-panel-padding: var(--size-20);
+  --datepicker-panel-radius: var(--border-radius-12);
+  --datepicker-panel-shadow: 0 12px 32px -8px #0003;
+  --datepicker-background: #fff;
+  --datepicker-color: var(--input-color);
+  --datepicker-muted-color: var(--input-label-color);
+  --datepicker-hover-background: #f5f3ec;
+  --datepicker-selected-background: #fdde9b;
+  --datepicker-range-background: #f5f3ec;
+  --datepicker-month-selected-background: #e0dbce;
+  --datepicker-focus-color: var(--input-focus-border-color);
+  --datepicker-scrollbar-color: #c8beaa;
+  --datepicker-day-height: 32px;
+  --datepicker-day-radius: var(--border-radius-8);
+  --datepicker-week-gap: var(--size-4);
+  --datepicker-months-width: 168px;
+  --datepicker-months-extra-height: 36px;
+  --datepicker-range-calendar-height: 420px;
+}
+

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { Button } from './components/Button/index.js';
 export type { ButtonProps } from './components/Button/index.js';
 export { Input } from './components/Input/index.js';
 export type { InputProps } from './components/Input/index.js';
+export { Datepicker, DatepickerPanel } from './components/Datepicker/index.js';
+export type { DatepickerProps, DatepickerPanelProps, DatepickerRange, DatepickerChangePayload, } from './components/Datepicker/index.js';
 export { Select } from './components/Select/index.js';
 export type { SelectProps, SelectOption, SelectChangeEvent, SelectChangePayload, } from './components/Select/index.js';
 export { Textarea } from './components/Textarea/index.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { Button } from "./components/Button/index.js";
 export { Input } from "./components/Input/index.js";
+export { Datepicker, DatepickerPanel } from "./components/Datepicker/index.js";
 export { Select } from "./components/Select/index.js";
 export { Textarea } from "./components/Textarea/index.js";
 export { Tab, Tabs } from "./components/Tabs/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.15.0",
+    "version": "1.16.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",
@@ -81,7 +81,7 @@
         "react-dom": "^18.3.1 || ^19.0.0"
     },
     "dependencies": {
-        "@koslibs/icons": "1.2.2",
+        "@koslibs/icons": "1.3.0",
         "@popperjs/core": "2.11.8",
         "classnames": "2.5.1"
     }