@koslibs/components 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @koslibs/components
 
+## 1.17.0
+
+### Minor Changes
+
+- [#20](https://github.com/koslibs/components/pull/20) [`ea31f0a`](https://github.com/koslibs/components/commit/ea31f0a1ece96d62c21f943de86459946fb1a5fe) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Chips: одиночный и множественный выбор, управляемые и внутренние значения, блокировка группы и пунктов, состояния из Figma с плавными переходами, перенос полных подписей, нативные формы, Storybook и публичные типы. All обрабатывается как обычный пункт.
+
+## 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/Chips/chips.d.ts

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

package/dist/components/Chips/chips.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useId, useImperativeHandle } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { TypographyText } from "../Typography/text.js";
+import { useChipsState } from "./hooks/use-chips-state.js";
+import index_module from "./index.module.js";
+const Chips = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { items, multiselect = false, value: _value, defaultValue: _defaultValue, onChange: _onChange, disabled = false, form, className, listClassName, itemClassName, dataTestId, ...restProps } = props;
+    const groupName = useId();
+    const getId = useDataTestId(dataTestId);
+    const state = useChipsState(props);
+    useImperativeHandle(ref, ()=>state.groupRef.current, []);
+    return /*#__PURE__*/ jsx("fieldset", {
+        ...restProps,
+        ref: state.groupRef,
+        form: form,
+        disabled: disabled,
+        className: classnames(index_module.component, className),
+        "data-test-id": dataTestId,
+        children: /*#__PURE__*/ jsx("div", {
+            className: classnames(index_module.list, listClassName),
+            children: items.map((item)=>/*#__PURE__*/ jsxs("label", {
+                    className: index_module.item,
+                    children: [
+                        /*#__PURE__*/ jsx("input", {
+                            type: multiselect ? 'checkbox' : 'radio',
+                            name: groupName,
+                            form: groupName,
+                            value: item.value,
+                            checked: state.selected.has(item.value),
+                            disabled: disabled || item.disabled,
+                            onChange: state.handleChange,
+                            className: index_module.input,
+                            "data-test-id": getId(item.value)
+                        }),
+                        /*#__PURE__*/ jsx(TypographyText, {
+                            size: 14,
+                            className: classnames(index_module.chip, itemClassName),
+                            children: item.label
+                        })
+                    ]
+                }, item.value))
+        })
+    });
+});
+Chips.displayName = 'Chips';
+export { Chips };

package/dist/components/Chips/hooks/use-chips-state.d.ts

@@ -0,0 +1,7 @@
+import { type ChangeEvent } from 'react';
+import type { ChipsProps } from '../types.js';
+export declare function useChipsState(props: ChipsProps): {
+    groupRef: import("react").RefObject<HTMLFieldSetElement>;
+    selected: Set<string>;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/components/Chips/hooks/use-chips-state.js

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react";
+import { normalizeValue } from "../utils/normalize-value.js";
+function useChipsState(props) {
+    const { items, multiselect = false, defaultValue } = props;
+    const controlled = void 0 !== props.value;
+    const groupRef = useRef(null);
+    const [localValue, setLocalValue] = useState(defaultValue);
+    const value = normalizeValue(items, multiselect, controlled ? props.value : localValue);
+    const selected = new Set(Array.isArray(value) ? value : [
+        value
+    ].filter((item)=>null !== item));
+    useEffect(()=>{
+        const form = groupRef.current?.form;
+        let active = true;
+        const handleReset = (event)=>{
+            queueMicrotask(()=>{
+                if (active && !event.defaultPrevented && !controlled) setLocalValue(defaultValue);
+            });
+        };
+        form?.addEventListener('reset', handleReset);
+        return ()=>{
+            active = false;
+            form?.removeEventListener('reset', handleReset);
+        };
+    }, [
+        props.form,
+        controlled,
+        defaultValue
+    ]);
+    const handleChange = (event)=>{
+        const item = items.find((candidate)=>candidate.value === event.currentTarget.value);
+        if (props.disabled || !item || item.disabled) return;
+        if (props.multiselect) {
+            const current = Array.isArray(value) ? value : [];
+            const next = event.currentTarget.checked ? [
+                ...current,
+                item.value
+            ] : current.filter((candidate)=>candidate !== item.value);
+            if (!controlled) setLocalValue(next);
+            props.onChange?.(event, {
+                value: next
+            });
+        } else if (value !== item.value) {
+            if (!controlled) setLocalValue(item.value);
+            props.onChange?.(event, {
+                value: item.value
+            });
+        }
+    };
+    return {
+        groupRef,
+        selected,
+        handleChange
+    };
+}
+export { useChipsState };

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

@@ -0,0 +1,2 @@
+export { Chips } from './chips.js';
+export type { ChipsProps, ChipsItem, ChipsChangePayload } from './types.js';

package/dist/components/Chips/index.js

@@ -0,0 +1 @@
+export { Chips } from "./chips.js";

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

@@ -0,0 +1,9 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-YzqK3S",
+    list: "list-Dlab5I",
+    item: "item-Q7WaXH",
+    input: "input-UTMIEW",
+    chip: "chip-jqwYZi"
+};
+export default index_module;

package/dist/components/Chips/index_module.css

@@ -0,0 +1,99 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-YzqK3S {
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--chips-color);
+  font-family: var(--font-primary);
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.list-Dlab5I {
+  gap: var(--chips-gap);
+  flex-wrap: wrap;
+  align-items: flex-start;
+  display: flex;
+}
+
+.item-Q7WaXH {
+  min-width: 0;
+  max-width: 100%;
+  display: inline-flex;
+  position: relative;
+}
+
+.input-UTMIEW {
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  position: absolute;
+  inset: 0;
+}
+
+.chip-jqwYZi {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--chips-height);
+  padding: var(--chips-padding-y) var(--chips-padding-x);
+  border-radius: var(--chips-radius);
+  background: var(--chips-background);
+  color: var(--chips-color);
+  text-align: center;
+  overflow-wrap: anywhere;
+  line-height: 20px;
+  transition: background-color .1s ease-in-out, color .1s ease-in-out;
+  display: block;
+}
+
+.input-UTMIEW:checked + .chip-jqwYZi {
+  background: var(--chips-selected-background);
+}
+
+@media (hover: hover) {
+  .input-UTMIEW:not(:disabled):hover + .chip-jqwYZi {
+    background: var(--chips-hover-background);
+  }
+
+  .input-UTMIEW:not(:disabled):checked:hover + .chip-jqwYZi {
+    background: var(--chips-selected-hover-background);
+  }
+}
+
+.input-UTMIEW:not(:disabled):active + .chip-jqwYZi {
+  background: var(--chips-active-background);
+}
+
+.input-UTMIEW:not(:disabled):checked:active + .chip-jqwYZi {
+  background: var(--chips-selected-active-background);
+}
+
+.input-UTMIEW:focus-visible + .chip-jqwYZi {
+  outline: 2px solid var(--chips-focus-color);
+  outline-offset: 2px;
+}
+
+.input-UTMIEW:disabled {
+  cursor: not-allowed;
+}
+
+.input-UTMIEW:disabled + .chip-jqwYZi {
+  background: var(--chips-disabled-background);
+  color: var(--chips-disabled-color);
+}
+
+.input-UTMIEW:disabled:checked + .chip-jqwYZi {
+  background: var(--chips-disabled-selected-background);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chip-jqwYZi {
+    transition: none;
+  }
+}
+

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

@@ -0,0 +1,86 @@
+import type { ChangeEvent, FieldsetHTMLAttributes } from 'react';
+export type ChipsItem = {
+    /**
+     * Уникальное значение пункта.
+     */
+    value: string;
+    /**
+     * Полная текстовая подпись пункта.
+     */
+    label: string;
+    /**
+     * Блокирует переключение пункта, сохраняя его выбранное состояние.
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type ChipsChangePayload<Value = string | null> = {
+    /**
+     * Выбранное значение или массив значений в порядке выбора.
+     */
+    value: Value;
+};
+type CommonProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange' | 'defaultValue' | 'children' | 'name' | 'disabled'> & {
+    /**
+     * Пункты с уникальными value. All обрабатывается как обычный пункт.
+     */
+    items: readonly ChipsItem[];
+    /**
+     * Блокирует все пункты группы, сохраняя выбор.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Дополнительный CSS-класс списка пунктов.
+     */
+    listClassName?: string;
+    /**
+     * Дополнительный CSS-класс каждого chip.
+     */
+    itemClassName?: string;
+    /**
+     * Идентификатор группы для тестов. Пункты получают суффикс с их value.
+     */
+    dataTestId?: string;
+};
+type SingleProps = {
+    /**
+     * Выбирает один пункт. Повторное нажатие сохраняет выбор.
+     * @default false
+     */
+    multiselect?: false;
+    /**
+     * Управляемое значение; null означает пустой выбор.
+     */
+    value?: string | null;
+    /**
+     * Начальное значение неуправляемой группы.
+     * @default null
+     */
+    defaultValue?: string | null;
+    /**
+     * Изменение пользователем выбранного значения.
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: ChipsChangePayload) => void;
+};
+type MultipleProps = {
+    /**
+     * Независимое переключение нескольких пунктов.
+     */
+    multiselect: true;
+    /**
+     * Управляемый массив выбранных значений.
+     */
+    value?: readonly string[];
+    /**
+     * Начальный массив значений неуправляемой группы.
+     * @default []
+     */
+    defaultValue?: readonly string[];
+    /**
+     * Изменение пользователем набора выбранных значений.
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: ChipsChangePayload<string[]>) => void;
+};
+export type ChipsProps = CommonProps & (SingleProps | MultipleProps);
+export {};

package/dist/components/Chips/utils/normalize-value.d.ts

@@ -0,0 +1,2 @@
+import type { ChipsItem } from '../types.js';
+export declare function normalizeValue(items: readonly ChipsItem[], multiselect: boolean, value: unknown): string | string[] | null;

package/dist/components/Chips/utils/normalize-value.js

@@ -0,0 +1,9 @@
+function normalizeValue(items, multiselect, value) {
+    const available = new Set(items.map((item)=>item.value));
+    if (!multiselect) return 'string' == typeof value && available.has(value) ? value : null;
+    if (!Array.isArray(value)) return [];
+    return [
+        ...new Set(value.filter((item)=>'string' == typeof item && available.has(item)))
+    ];
+}
+export { normalizeValue };

package/dist/components/Chips/vars.css

@@ -0,0 +1,19 @@
+:root {
+  --chips-gap: var(--size-8);
+  --chips-height: var(--size-32);
+  --chips-padding-x: var(--size-12);
+  --chips-padding-y: var(--size-6);
+  --chips-radius: var(--border-radius-pill);
+  --chips-color: #1c1a18;
+  --chips-background: transparent;
+  --chips-hover-background: #e9e4d9;
+  --chips-active-background: #dcd4c5;
+  --chips-selected-background: #fdde9b;
+  --chips-selected-hover-background: #f4d38d;
+  --chips-selected-active-background: #e9c479;
+  --chips-disabled-background: #cfd1cb;
+  --chips-disabled-selected-background: #f7e6c2;
+  --chips-disabled-color: #858981;
+  --chips-focus-color: #ff6b0a;
+}
+

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;