@koslibs/components 1.11.1 → 1.13.0

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/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;
   }
 }
 
@@ -64,13 +65,13 @@
   }
 }
 
-.component-K9LhZN:not([data-disabled]) .field-GADSqb:focus-within {
+.component-K9LhZN[data-has-outline]:not([data-disabled]) .field-GADSqb:focus-within {
   box-shadow: none;
   outline: 2px solid var(--input-focus-border-color);
   outline-offset: 0;
 }
 
-.component-K9LhZN[data-error]:not([data-disabled]) .field-GADSqb:focus-within {
+.component-K9LhZN[data-has-outline][data-error]:not([data-disabled]) .field-GADSqb:focus-within {
   outline-color: var(--input-error-border-color);
 }
 

package/dist/components/Textarea/textarea.d.ts

@@ -6,6 +6,7 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<im
     showValueLength?: boolean;
     view?: "primary" | "secondary";
     block?: boolean;
+    hasOutline?: boolean;
     label?: import("react").ReactNode;
     labelView?: "outer" | "inner";
     hint?: import("react").ReactNode;

package/dist/components/Textarea/textarea.js

@@ -7,7 +7,7 @@ import { Button } from "../Button/index.js";
 import { TypographyText } from "../Typography/text.js";
 import { useAutosize } from "./hooks/use-autosize.js";
 import index_module from "./index.module.js";
-const Textarea = /*#__PURE__*/ forwardRef(({ view = 'primary', block = false, label, labelView = 'outer', hint, error, minRows = 3, maxRows, autosize = false, resize = false, clear = false, value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, id, className, style, fieldClassName, textareaClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
+const Textarea = /*#__PURE__*/ forwardRef(({ view = 'primary', block = false, hasOutline = false, label, labelView = 'outer', hint, error, minRows = 3, maxRows, autosize = false, resize = false, clear = false, value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, id, className, style, fieldClassName, textareaClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
     const generatedId = useId();
     const textareaId = id ?? generatedId;
     const textareaRef = useRef(null);
@@ -96,6 +96,7 @@ const Textarea = /*#__PURE__*/ forwardRef(({ view = 'primary', block = false, la
         },
         "data-view": view,
         "data-block": block || void 0,
+        "data-has-outline": hasOutline || void 0,
         "data-disabled": disabled || void 0,
         "data-read-only": readOnly || void 0,
         "data-error": Boolean(error) || void 0,

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

@@ -28,6 +28,11 @@ export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'v
      * @default false
      */
     block?: boolean;
+    /**
+     * Показывает outline поля при фокусе.
+     * @default false
+     */
+    hasOutline?: boolean;
     /**
      * Название поля. Клик переводит фокус в textarea.
      */

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.11.1",
+    "version": "1.13.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 };