@koslibs/components 1.15.0 → 1.16.0

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

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

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { normalizeValue } from "../utils/date-utils.js";
+function useDatepickerValue(props) {
+    const mode = props.mode ?? 'single';
+    const controlled = void 0 !== props.value;
+    const [localValue, setLocalValue] = useState(()=>normalizeValue(mode, props.defaultValue));
+    const value = normalizeValue(mode, controlled ? props.value : localValue);
+    return {
+        value,
+        commit (event, next) {
+            const normalized = normalizeValue(mode, next);
+            if (!normalized) return false;
+            if (!controlled) setLocalValue(normalized);
+            if ('range' === props.mode) {
+                if ('object' == typeof normalized) props.onChange?.(event, {
+                    value: normalized
+                });
+            } else if ('string' == typeof normalized) props.onChange?.(event, {
+                value: normalized
+            });
+            return true;
+        },
+        clear () {
+            if (!controlled) setLocalValue(null);
+        },
+        reset () {
+            if (!controlled) setLocalValue(normalizeValue(mode, props.defaultValue));
+        }
+    };
+}
+export { useDatepickerValue };

package/dist/components/Datepicker/hooks/use-range-scroll.d.ts

@@ -0,0 +1,15 @@
+export declare function useRangeScroll(month: number, navigationVersion: number): {
+    calendarRef: import("react").RefObject<HTMLDivElement>;
+    monthsRef: import("react").RefObject<HTMLDivElement>;
+    windowRef: import("react").RefObject<HTMLDivElement>;
+    registerCalendarMonth(monthIndex: number, element: HTMLDivElement | null): void;
+    registerMonth(monthIndex: number, element: HTMLButtonElement | null): void;
+    visible: {
+        first: number;
+        last: number;
+    };
+    calendarScroll: () => void;
+    monthsScroll: () => void;
+    calendars: number[];
+    months: number[];
+};

package/dist/components/Datepicker/hooks/use-range-scroll.js

@@ -0,0 +1,219 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { LAST_MONTH } from "../utils/date-utils.js";
+import { measureMonths, offsetFor, positionAt } from "../utils/range-scroll-geometry.js";
+const CALENDAR_BUFFER = 12;
+const MONTH_BUFFER = 36;
+const calendarStartFor = (month)=>Math.max(0, Math.min(LAST_MONTH - CALENDAR_BUFFER + 1, month - 6));
+const monthStartFor = (month)=>Math.max(0, Math.min(LAST_MONTH - MONTH_BUFFER + 1, month - 12));
+function setScroll(viewport, offset) {
+    viewport.scrollTop = Math.max(0, Math.min(offset, viewport.scrollHeight - viewport.clientHeight));
+}
+function useRangeScroll(month, navigationVersion) {
+    const [calendarStart, setCalendarStart] = useState(()=>calendarStartFor(month));
+    const [monthStart, setMonthStart] = useState(()=>monthStartFor(month));
+    const [visible, setVisible] = useState({
+        first: month,
+        last: month + 1
+    });
+    const calendarRef = useRef(null);
+    const monthsRef = useRef(null);
+    const windowRef = useRef(null);
+    const calendarElements = useRef(new Map());
+    const monthElements = useRef(new Map());
+    const navigation = useRef('');
+    const pendingPosition = useRef(null);
+    const monthAnchor = useRef(null);
+    const calendarTop = useRef(0);
+    const monthsTop = useRef(0);
+    const windowTop = useRef(0);
+    function readGeometry() {
+        const viewport = calendarRef.current;
+        const list = monthsRef.current;
+        return viewport && list ? {
+            calendar: measureMonths(calendarElements.current),
+            months: measureMonths(monthElements.current)
+        } : null;
+    }
+    function cancelPendingSeek() {
+        if (!pendingPosition.current) return;
+        pendingPosition.current = null;
+        setCalendarStart(calendarStart);
+    }
+    function recenterMonthList(target, months) {
+        const list = monthsRef.current;
+        const targetStart = monthStartFor(target);
+        if (!list || targetStart === monthStart) return false;
+        const anchor = months.find((row)=>row.month === target);
+        monthAnchor.current = anchor ? {
+            month: target,
+            offset: anchor.start - list.scrollTop
+        } : null;
+        setMonthStart(targetStart);
+        return true;
+    }
+    function syncFromCalendar(geometry = readGeometry()) {
+        const viewport = calendarRef.current;
+        const list = monthsRef.current;
+        const indicator = windowRef.current;
+        if (!viewport || !list || !indicator || !geometry) return;
+        calendarTop.current = viewport.scrollTop;
+        const children = geometry.calendar;
+        const first = children.find((child)=>child.contentEnd > viewport.scrollTop + 1) ?? children[children.length - 1];
+        const last = children.findLast((child)=>child.start < viewport.scrollTop + viewport.clientHeight - 1) ?? first;
+        if (first && last && viewport.clientHeight) {
+            const next = {
+                first: first.month,
+                last: last.month
+            };
+            setVisible((current)=>current.first === next.first && current.last === next.last ? current : next);
+        }
+        const start = positionAt(children, viewport.scrollTop);
+        const end = positionAt(children, viewport.scrollTop + viewport.clientHeight);
+        if (!start || !end) return;
+        const top = offsetFor(geometry.months, start);
+        const bottom = offsetFor(geometry.months, end);
+        if (null === top || null === bottom) return void recenterMonthList(start.month, geometry.months);
+        indicator.style.top = top + 'px';
+        indicator.style.height = Math.max(0, bottom - top) + 'px';
+        windowTop.current = top;
+        const centeredTop = (top + bottom - list.clientHeight) / 2;
+        if ((centeredTop < 0 || centeredTop > list.scrollHeight - list.clientHeight) && recenterMonthList(start.month, geometry.months)) return;
+        setScroll(list, centeredTop);
+        monthsTop.current = list.scrollTop;
+    }
+    useLayoutEffect(()=>{
+        const viewport = calendarRef.current;
+        const list = monthsRef.current;
+        if (!viewport || !list) return;
+        const key = month + ':' + navigationVersion;
+        if (navigation.current !== key) {
+            navigation.current = key;
+            pendingPosition.current = {
+                month,
+                fraction: 0
+            };
+            const targetStart = calendarStartFor(month);
+            if (targetStart !== calendarStart) return void setCalendarStart(targetStart);
+        }
+        const geometry = readGeometry();
+        if (!geometry) return;
+        if (monthAnchor.current) {
+            const { month: anchorMonth, offset } = monthAnchor.current;
+            const anchor = geometry.months.find((row)=>row.month === anchorMonth);
+            if (anchor) setScroll(list, anchor.start - offset);
+            monthAnchor.current = null;
+            monthsTop.current = list.scrollTop;
+        }
+        if (pendingPosition.current) {
+            const target = offsetFor(geometry.calendar, pendingPosition.current);
+            if (null === target) return void setCalendarStart(calendarStartFor(pendingPosition.current.month));
+            setScroll(viewport, target);
+            pendingPosition.current = null;
+        }
+        syncFromCalendar(geometry);
+    }, [
+        month,
+        navigationVersion,
+        calendarStart,
+        monthStart
+    ]);
+    useLayoutEffect(()=>{
+        const viewport = calendarRef.current;
+        const list = monthsRef.current;
+        if (!viewport || !list) return;
+        const resize = ()=>syncFromCalendar();
+        if ("u" > typeof ResizeObserver) {
+            const observer = new ResizeObserver(resize);
+            observer.observe(viewport);
+            observer.observe(list);
+            return ()=>observer.disconnect();
+        }
+        window.addEventListener('resize', resize);
+        return ()=>window.removeEventListener('resize', resize);
+    }, [
+        calendarStart,
+        monthStart
+    ]);
+    function recycleCalendar(geometry) {
+        const viewport = calendarRef.current;
+        if (!viewport) return;
+        const first = positionAt(geometry, viewport.scrollTop);
+        const last = positionAt(geometry, viewport.scrollTop + viewport.clientHeight);
+        if (!first || !last) return;
+        let start = calendarStart;
+        if (first.month <= calendarStart + 1 && calendarStart > 0) start = Math.max(0, calendarStart - 4);
+        else if (last.month >= calendarStart + CALENDAR_BUFFER - 2 && calendarStart + CALENDAR_BUFFER <= LAST_MONTH) start = Math.min(LAST_MONTH - CALENDAR_BUFFER + 1, calendarStart + 4);
+        if (start !== calendarStart) {
+            pendingPosition.current = first;
+            setCalendarStart(start);
+        }
+    }
+    function calendarScroll() {
+        const viewport = calendarRef.current;
+        if (!viewport || viewport.scrollTop === calendarTop.current) return;
+        cancelPendingSeek();
+        const geometry = readGeometry();
+        if (!geometry) return;
+        syncFromCalendar(geometry);
+        recycleCalendar(geometry.calendar);
+    }
+    function monthsScroll() {
+        const list = monthsRef.current;
+        const viewport = calendarRef.current;
+        if (!list || !viewport) return;
+        const delta = list.scrollTop - monthsTop.current;
+        monthsTop.current = list.scrollTop;
+        if (!delta) return;
+        const geometry = readGeometry();
+        if (!geometry) return;
+        if (monthAnchor.current) monthAnchor.current.offset -= delta;
+        const base = pendingPosition.current ? offsetFor(geometry.months, pendingPosition.current) ?? windowTop.current : windowTop.current;
+        const target = positionAt(geometry.months, base + delta);
+        if (target) {
+            const offset = offsetFor(geometry.calendar, target);
+            const targetStart = calendarStartFor(target.month);
+            if (null === offset || offset + viewport.clientHeight > viewport.scrollHeight && targetStart !== calendarStart) {
+                pendingPosition.current = target;
+                setCalendarStart(targetStart);
+            } else {
+                cancelPendingSeek();
+                setScroll(viewport, offset);
+                syncFromCalendar(geometry);
+                recycleCalendar(geometry.calendar);
+            }
+        }
+        let start = monthStart;
+        if (list.scrollTop < 72 && monthStart > 0) start = Math.max(0, monthStart - 12);
+        else if (list.scrollTop + list.clientHeight >= list.scrollHeight - 72 && monthStart + MONTH_BUFFER <= LAST_MONTH) start = Math.min(LAST_MONTH - MONTH_BUFFER + 1, monthStart + 12);
+        if (start === monthStart) return;
+        const anchor = geometry.months.find((row)=>row.month === Math.max(start, monthStart));
+        if (anchor) monthAnchor.current = {
+            month: anchor.month,
+            offset: anchor.start - list.scrollTop
+        };
+        setMonthStart(start);
+    }
+    return {
+        calendarRef,
+        monthsRef,
+        windowRef,
+        registerCalendarMonth (monthIndex, element) {
+            if (element) calendarElements.current.set(monthIndex, element);
+            else calendarElements.current.delete(monthIndex);
+        },
+        registerMonth (monthIndex, element) {
+            if (element) monthElements.current.set(monthIndex, element);
+            else monthElements.current.delete(monthIndex);
+        },
+        visible,
+        calendarScroll,
+        monthsScroll,
+        calendars: Array.from({
+            length: CALENDAR_BUFFER
+        }, (_, index)=>calendarStart + index),
+        months: Array.from({
+            length: MONTH_BUFFER
+        }, (_, index)=>monthStart + index)
+    };
+}
+export { useRangeScroll };

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

@@ -0,0 +1,3 @@
+export { Datepicker } from './datepicker.js';
+export { DatepickerPanel } from './datepicker-panel.js';
+export type { DatepickerProps, DatepickerPanelProps, DatepickerRange, DatepickerChangePayload, } from './types.js';

package/dist/components/Datepicker/index.js

@@ -0,0 +1,2 @@
+export { Datepicker } from "./datepicker.js";
+export { DatepickerPanel } from "./datepicker-panel.js";

package/dist/components/Datepicker/index.module.js

@@ -0,0 +1,37 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-XIM8MH",
+    block: "block-bqbbVY",
+    secondary: "secondary-PcSgFC",
+    readOnly: "readOnly-h13qVH",
+    error: "error-c8nacQ",
+    disabled: "disabled-khgRiN",
+    "size-40": "size-40-h9qqeQ",
+    size40: "size-40-h9qqeQ",
+    "size-48": "size-48-aaoiXa",
+    size48: "size-48-aaoiXa",
+    "size-56": "size-56-OGJpdt",
+    size56: "size-56-OGJpdt",
+    "size-64": "size-64-kBX3a2",
+    size64: "size-64-kBX3a2",
+    "size-72": "size-72-BC6gqa",
+    size72: "size-72-BC6gqa",
+    field: "field-fNIrel",
+    hasOutline: "hasOutline-HAFy7G",
+    open: "open-S1x_K5",
+    trigger: "trigger-yqmoik",
+    valueColumn: "valueColumn-yqimvV",
+    value: "value-AslTvH",
+    placeholder: "placeholder-kZMY22",
+    label: "label-EQek4i",
+    innerLabel: "innerLabel-qjRhOo",
+    labelRaised: "labelRaised-X1UZfx",
+    hasInnerLabel: "hasInnerLabel-KmtJKD",
+    icon: "icon-QZ2qDs",
+    clear: "clear-Rcrq1X",
+    message: "message-IkNTrK",
+    popup: "popup-a9mcwf",
+    panelContainer: "panelContainer-xno_kL",
+    rangePopup: "rangePopup-AVJC5u"
+};
+export default index_module;