@alfalab/core-components-modal 7.0.15 → 8.0.0

package/src/utils.ts

@@ -0,0 +1,90 @@
+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/src/vars.css

@@ -0,0 +1,47 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    --modal-border-radius: var(--border-radius-l);
+    --modal-vertical-padding: var(--gap-3xl);
+    --modal-header-background: var(--color-light-bg-primary);
+    --modal-footer-background: var(--color-light-bg-primary);
+    --modal-footer-default-gap: var(--gap-m);
+
+    /* sizes */
+    --modal-s-width: 500px;
+    --modal-m-width: 600px;
+    --modal-l-width: 800px;
+    --modal-xl-width: 1140px;
+
+    /* paddings */
+    --modal-s-header-paddings: 28px 28px 0;
+    --modal-s-content-paddings: var(--gap-3xl) var(--gap-3xl) 0;
+    --modal-s-content-only-bottom-padding: var(--gap-3xl);
+    --modal-s-footer-paddings: var(--gap-xl) var(--gap-3xl) var(--gap-3xl);
+
+    /* scroll */
+    --modal-header-highlight-background: var(--color-light-bg-primary);
+    --modal-footer-highlight-background: var(--color-light-bg-primary);
+    --modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-border-secondary);
+    --modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-secondary);
+
+    /* desktop */
+    --modal-s-header-desktop-content-paddings: var(--gap-s);
+    --modal-s-header-desktop-font-size: 20px;
+    --modal-s-header-desktop-line-height: 26px;
+    --modal-l-header-desktop-content-paddings: 6px var(--gap-s) var(--gap-m);
+    --modal-l-header-desktop-font-size: 30px;
+    --modal-l-header-desktop-line-height: 36px;
+    --modal-header-desktop-font-weight: bold;
+    --modal-header-desktop-font-family: var(--font-family-system);
+
+    /* mobile */
+    --modal-header-mobile-content-paddings: var(--gap-s) var(--gap-xs);
+    --modal-header-mobile-font-size: 18px;
+    --modal-header-mobile-line-height: 24px;
+    --modal-header-mobile-font-family: var(--font-family-system);
+    --modal-header-mobile-font-weight: bold;
+
+    /* paddings */
+    --modal-header-mobile-paddings: var(--gap-2xs) var(--gap-xs);
+}

package/transitions.css

@@ -1,24 +1,24 @@
-/* hash: j3bwr */
-.modal__appear_moxsl,
-.modal__enter_moxsl {
+/* hash: 14o36 */
+.modal__appear_e1pnc,
+.modal__enter_e1pnc {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_moxsl,
-.modal__enterActive_moxsl {
+.modal__appearActive_e1pnc,
+.modal__enterActive_e1pnc {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_moxsl {
+.modal__exit_e1pnc {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_moxsl,
-.modal__exitDone_moxsl {
+.modal__exitActive_e1pnc,
+.modal__exitDone_e1pnc {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/cssm/responsive.d.ts

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

package/cssm/responsive.js

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component_responsive = require('./Component.responsive.js');
-require('tslib');
-require('react');
-require('@alfalab/core-components-navigation-bar/cssm');
-require('@alfalab/hooks');
-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('./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.ModalResponsive = Component_responsive.ModalResponsive;

package/esm/responsive.d.ts

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

package/esm/responsive.js

@@ -1,14 +0,0 @@
-export { ModalResponsive } from './Component.responsive.js';
-import 'tslib';
-import 'react';
-import '@alfalab/core-components-navigation-bar/esm';
-import '@alfalab/hooks';
-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 './Component.js';
-import 'react-merge-refs';

package/modern/responsive.d.ts

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

package/modern/responsive.js

@@ -1,13 +0,0 @@
-export { ModalResponsive } from './Component.responsive.js';
-import 'react';
-import '@alfalab/core-components-navigation-bar/modern';
-import '@alfalab/hooks';
-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 './Component.js';
-import 'react-merge-refs';

package/responsive.d.ts

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

package/responsive.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component_responsive = require('./Component.responsive.js');
-require('tslib');
-require('react');
-require('@alfalab/core-components-navigation-bar');
-require('@alfalab/hooks');
-require('./components/content/Component.js');
-require('classnames');
-require('./Context.js');
-require('@alfalab/core-components-base-modal');
-require('./ResponsiveContext.js');
-require('./components/footer/Component.js');
-require('./components/header/Component.js');
-require('./Component.js');
-require('react-merge-refs');
-
-
-
-exports.ModalResponsive = Component_responsive.ModalResponsive;