@koslibs/components 1.2.0 → 1.4.0

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

@@ -2,7 +2,9 @@ import type { Placement } from '@popperjs/core';
 import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 export type PopoverPosition = Exclude<Placement, 'auto' | 'auto-start' | 'auto-end'>;
 export type PopoverProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'> & {
-    /** Содержимое поповера. Оформление и прокрутка задаются вызывающим компонентом. */
+    /**
+     * Содержимое поповера. Оформление и прокрутка задаются вызывающим компонентом.
+     */
     children?: ReactNode;
     /**
      * Дополнительный класс внешнего контейнера.

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/components/Typography/shared.d.ts

@@ -2,11 +2,17 @@ import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 export type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 export type TypographyColor = 'inherit' | 'primary' | 'secondary' | 'inverse' | 'positive' | 'negative';
 export type BaseProps = Omit<HTMLAttributes<HTMLElement>, 'color' | 'children' | 'className' | 'style'> & {
-    /** Содержимое текста или заголовка. */
+    /**
+     * Содержимое текста или заголовка.
+     */
     children?: ReactNode;
-    /** Дополнительный CSS-класс корневого элемента. */
+    /**
+     * Дополнительный CSS-класс корневого элемента.
+     */
     className?: string;
-    /** Инлайн-стили корневого элемента. */
+    /**
+     * Инлайн-стили корневого элемента.
+     */
     style?: CSSProperties;
     /**
      * Цвет текста. По умолчанию наследуется от родителя.

package/dist/index.d.ts

@@ -6,3 +6,9 @@ export { Typography, TypographyText, TypographyTitle, Text, Title } from './comp
 export type { TextProps, TitleProps, TypographyColor, TypographyWeight, } from './components/Typography/index.js';
 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

@@ -2,3 +2,6 @@ export { Button } from "./components/Button/index.js";
 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.2.0",
+    "version": "1.4.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",
@@ -80,6 +80,7 @@
         "react-dom": "^18.3.1 || ^19.0.0"
     },
     "dependencies": {
+        "@koslibs/icons": "1.0.1",
         "@popperjs/core": "2.11.8",
         "classnames": "2.5.1"
     }