@koslibs/components 1.3.0 → 1.5.0

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/hooks/use-data-test-id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Создаёт идентификаторы частей компонента с суффиксом.
+ * Без базового dataTestId или при пустой строке возвращает undefined.
+ */
+export declare function useDataTestId(dataTestId?: string): (suffix: string) => string | undefined;

package/dist/hooks/use-data-test-id.js

@@ -0,0 +1,7 @@
+import { useCallback } from "react";
+function useDataTestId(dataTestId) {
+    return useCallback((suffix)=>dataTestId ? `${dataTestId}-${suffix}` : void 0, [
+        dataTestId
+    ]);
+}
+export { useDataTestId };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Button } from './components/Button/index.js';
 export type { ButtonProps } from './components/Button/index.js';
+export { Input } from './components/Input/index.js';
+export type { InputProps } from './components/Input/index.js';
 export { Spinner } from './components/Spinner/index.js';
 export type { SpinnerProps } from './components/Spinner/index.js';
 export { Typography, TypographyText, TypographyTitle, Text, Title } from './components/Typography/index.js';
@@ -8,3 +10,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

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