@ozen-ui/kit 0.14.0 → 0.15.0

package/__inner__/cjs/components/Modal/Modal.js

@@ -8,6 +8,7 @@ var react_transition_group_1 = require("react-transition-group");
 var useClickOutside_1 = require("../../hooks/useClickOutside");
 var useEventListener_1 = require("../../hooks/useEventListener");
 var useFocusTrap_1 = require("../../hooks/useFocusTrap");
+var useLockBodyScroll_1 = require("../../hooks/useLockBodyScroll");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
@@ -23,7 +24,8 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
     var focusedElement = (0, react_1.useRef)(null);
     var isClickOutSide = (0, react_1.useRef)(null);
     var _h = tslib_1.__read((0, react_1.useState)(false), 2), openState = _h[0], setOpenState = _h[1];
-    var _j = (0, index_1.useModalManager)(modalInnerRef, 1000, openState), isTop = _j.isTop, refsClickOutside = _j.refsClickOutside;
+    var _j = tslib_1.__read((0, react_1.useState)(false), 2), opened = _j[0], setOpened = _j[1];
+    var _k = (0, index_1.useModalManager)(modalInnerRef, 1000, openState), isTop = _k.isTop, refsClickOutside = _k.refsClickOutside;
     (0, useClickOutside_1.useClickOutside)({
         refs: tslib_1.__spreadArray(tslib_1.__spreadArray([
             modalInnerRef
@@ -34,10 +36,13 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
         },
         active: !disableClickOutside,
     });
+    // Блокирует прокрутку основного окна приложения
+    (0, useLockBodyScroll_1.useLockBodyScroll)(opened && !disableScrollLock);
     (0, react_1.useEffect)(function () {
         var _a;
         // Сохраняем фокус активного элемента до момента открытия всплывающего окна
         if (open) {
+            setOpened(true);
             isClickOutSide.current = null;
             focusedElement.current =
                 document.activeElement;
@@ -57,6 +62,7 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
                 document.activeElement === document.body)) {
             (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
+        setOpened(false);
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
     }, [onExitedProp]);
     // Нажатие клавиши {ESC}
@@ -73,6 +79,6 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ classNames: (0, exports.cnModal)({ animation: true }), timeout: 300 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
         react_1.default.createElement(Portal_1.Portal, tslib_1.__assign({}, other, { className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
             !hideBackdrop && (react_1.default.createElement(Backdrop_1.Backdrop, tslib_1.__assign({ zIndex: -1 }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
-            react_1.default.createElement(components_1.ModalConsumer, tslib_1.__assign({}, windowProps, { open: openState && !disableScrollLock, ref: (0, useMultiRef_1.useMultiRef)([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
+            react_1.default.createElement(components_1.ModalConsumer, tslib_1.__assign({}, windowProps, { ref: (0, useMultiRef_1.useMultiRef)([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });
 exports.Modal.displayName = 'Modal';

package/__inner__/cjs/components/Modal/components/ModalConsumer.d.ts

@@ -1,5 +1,3 @@
 import type { FC } from 'react';
 import type { PaperProps } from '../../Paper';
-export declare const ModalConsumer: FC<PaperProps & {
-    open: boolean;
-}>;
+export declare const ModalConsumer: FC<PaperProps>;

package/__inner__/cjs/components/Modal/components/ModalConsumer.js

@@ -3,13 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalConsumer = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var useLockBodyScroll_1 = require("../../../hooks/useLockBodyScroll");
 var Paper_1 = require("../../Paper");
 var index_1 = require("../index");
 exports.ModalConsumer = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, className = _a.className, open = _a.open, other = tslib_1.__rest(_a, ["children", "className", "open"]);
-    // Блокирует прокрутку основного окна приложения
-    (0, useLockBodyScroll_1.useLockBodyScroll)(open);
+    var children = _a.children, className = _a.className, other = tslib_1.__rest(_a, ["children", "className"]);
     return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "s", background: "main" }, other, { className: (0, index_1.cnModal)('Window', [className]), tabIndex: -1, ref: ref }), children));
 });
 exports.ModalConsumer.displayName = 'ModalConsumer';

package/__inner__/cjs/components/Snackbar/components/Snackbar/Snackbar.css

@@ -8,6 +8,9 @@
   z-index: var(--z-index-snackbar);
   margin: var(--space-m);
   gap: var(--space-s);
+
+  /* workaround for a removed scroll bar on the body */
+  border-inline-end: var(--removed-body-scroll-bar-size) solid transparent;
 }
 
   .Snackbar_anchorHorizontal_left {

package/__inner__/cjs/components/ThemeProvider/ThemeProvider.css

@@ -1,4 +1,7 @@
 /* stylelint-disable */
+body {
+  --removed-body-scroll-bar-size: 0;
+}
 .Theme {
   --shadow-outline-focused: var(--color-border-focused) 0 0 0
     var(--border-width-m);

package/__inner__/cjs/hooks/useLockBodyScroll/useLockBodyScroll.d.ts

@@ -1 +1,2 @@
+export declare const FIXED_CLASSNAME = "ScrollLock-fixed";
 export declare function useLockBodyScroll(active?: boolean): void;

package/__inner__/cjs/hooks/useLockBodyScroll/useLockBodyScroll.js

@@ -1,17 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLockBodyScroll = void 0;
+exports.useLockBodyScroll = exports.FIXED_CLASSNAME = void 0;
+var getScrollBarSize_1 = require("../../utils/getScrollBarSize");
 var useIsomorphicEffect_1 = require("../useIsomorphicEffect");
+exports.FIXED_CLASSNAME = 'ScrollLock-fixed';
+var getPaddingRight = function (el) {
+    return parseInt(window.getComputedStyle(el).paddingRight, 10) || 0;
+};
 function useLockBodyScroll(active) {
     if (active === void 0) { active = false; }
     (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
         if (!active) {
             return undefined;
         }
-        var originalStyle = window.getComputedStyle(document.body).overflow;
-        document.body.style.overflow = 'hidden';
+        var restoreStyle = [];
+        // Вычисляем все фиксированные элементы
+        var fixedBlocks = document.querySelectorAll(".".concat(exports.FIXED_CLASSNAME));
+        // Получаем ширину полосы прокрутки
+        var paddingOffset = (0, getScrollBarSize_1.getScrollbarSize)();
+        restoreStyle.push({
+            el: document.body,
+            value: document.body.style.overflow,
+            property: 'overflow',
+        });
+        // Блокируем полосу прокрутки
+        document.body.style.setProperty('overflow', 'hidden');
+        // Если прокрутки у body нет, то ничего не делаем
+        if (paddingOffset) {
+            // Получаем текущий отступ справа у элемента body
+            var originalPaddingRight = getPaddingRight(document.body);
+            restoreStyle.push({
+                el: document.body,
+                value: document.body.style.paddingRight,
+                property: 'padding-right',
+            });
+            // Назначаем body отступ равный ширине полосы прокрутки (учитываем текущий отступ body)
+            document.body.style.setProperty('padding-right', "".concat(originalPaddingRight + paddingOffset, "px"));
+            restoreStyle.push({
+                el: document.body,
+                value: '',
+                property: '--removed-body-scroll-bar-size',
+            });
+            document.body.style.setProperty('--removed-body-scroll-bar-size', "".concat(paddingOffset, "px"));
+            [].forEach.call(fixedBlocks, function (el) {
+                var originalPaddingRight = getPaddingRight(el);
+                restoreStyle.push({
+                    el: el,
+                    value: el.style.paddingRight,
+                    property: 'padding-right',
+                });
+                el.style.setProperty('padding-right', "".concat(originalPaddingRight + paddingOffset, "px"));
+            });
+        }
         return function () {
-            document.body.style.overflow = originalStyle;
+            restoreStyle.forEach(function (_a) {
+                var el = _a.el, value = _a.value, property = _a.property;
+                el.style.setProperty(property, value || '');
+            });
         };
     }, [active]);
 }

package/__inner__/cjs/utils/getScrollBarSize/getScrollbarSize.d.ts

@@ -0,0 +1 @@
+export declare const getScrollbarSize: (el?: HTMLElement) => number;

package/__inner__/cjs/utils/getScrollBarSize/getScrollbarSize.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScrollbarSize = void 0;
+var getScrollbarSize = function (el) {
+    if (el === void 0) { el = document.body; }
+    if (el === document.body) {
+        return window.innerWidth - el.offsetWidth;
+    }
+    return el.offsetWidth - el.scrollWidth;
+};
+exports.getScrollbarSize = getScrollbarSize;

package/__inner__/cjs/utils/getScrollBarSize/index.d.ts

@@ -0,0 +1 @@
+export * from './getScrollbarSize';

package/__inner__/cjs/utils/getScrollBarSize/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./getScrollbarSize"), exports);

package/__inner__/esm/components/Modal/Modal.js

@@ -5,6 +5,7 @@ import { CSSTransition } from 'react-transition-group';
 import { useClickOutside } from '../../hooks/useClickOutside';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { useLockBodyScroll } from '../../hooks/useLockBodyScroll';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
@@ -20,7 +21,8 @@ export var Modal = forwardRef(function (_a, ref) {
     var focusedElement = useRef(null);
     var isClickOutSide = useRef(null);
     var _h = __read(useState(false), 2), openState = _h[0], setOpenState = _h[1];
-    var _j = useModalManager(modalInnerRef, 1000, openState), isTop = _j.isTop, refsClickOutside = _j.refsClickOutside;
+    var _j = __read(useState(false), 2), opened = _j[0], setOpened = _j[1];
+    var _k = useModalManager(modalInnerRef, 1000, openState), isTop = _k.isTop, refsClickOutside = _k.refsClickOutside;
     useClickOutside({
         refs: __spreadArray(__spreadArray([
             modalInnerRef
@@ -31,10 +33,13 @@ export var Modal = forwardRef(function (_a, ref) {
         },
         active: !disableClickOutside,
     });
+    // Блокирует прокрутку основного окна приложения
+    useLockBodyScroll(opened && !disableScrollLock);
     useEffect(function () {
         var _a;
         // Сохраняем фокус активного элемента до момента открытия всплывающего окна
         if (open) {
+            setOpened(true);
             isClickOutSide.current = null;
             focusedElement.current =
                 document.activeElement;
@@ -54,6 +59,7 @@ export var Modal = forwardRef(function (_a, ref) {
                 document.activeElement === document.body)) {
             (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
+        setOpened(false);
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
     }, [onExitedProp]);
     // Нажатие клавиши {ESC}
@@ -70,6 +76,6 @@ export var Modal = forwardRef(function (_a, ref) {
     return (React.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), timeout: 300 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
         React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
             !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1 }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
-            React.createElement(ModalConsumer, __assign({}, windowProps, { open: openState && !disableScrollLock, ref: useMultiRef([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
+            React.createElement(ModalConsumer, __assign({}, windowProps, { ref: useMultiRef([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });
 Modal.displayName = 'Modal';

package/__inner__/esm/components/Modal/components/ModalConsumer.d.ts

@@ -1,5 +1,3 @@
 import type { FC } from 'react';
 import type { PaperProps } from '../../Paper';
-export declare const ModalConsumer: FC<PaperProps & {
-    open: boolean;
-}>;
+export declare const ModalConsumer: FC<PaperProps>;

package/__inner__/esm/components/Modal/components/ModalConsumer.js

@@ -1,12 +1,9 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
-import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import { Paper } from '../../Paper';
 import { cnModal } from '../index';
 export var ModalConsumer = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, open = _a.open, other = __rest(_a, ["children", "className", "open"]);
-    // Блокирует прокрутку основного окна приложения
-    useLockBodyScroll(open);
+    var children = _a.children, className = _a.className, other = __rest(_a, ["children", "className"]);
     return (React.createElement(Paper, __assign({ radius: "s", background: "main" }, other, { className: cnModal('Window', [className]), tabIndex: -1, ref: ref }), children));
 });
 ModalConsumer.displayName = 'ModalConsumer';

package/__inner__/esm/components/Snackbar/components/Snackbar/Snackbar.css

@@ -8,6 +8,9 @@
   z-index: var(--z-index-snackbar);
   margin: var(--space-m);
   gap: var(--space-s);
+
+  /* workaround for a removed scroll bar on the body */
+  border-inline-end: var(--removed-body-scroll-bar-size) solid transparent;
 }
 
   .Snackbar_anchorHorizontal_left {

package/__inner__/esm/components/ThemeProvider/ThemeProvider.css

@@ -1,4 +1,7 @@
 /* stylelint-disable */
+body {
+  --removed-body-scroll-bar-size: 0;
+}
 .Theme {
   --shadow-outline-focused: var(--color-border-focused) 0 0 0
     var(--border-width-m);

package/__inner__/esm/hooks/useLockBodyScroll/useLockBodyScroll.d.ts

@@ -1 +1,2 @@
+export declare const FIXED_CLASSNAME = "ScrollLock-fixed";
 export declare function useLockBodyScroll(active?: boolean): void;

package/__inner__/esm/hooks/useLockBodyScroll/useLockBodyScroll.js

@@ -1,14 +1,59 @@
+import { getScrollbarSize } from '../../utils/getScrollBarSize';
 import { useIsomorphicEffect } from '../useIsomorphicEffect';
+export var FIXED_CLASSNAME = 'ScrollLock-fixed';
+var getPaddingRight = function (el) {
+    return parseInt(window.getComputedStyle(el).paddingRight, 10) || 0;
+};
 export function useLockBodyScroll(active) {
     if (active === void 0) { active = false; }
     useIsomorphicEffect(function () {
         if (!active) {
             return undefined;
         }
-        var originalStyle = window.getComputedStyle(document.body).overflow;
-        document.body.style.overflow = 'hidden';
+        var restoreStyle = [];
+        // Вычисляем все фиксированные элементы
+        var fixedBlocks = document.querySelectorAll(".".concat(FIXED_CLASSNAME));
+        // Получаем ширину полосы прокрутки
+        var paddingOffset = getScrollbarSize();
+        restoreStyle.push({
+            el: document.body,
+            value: document.body.style.overflow,
+            property: 'overflow',
+        });
+        // Блокируем полосу прокрутки
+        document.body.style.setProperty('overflow', 'hidden');
+        // Если прокрутки у body нет, то ничего не делаем
+        if (paddingOffset) {
+            // Получаем текущий отступ справа у элемента body
+            var originalPaddingRight = getPaddingRight(document.body);
+            restoreStyle.push({
+                el: document.body,
+                value: document.body.style.paddingRight,
+                property: 'padding-right',
+            });
+            // Назначаем body отступ равный ширине полосы прокрутки (учитываем текущий отступ body)
+            document.body.style.setProperty('padding-right', "".concat(originalPaddingRight + paddingOffset, "px"));
+            restoreStyle.push({
+                el: document.body,
+                value: '',
+                property: '--removed-body-scroll-bar-size',
+            });
+            document.body.style.setProperty('--removed-body-scroll-bar-size', "".concat(paddingOffset, "px"));
+            [].forEach.call(fixedBlocks, function (el) {
+                var originalPaddingRight = getPaddingRight(el);
+                restoreStyle.push({
+                    el: el,
+                    value: el.style.paddingRight,
+                    property: 'padding-right',
+                });
+                el.style.setProperty('padding-right', "".concat(originalPaddingRight + paddingOffset, "px"));
+            });
+        }
         return function () {
-            document.body.style.overflow = originalStyle;
+            restoreStyle.forEach(function (_a) {
+                var el = _a.el, value = _a.value, property = _a.property;
+                el.style.setProperty(property, value || '');
+            });
         };
     }, [active]);
 }

package/__inner__/esm/utils/getScrollBarSize/getScrollbarSize.d.ts

@@ -0,0 +1 @@
+export declare const getScrollbarSize: (el?: HTMLElement) => number;

package/__inner__/esm/utils/getScrollBarSize/getScrollbarSize.js

@@ -0,0 +1,7 @@
+export var getScrollbarSize = function (el) {
+    if (el === void 0) { el = document.body; }
+    if (el === document.body) {
+        return window.innerWidth - el.offsetWidth;
+    }
+    return el.offsetWidth - el.scrollWidth;
+};

package/__inner__/esm/utils/getScrollBarSize/index.d.ts

@@ -0,0 +1 @@
+export * from './getScrollbarSize';

package/__inner__/esm/utils/getScrollBarSize/index.js

@@ -0,0 +1 @@
+export * from './getScrollbarSize';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "React component library",
   "files": [
     "*"