@koslibs/components 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/index.d.ts

@@ -1,5 +1,7 @@
 export { Button } from './components/Button/index.js';
 export type { ButtonProps } from './components/Button/index.js';
+export { Chips } from './components/Chips/index.js';
+export type { ChipsProps, ChipsItem, ChipsChangePayload } from './components/Chips/index.js';
 export { Input } from './components/Input/index.js';
 export type { InputProps } from './components/Input/index.js';
 export { Datepicker, DatepickerPanel } from './components/Datepicker/index.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { Button } from "./components/Button/index.js";
+export { Chips } from "./components/Chips/index.js";
 export { Input } from "./components/Input/index.js";
 export { Datepicker, DatepickerPanel } from "./components/Datepicker/index.js";
 export { Select } from "./components/Select/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.16.0",
+    "version": "1.17.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",