@koslibs/components 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @koslibs/components
 
+## 1.16.0
+
+### Minor Changes
+
+- [#19](https://github.com/koslibs/components/pull/19) [`0f37bcd`](https://github.com/koslibs/components/commit/0f37bcdcecf865db07cd16ed4d711473b142b87c) Thanks [@holypower777](https://github.com/holypower777)! - Добавлены Datepicker и самостоятельная DatepickerPanel для выбора одной даты или включительного диапазона: ручной ввод, проверка дат, черновик с Apply/Cancel, непрерывная прокрутка календаря со связанной навигацией месяцев, формы и документация Storybook.
+
+    Обновлён @koslibs/icons до 1.3.0: Datepicker использует CalendarIcon, ChevronLeftIcon и ChevronRightIcon из библиотеки. У полос прокрутки убраны кнопки-стрелки.
+
 ## 1.15.0
 
 ### Minor Changes

package/dist/components/Datepicker/components/calendar-month.d.ts

@@ -0,0 +1,8 @@
+import type { DatepickerDraft } from '../hooks/use-datepicker-draft.js';
+export declare function Weekdays(): import("react").JSX.Element;
+export declare function CalendarMonth({ month, state, range, dataTestId, }: {
+    month: number;
+    state: DatepickerDraft;
+    range: boolean;
+    dataTestId?: string;
+}): import("react").JSX.Element;

package/dist/components/Datepicker/components/calendar-month.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useDataTestId } from "../../../hooks/use-data-test-id.js";
+import { TypographyText } from "../../Typography/text.js";
+import { getMonthDays, monthLabel, parseDate } from "../utils/date-utils.js";
+import panel_module from "../panel.module.js";
+function Weekdays() {
+    return /*#__PURE__*/ jsx("div", {
+        className: panel_module.weekdays,
+        children: [
+            'Mo',
+            'Tu',
+            'We',
+            'Th',
+            'Fr',
+            'Sa',
+            'Su'
+        ].map((day)=>/*#__PURE__*/ jsx("span", {
+                children: day
+            }, day))
+    });
+}
+function CalendarMonth({ month, state, range, dataTestId }) {
+    const id = useDataTestId(dataTestId);
+    const from = parseDate(state.draft.from) ? state.draft.from : '';
+    const to = 'object' == typeof state.value ? state.value?.to ?? '' : '';
+    const end = to || state.preview;
+    const handleMouseLeave = ()=>state.hover(null);
+    return /*#__PURE__*/ jsxs("section", {
+        className: panel_module.month,
+        title: monthLabel(month),
+        children: [
+            range && /*#__PURE__*/ jsx(TypographyText, {
+                tag: "div",
+                size: 14,
+                weight: "semibold",
+                className: panel_module.monthTitle,
+                children: monthLabel(month)
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: panel_module.days,
+                onMouseLeave: handleMouseLeave,
+                children: getMonthDays(month).map((date, index)=>{
+                    if (!date) return /*#__PURE__*/ jsx("span", {}, `empty-${index}`);
+                    const handleClick = ()=>state.select(date);
+                    const handleMouseEnter = ()=>state.hover(date);
+                    return /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: classnames(panel_module.day, {
+                            [panel_module.selected]: !range && date === from,
+                            [panel_module.rangeStart]: range && date === from,
+                            [panel_module.rangeEnd]: range && date === to,
+                            [panel_module.oneDay]: range && date === from && date === to,
+                            [panel_module.inRange]: range && from && end && date > from && date < end,
+                            [panel_module.previewEnd]: range && !to && date === state.preview
+                        }),
+                        title: date,
+                        "data-test-id": id(`day-${date}`),
+                        onClick: handleClick,
+                        onMouseEnter: handleMouseEnter,
+                        children: Number(date.slice(-2))
+                    }, date);
+                })
+            })
+        ]
+    });
+}
+export { CalendarMonth, Weekdays };

package/dist/components/Datepicker/components/range-calendar.d.ts

@@ -0,0 +1,5 @@
+import type { DatepickerDraft } from '../hooks/use-datepicker-draft.js';
+export declare function RangeCalendar({ state, dataTestId, }: {
+    state: DatepickerDraft;
+    dataTestId?: string;
+}): import("react").JSX.Element;

package/dist/components/Datepicker/components/range-calendar.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Fragment } from "react";
+import { useDataTestId } from "../../../hooks/use-data-test-id.js";
+import { useRangeScroll } from "../hooks/use-range-scroll.js";
+import { MONTH_NAMES, monthLabel } from "../utils/date-utils.js";
+import { CalendarMonth, Weekdays } from "./calendar-month.js";
+import panel_module from "../panel.module.js";
+function RangeCalendar({ state, dataTestId }) {
+    const id = useDataTestId(dataTestId);
+    const scroll = useRangeScroll(state.month, state.navigationVersion);
+    return /*#__PURE__*/ jsxs("div", {
+        className: panel_module.rangeCalendar,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                ref: scroll.monthsRef,
+                className: panel_module.months,
+                "data-test-id": id('months'),
+                onScroll: scroll.monthsScroll,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        ref: scroll.windowRef,
+                        className: panel_module.monthWindow,
+                        "data-test-id": id('month-window')
+                    }),
+                    scroll.months.map((month, index)=>{
+                        const handleClick = ()=>state.navigate(month);
+                        const registerMonth = (element)=>scroll.registerMonth(month, element);
+                        return /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                (0 === index || month % 12 === 0) && /*#__PURE__*/ jsx("div", {
+                                    className: panel_module.year,
+                                    children: Math.floor(month / 12) + 1
+                                }),
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    ref: registerMonth,
+                                    className: classnames(panel_module.monthButton, month >= scroll.visible.first && month <= scroll.visible.last && panel_module.monthVisible),
+                                    title: monthLabel(month),
+                                    "data-test-id": id(`month-${month}`),
+                                    onClick: handleClick,
+                                    children: MONTH_NAMES[month % 12]
+                                })
+                            ]
+                        }, month);
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: panel_module.calendars,
+                "data-test-id": id('calendar'),
+                children: [
+                    /*#__PURE__*/ jsx(Weekdays, {}),
+                    /*#__PURE__*/ jsx("div", {
+                        ref: scroll.calendarRef,
+                        className: panel_module.calendarMonths,
+                        "data-test-id": id('calendar-months'),
+                        onScroll: scroll.calendarScroll,
+                        children: scroll.calendars.map((month)=>{
+                            const registerCalendarMonth = (element)=>scroll.registerCalendarMonth(month, element);
+                            return /*#__PURE__*/ jsx("div", {
+                                ref: registerCalendarMonth,
+                                className: panel_module.monthBlock,
+                                children: /*#__PURE__*/ jsx(CalendarMonth, {
+                                    month: month,
+                                    state: state,
+                                    range: true,
+                                    dataTestId: dataTestId
+                                })
+                            }, month);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { RangeCalendar };

package/dist/components/Datepicker/datepicker-panel.d.ts

@@ -0,0 +1,2 @@
+import type { DatepickerPanelProps } from './types.js';
+export declare function DatepickerPanel(props: DatepickerPanelProps): import("react").JSX.Element;

package/dist/components/Datepicker/datepicker-panel.js

@@ -0,0 +1,187 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "@koslibs/icons/CalendarIcon";
+import { ChevronLeftIcon } from "@koslibs/icons/ChevronLeftIcon";
+import { ChevronRightIcon } from "@koslibs/icons/ChevronRightIcon";
+import classnames from "classnames";
+import { useId } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { Button } from "../Button/index.js";
+import { Input } from "../Input/index.js";
+import { TypographyText } from "../Typography/text.js";
+import { CalendarMonth, Weekdays } from "./components/calendar-month.js";
+import { RangeCalendar } from "./components/range-calendar.js";
+import { useDatepickerDraft } from "./hooks/use-datepicker-draft.js";
+import { useDatepickerValue } from "./hooks/use-datepicker-value.js";
+import { LAST_MONTH, monthLabel } from "./utils/date-utils.js";
+import panel_module from "./panel.module.js";
+function DatepickerPanel(props) {
+    const { mode = 'single', className, style, dataTestId, onCancel, id: panelId } = props;
+    const selection = useDatepickerValue(props);
+    const state = useDatepickerDraft(mode, selection.value);
+    const id = useDataTestId(dataTestId);
+    const titleId = useId();
+    const range = 'range' === mode;
+    let countLabel = range ? 'Choose dates' : 'Choose date';
+    if (range && state.draft.from) countLabel = 'Choose an end date';
+    if (state.count) countLabel = `${state.count} ${1 === state.count ? 'day' : 'days'}`;
+    function cancel() {
+        state.reset();
+        onCancel?.();
+    }
+    function apply(event) {
+        selection.commit(event, state.value);
+    }
+    const handleKeyDown = (event)=>{
+        if ('Escape' === event.key && !event.defaultPrevented) {
+            event.preventDefault();
+            event.stopPropagation();
+            cancel();
+        }
+    };
+    const handlePreviousMonth = ()=>state.navigate(state.month - 1);
+    const handleNextMonth = ()=>state.navigate(state.month + 1);
+    return /*#__PURE__*/ jsxs("div", {
+        id: panelId,
+        className: classnames(panel_module.panel, range && panel_module.range, className),
+        style: style,
+        role: "dialog",
+        "data-test-id": dataTestId,
+        onKeyDown: handleKeyDown,
+        children: [
+            /*#__PURE__*/ jsx(TypographyText, {
+                tag: "div",
+                size: 16,
+                weight: "semibold",
+                id: titleId,
+                className: panel_module.title,
+                children: range ? 'Choose dates' : 'Choose date'
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: panel_module.fields,
+                children: (range ? [
+                    'from',
+                    'to'
+                ] : [
+                    'from'
+                ]).map((field)=>{
+                    const inputId = `${titleId}-${field}`;
+                    const error = state.errors[field];
+                    const errorMessage = error ? /*#__PURE__*/ jsx("span", {
+                        id: `${inputId}-error`,
+                        children: error
+                    }) : void 0;
+                    const inputLabel = range ? ({
+                        from: 'From',
+                        to: 'To'
+                    })[field] : 'Date';
+                    const handleChange = (_, { value })=>state.input(field, value);
+                    return /*#__PURE__*/ jsx(Input, {
+                        id: inputId,
+                        block: true,
+                        view: "secondary",
+                        size: 40,
+                        label: inputLabel,
+                        placeholder: "Choose date",
+                        value: state.draft[field],
+                        onChange: handleChange,
+                        error: errorMessage,
+                        hint: errorMessage,
+                        messageClassName: panel_module.inputError,
+                        labelClassName: panel_module.inputLabel,
+                        className: panel_module.input,
+                        fieldClassName: panel_module.inputField,
+                        rightAddon: /*#__PURE__*/ jsx(CalendarIcon, {
+                            width: 16,
+                            height: 16
+                        }),
+                        dataTestId: id(range ? field : 'date'),
+                        autoComplete: "off",
+                        maxLength: 10
+                    }, field);
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: panel_module.body,
+                children: range ? /*#__PURE__*/ jsx(RangeCalendar, {
+                    state: state,
+                    dataTestId: dataTestId
+                }) : /*#__PURE__*/ jsxs("div", {
+                    className: panel_module.singleCalendar,
+                    "data-test-id": id('calendar'),
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: panel_module.navigation,
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: panel_module.arrow,
+                                    title: "Previous month",
+                                    disabled: 0 === state.month,
+                                    onClick: handlePreviousMonth,
+                                    "data-test-id": id('previous'),
+                                    children: /*#__PURE__*/ jsx(ChevronLeftIcon, {
+                                        width: 16,
+                                        height: 16
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(TypographyText, {
+                                    size: 14,
+                                    weight: "semibold",
+                                    children: monthLabel(state.month)
+                                }),
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: panel_module.arrow,
+                                    title: "Next month",
+                                    disabled: state.month === LAST_MONTH,
+                                    onClick: handleNextMonth,
+                                    "data-test-id": id('next'),
+                                    children: /*#__PURE__*/ jsx(ChevronRightIcon, {
+                                        width: 16,
+                                        height: 16
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Weekdays, {}),
+                        /*#__PURE__*/ jsx(CalendarMonth, {
+                            month: state.month,
+                            state: state,
+                            range: false,
+                            dataTestId: dataTestId
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: panel_module.footer,
+                children: [
+                    /*#__PURE__*/ jsx(TypographyText, {
+                        size: 12,
+                        color: "secondary",
+                        className: panel_module.count,
+                        dataTestId: id('count'),
+                        children: countLabel
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        view: "text",
+                        size: 40,
+                        className: panel_module.cancel,
+                        onClick: cancel,
+                        dataTestId: id('cancel'),
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        view: "secondary",
+                        size: 40,
+                        disabled: !state.value,
+                        onClick: apply,
+                        dataTestId: id('apply'),
+                        children: "Apply"
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { DatepickerPanel };

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

@@ -0,0 +1,2 @@
+import type { DatepickerProps } from './types.js';
+export declare const Datepicker: import("react").ForwardRefExoticComponent<DatepickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Datepicker/datepicker.js

@@ -0,0 +1,194 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "@koslibs/icons/CalendarIcon";
+import { CrossIcon } from "@koslibs/icons/CrossIcon";
+import classnames from "classnames";
+import { forwardRef, useId, useImperativeHandle } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { Button } from "../Button/index.js";
+import { Popover } from "../Popover/index.js";
+import { TypographyText } from "../Typography/text.js";
+import { DatepickerPanel } from "./datepicker-panel.js";
+import { useDatepickerState } from "./hooks/use-datepicker-state.js";
+import { formatDate } from "./utils/date-utils.js";
+import index_module from "./index.module.js";
+const textSizes = {
+    40: 13,
+    48: 13,
+    56: 14,
+    64: 14,
+    72: 16
+};
+const offset = [
+    0,
+    8
+];
+const Datepicker = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { mode, value: _value, defaultValue: _defaultValue, onChange: _onChange, view = 'primary', size = 40, label, labelView = 'outer', hint, error, block = false, hasOutline = false, clear = false, disabled = false, readOnly = false, placeholder = 'range' === mode ? 'Choose dates' : 'Choose date', open: _open, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, onClear: _onClear, id, name, form, className, style, labelClassName, messageClassName, panelClassName, getPortalContainer, dataTestId, ...buttonProps } = props;
+    const generatedId = useId();
+    const triggerId = id ?? generatedId;
+    const labelId = `${triggerId}-label`;
+    const messageId = `${triggerId}-message`;
+    const panelId = `${triggerId}-panel`;
+    const getId = useDataTestId(dataTestId);
+    const state = useDatepickerState(props);
+    useImperativeHandle(ref, ()=>state.buttonRef.current, []);
+    const hasLabel = null != label && false !== label && '' !== label;
+    const innerLabel = hasLabel && 'inner' === labelView;
+    const message = (hint && 'boolean' != typeof error ? error : void 0) || hint;
+    let display = placeholder;
+    if ('string' == typeof state.value) display = formatDate(state.value);
+    else if (state.value) display = `${formatDate(state.value.from)} – ${formatDate(state.value.to)}`;
+    const panelProps = 'range' === props.mode ? {
+        mode: 'range',
+        value: 'object' == typeof state.value ? state.value : null
+    } : {
+        mode: 'single',
+        value: 'string' == typeof state.value ? state.value : null
+    };
+    const handleClearMouseDown = (event)=>event.preventDefault();
+    const handleClose = ()=>state.close();
+    const handleCancel = ()=>state.close(true);
+    const handleChange = (event, { value: nextValue })=>state.apply(event, nextValue);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames(index_module.component, index_module[`size-${size}`], {
+            [index_module.secondary]: 'secondary' === view,
+            [index_module.block]: block,
+            [index_module.disabled]: disabled,
+            [index_module.readOnly]: readOnly,
+            [index_module.error]: Boolean(error),
+            [index_module.hasOutline]: hasOutline,
+            [index_module.open]: state.open,
+            [index_module.hasInnerLabel]: innerLabel,
+            [index_module.labelRaised]: state.raisedLabel
+        }, className),
+        style: style,
+        "data-test-id": getId('form-control'),
+        children: [
+            hasLabel && !innerLabel && /*#__PURE__*/ jsx("label", {
+                id: labelId,
+                htmlFor: triggerId,
+                className: classnames(index_module.label, labelClassName),
+                "data-test-id": getId('label'),
+                children: /*#__PURE__*/ jsx(TypographyText, {
+                    size: 13,
+                    weight: "medium",
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ref: state.setAnchor,
+                className: index_module.field,
+                "data-test-id": getId('field'),
+                onKeyDown: state.handleKeyDown,
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        ...buttonProps,
+                        ...state.triggerProps,
+                        ref: state.buttonRef,
+                        id: triggerId,
+                        type: "button",
+                        form: form,
+                        disabled: disabled,
+                        className: index_module.trigger,
+                        "data-test-id": dataTestId,
+                        children: /*#__PURE__*/ jsxs("span", {
+                            className: index_module.valueColumn,
+                            children: [
+                                innerLabel && /*#__PURE__*/ jsx(TypographyText, {
+                                    id: labelId,
+                                    size: state.raisedLabel ? 11 : textSizes[size],
+                                    weight: "medium",
+                                    rowLimit: 1,
+                                    className: classnames(index_module.innerLabel, labelClassName),
+                                    dataTestId: getId('label'),
+                                    children: label
+                                }),
+                                /*#__PURE__*/ jsx(TypographyText, {
+                                    size: textSizes[size],
+                                    rowLimit: 1,
+                                    className: classnames(index_module.value, !state.value && index_module.placeholder),
+                                    dataTestId: getId('value'),
+                                    children: display
+                                })
+                            ]
+                        })
+                    }),
+                    clear && state.value && !state.blocked && /*#__PURE__*/ jsx(Button, {
+                        view: "text",
+                        size: 32,
+                        className: index_module.clear,
+                        title: "Clear date",
+                        onMouseDown: handleClearMouseDown,
+                        onClick: state.clear,
+                        dataTestId: getId('clear'),
+                        children: /*#__PURE__*/ jsx(CrossIcon, {
+                            width: 14,
+                            height: 14
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(CalendarIcon, {
+                        className: index_module.icon,
+                        width: 16,
+                        height: 16
+                    })
+                ]
+            }),
+            message && /*#__PURE__*/ jsx(TypographyText, {
+                tag: "div",
+                size: 12,
+                id: messageId,
+                className: classnames(index_module.message, messageClassName),
+                dataTestId: getId('boolean' != typeof error && error ? 'error' : 'hint'),
+                children: message
+            }),
+            name && ('range' === mode ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        type: "hidden",
+                        name: `${name}.from`,
+                        value: 'object' == typeof state.value ? state.value?.from ?? '' : '',
+                        disabled: disabled,
+                        form: form
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        type: "hidden",
+                        name: `${name}.to`,
+                        value: 'object' == typeof state.value ? state.value?.to ?? '' : '',
+                        disabled: disabled,
+                        form: form
+                    })
+                ]
+            }) : /*#__PURE__*/ jsx("input", {
+                type: "hidden",
+                name: name,
+                value: 'string' == typeof state.value ? state.value : '',
+                disabled: disabled,
+                form: form
+            })),
+            /*#__PURE__*/ jsx(Popover, {
+                ref: state.popupRef,
+                open: state.open,
+                anchorElement: state.anchor,
+                offset: offset,
+                onClose: handleClose,
+                escapeKeyDown: false,
+                getPortalContainer: getPortalContainer,
+                className: classnames(index_module.popup, 'range' === state.mode && index_module.rangePopup),
+                dataTestId: getId('popup'),
+                children: /*#__PURE__*/ jsx("div", {
+                    className: index_module.panelContainer,
+                    children: /*#__PURE__*/ jsx(DatepickerPanel, {
+                        id: panelId,
+                        ...panelProps,
+                        onChange: handleChange,
+                        onCancel: handleCancel,
+                        className: panelClassName,
+                        dataTestId: getId('panel')
+                    }, `${state.mode}-${state.session}`)
+                })
+            })
+        ]
+    });
+});
+Datepicker.displayName = 'Datepicker';
+export { Datepicker };

package/dist/components/Datepicker/hooks/use-datepicker-draft.d.ts

@@ -0,0 +1,22 @@
+import type { DatepickerRange } from '../types.js';
+export declare function useDatepickerDraft(mode: 'single' | 'range', committed: string | DatepickerRange | null): {
+    draft: {
+        from: string;
+        to: string;
+    };
+    value: string | DatepickerRange | null;
+    errors: {
+        from: string | undefined;
+        to: string | undefined;
+    };
+    month: number;
+    navigationVersion: number;
+    preview: string | null;
+    navigate: (index: number) => void;
+    reset: () => void;
+    input: (field: "from" | "to", text: string) => void;
+    select: (date: string) => void;
+    count: number;
+    hover(date: string | null): void;
+};
+export type DatepickerDraft = ReturnType<typeof useDatepickerDraft>;