@koslibs/components 1.15.0 → 1.17.0

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>;

package/dist/components/Datepicker/hooks/use-datepicker-draft.js

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { clampMonth, countDays, getMonthIndex, normalizeValue, parseDate, today } from "../utils/date-utils.js";
+function useDatepickerDraft(mode, committed) {
+    const from = 'string' == typeof committed ? committed : committed?.from ?? '';
+    const to = 'object' == typeof committed ? committed?.to ?? '' : '';
+    const [draft, setDraft] = useState({
+        from,
+        to
+    });
+    const [preview, setPreview] = useState(null);
+    const [month, setMonth] = useState(()=>clampMonth(getMonthIndex(from || today()), 'range' === mode));
+    const [touched, setTouched] = useState({
+        from: false,
+        to: false
+    });
+    const [navigationVersion, setNavigationVersion] = useState(0);
+    useEffect(()=>{
+        setDraft({
+            from,
+            to
+        });
+        setTouched({
+            from: false,
+            to: false
+        });
+        setPreview(null);
+        setMonth(clampMonth(getMonthIndex(from || today()), 'range' === mode));
+        setNavigationVersion((current)=>current + 1);
+    }, [
+        from,
+        to,
+        mode
+    ]);
+    const value = normalizeValue(mode, 'single' === mode ? draft.from : draft);
+    let toError;
+    if (!touched.to || draft.to && parseDate(draft.to)) {
+        if (parseDate(draft.from) && parseDate(draft.to) && draft.to < draft.from) toError = 'End date must not precede start date';
+    } else toError = 'Enter a valid date (YYYY-MM-DD)';
+    const errors = {
+        from: !touched.from || draft.from && parseDate(draft.from) ? void 0 : 'Enter a valid date (YYYY-MM-DD)',
+        to: toError
+    };
+    function navigate(index) {
+        setMonth(clampMonth(index, 'range' === mode));
+        setNavigationVersion((current)=>current + 1);
+    }
+    function reset() {
+        setDraft({
+            from,
+            to
+        });
+        setPreview(null);
+        setTouched({
+            from: false,
+            to: false
+        });
+        navigate(getMonthIndex(from || today()));
+    }
+    function input(field, text) {
+        setDraft((current)=>({
+                ...current,
+                [field]: text
+            }));
+        setTouched((current)=>({
+                ...current,
+                [field]: true
+            }));
+        setPreview(null);
+        if (parseDate(text)) navigate(getMonthIndex(text));
+    }
+    function select(date) {
+        'single' === mode || !parseDate(draft.from) || value || date < draft.from ? setDraft({
+            from: date,
+            to: ''
+        }) : setDraft({
+            from: draft.from,
+            to: date
+        });
+        setTouched({
+            from: false,
+            to: false
+        });
+        setPreview(null);
+    }
+    let count = 0;
+    if ('string' == typeof value) count = 1;
+    else if (value) count = countDays(value.from, value.to);
+    return {
+        draft,
+        value,
+        errors,
+        month,
+        navigationVersion,
+        preview,
+        navigate,
+        reset,
+        input,
+        select,
+        count,
+        hover (date) {
+            setPreview('range' === mode && parseDate(draft.from) && !value && date && date >= draft.from ? date : null);
+        }
+    };
+}
+export { useDatepickerDraft };

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

@@ -0,0 +1,23 @@
+import { type FocusEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent } from 'react';
+import type { DatepickerProps, DatepickerRange } from '../types.js';
+export declare function useDatepickerState(props: DatepickerProps): {
+    mode: "range" | "single";
+    value: string | DatepickerRange | null;
+    open: boolean;
+    blocked: boolean;
+    buttonRef: import("react").RefObject<HTMLButtonElement>;
+    popupRef: import("react").RefObject<HTMLDivElement>;
+    anchor: HTMLDivElement | null;
+    setAnchor: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
+    session: number;
+    close: (restoreFocus?: boolean) => void;
+    apply: (event: MouseEvent<HTMLButtonElement>, next: string | DatepickerRange | null) => void;
+    raisedLabel: boolean;
+    handleKeyDown(event: ReactKeyboardEvent<HTMLElement>): void;
+    triggerProps: {
+        onClick(event: MouseEvent<HTMLButtonElement>): void;
+        onFocus(event: FocusEvent<HTMLButtonElement>): void;
+        onBlur(event: FocusEvent<HTMLButtonElement>): void;
+    };
+    clear(event: MouseEvent<HTMLButtonElement>): void;
+};

package/dist/components/Datepicker/hooks/use-datepicker-state.js

@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from "react";
+import { useDatepickerValue } from "./use-datepicker-value.js";
+function useDatepickerState(props) {
+    const mode = props.mode ?? 'single';
+    const selection = useDatepickerValue(props);
+    const [localOpen, setLocalOpen] = useState(props.defaultOpen ?? false);
+    const [focused, setFocused] = useState(false);
+    const [session, setSession] = useState(0);
+    const [anchor, setAnchor] = useState(null);
+    const buttonRef = useRef(null);
+    const popupRef = useRef(null);
+    const value = selection.value;
+    const blocked = Boolean(props.disabled || props.readOnly);
+    const open = !blocked && (props.open ?? localOpen);
+    function setOpen(next) {
+        if (next && blocked || next === open) return;
+        if (void 0 === props.open) setLocalOpen(next);
+        props.onOpenChange?.(next);
+    }
+    function close(restoreFocus = false) {
+        setOpen(false);
+        setSession((current)=>current + 1);
+        if (restoreFocus) buttonRef.current?.focus();
+    }
+    function apply(event, next) {
+        if (blocked || !selection.commit(event, next)) return;
+        close(true);
+    }
+    useEffect(()=>{
+        if (!open) return;
+        const ownerDocument = buttonRef.current?.ownerDocument;
+        const escape = (event)=>{
+            if ('Escape' !== event.key || event.defaultPrevented) return;
+            event.preventDefault();
+            event.stopPropagation();
+            close(true);
+        };
+        ownerDocument?.addEventListener('keydown', escape);
+        return ()=>ownerDocument?.removeEventListener('keydown', escape);
+    });
+    const resetRef = useRef();
+    resetRef.current = ()=>{
+        selection.reset();
+        close();
+    };
+    useEffect(()=>{
+        const form = buttonRef.current?.form;
+        let active = true;
+        const reset = (event)=>{
+            queueMicrotask(()=>{
+                if (active && !event.defaultPrevented) resetRef.current?.();
+            });
+        };
+        form?.addEventListener('reset', reset);
+        return ()=>{
+            active = false;
+            form?.removeEventListener('reset', reset);
+        };
+    }, [
+        props.form
+    ]);
+    return {
+        mode,
+        value,
+        open,
+        blocked,
+        buttonRef,
+        popupRef,
+        anchor,
+        setAnchor,
+        session,
+        close,
+        apply,
+        raisedLabel: Boolean(value || open || focused && !blocked),
+        handleKeyDown (event) {
+            if ('Escape' !== event.key || event.defaultPrevented || !open) return;
+            event.preventDefault();
+            event.stopPropagation();
+            close(true);
+        },
+        triggerProps: {
+            onClick (event) {
+                props.onClick?.(event);
+                if (event.defaultPrevented || blocked) return;
+                if (open) close();
+                else setOpen(true);
+            },
+            onFocus (event) {
+                setFocused(true);
+                props.onFocus?.(event);
+            },
+            onBlur (event) {
+                setFocused(false);
+                props.onBlur?.(event);
+            }
+        },
+        clear (event) {
+            if (blocked) return;
+            selection.clear();
+            close();
+            props.onClear?.(event);
+            buttonRef.current?.focus();
+        }
+    };
+}
+export { useDatepickerState };

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

@@ -0,0 +1,8 @@
+import { type MouseEvent } from 'react';
+import type { DatepickerRange, DatepickerValueProps } from '../types.js';
+export declare function useDatepickerValue(props: DatepickerValueProps): {
+    value: string | DatepickerRange | null;
+    commit(event: MouseEvent<HTMLButtonElement>, next: string | DatepickerRange | null): boolean;
+    clear(): void;
+    reset(): void;
+};