@alfalab/core-components-modal 8.0.9 → 8.1.0

package/modern/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1weg4 */
+/* hash: 175a4 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -35,25 +35,25 @@
     /* mobile */
 
     /* paddings */
-} .modal__wrapper_1hgz9 {
+} .modal__wrapper_167uq {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);
-} .modal__component_1hgz9 {
+} .modal__component_167uq {
     width: 100%;
     max-width: 100%;
     border-radius: var(--modal-border-radius);
-} .modal__fullscreen_1hgz9 {
+} .modal__fullscreen_167uq {
     padding-top: 0;
     padding-bottom: 0
-} .modal__fullscreen_1hgz9 .modal__component_1hgz9 {
+} .modal__fullscreen_167uq .modal__component_167uq {
         flex: 1;
         border-radius: 0;
-    } .modal__s_1hgz9 {
+    } .modal__s_167uq {
     width: var(--modal-s-width);
-} .modal__m_1hgz9 {
+} .modal__m_167uq {
     width: var(--modal-m-width);
-} .modal__l_1hgz9 {
+} .modal__l_167uq {
     width: var(--modal-l-width);
-} .modal__xl_1hgz9 {
+} .modal__xl_167uq {
     width: var(--modal-xl-width);
 }

package/modern/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../Component.mobile";
+export { ModalMobileProps } from "../typings";

package/modern/mobile/index.js

@@ -0,0 +1,12 @@
+export { ModalMobile } from '../Component.mobile.js';
+import 'react';
+import '../components/content/Component.js';
+import 'classnames';
+import '../Context.js';
+import '@alfalab/core-components-base-modal/modern';
+import '../ResponsiveContext.js';
+import '../components/footer/Component.js';
+import '../components/header/Component.js';
+import '@alfalab/core-components-navigation-bar/modern';
+import '../Component.js';
+import 'react-merge-refs';

package/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1hmcz */
+/* hash: twr8l */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -27,7 +27,7 @@
     /* mobile */
 
     /* paddings */
-} .modal__component_ztblt {
+} .modal__component_5uq6m {
     flex: 1;
     width: 100%;
     max-width: 600px;

package/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { ModalContext } from "../Context";

package/modern/{shared.js → shared/index.js}

@@ -1,2 +1,2 @@
-export { ModalContext } from './Context.js';
+export { ModalContext } from '../Context.js';
 import '@alfalab/core-components-base-modal/modern';

package/modern/transitions.css

@@ -1,24 +1,24 @@
-/* hash: wftu4 */
-.modal__appear_1kk36,
-.modal__enter_1kk36 {
+/* hash: 8q831 */
+.modal__appear_1gfnf,
+.modal__enter_1gfnf {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_1kk36,
-.modal__enterActive_1kk36 {
+.modal__appearActive_1gfnf,
+.modal__enterActive_1gfnf {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_1kk36 {
+.modal__exit_1gfnf {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_1kk36,
-.modal__exitDone_1kk36 {
+.modal__exitActive_1gfnf,
+.modal__exitDone_1gfnf {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/modern/utils.d.ts

@@ -1,5 +1 @@
-declare function isScrolledToTop(target: HTMLElement): boolean;
-declare function isScrolledToBottom(target: HTMLElement): boolean;
-declare function hasScrollbar(target: HTMLElement): boolean;
-declare const handleContainer: (container: HTMLElement) => () => void;
-export { isScrolledToTop, isScrolledToBottom, hasScrollbar, handleContainer };
+export {};

package/modern/utils.js

@@ -1,72 +1 @@
-function isScrolledToTop(target) {
-    return target.scrollTop === 0;
-}
-function isScrolledToBottom(target) {
-    return target.scrollHeight - target.offsetHeight === target.scrollTop;
-}
-function hasScrollbar(target) {
-    return target.scrollHeight > target.clientHeight;
-}
-const getScrollbarSize = () => {
-    const scrollDiv = document.createElement('div');
-    scrollDiv.style.width = '99px';
-    scrollDiv.style.height = '99px';
-    scrollDiv.style.position = 'absolute';
-    scrollDiv.style.top = '-9999px';
-    scrollDiv.style.overflow = 'scroll';
-    document.body.appendChild(scrollDiv);
-    const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    document.body.removeChild(scrollDiv);
-    return scrollbarSize;
-};
-const isOverflowing = (container) => {
-    if (document.body === container) {
-        return window.innerWidth > document.documentElement.clientWidth;
-    }
-    return container.scrollHeight > container.clientHeight;
-};
-const getPaddingRight = (node) => parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
-const handleContainer = (container) => {
-    const restoreStyle = [];
-    if (isOverflowing(container)) {
-        // Вычисляет размер до применения `overflow hidden` для избежания скачков
-        const scrollbarSize = getScrollbarSize();
-        restoreStyle.push({
-            value: container.style.paddingRight,
-            key: 'padding-right',
-            el: container,
-        });
-        // Вычисляем стили, чтобы получить реальный `padding` c шириной сколлбара
-        // eslint-disable-next-line no-param-reassign
-        container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
-    }
-    const parent = container.parentElement;
-    const scrollContainer = 
-    // TODO: заменить на optional chaining
-    parent &&
-        parent.nodeName === 'HTML' &&
-        window.getComputedStyle(parent).overflowY === 'scroll'
-        ? parent
-        : container;
-    // Блокируем скролл даже если отсутствует скроллбар
-    if (scrollContainer.style.overflow !== 'hidden') {
-        restoreStyle.push({
-            value: scrollContainer.style.overflow,
-            key: 'overflow',
-            el: scrollContainer,
-        });
-    }
-    scrollContainer.style.overflow = 'hidden';
-    return () => {
-        restoreStyle.forEach(({ value, el, key }) => {
-            if (value) {
-                el.style.setProperty(key, value);
-            }
-            else {
-                el.style.removeProperty(key);
-            }
-        });
-    };
-};
 
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop };

package/package.json

@@ -1,42 +1,18 @@
 {
     "name": "@alfalab/core-components-modal",
-    "version": "8.0.9",
+    "version": "8.1.0",
     "description": "Modal component",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "exports": {
-        ".": {
-            "import": "./esm/index.js",
-            "require": "./index.js"
-        },
-        "./mobile": {
-            "import": "./esm/mobile.js",
-            "require": "./mobile.js"
-        },
-        "./desktop": {
-            "import": "./esm/desktop.js",
-            "require": "./desktop.js"
-        },
-        "./shared": {
-            "import": "./esm/shared.js",
-            "require": "./shared.js"
-        },
-        "./esm": "./esm/index.js",
-        "./cssm": "./cssm/index.js",
-        "./modern": "./modern/index.js",
-        "./esm/*": "./esm/*",
-        "./cssm/*": "./cssm/*",
-        "./modern/*": "./modern/*"
-    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^5.4.1",
-        "@alfalab/core-components-navigation-bar": "^0.5.8",
+        "@alfalab/core-components-base-modal": "^5.5.0",
+        "@alfalab/core-components-navigation-bar": "^0.5.9",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "^1.1.0",

package/shared/index.d.ts

@@ -0,0 +1 @@
+export { ModalContext } from "../Context";

package/{shared.js → shared/index.js}

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Context = require('./Context.js');
+var Context = require('../Context.js');
 require('@alfalab/core-components-base-modal');
 
 

package/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/desktop/index.ts

@@ -0,0 +1,2 @@
+export * from '../Component.desktop';
+export { ModalDesktopProps } from '../typings';

package/src/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/src/mobile/index.ts

@@ -0,0 +1,2 @@
+export * from '../Component.mobile';
+export { ModalMobileProps } from '../typings';

package/src/mobile/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/mobile/index.js"
+}

package/src/shared/index.ts

@@ -0,0 +1 @@
+export { ModalContext } from '../Context';

package/src/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/utils.ts

@@ -1,90 +0,0 @@
-export function isScrolledToTop(target: HTMLElement) {
-    return target.scrollTop === 0;
-}
-
-export function isScrolledToBottom(target: HTMLElement) {
-    return target.scrollHeight - target.offsetHeight === target.scrollTop;
-}
-
-export function hasScrollbar(target: HTMLElement) {
-    return target.scrollHeight > target.clientHeight;
-}
-
-const getScrollbarSize = () => {
-    const scrollDiv = document.createElement('div');
-
-    scrollDiv.style.width = '99px';
-    scrollDiv.style.height = '99px';
-    scrollDiv.style.position = 'absolute';
-    scrollDiv.style.top = '-9999px';
-    scrollDiv.style.overflow = 'scroll';
-
-    document.body.appendChild(scrollDiv);
-    const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-
-    document.body.removeChild(scrollDiv);
-
-    return scrollbarSize;
-};
-
-const isOverflowing = (container: Element) => {
-    if (document.body === container) {
-        return window.innerWidth > document.documentElement.clientWidth;
-    }
-
-    return container.scrollHeight > container.clientHeight;
-};
-
-const getPaddingRight = (node: Element) =>
-    parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
-
-export const handleContainer = (container: HTMLElement) => {
-    const restoreStyle: Array<{
-        value: string;
-        key: string;
-        el: HTMLElement;
-    }> = [];
-
-    if (isOverflowing(container)) {
-        // Вычисляет размер до применения `overflow hidden` для избежания скачков
-        const scrollbarSize = getScrollbarSize();
-
-        restoreStyle.push({
-            value: container.style.paddingRight,
-            key: 'padding-right',
-            el: container,
-        });
-        // Вычисляем стили, чтобы получить реальный `padding` c шириной сколлбара
-        // eslint-disable-next-line no-param-reassign
-        container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
-    }
-
-    const parent = container.parentElement;
-    const scrollContainer =
-        // TODO: заменить на optional chaining
-        parent &&
-        parent.nodeName === 'HTML' &&
-        window.getComputedStyle(parent).overflowY === 'scroll'
-            ? parent
-            : container;
-
-    // Блокируем скролл даже если отсутствует скроллбар
-    if (scrollContainer.style.overflow !== 'hidden') {
-        restoreStyle.push({
-            value: scrollContainer.style.overflow,
-            key: 'overflow',
-            el: scrollContainer,
-        });
-    }
-    scrollContainer.style.overflow = 'hidden';
-
-    return () => {
-        restoreStyle.forEach(({ value, el, key }) => {
-            if (value) {
-                el.style.setProperty(key, value);
-            } else {
-                el.style.removeProperty(key);
-            }
-        });
-    };
-};

package/transitions.css

@@ -1,24 +1,24 @@
-/* hash: wftu4 */
-.modal__appear_1kk36,
-.modal__enter_1kk36 {
+/* hash: 8q831 */
+.modal__appear_1gfnf,
+.modal__enter_1gfnf {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_1kk36,
-.modal__enterActive_1kk36 {
+.modal__appearActive_1gfnf,
+.modal__enterActive_1gfnf {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_1kk36 {
+.modal__exit_1gfnf {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_1kk36,
-.modal__exitDone_1kk36 {
+.modal__exitActive_1gfnf,
+.modal__exitDone_1gfnf {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/utils.d.ts

@@ -1,5 +1 @@
-declare function isScrolledToTop(target: HTMLElement): boolean;
-declare function isScrolledToBottom(target: HTMLElement): boolean;
-declare function hasScrollbar(target: HTMLElement): boolean;
-declare const handleContainer: (container: HTMLElement) => () => void;
-export { isScrolledToTop, isScrolledToBottom, hasScrollbar, handleContainer };
+export {};

package/utils.js

@@ -1,80 +1,2 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function isScrolledToTop(target) {
-    return target.scrollTop === 0;
-}
-function isScrolledToBottom(target) {
-    return target.scrollHeight - target.offsetHeight === target.scrollTop;
-}
-function hasScrollbar(target) {
-    return target.scrollHeight > target.clientHeight;
-}
-var getScrollbarSize = function () {
-    var scrollDiv = document.createElement('div');
-    scrollDiv.style.width = '99px';
-    scrollDiv.style.height = '99px';
-    scrollDiv.style.position = 'absolute';
-    scrollDiv.style.top = '-9999px';
-    scrollDiv.style.overflow = 'scroll';
-    document.body.appendChild(scrollDiv);
-    var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    document.body.removeChild(scrollDiv);
-    return scrollbarSize;
-};
-var isOverflowing = function (container) {
-    if (document.body === container) {
-        return window.innerWidth > document.documentElement.clientWidth;
-    }
-    return container.scrollHeight > container.clientHeight;
-};
-var getPaddingRight = function (node) { return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0; };
-var handleContainer = function (container) {
-    var restoreStyle = [];
-    if (isOverflowing(container)) {
-        // Вычисляет размер до применения `overflow hidden` для избежания скачков
-        var scrollbarSize = getScrollbarSize();
-        restoreStyle.push({
-            value: container.style.paddingRight,
-            key: 'padding-right',
-            el: container,
-        });
-        // Вычисляем стили, чтобы получить реальный `padding` c шириной сколлбара
-        // eslint-disable-next-line no-param-reassign
-        container.style.paddingRight = "".concat(getPaddingRight(container) + scrollbarSize, "px");
-    }
-    var parent = container.parentElement;
-    var scrollContainer = 
-    // TODO: заменить на optional chaining
-    parent &&
-        parent.nodeName === 'HTML' &&
-        window.getComputedStyle(parent).overflowY === 'scroll'
-        ? parent
-        : container;
-    // Блокируем скролл даже если отсутствует скроллбар
-    if (scrollContainer.style.overflow !== 'hidden') {
-        restoreStyle.push({
-            value: scrollContainer.style.overflow,
-            key: 'overflow',
-            el: scrollContainer,
-        });
-    }
-    scrollContainer.style.overflow = 'hidden';
-    return function () {
-        restoreStyle.forEach(function (_a) {
-            var value = _a.value, el = _a.el, key = _a.key;
-            if (value) {
-                el.style.setProperty(key, value);
-            }
-            else {
-                el.style.removeProperty(key);
-            }
-        });
-    };
-};
-
-exports.handleContainer = handleContainer;
-exports.hasScrollbar = hasScrollbar;
-exports.isScrolledToBottom = isScrolledToBottom;
-exports.isScrolledToTop = isScrolledToTop;

package/cssm/desktop.d.ts

@@ -1,2 +0,0 @@
-export * from "./Component.desktop";
-export { ModalDesktopProps } from "./typings";

package/cssm/desktop.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component_desktop = require('./Component.desktop.js');
-require('tslib');
-require('react');
-require('./components/content/Component.js');
-require('classnames');
-require('./Context.js');
-require('@alfalab/core-components-base-modal/cssm');
-require('./ResponsiveContext.js');
-require('./components/content/desktop.module.css');
-require('./components/content/index.module.css');
-require('./components/content/mobile.module.css');
-require('./components/footer/Component.js');
-require('./components/footer/desktop.module.css');
-require('./components/footer/index.module.css');
-require('./components/footer/layout.module.css');
-require('./components/footer/mobile.module.css');
-require('./components/header/Component.js');
-require('@alfalab/core-components-navigation-bar/cssm');
-require('./components/header/desktop.module.css');
-require('./components/header/index.module.css');
-require('./components/header/mobile.module.css');
-require('./Component.js');
-require('react-merge-refs');
-require('./desktop.module.css');
-require('./mobile.module.css');
-require('./transitions.module.css');
-
-
-
-exports.ModalDesktop = Component_desktop.ModalDesktop;

package/cssm/mobile.d.ts

@@ -1,2 +0,0 @@
-export * from "./Component.mobile";
-export { ModalMobileProps } from "./typings";

package/cssm/mobile.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component_mobile = require('./Component.mobile.js');
-require('tslib');
-require('react');
-require('./components/content/Component.js');
-require('classnames');
-require('./Context.js');
-require('@alfalab/core-components-base-modal/cssm');
-require('./ResponsiveContext.js');
-require('./components/content/desktop.module.css');
-require('./components/content/index.module.css');
-require('./components/content/mobile.module.css');
-require('./components/footer/Component.js');
-require('./components/footer/desktop.module.css');
-require('./components/footer/index.module.css');
-require('./components/footer/layout.module.css');
-require('./components/footer/mobile.module.css');
-require('./components/header/Component.js');
-require('@alfalab/core-components-navigation-bar/cssm');
-require('./components/header/desktop.module.css');
-require('./components/header/index.module.css');
-require('./components/header/mobile.module.css');
-require('./Component.js');
-require('react-merge-refs');
-require('./desktop.module.css');
-require('./mobile.module.css');
-require('./transitions.module.css');
-
-
-
-exports.ModalMobile = Component_mobile.ModalMobile;

package/cssm/shared.d.ts

@@ -1 +0,0 @@
-export { ModalContext } from "./Context";

package/desktop.d.ts

@@ -1,2 +0,0 @@
-export * from "./Component.desktop";
-export { ModalDesktopProps } from "./typings";

package/esm/desktop.d.ts

@@ -1,2 +0,0 @@
-export * from "./Component.desktop";
-export { ModalDesktopProps } from "./typings";

package/esm/desktop.js

@@ -1,13 +0,0 @@
-export { ModalDesktop } from './Component.desktop.js';
-import 'tslib';
-import 'react';
-import './components/content/Component.js';
-import 'classnames';
-import './Context.js';
-import '@alfalab/core-components-base-modal/esm';
-import './ResponsiveContext.js';
-import './components/footer/Component.js';
-import './components/header/Component.js';
-import '@alfalab/core-components-navigation-bar/esm';
-import './Component.js';
-import 'react-merge-refs';

package/esm/mobile.d.ts

@@ -1,2 +0,0 @@
-export * from "./Component.mobile";
-export { ModalMobileProps } from "./typings";

package/esm/mobile.js

@@ -1,13 +0,0 @@
-export { ModalMobile } from './Component.mobile.js';
-import 'tslib';
-import 'react';
-import './components/content/Component.js';
-import 'classnames';
-import './Context.js';
-import '@alfalab/core-components-base-modal/esm';
-import './ResponsiveContext.js';
-import './components/footer/Component.js';
-import './components/header/Component.js';
-import '@alfalab/core-components-navigation-bar/esm';
-import './Component.js';
-import 'react-merge-refs';

package/esm/shared.d.ts

@@ -1 +0,0 @@
-export { ModalContext } from "./Context";

package/mobile.d.ts

@@ -1,2 +0,0 @@
-export * from "./Component.mobile";
-export { ModalMobileProps } from "./typings";

package/modern/desktop.d.ts

@@ -1,2 +0,0 @@
-export * from "./Component.desktop";
-export { ModalDesktopProps } from "./typings";

package/modern/desktop.js

@@ -1,12 +0,0 @@
-export { ModalDesktop } from './Component.desktop.js';
-import 'react';
-import './components/content/Component.js';
-import 'classnames';
-import './Context.js';
-import '@alfalab/core-components-base-modal/modern';
-import './ResponsiveContext.js';
-import './components/footer/Component.js';
-import './components/header/Component.js';
-import '@alfalab/core-components-navigation-bar/modern';
-import './Component.js';
-import 'react-merge-refs';