@koslibs/components 1.12.0 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @koslibs/components
 
+## 1.14.0
+
+### Minor Changes
+
+- [#16](https://github.com/koslibs/components/pull/16) [`45a76bb`](https://github.com/koslibs/components/commit/45a76bb4b230b95762017468d9497c37d63e2855) Thanks [@holypower777](https://github.com/holypower777)! - Tabs больше не скрывает ряд, когда все вкладки disabled: заголовки и счётчики остаются видимыми без активного индикатора. Удалён проп emptyState: уберите его из вызовов Tabs и отображайте пустое состояние данных в приложении. Без дочерних Tab компонент возвращает null. Добавлены регрессионные тесты и пример в Storybook.
+
+## 1.13.0
+
+### Minor Changes
+
+- [#15](https://github.com/koslibs/components/pull/15) [`061457d`](https://github.com/koslibs/components/commit/061457d29c63e8fc4ad1929d7c7ca2b9fffae075) Thanks [@holypower777](https://github.com/holypower777)! - Установлен курсор `not-allowed` для disabled-состояний Button и Tab. У Input, Textarea и Select курсор применяется ко всему компоненту, включая внешние подписи и подсказки. У Select disabled имеет приоритет над readOnly.
+
+    Добавлен Sidepanel: панель шириной 500 px с выездом и уходом справа, бекдропом Modal, Header с необязательным заголовком и hasCloser, прокручиваемым Content и Footer только для Button. Поддержаны строковая и вертикальная раскладки кнопок, управляемое закрытие, удержание и возврат фокуса, Portal и блокировка прокрутки до завершения анимации. Добавлены Storybook, типы, тесты и отдельный импорт.
+
+    Общая блокировка прокрутки Modal и Sidepanel вынесена в src/utils/lock-scroll.ts. Она сохраняет положение страницы при временном снятии scrollbar-gutter, чтобы панель доходила до края окна.
+
+    Пустой Header Sidepanel не занимает места. Скроллбар показывает только слайдер без стрелок и фона. Footer поддерживает sticky с дефолтом true; при false кнопки прокручиваются вместе с содержимым. Переключение режима выполнено через классы CSS Modules без служебного data-атрибута.
+
+    Footer Sidepanel принимает компоненты ComponentType<ButtonProps>: обязательный primary справа и необязательный secondary слева. Внешний вид кнопок задаётся снаружи. gap принимает 12/16/24/32 с дефолтом 12; layout — start/end/center/space-between/column с дефолтом space-between.
+
 ## 1.12.0
 
 ### Minor Changes

package/dist/components/Button/index_module.css

@@ -21,6 +21,10 @@
   transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
   display: inline-flex;
   position: relative;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .size-32-oD8MDp {

package/dist/components/Input/index_module.css

@@ -42,6 +42,7 @@
     --field-label-color: var(--input-disabled-color);
     --field-placeholder-color: var(--input-disabled-color);
     --field-icon-color: var(--input-disabled-color);
+    cursor: not-allowed;
   }
 }
 

package/dist/components/Modal/components/modal-surface/index.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { lockScroll } from "../../../../utils/lock-scroll.js";
 import { ModalContext } from "../../context.js";
-import { lockScroll } from "../../utils/lock-scroll.js";
 import colors_module from "../../colors.module.js";
 import index_module from "../../index.module.js";
 const ModalSurface = /*#__PURE__*/ forwardRef(({ onClose, size = 720, escapeKeyDown = true, backdropClick = true, lockScroll: shouldLockScroll = true, className, dataTestId, children, onPointerDown, onClick, ...restProps }, ref)=>{

package/dist/components/Select/index_module.css

@@ -41,6 +41,7 @@
     --field-icon-color: var(--select-disabled-color);
     --field-placeholder-color: var(--select-disabled-color);
     --field-border: transparent;
+    cursor: not-allowed;
   }
 }
 
@@ -204,11 +205,11 @@
   }
 }
 
-.component-cM8DTg.disabled-fZIeN_ .trigger-nKdmww {
+.component-cM8DTg.disabled-fZIeN_ .trigger-nKdmww, .component-cM8DTg.disabled-fZIeN_ .label-rrakc7 {
   cursor: not-allowed;
 }
 
-.component-cM8DTg.readOnly-zwkIeK .trigger-nKdmww {
+.component-cM8DTg.readOnly-zwkIeK:not(.disabled-fZIeN_) .trigger-nKdmww {
   cursor: default;
 }
 

package/dist/components/Sidepanel/components/content/index.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from 'react';
+export type ContentProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор части -content. По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+};
+export declare const Content: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор части -content. По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Sidepanel/components/content/index.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
+import { SidepanelContext } from "../../context.js";
+import index_module from "../../index.module.js";
+import scrollbar_module from "../../scrollbar.module.js";
+import index_module_0 from "./index.module.js";
+const Content = /*#__PURE__*/ forwardRef(({ className, dataTestId, children, ...restProps }, ref)=>{
+    const { dataTestId: panelDataTestId } = useContext(SidepanelContext);
+    const getDataTestId = useDataTestId(dataTestId ?? panelDataTestId);
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module_0.component, index_module.content, scrollbar_module.scrollbar, className),
+        "data-test-id": getDataTestId('content'),
+        children: children
+    });
+});
+Content.displayName = 'SidepanelContent';
+export { Content };

package/dist/components/Sidepanel/components/content/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-vYcjBo"
+};
+export default index_module;

package/dist/components/Sidepanel/components/content/index_module.css

@@ -0,0 +1,14 @@
+.component-vYcjBo {
+  box-sizing: border-box;
+  gap: var(--size-16);
+  min-width: 0;
+  min-height: 0;
+  padding: var(--sidepanel-padding);
+  overscroll-behavior: contain;
+  overflow-wrap: anywhere;
+  flex-direction: column;
+  flex: auto;
+  display: flex;
+  overflow: auto;
+}
+

package/dist/components/Sidepanel/components/footer/index.d.ts

@@ -0,0 +1,66 @@
+import { type ComponentType, type HTMLAttributes } from 'react';
+import type { ButtonProps } from '../../../Button/index.js';
+export type FooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Компонент основной кнопки. Обязателен; располагается после secondary (справа в строке).
+     * Внешний вид и обработчики задаются внутри переданного компонента.
+     */
+    primary: ComponentType<ButtonProps>;
+    /**
+     * Компонент вторичной кнопки. Располагается перед primary (слева в строке).
+     * Не выводится, если проп не передан.
+     */
+    secondary?: ComponentType<ButtonProps>;
+    /**
+     * Минимальное расстояние между кнопками в пикселях из общей шкалы отступов.
+     * @default 12
+     */
+    gap?: 12 | 16 | 24 | 32;
+    /**
+     * Оставляет кнопки видимыми при прокрутке. При false Footer прокручивается с Content.
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание кнопок. В space-between кнопки находятся у противоположных краёв,
+     * единственная primary — справа. В column secondary находится над primary.
+     * @default 'space-between'
+     */
+    layout?: 'start' | 'end' | 'center' | 'space-between' | 'column';
+    /**
+     * Базовый идентификатор части -footer. По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+};
+export declare const Footer: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML"> & {
+    /**
+     * Компонент основной кнопки. Обязателен; располагается после secondary (справа в строке).
+     * Внешний вид и обработчики задаются внутри переданного компонента.
+     */
+    primary: ComponentType<ButtonProps>;
+    /**
+     * Компонент вторичной кнопки. Располагается перед primary (слева в строке).
+     * Не выводится, если проп не передан.
+     */
+    secondary?: ComponentType<ButtonProps>;
+    /**
+     * Минимальное расстояние между кнопками в пикселях из общей шкалы отступов.
+     * @default 12
+     */
+    gap?: 12 | 16 | 24 | 32;
+    /**
+     * Оставляет кнопки видимыми при прокрутке. При false Footer прокручивается с Content.
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание кнопок. В space-between кнопки находятся у противоположных краёв,
+     * единственная primary — справа. В column secondary находится над primary.
+     * @default 'space-between'
+     */
+    layout?: "start" | "end" | "center" | "space-between" | "column";
+    /**
+     * Базовый идентификатор части -footer. По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Sidepanel/components/footer/index.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
+import { SidepanelContext } from "../../context.js";
+import index_module from "../../index.module.js";
+import index_module_0 from "./index.module.js";
+const Footer = /*#__PURE__*/ forwardRef(({ primary: Primary, secondary: Secondary, gap = 12, sticky = true, layout = 'space-between', className, dataTestId, ...restProps }, ref)=>{
+    const { dataTestId: panelDataTestId } = useContext(SidepanelContext);
+    const getDataTestId = useDataTestId(dataTestId ?? panelDataTestId);
+    return /*#__PURE__*/ jsxs("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module_0.component, index_module_0[layout], index_module_0[`gap-${gap}`], {
+            [index_module.nonStickyFooter]: !sticky
+        }, className),
+        "data-test-id": getDataTestId('footer'),
+        children: [
+            Secondary && /*#__PURE__*/ jsx(Secondary, {}),
+            /*#__PURE__*/ jsx(Primary, {})
+        ]
+    });
+});
+Footer.displayName = 'SidepanelFooter';
+export { Footer };

package/dist/components/Sidepanel/components/footer/index.module.js

@@ -0,0 +1,19 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-skRGIM",
+    column: "column-eFrOSV",
+    start: "start-AsGQua",
+    end: "end-GUmizA",
+    center: "center-ZCtISA",
+    "space-between": "space-between-JgT7jT",
+    spaceBetween: "space-between-JgT7jT",
+    "gap-12": "gap-12-vpXLHP",
+    gap12: "gap-12-vpXLHP",
+    "gap-16": "gap-16-YnuaQb",
+    gap16: "gap-16-YnuaQb",
+    "gap-24": "gap-24-Z4lCD9",
+    gap24: "gap-24-Z4lCD9",
+    "gap-32": "gap-32-dJPD9x",
+    gap32: "gap-32-dJPD9x"
+};
+export default index_module;

package/dist/components/Sidepanel/components/footer/index_module.css

@@ -0,0 +1,57 @@
+.component-skRGIM {
+  box-sizing: border-box;
+  padding: var(--sidepanel-padding);
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.component-skRGIM:not(.column-eFrOSV) > button[data-block="true"] {
+  flex: 1 1 0;
+}
+
+.start-AsGQua {
+  justify-content: flex-start;
+}
+
+.end-GUmizA {
+  justify-content: flex-end;
+}
+
+.center-ZCtISA {
+  justify-content: center;
+}
+
+.space-between-JgT7jT {
+  justify-content: space-between;
+}
+
+.space-between-JgT7jT > :only-child {
+  margin-left: auto;
+}
+
+.column-eFrOSV {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.column-eFrOSV > button {
+  width: 100%;
+}
+
+.gap-12-vpXLHP {
+  gap: var(--size-12);
+}
+
+.gap-16-YnuaQb {
+  gap: var(--size-16);
+}
+
+.gap-24-Z4lCD9 {
+  gap: var(--size-24);
+}
+
+.gap-32-dJPD9x {
+  gap: var(--size-32);
+}
+

package/dist/components/Sidepanel/components/header/index.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes } from 'react';
+export type HeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    /**
+     * Необязательный заголовок панели. Без заголовка и крестика Header не выводится.
+     */
+    title?: string;
+    /**
+     * Показывает крестик, который вызывает onClose ближайшего Sidepanel.
+     * @default true
+     */
+    hasCloser?: boolean;
+    /**
+     * Базовый идентификатор частей -header и -closer.
+     * По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+};
+export declare const Header: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
+    /**
+     * Необязательный заголовок панели. Без заголовка и крестика Header не выводится.
+     */
+    title?: string;
+    /**
+     * Показывает крестик, который вызывает onClose ближайшего Sidepanel.
+     * @default true
+     */
+    hasCloser?: boolean;
+    /**
+     * Базовый идентификатор частей -header и -closer.
+     * По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Sidepanel/components/header/index.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CrossHeavyMIcon } from "@koslibs/icons/CrossHeavyMIcon";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
+import { Button } from "../../../Button/index.js";
+import { TypographyText } from "../../../Typography/index.js";
+import { SidepanelContext } from "../../context.js";
+import index_module from "../../index.module.js";
+import index_module_0 from "./index.module.js";
+const Header = /*#__PURE__*/ forwardRef(({ title, hasCloser = true, className, dataTestId, ...restProps }, ref)=>{
+    const { onClose, dataTestId: panelDataTestId } = useContext(SidepanelContext);
+    const getDataTestId = useDataTestId(dataTestId ?? panelDataTestId);
+    if (!title?.trim() && !hasCloser) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module_0.component, index_module.header, className),
+        "data-test-id": getDataTestId('header'),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: index_module_0.title,
+                children: title && /*#__PURE__*/ jsx(TypographyText, {
+                    size: 20,
+                    weight: "semibold",
+                    children: title
+                })
+            }),
+            hasCloser && /*#__PURE__*/ jsx(Button, {
+                size: 32,
+                view: "transparent",
+                className: index_module_0.closer,
+                labelClassName: index_module_0.closerLabel,
+                onClick: onClose,
+                dataTestId: getDataTestId('closer'),
+                children: /*#__PURE__*/ jsx(CrossHeavyMIcon, {
+                    width: 24,
+                    height: 24
+                })
+            })
+        ]
+    });
+});
+Header.displayName = 'SidepanelHeader';
+export { Header };

package/dist/components/Sidepanel/components/header/index.module.js

@@ -0,0 +1,8 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-pnHhxm",
+    title: "title-nolsR9",
+    closer: "closer-PhFI6O",
+    closerLabel: "closerLabel-q4m2AK"
+};
+export default index_module;

package/dist/components/Sidepanel/components/header/index_module.css

@@ -0,0 +1,32 @@
+.component-pnHhxm {
+  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--size-16);
+  min-height: var(--size-80);
+  padding: var(--sidepanel-padding);
+  flex-shrink: 0;
+  display: flex;
+}
+
+.title-nolsR9 {
+  overflow-wrap: anywhere;
+  flex: 1;
+  min-width: 0;
+}
+
+.component-pnHhxm > .closer-PhFI6O {
+  width: var(--size-24);
+  min-width: var(--size-24);
+  height: var(--size-32);
+  min-height: var(--size-32);
+  padding: var(--size-0);
+  flex-shrink: 0;
+}
+
+.closerLabel-q4m2AK {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+

package/dist/components/Sidepanel/components/sidepanel-surface/index.d.ts

@@ -0,0 +1,4 @@
+import type { SidepanelProps } from '../../types.js';
+export declare const SidepanelSurface: import("react").ForwardRefExoticComponent<Omit<SidepanelProps, "getPortalContainer"> & {
+    onExited: VoidFunction;
+} & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/components/Sidepanel/components/sidepanel-surface/index.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { lockScroll } from "../../../../utils/lock-scroll.js";
+import { SidepanelContext } from "../../context.js";
+import { useDialogTransition } from "../../hooks/use-dialog-transition.js";
+import index_module from "../../index.module.js";
+import scrollbar_module from "../../scrollbar.module.js";
+const SidepanelSurface = /*#__PURE__*/ forwardRef(({ open, onClose, onExited, escapeKeyDown = true, backdropClick = true, lockScroll: shouldLockScroll = true, className, dataTestId, children, onPointerDown, onClick, onTransitionEnd, ...restProps }, ref)=>{
+    const dialogRef = useRef(null);
+    const backdropPointerDown = useRef(false);
+    const mounted = useRef(false);
+    useLayoutEffect(()=>{
+        mounted.current = true;
+        return ()=>{
+            mounted.current = false;
+        };
+    }, []);
+    const { active, finishClosing } = useDialogTransition(dialogRef, open, onExited);
+    const requestClose = useCallback(()=>{
+        if (open) onClose?.();
+    }, [
+        onClose,
+        open
+    ]);
+    const mergedRef = useCallback((element)=>{
+        dialogRef.current = element;
+        if ('function' == typeof ref) ref(element);
+        else if (ref) ref.current = element;
+    }, [
+        ref
+    ]);
+    const context = useMemo(()=>({
+            onClose: requestClose,
+            dataTestId
+        }), [
+        dataTestId,
+        requestClose
+    ]);
+    useLayoutEffect(()=>{
+        const dialog = dialogRef.current;
+        if (active && shouldLockScroll && dialog) return lockScroll(dialog.ownerDocument, true);
+    }, [
+        active,
+        shouldLockScroll
+    ]);
+    const isBackdrop = (event)=>{
+        const bounds = event.currentTarget.getBoundingClientRect();
+        return event.target === event.currentTarget && (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom);
+    };
+    const handleCancel = (event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+        if (escapeKeyDown) requestClose();
+    };
+    const handleClose = (event)=>{
+        event.stopPropagation();
+        if (mounted.current && !event.currentTarget.open) requestClose();
+    };
+    const handlePointerDown = (event)=>{
+        onPointerDown?.(event);
+        backdropPointerDown.current = !event.defaultPrevented && isBackdrop(event);
+    };
+    const handleClick = (event)=>{
+        onClick?.(event);
+        const close = backdropPointerDown.current && isBackdrop(event);
+        backdropPointerDown.current = false;
+        if (backdropClick && close && !event.defaultPrevented) requestClose();
+    };
+    const handleTransitionEnd = (event)=>{
+        onTransitionEnd?.(event);
+        if (event.target === event.currentTarget && 'transform' === event.propertyName) finishClosing();
+    };
+    return /*#__PURE__*/ jsx("dialog", {
+        ...restProps,
+        ref: mergedRef,
+        className: classnames(index_module.component, scrollbar_module.scrollbar, className),
+        "data-test-id": dataTestId,
+        "data-state": "closed",
+        onCancel: handleCancel,
+        onClose: handleClose,
+        onPointerDown: handlePointerDown,
+        onClick: handleClick,
+        onTransitionEnd: handleTransitionEnd,
+        children: /*#__PURE__*/ jsx(SidepanelContext.Provider, {
+            value: context,
+            children: children
+        })
+    });
+});
+SidepanelSurface.displayName = 'SidepanelSurface';
+export { SidepanelSurface };

package/dist/components/Sidepanel/context.d.ts

@@ -0,0 +1,6 @@
+type SidepanelContextValue = {
+    onClose?: VoidFunction;
+    dataTestId?: string;
+};
+export declare const SidepanelContext: import("react").Context<SidepanelContextValue>;
+export {};

package/dist/components/Sidepanel/context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const SidepanelContext = createContext({});
+export { SidepanelContext };

package/dist/components/Sidepanel/hooks/use-dialog-transition.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+export declare function useDialogTransition(dialogRef: RefObject<HTMLDialogElement>, open: boolean, onExited: VoidFunction): {
+    active: boolean;
+    finishClosing: () => void;
+};

package/dist/components/Sidepanel/hooks/use-dialog-transition.js

@@ -0,0 +1,83 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+function milliseconds(value) {
+    return (parseFloat(value) || 0) * (value.trim().endsWith('ms') ? 1 : 1000);
+}
+function transitionTime(dialog) {
+    const style = dialog.ownerDocument.defaultView?.getComputedStyle(dialog);
+    const durations = style?.transitionDuration.split(',').map(milliseconds) ?? [
+        0
+    ];
+    const delays = style?.transitionDelay.split(',').map(milliseconds) ?? [
+        0
+    ];
+    return Math.max(0, ...durations.map((duration, index)=>duration + delays[index % delays.length]));
+}
+function useDialogTransition(dialogRef, open, onExited) {
+    const [active, setActive] = useState(open);
+    const latest = useRef({
+        open,
+        onExited
+    });
+    useLayoutEffect(()=>{
+        latest.current = {
+            open,
+            onExited
+        };
+    }, [
+        open,
+        onExited
+    ]);
+    const finishClosing = useCallback(()=>{
+        const dialog = dialogRef.current;
+        if (!dialog || latest.current.open) return;
+        if (dialog.open) dialog.close();
+        setActive(false);
+        latest.current.onExited();
+    }, [
+        dialogRef
+    ]);
+    useLayoutEffect(()=>{
+        const dialog = dialogRef.current;
+        const view = dialog?.ownerDocument.defaultView;
+        if (!dialog || !view) return;
+        let frame;
+        let timeout;
+        if (open) {
+            if (!dialog.open) {
+                dialog.dataset.state = 'closed';
+                dialog.showModal();
+                dialog.getBoundingClientRect();
+            }
+            setActive(true);
+            frame = view.requestAnimationFrame(()=>{
+                dialog.dataset.state = 'open';
+            });
+        } else if (dialog.open && 'open' === dialog.dataset.state) {
+            dialog.dataset.state = 'closed';
+            const duration = transitionTime(dialog);
+            if (0 === duration) finishClosing();
+            else timeout = view.setTimeout(finishClosing, duration + 50);
+        } else finishClosing();
+        return ()=>{
+            if (void 0 !== frame) view.cancelAnimationFrame(frame);
+            if (void 0 !== timeout) view.clearTimeout(timeout);
+        };
+    }, [
+        dialogRef,
+        finishClosing,
+        open
+    ]);
+    useLayoutEffect(()=>{
+        const dialog = dialogRef.current;
+        return ()=>{
+            if (dialog?.open) dialog.close();
+        };
+    }, [
+        dialogRef
+    ]);
+    return {
+        active,
+        finishClosing
+    };
+}
+export { useDialogTransition };

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

@@ -0,0 +1,8 @@
+export { Sidepanel } from './sidepanel.js';
+export type { SidepanelProps } from './types.js';
+export { Header } from './components/header/index.js';
+export type { HeaderProps } from './components/header/index.js';
+export { Content } from './components/content/index.js';
+export type { ContentProps } from './components/content/index.js';
+export { Footer } from './components/footer/index.js';
+export type { FooterProps } from './components/footer/index.js';

package/dist/components/Sidepanel/index.js

@@ -0,0 +1,4 @@
+export { Sidepanel } from "./sidepanel.js";
+export { Header } from "./components/header/index.js";
+export { Content } from "./components/content/index.js";
+export { Footer } from "./components/footer/index.js";

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

@@ -0,0 +1,8 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-kIdcz9",
+    nonStickyFooter: "nonStickyFooter-rXnHkK",
+    header: "header-UlW3Pm",
+    content: "content-RhY7Xk"
+};
+export default index_module;

package/dist/components/Sidepanel/index_module.css

@@ -0,0 +1,68 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-kIdcz9 {
+  box-sizing: border-box;
+  width: 500px;
+  min-width: 0;
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: none;
+  margin: var(--size-0);
+  padding: var(--size-0);
+  border-radius: var(--border-radius-0);
+  background: var(--sidepanel-background-color);
+  color: var(--sidepanel-color);
+  font-family: var(--font-primary);
+  transition: transform var(--sidepanel-animation-duration) ease-in-out;
+  border: 0;
+  outline: none;
+  flex-direction: column;
+  position: fixed;
+  inset: 0 0 0 auto;
+  overflow: hidden;
+  transform: translateX(100%);
+
+  &[open] {
+    display: flex;
+  }
+
+  &:has( > .nonStickyFooter-rXnHkK) {
+    overscroll-behavior: contain;
+    overflow: auto;
+
+    & > .header-UlW3Pm {
+      z-index: 1;
+      background: var(--sidepanel-background-color);
+      position: sticky;
+      top: 0;
+    }
+
+    & > .content-RhY7Xk {
+      flex: 1 0 auto;
+      overflow: visible;
+    }
+  }
+
+  &[data-state="open"] {
+    transform: translateX(0);
+  }
+
+  &::backdrop {
+    background: var(--sidepanel-backdrop-color);
+    backdrop-filter: blur(var(--sidepanel-backdrop-blur));
+    opacity: 0;
+    transition: opacity var(--sidepanel-animation-duration) ease-in-out;
+  }
+
+  &[data-state="open"]::backdrop {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .component-kIdcz9, .component-kIdcz9::backdrop {
+    transition-duration: 0s;
+  }
+}
+

package/dist/components/Sidepanel/scrollbar.module.js

@@ -0,0 +1,5 @@
+import "./scrollbar_module.css";
+const scrollbar_module = {
+    scrollbar: "scrollbar-haYNj_"
+};
+export default scrollbar_module;

package/dist/components/Sidepanel/scrollbar_module.css

@@ -0,0 +1,41 @@
+.scrollbar-haYNj_ {
+  scrollbar-color: auto;
+  scrollbar-width: auto;
+
+  &::-webkit-scrollbar {
+    width: var(--size-6);
+    height: var(--size-6);
+    background: none;
+  }
+
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: var(--border-radius-pill);
+    background: var(--sidepanel-scrollbar-color);
+  }
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  .scrollbar-haYNj_ {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sidepanel-scrollbar-color) transparent;
+  }
+}
+

package/dist/components/Sidepanel/sidepanel.d.ts

@@ -0,0 +1,9 @@
+export declare const Sidepanel: import("react").ForwardRefExoticComponent<Omit<import("react").DialogHTMLAttributes<HTMLDialogElement>, "open" | "onClose" | "onCancel"> & {
+    open: boolean;
+    onClose?: VoidFunction;
+    escapeKeyDown?: boolean;
+    backdropClick?: boolean;
+    lockScroll?: boolean;
+    getPortalContainer?: import("../Portal/index.js").PortalProps["getPortalContainer"];
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/components/Sidepanel/sidepanel.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useLayoutEffect, useState } from "react";
+import { Portal } from "../Portal/index.js";
+import { SidepanelSurface } from "./components/sidepanel-surface/index.js";
+const Sidepanel = /*#__PURE__*/ forwardRef(({ open, getPortalContainer, ...restProps }, ref)=>{
+    const [mounted, setMounted] = useState(open);
+    useLayoutEffect(()=>{
+        if (open) setMounted(true);
+    }, [
+        open
+    ]);
+    const handleExited = useCallback(()=>{
+        if (!open) setMounted(false);
+    }, [
+        open
+    ]);
+    return mounted ? /*#__PURE__*/ jsx(Portal, {
+        getPortalContainer: getPortalContainer,
+        children: /*#__PURE__*/ jsx(SidepanelSurface, {
+            ...restProps,
+            ref: ref,
+            open: open,
+            onExited: handleExited
+        })
+    }) : null;
+});
+Sidepanel.displayName = 'Sidepanel';
+export { Sidepanel };

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

@@ -0,0 +1,36 @@
+import type { DialogHTMLAttributes } from 'react';
+import type { PortalProps } from '../Portal/index.js';
+export type SidepanelProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'onClose' | 'onCancel'> & {
+    /**
+     * Видимость панели. Для закрытия обновите open в обработчике onClose.
+     * Панель остаётся открытой до завершения анимации ухода вправо.
+     */
+    open: boolean;
+    /**
+     * Запрос закрытия по крестику, Escape или бекдропу.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Разрешает запрос закрытия по Escape.
+     * @default true
+     */
+    escapeKeyDown?: boolean;
+    /**
+     * Разрешает запрос закрытия по бекдропу.
+     * @default true
+     */
+    backdropClick?: boolean;
+    /**
+     * Блокирует прокрутку страницы до завершения закрытия.
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * Контейнер портала. По умолчанию используется body текущего документа.
+     */
+    getPortalContainer?: PortalProps['getPortalContainer'];
+    /**
+     * Идентификатор панели. Части получают суффиксы -header, -closer, -content и -footer.
+     */
+    dataTestId?: string;
+};

package/dist/components/Sidepanel/vars.css

@@ -0,0 +1,12 @@
+@import "../Modal/vars.css";
+
+:root {
+  --sidepanel-background-color: var(--modal-background-color);
+  --sidepanel-color: var(--modal-color);
+  --sidepanel-backdrop-color: var(--modal-backdrop-color);
+  --sidepanel-backdrop-blur: var(--modal-backdrop-blur);
+  --sidepanel-padding: var(--size-24);
+  --sidepanel-scrollbar-color: #a49b89;
+  --sidepanel-animation-duration: .2s;
+}
+

package/dist/components/Tabs/index_module.css

@@ -83,7 +83,7 @@
 
 .tab-yKhKqB:disabled, .tab-yKhKqB:disabled .counter-Tokn9i {
   color: var(--tabs-disabled-color);
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .tab-yKhKqB:disabled .counter-Tokn9i {

package/dist/components/Tabs/tabs.d.ts

@@ -7,7 +7,6 @@ export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<import
         selectedId: string;
     }) => void;
     size?: 40 | 48;
-    emptyState?: ReactNode;
     listClassName?: string;
     dataTestId?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/tabs.js

@@ -40,7 +40,7 @@ function resolveValue(items, value, previous) {
     const start = Math.max(0, index);
     return items.slice(start).find((item)=>!item.disabled)?.id ?? items.slice(0, start).reverse().find((item)=>!item.disabled)?.id;
 }
-const Tabs = /*#__PURE__*/ forwardRef(({ children, selectedId, defaultSelectedId, onChange, size = 40, emptyState, listClassName, dataTestId, className, ...restProps }, ref)=>{
+const Tabs = /*#__PURE__*/ forwardRef(({ children, selectedId, defaultSelectedId, onChange, size = 40, listClassName, dataTestId, className, ...restProps }, ref)=>{
     const getDataTestId = useDataTestId(dataTestId);
     const items = useMemo(()=>collectTabs(children), [
         children
@@ -78,12 +78,13 @@ const Tabs = /*#__PURE__*/ forwardRef(({ children, selectedId, defaultSelectedId
             selectedId: id
         });
     };
+    if (0 === items.length) return null;
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
         "data-test-id": dataTestId,
-        children: void 0 === selectedValue ? emptyState : /*#__PURE__*/ jsx(TabsContext.Provider, {
+        children: /*#__PURE__*/ jsx(TabsContext.Provider, {
             value: {
                 selectedId: selectedValue,
                 size,
@@ -102,7 +103,7 @@ const Tabs = /*#__PURE__*/ forwardRef(({ children, selectedId, defaultSelectedId
                     items.map((item)=>/*#__PURE__*/ jsx(Tab, {
                             ...item
                         }, item.id)),
-                    /*#__PURE__*/ jsx("div", {
+                    void 0 !== selectedValue && /*#__PURE__*/ jsx("div", {
                         ref: indicatorRef,
                         className: index_module.indicator,
                         "data-test-id": getDataTestId('indicator')

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

@@ -45,10 +45,6 @@ export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onCha
      * @default 40
      */
     size?: 40 | 48;
-    /**
-     * Общее пустое состояние, когда нет доступных вкладок.
-     */
-    emptyState?: ReactNode;
     /**
      * Класс ряда заголовков.
      */

package/dist/components/Textarea/index_module.css

@@ -42,6 +42,7 @@
     --field-label-color: var(--input-disabled-color);
     --field-placeholder-color: var(--input-disabled-color);
     --field-icon-color: var(--input-disabled-color);
+    cursor: not-allowed;
   }
 }
 

package/dist/index.d.ts

@@ -25,4 +25,6 @@ export type { CollapseProps } from './components/Collapse/index.js';
 export { Modal, ModalComponent, ModalHeader, ModalContent, ModalFooter, ModalControls, } from './components/Modal/index.js';
 export { Portal } from './components/Portal/index.js';
 export type { PortalProps } from './components/Portal/index.js';
+export { Sidepanel, Header as SidepanelHeader, Content as SidepanelContent, Footer as SidepanelFooter, } from './components/Sidepanel/index.js';
+export type { SidepanelProps, HeaderProps as SidepanelHeaderProps, ContentProps as SidepanelContentProps, FooterProps as SidepanelFooterProps, } from './components/Sidepanel/index.js';
 export type { ModalProps, HeaderProps as ModalHeaderProps, ContentProps as ModalContentProps, FooterProps as ModalFooterProps, ControlsProps as ModalControlsProps, } from './components/Modal/index.js';

package/dist/index.js

@@ -12,3 +12,4 @@ export { Popover } from "./components/Popover/index.js";
 export { Collapse } from "./components/Collapse/index.js";
 export { Modal, ModalComponent, ModalContent, ModalControls, ModalFooter, ModalHeader } from "./components/Modal/index.js";
 export { Portal } from "./components/Portal/index.js";
+export { Content as SidepanelContent, Footer as SidepanelFooter, Header as SidepanelHeader, Sidepanel } from "./components/Sidepanel/index.js";

package/dist/utils/lock-scroll.d.ts

@@ -0,0 +1 @@
+export declare function lockScroll(document: Document, removeScrollbarGutter?: boolean): () => void;

package/dist/utils/lock-scroll.js

@@ -0,0 +1,49 @@
+const locks = new WeakMap();
+function lockScroll(document, removeScrollbarGutter = false) {
+    const { body, documentElement, defaultView } = document;
+    const existing = locks.get(document);
+    if (existing) existing.count += 1;
+    else {
+        locks.set(document, {
+            count: 1,
+            overflow: body.style.overflow,
+            paddingRight: body.style.paddingRight,
+            paddingLeft: body.style.paddingLeft
+        });
+        const scrollbarWidth = (defaultView?.innerWidth ?? 0) - documentElement.clientWidth;
+        const hasStableGutter = defaultView?.getComputedStyle(documentElement).scrollbarGutter?.split(/\s+/).includes('stable');
+        if (scrollbarWidth > 0 && defaultView && !hasStableGutter) {
+            const paddingRight = parseFloat(defaultView.getComputedStyle(body).paddingRight) || 0;
+            body.style.paddingRight = `${paddingRight + scrollbarWidth}px`;
+        }
+        body.style.overflow = 'hidden';
+    }
+    const gutterLock = locks.get(document);
+    if (removeScrollbarGutter && !gutterLock.gutter && defaultView?.getComputedStyle(documentElement).scrollbarGutter?.includes('stable')) {
+        const before = documentElement.getBoundingClientRect();
+        const paddingLeft = parseFloat(defaultView.getComputedStyle(body).paddingLeft) || 0;
+        const paddingRight = parseFloat(defaultView.getComputedStyle(body).paddingRight) || 0;
+        gutterLock.gutter = {
+            value: documentElement.style.getPropertyValue('scrollbar-gutter'),
+            priority: documentElement.style.getPropertyPriority('scrollbar-gutter')
+        };
+        documentElement.style.setProperty('scrollbar-gutter', 'auto', 'important');
+        const after = documentElement.getBoundingClientRect();
+        body.style.paddingLeft = `${paddingLeft + Math.max(0, before.left - after.left)}px`;
+        body.style.paddingRight = `${paddingRight + Math.max(0, after.right - before.right)}px`;
+    }
+    return ()=>{
+        const lock = locks.get(document);
+        if (!lock) return;
+        lock.count -= 1;
+        if (0 === lock.count) {
+            body.style.overflow = lock.overflow;
+            body.style.paddingRight = lock.paddingRight;
+            body.style.paddingLeft = lock.paddingLeft;
+            if (lock.gutter) if (lock.gutter.value) documentElement.style.setProperty('scrollbar-gutter', lock.gutter.value, lock.gutter.priority);
+            else documentElement.style.removeProperty('scrollbar-gutter');
+            locks.delete(document);
+        }
+    };
+}
+export { lockScroll };

package/package.json

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

package/dist/components/Modal/utils/lock-scroll.d.ts

@@ -1 +0,0 @@
-export declare function lockScroll(document: Document): () => void;

package/dist/components/Modal/utils/lock-scroll.js

@@ -1,31 +0,0 @@
-const locks = new WeakMap();
-function lockScroll(document) {
-    const { body, documentElement, defaultView } = document;
-    const existing = locks.get(document);
-    if (existing) existing.count += 1;
-    else {
-        locks.set(document, {
-            count: 1,
-            overflow: body.style.overflow,
-            paddingRight: body.style.paddingRight
-        });
-        const scrollbarWidth = (defaultView?.innerWidth ?? 0) - documentElement.clientWidth;
-        const hasStableGutter = defaultView?.getComputedStyle(documentElement).scrollbarGutter?.split(/\s+/).includes('stable');
-        if (scrollbarWidth > 0 && defaultView && !hasStableGutter) {
-            const paddingRight = parseFloat(defaultView.getComputedStyle(body).paddingRight) || 0;
-            body.style.paddingRight = `${paddingRight + scrollbarWidth}px`;
-        }
-        body.style.overflow = 'hidden';
-    }
-    return ()=>{
-        const lock = locks.get(document);
-        if (!lock) return;
-        lock.count -= 1;
-        if (0 === lock.count) {
-            body.style.overflow = lock.overflow;
-            body.style.paddingRight = lock.paddingRight;
-            locks.delete(document);
-        }
-    };
-}
-export { lockScroll };