@koslibs/components 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @koslibs/components
 
+## 1.4.0
+
+### Minor Changes
+
+- [#5](https://github.com/koslibs/components/pull/5) [`68d3460`](https://github.com/koslibs/components/commit/68d34608d599582acf4115d31f64fb0168213edb) Thanks [@holypower777](https://github.com/holypower777)! - Перенесён Modal из GullEye core-components с Header, Content, Footer и Controls.
+  Добавлены прямой импорт `@koslibs/components/Modal`, размеры 480/600/720/960/fullscreen,
+  управляемое закрытие, блокировка прокрутки и поддержка вложенных окон.
+  Docs содержат вкладки документации, Props, CSS-переменных и истории изменений,
+  а также примеры длинного контента и Popover внутри нативного dialog.
+  Блокировка прокрутки учитывает `scrollbar-gutter: stable`, чтобы контент страницы
+  не смещался из-за двойной компенсации места под скроллбар.
+
+    Modal синхронизирован с документацией Figma: типографика Header 20 px semibold /
+    14 px regular, крестик 18 px в области 48 × 32 px, Header без нижнего и Footer
+    без верхнего отступа. В строковых Controls две Button с block=true делят ширину
+    одной строки поровну с учётом gap; column растягивает кнопки по ширине вертикально.
+
+    Убран `Header.onClose`: крестик вызывает общий `Modal.onClose` через внутренний
+    React Context. Вложенный Header использует обработчик ближайшего Modal;
+    обработчик больше не нужно передавать отдельно в заголовок.
+
+    Header, Content, Footer и Controls наследуют `Modal.dataTestId` с суффиксами
+    `-header`, `-content`, `-footer`, `-controls`. Явный dataTestId части имеет приоритет;
+    вложенные окна используют только свой базовый идентификатор.
+
+    Добавлен отдельный Portal с `getPortalContainer`, `immediateMount`, ref на контейнер
+    и немедленным монтированием по умолчанию (`immediateMount=true`). Значение false
+    позволяет дождаться DOM-контейнера из ref. Modal и Popover используют
+    общий Portal; прямой импорт доступен через `@koslibs/components/Portal`.
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/components/Button/button.js

@@ -76,6 +76,7 @@ const Button = /*#__PURE__*/ forwardRef(({ view = 'primary', shape = 'rectangula
             [colors_module.loading]: showLoader
         }, className),
         "data-test-id": dataTestId,
+        "data-block": block || void 0,
         type: type,
         disabled: disabled || showLoader,
         "aria-busy": showLoader,

package/dist/components/Modal/colors.module.js

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

package/dist/components/Modal/colors_module.css

@@ -0,0 +1,10 @@
+.component-NzhSoV {
+  background-color: var(--modal-background-color);
+  color: var(--modal-color);
+
+  &::backdrop {
+    background-color: var(--modal-backdrop-color);
+    backdrop-filter: blur(var(--modal-backdrop-blur));
+  }
+}
+

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

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

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { ModalContext } from "../../context.js";
+import index_module from "./index.module.js";
+const Content = /*#__PURE__*/ forwardRef(({ children, className, dataTestId, ...restProps }, ref)=>{
+    const { dataTestId: modalDataTestId } = useContext(ModalContext);
+    const testId = dataTestId ?? modalDataTestId;
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, className),
+        "data-test-id": testId ? `${testId}-content` : void 0,
+        children: children
+    });
+});
+Content.displayName = 'ModalContent';
+export { Content };

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

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

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

@@ -0,0 +1,12 @@
+.component-Xoedpj {
+  gap: var(--size-24, 24px);
+  min-height: 0;
+  padding: var(--modal-padding);
+  overscroll-behavior: contain;
+  overflow-wrap: anywhere;
+  flex-direction: column;
+  flex: auto;
+  display: flex;
+  overflow: auto;
+}
+

package/dist/components/Modal/components/controls/index.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import React from 'react';
+export type ControlsProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Основное действие, отображается после дополнительного.
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительное действие.
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание действий.
+     * В строковых раскладках block-кнопки делят свободную ширину поровну.
+     * В column кнопки занимают всю ширину и располагаются друг под другом.
+     * @default 'end'
+     */
+    layout?: 'start' | 'end' | 'center' | 'space-between' | 'column';
+    /**
+     * Расстояние между действиями.
+     * @default 12
+     */
+    gap?: 8 | 12 | 16 | 24;
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -controls.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+};
+export declare const Controls: React.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Основное действие, отображается после дополнительного.
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительное действие.
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание действий.
+     * В строковых раскладках block-кнопки делят свободную ширину поровну.
+     * В column кнопки занимают всю ширину и располагаются друг под другом.
+     * @default 'end'
+     */
+    layout?: "start" | "end" | "center" | "space-between" | "column";
+    /**
+     * Расстояние между действиями.
+     * @default 12
+     */
+    gap?: 8 | 12 | 16 | 24;
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -controls.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/components/controls/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import react, { forwardRef, useContext } from "react";
+import { ModalContext } from "../../context.js";
+import index_module from "./index.module.js";
+const Controls = /*#__PURE__*/ forwardRef(({ primary, secondary, layout = 'end', gap = 12, className, children, dataTestId, ...restProps }, ref)=>{
+    const { dataTestId: modalDataTestId } = useContext(ModalContext);
+    const testId = dataTestId ?? modalDataTestId;
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, index_module[layout], index_module[`gap-${gap}`], className),
+        "data-test-id": testId ? `${testId}-controls` : void 0,
+        children: children ?? /*#__PURE__*/ jsxs(react.Fragment, {
+            children: [
+                secondary,
+                primary
+            ]
+        })
+    });
+});
+Controls.displayName = 'ModalControls';
+export { Controls };

package/dist/components/Modal/components/controls/index.module.js

@@ -0,0 +1,19 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-IPNCFT",
+    column: "column-dBeQXP",
+    start: "start-ouHlcU",
+    end: "end-TYAvEX",
+    center: "center-I4ALjs",
+    "space-between": "space-between-OxpVhA",
+    spaceBetween: "space-between-OxpVhA",
+    "gap-8": "gap-8-xwhlts",
+    gap8: "gap-8-xwhlts",
+    "gap-12": "gap-12-IFyQQK",
+    gap12: "gap-12-IFyQQK",
+    "gap-16": "gap-16-iZpxeN",
+    gap16: "gap-16-iZpxeN",
+    "gap-24": "gap-24-eEhuId",
+    gap24: "gap-24-eEhuId"
+};
+export default index_module;

package/dist/components/Modal/components/controls/index_module.css

@@ -0,0 +1,52 @@
+.component-IPNCFT {
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.component-IPNCFT:not(.column-dBeQXP) > button[data-block="true"] {
+  flex: 1 1 0;
+}
+
+.start-ouHlcU {
+  justify-content: flex-start;
+}
+
+.end-TYAvEX {
+  justify-content: flex-end;
+}
+
+.center-I4ALjs {
+  justify-content: center;
+}
+
+.space-between-OxpVhA {
+  justify-content: space-between;
+}
+
+.column-dBeQXP {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.column-dBeQXP > button {
+  width: 100%;
+}
+
+.gap-8-xwhlts {
+  gap: var(--size-8, 8px);
+}
+
+.gap-12-IFyQQK {
+  gap: var(--size-12, 12px);
+}
+
+.gap-16-iZpxeN {
+  gap: var(--size-16, 16px);
+}
+
+.gap-24-eEhuId {
+  gap: var(--size-24, 24px);
+}
+

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

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from 'react';
+export type FooterProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -footer.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+};
+export declare const Footer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -footer.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { ModalContext } from "../../context.js";
+import index_module from "./index.module.js";
+const Footer = /*#__PURE__*/ forwardRef(({ children, className, dataTestId, ...restProps }, ref)=>{
+    const { dataTestId: modalDataTestId } = useContext(ModalContext);
+    const testId = dataTestId ?? modalDataTestId;
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, className),
+        "data-test-id": testId ? `${testId}-footer` : void 0,
+        children: children
+    });
+});
+Footer.displayName = 'ModalFooter';
+export { Footer };

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

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

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

@@ -0,0 +1,9 @@
+.component-ZDJl0C {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--size-12, 12px);
+  padding: 0 var(--modal-padding) var(--modal-padding);
+  flex-shrink: 0;
+  display: flex;
+}
+

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

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

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

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CrossHeavyMIcon } from "@koslibs/icons/CrossHeavyMIcon";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { Button } from "../../../Button/index.js";
+import { TypographyText } from "../../../Typography/index.js";
+import { ModalContext } from "../../context.js";
+import index_module from "./index.module.js";
+const Header = /*#__PURE__*/ forwardRef(({ title, subtitle, hasCloser = true, className, dataTestId, ...restProps }, ref)=>{
+    const { onClose, dataTestId: modalDataTestId } = useContext(ModalContext);
+    const testId = dataTestId ?? modalDataTestId;
+    const handleClick = ()=>{
+        onClose?.();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, className),
+        "data-test-id": testId ? `${testId}-header` : void 0,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: index_module.content,
+                children: [
+                    Boolean(title) && /*#__PURE__*/ jsx(TypographyText, {
+                        size: 20,
+                        weight: "semibold",
+                        children: title
+                    }),
+                    Boolean(subtitle) && /*#__PURE__*/ jsx(TypographyText, {
+                        size: 14,
+                        color: "secondary",
+                        children: subtitle
+                    })
+                ]
+            }),
+            hasCloser && /*#__PURE__*/ jsx(Button, {
+                size: 32,
+                view: "transparent",
+                className: index_module.closer,
+                labelClassName: index_module.closerLabel,
+                "aria-label": "Закрыть окно",
+                onClick: handleClick,
+                children: /*#__PURE__*/ jsx(CrossHeavyMIcon, {
+                    width: 18,
+                    height: 18,
+                    "aria-hidden": "true"
+                })
+            })
+        ]
+    });
+});
+Header.displayName = 'ModalHeader';
+export { Header };

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

@@ -0,0 +1,8 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-sqEuYd",
+    content: "content-cnwKDB",
+    closer: "closer-odHjP5",
+    closerLabel: "closerLabel-r61y3R"
+};
+export default index_module;

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

@@ -0,0 +1,31 @@
+.component-sqEuYd {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--size-24, 24px);
+  padding: var(--modal-padding) var(--modal-padding) 0;
+  flex-shrink: 0;
+  display: flex;
+}
+
+.content-cnwKDB {
+  gap: var(--size-4, 4px);
+  overflow-wrap: anywhere;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.component-sqEuYd > .closer-odHjP5 {
+  flex-shrink: 0;
+  width: 48px;
+  min-width: 48px;
+  padding: 0;
+}
+
+.closerLabel-r61y3R {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+

package/dist/components/Modal/components/modal-surface/index.d.ts

@@ -0,0 +1,4 @@
+import type { ModalProps } from '../../types.js';
+type SurfaceProps = Omit<ModalProps, 'open' | 'getPortalContainer'>;
+export declare const ModalSurface: import("react").ForwardRefExoticComponent<SurfaceProps & import("react").RefAttributes<HTMLDialogElement>>;
+export {};

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

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+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)=>{
+    const dialogRef = useRef(null);
+    const backdropPointerDown = useRef(false);
+    const mounted = useRef(false);
+    const contextValue = useMemo(()=>({
+            onClose,
+            dataTestId
+        }), [
+        onClose,
+        dataTestId
+    ]);
+    const mergedRef = useCallback((element)=>{
+        dialogRef.current = element;
+        if ('function' == typeof ref) ref(element);
+        else if (ref) ref.current = element;
+    }, [
+        ref
+    ]);
+    useLayoutEffect(()=>{
+        const dialog = dialogRef.current;
+        if (!dialog) return;
+        mounted.current = true;
+        if (!dialog.open) dialog.showModal();
+        return ()=>{
+            mounted.current = false;
+            dialog.close();
+        };
+    }, []);
+    useLayoutEffect(()=>{
+        const dialog = dialogRef.current;
+        if (dialog && shouldLockScroll) return lockScroll(dialog.ownerDocument);
+    }, [
+        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.stopPropagation();
+        event.preventDefault();
+        if (escapeKeyDown) onClose?.();
+    };
+    const handleClose = (event)=>{
+        event.stopPropagation();
+        if (mounted.current && !event.currentTarget.open) onClose?.();
+    };
+    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) onClose?.();
+    };
+    return /*#__PURE__*/ jsx("dialog", {
+        ...restProps,
+        ref: mergedRef,
+        className: classnames(index_module.component, colors_module.component, index_module[`size-${size}`], className),
+        "data-test-id": dataTestId,
+        onCancel: handleCancel,
+        onClose: handleClose,
+        onPointerDown: handlePointerDown,
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsx(ModalContext.Provider, {
+            value: contextValue,
+            children: children
+        })
+    });
+});
+ModalSurface.displayName = 'ModalSurface';
+export { ModalSurface };

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

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

package/dist/components/Modal/context.js

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

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

@@ -0,0 +1,10 @@
+export { Modal, Modal as ModalComponent } from './modal.js';
+export type { ModalProps } from './types.js';
+export { Header, Header as ModalHeader } from './components/header/index.js';
+export type { HeaderProps } from './components/header/index.js';
+export { Content, Content as ModalContent } from './components/content/index.js';
+export type { ContentProps } from './components/content/index.js';
+export { Footer, Footer as ModalFooter } from './components/footer/index.js';
+export type { FooterProps } from './components/footer/index.js';
+export { Controls, Controls as ModalControls } from './components/controls/index.js';
+export type { ControlsProps } from './components/controls/index.js';

package/dist/components/Modal/index.js

@@ -0,0 +1,5 @@
+export { Modal, Modal as ModalComponent } from "./modal.js";
+export { Header, Header as ModalHeader } from "./components/header/index.js";
+export { Content, Content as ModalContent } from "./components/content/index.js";
+export { Footer, Footer as ModalFooter } from "./components/footer/index.js";
+export { Controls, Controls as ModalControls } from "./components/controls/index.js";

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

@@ -0,0 +1,15 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-kCkvk3",
+    "size-480": "size-480-fXx4Vl",
+    size480: "size-480-fXx4Vl",
+    "size-600": "size-600-X9nvTO",
+    size600: "size-600-X9nvTO",
+    "size-720": "size-720-_guzbs",
+    size720: "size-720-_guzbs",
+    "size-960": "size-960-I8vXpb",
+    size960: "size-960-I8vXpb",
+    "size-fullscreen": "size-fullscreen-exf2cb",
+    sizeFullscreen: "size-fullscreen-exf2cb"
+};
+export default index_module;

package/dist/components/Modal/index_module.css

@@ -0,0 +1,46 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-kCkvk3 {
+  border-radius: var(--border-radius-12, 12px);
+  max-width: calc(100vw - var(--size-32, 32px));
+  max-height: calc(100dvh - var(--size-32, 32px));
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--font-primary);
+  box-shadow: var(--modal-shadow);
+  border: none;
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+
+  &[open] {
+    flex-direction: column;
+    display: flex;
+  }
+}
+
+.size-480-fXx4Vl {
+  width: 480px;
+}
+
+.size-600-X9nvTO {
+  width: 600px;
+}
+
+.size-720-_guzbs {
+  width: 720px;
+}
+
+.size-960-I8vXpb {
+  width: 960px;
+}
+
+.size-fullscreen-exf2cb {
+  border-radius: 0;
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+}
+

package/dist/components/Modal/modal.d.ts

@@ -0,0 +1,10 @@
+export declare const Modal: import("react").ForwardRefExoticComponent<Omit<import("react").DialogHTMLAttributes<HTMLDialogElement>, "open" | "onClose" | "onCancel"> & {
+    open: boolean;
+    onClose?: VoidFunction;
+    size?: 480 | 600 | 720 | 960 | "fullscreen";
+    escapeKeyDown?: boolean;
+    backdropClick?: boolean;
+    lockScroll?: boolean;
+    getPortalContainer?: () => Element | null;
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/components/Modal/modal.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Portal } from "../Portal/index.js";
+import { ModalSurface } from "./components/modal-surface/index.js";
+const Modal = /*#__PURE__*/ forwardRef(({ open, getPortalContainer, ...restProps }, ref)=>open ? /*#__PURE__*/ jsx(Portal, {
+        getPortalContainer: getPortalContainer,
+        children: /*#__PURE__*/ jsx(ModalSurface, {
+            ...restProps,
+            ref: ref
+        })
+    }) : null);
+Modal.displayName = 'Modal';
+export { Modal };

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

@@ -0,0 +1,41 @@
+import type { DialogHTMLAttributes } from 'react';
+export type ModalProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'onClose' | 'onCancel'> & {
+    /**
+     * Видимость окна. Закрытие запрашивается через onClose.
+     */
+    open: boolean;
+    /**
+     * Обработчик запроса закрытия. Обновите open в вызывающем компоненте.
+     * Вызывается в том числе кнопкой закрытия Header.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Ширина в пикселях или окно на весь экран.
+     * @default 720
+     */
+    size?: 480 | 600 | 720 | 960 | 'fullscreen';
+    /**
+     * Разрешить закрытие по Escape.
+     * @default true
+     */
+    escapeKeyDown?: boolean;
+    /**
+     * Разрешить закрытие по подложке.
+     * @default true
+     */
+    backdropClick?: boolean;
+    /**
+     * Блокировать прокрутку страницы.
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * Контейнер портала. По умолчанию используется body текущего документа.
+     */
+    getPortalContainer?: () => Element | null;
+    /**
+     * Идентификатор для автоматизированных тестов.
+     * Части наследуют его с суффиксами -header, -content, -footer и -controls.
+     */
+    dataTestId?: string;
+};

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

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

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

@@ -0,0 +1,31 @@
+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 };

package/dist/components/Modal/vars.css

@@ -0,0 +1,9 @@
+:root {
+  --modal-background-color: #f5f3ec;
+  --modal-color: #1c1a18;
+  --modal-backdrop-color: #000000b3;
+  --modal-backdrop-blur: 2px;
+  --modal-shadow: 0 12px 32px -8px #0003;
+  --modal-padding: var(--size-24, 24px);
+}
+

package/dist/components/Popover/popover.js

@@ -1,15 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { createPortal } from "react-dom";
+import { Portal } from "../Portal/index.js";
 import { PopoverSurface } from "./components/popover-surface/index.js";
 const Popover = /*#__PURE__*/ forwardRef(({ open, anchorElement, getPortalContainer, ...restProps }, ref)=>{
     if (!open || !anchorElement) return null;
-    const container = getPortalContainer ? getPortalContainer() : anchorElement.ownerDocument.body;
-    return container ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(PopoverSurface, {
-        ...restProps,
-        anchorElement: anchorElement,
-        ref: ref
-    }), container) : null;
+    return /*#__PURE__*/ jsx(Portal, {
+        getPortalContainer: getPortalContainer ?? (()=>anchorElement.ownerDocument.body),
+        children: /*#__PURE__*/ jsx(PopoverSurface, {
+            ...restProps,
+            anchorElement: anchorElement,
+            ref: ref
+        })
+    });
 });
 Popover.displayName = 'Popover';
 export { Popover };

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

@@ -0,0 +1,2 @@
+export { Portal } from './portal.js';
+export type { PortalProps } from './types.js';

package/dist/components/Portal/index.js

@@ -0,0 +1 @@
+export { Portal } from "./portal.js";

package/dist/components/Portal/portal.d.ts

@@ -0,0 +1,2 @@
+import type { PortalProps } from './types.js';
+export declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<Element | null>>;

package/dist/components/Portal/portal.js

@@ -0,0 +1,19 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { createPortal } from "react-dom";
+function getBody() {
+    return "u" < typeof document ? null : document.body;
+}
+const Portal = /*#__PURE__*/ forwardRef(({ children, getPortalContainer = getBody, immediateMount = true }, ref)=>{
+    const [deferredContainer, setDeferredContainer] = useState(null);
+    let container = deferredContainer;
+    if (immediateMount) container = "u" < typeof document ? null : getPortalContainer() ?? null;
+    useEffect(()=>{
+        if (!immediateMount) setDeferredContainer(getPortalContainer() ?? null);
+    });
+    useImperativeHandle(ref, ()=>container, [
+        container
+    ]);
+    return container ? /*#__PURE__*/ createPortal(children, container) : null;
+});
+Portal.displayName = 'Portal';
+export { Portal };

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export type PortalProps = {
+    /**
+     * Содержимое, которое будет перенесено в контейнер портала без дополнительной обёртки.
+     */
+    children?: ReactNode;
+    /**
+     * Контейнер портала. По умолчанию используется body текущего документа.
+     * Если функция возвращает null или undefined, содержимое не рендерится.
+     */
+    getPortalContainer?: () => Element | null | undefined;
+    /**
+     * Рендерить содержимое сразу, если контейнер уже существует.
+     * При false контейнер определяется после монтирования, чтобы дождаться DOM-контейнера из ref.
+     * @default true
+     */
+    immediateMount?: boolean;
+};

package/dist/index.d.ts

@@ -8,3 +8,7 @@ export { Popover } from './components/Popover/index.js';
 export type { PopoverProps, PopoverPosition } from './components/Popover/index.js';
 export { Collapse } from './components/Collapse/index.js';
 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 type { ModalProps, HeaderProps as ModalHeaderProps, ContentProps as ModalContentProps, FooterProps as ModalFooterProps, ControlsProps as ModalControlsProps, } from './components/Modal/index.js';

package/dist/index.js

@@ -3,3 +3,5 @@ export { Spinner } from "./components/Spinner/index.js";
 export { Text, Title, Typography, TypographyText, TypographyTitle } from "./components/Typography/index.js";
 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";

package/package.json

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