@koslibs/components 1.15.0 → 1.17.0

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;

package/dist/components/Datepicker/index_module.css

@@ -0,0 +1,251 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-XIM8MH {
+  --field-background: var(--input-primary-background-color);
+  --field-color: var(--input-color);
+  --field-label-color: var(--input-label-color);
+  --field-icon-color: var(--input-icon-color);
+  --field-border: transparent;
+  gap: var(--input-gap);
+  width: var(--datepicker-width);
+  vertical-align: top;
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--font-primary);
+  flex-direction: column;
+  display: inline-flex;
+
+  &.block-bqbbVY {
+    width: 100%;
+    display: flex;
+  }
+
+  &.secondary-PcSgFC {
+    --field-background: var(--input-secondary-background-color);
+  }
+
+  &.readOnly-h13qVH {
+    --field-border: var(--input-read-only-border-color);
+  }
+
+  &.error-c8nacQ {
+    --field-border: var(--input-error-border-color);
+  }
+
+  &.disabled-khgRiN {
+    --field-background: var(--input-disabled-background-color);
+    --field-color: var(--input-disabled-color);
+    --field-label-color: var(--input-disabled-color);
+    --field-icon-color: var(--input-disabled-color);
+    --field-border: transparent;
+    cursor: not-allowed;
+  }
+}
+
+.size-40-h9qqeQ {
+  --field-height: 40px;
+  --field-padding: var(--input-padding-40);
+}
+
+.size-48-aaoiXa {
+  --field-height: 48px;
+  --field-padding: var(--input-padding-48);
+}
+
+.size-56-OGJpdt {
+  --field-height: 56px;
+  --field-padding: var(--input-padding-56);
+}
+
+.size-64-kBX3a2 {
+  --field-height: 64px;
+  --field-padding: var(--input-padding-64);
+}
+
+.size-72-BC6gqa {
+  --field-height: 72px;
+  --field-padding: var(--input-padding-72);
+}
+
+.field-fNIrel {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--input-gap);
+  height: var(--field-height);
+  padding: 0 var(--field-padding);
+  border-radius: var(--input-border-radius);
+  background: var(--field-background);
+  box-shadow: inset 0 0 0 1px var(--field-border);
+  color: var(--field-color);
+  display: flex;
+  position: relative;
+}
+
+@media (hover: hover) {
+  .component-XIM8MH:not(.disabled-khgRiN, .readOnly-h13qVH, .error-c8nacQ) .field-fNIrel:hover {
+    box-shadow: inset 0 0 0 1px var(--input-hover-border-color);
+  }
+}
+
+.component-XIM8MH.hasOutline-HAFy7G:not(.disabled-khgRiN) .field-fNIrel:focus-within, .component-XIM8MH.hasOutline-HAFy7G.open-S1x_K5 .field-fNIrel {
+  box-shadow: none;
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 0;
+}
+
+.component-XIM8MH.hasOutline-HAFy7G.error-c8nacQ .field-fNIrel:focus-within, .component-XIM8MH.hasOutline-HAFy7G.error-c8nacQ.open-S1x_K5 .field-fNIrel {
+  outline-color: var(--input-error-border-color);
+}
+
+.trigger-yqmoik {
+  min-width: 0;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+  background: none;
+  border: 0;
+  outline: none;
+  flex: 1;
+  align-self: stretch;
+  padding: 0;
+}
+
+.trigger-yqmoik:after {
+  content: "";
+  border-radius: inherit;
+  position: absolute;
+  inset: 0;
+}
+
+.valueColumn-yqimvV {
+  justify-content: center;
+  gap: var(--size-2);
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+}
+
+.value-AslTvH {
+  width: 100%;
+  min-width: 0;
+  color: var(--field-color);
+}
+
+.placeholder-kZMY22 {
+  color: var(--input-placeholder-color);
+}
+
+.label-EQek4i, .innerLabel-qjRhOo {
+  min-width: 0;
+  color: var(--field-label-color);
+  overflow-wrap: anywhere;
+}
+
+.innerLabel-qjRhOo {
+  transform: translateY(calc(50% + var(--size-2) / 2));
+  transition: transform .18s, font-size .18s;
+}
+
+.component-XIM8MH.labelRaised-X1UZfx .innerLabel-qjRhOo {
+  transform: translateY(0);
+}
+
+.component-XIM8MH.hasInnerLabel-KmtJKD .value-AslTvH {
+  opacity: 0;
+  transition: opacity .18s;
+}
+
+.component-XIM8MH.hasInnerLabel-KmtJKD.labelRaised-X1UZfx .value-AslTvH {
+  opacity: 1;
+}
+
+.icon-QZ2qDs {
+  pointer-events: none;
+  color: var(--field-icon-color);
+  flex-shrink: 0;
+  display: block;
+}
+
+.component-XIM8MH .clear-Rcrq1X {
+  z-index: 1;
+  width: 18px;
+  min-width: 0;
+  height: 24px;
+  min-height: 0;
+  color: var(--field-icon-color);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.component-XIM8MH .clear-Rcrq1X:hover, .component-XIM8MH .clear-Rcrq1X:active {
+  color: var(--field-icon-color);
+}
+
+.component-XIM8MH.hasOutline-HAFy7G .clear-Rcrq1X:focus-visible {
+  outline: 2px solid var(--input-focus-border-color);
+}
+
+.component-XIM8MH.disabled-khgRiN .trigger-yqmoik, .component-XIM8MH.disabled-khgRiN .label-EQek4i {
+  cursor: not-allowed;
+}
+
+.component-XIM8MH.disabled-khgRiN .placeholder-kZMY22 {
+  color: var(--input-disabled-color);
+}
+
+.component-XIM8MH.readOnly-h13qVH:not(.disabled-khgRiN) .trigger-yqmoik {
+  cursor: default;
+}
+
+.component-XIM8MH .message-IkNTrK {
+  color: var(--input-hint-color);
+  overflow-wrap: anywhere;
+}
+
+.component-XIM8MH.error-c8nacQ .message-IkNTrK {
+  color: var(--input-error-message-color);
+}
+
+.component-XIM8MH.disabled-khgRiN .message-IkNTrK {
+  color: var(--input-disabled-color);
+}
+
+.popup-a9mcwf {
+  --popover-shadow: none;
+}
+
+.panelContainer-xno_kL {
+  min-width: 0;
+  min-height: 0;
+  max-height: inherit;
+  flex-direction: column;
+  display: flex;
+}
+
+@media (height <= 700px) {
+  .popup-a9mcwf.rangePopup-AVJC5u {
+    max-height: calc(100dvh - 16px);
+    top: 8px !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  .popup-a9mcwf.rangePopup-AVJC5u .panelContainer-xno_kL {
+    --datepicker-popup-calendar-height: max(96px, calc(100dvh - 230px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .innerLabel-qjRhOo, .component-XIM8MH.hasInnerLabel-KmtJKD .value-AslTvH {
+    transition: none;
+  }
+}
+

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

@@ -0,0 +1,39 @@
+import "./panel_module.css";
+const panel_module = {
+    panel: "panel-Yl5t0N",
+    range: "range-PDIlXe",
+    title: "title-ORgvzc",
+    fields: "fields-G9X5NH",
+    input: "input-qmus0w",
+    inputField: "inputField-CJpjrk",
+    inputLabel: "inputLabel-zecPMt",
+    inputError: "inputError-G3MvZq",
+    body: "body-CHCACA",
+    singleCalendar: "singleCalendar-waNors",
+    navigation: "navigation-rr0ZWk",
+    arrow: "arrow-dli_dq",
+    weekdays: "weekdays-szhUFV",
+    month: "month-ojfniN",
+    monthTitle: "monthTitle-uMM8rO",
+    days: "days-L0OFe5",
+    day: "day-GR9k0b",
+    inRange: "inRange-XI5Z3W",
+    selected: "selected-Rn_79k",
+    rangeStart: "rangeStart-Ga7FdA",
+    rangeEnd: "rangeEnd-tPWcVm",
+    oneDay: "oneDay-ySm0RF",
+    previewEnd: "previewEnd-GpQ9Ct",
+    monthButton: "monthButton-Sg7pGr",
+    footer: "footer-Qcalpd",
+    count: "count-aMO4wG",
+    cancel: "cancel-GFcLkD",
+    rangeCalendar: "rangeCalendar-GJigFT",
+    months: "months-jIb0DO",
+    monthWindow: "monthWindow-rLvStO",
+    year: "year-MkIbMv",
+    monthVisible: "monthVisible-zRAM6M",
+    calendars: "calendars-kqa7kX",
+    calendarMonths: "calendarMonths-XpAPCj",
+    monthBlock: "monthBlock-GdHkqH"
+};
+export default panel_module;