@alfalab/core-components 48.11.0-beta.1 → 48.11.0-beta.2

package/universal-modal/moderncssm/desktop/components/side-modal/styles/side-modal.module.css

@@ -1,45 +0,0 @@
-/* */
-
-.wrapper {
-    overflow-x: hidden;
-}
-
-.wrapperAlignStart {
-    align-items: start;
-}
-
-.wrapperAlignEnd {
-    align-items: end;
-}
-
-.wrapperJustifyCenter {
-    justify-content: center;
-}
-
-.wrapperJustifyEnd {
-    justify-content: end;
-}
-
-.component {
-    min-width: 500px;
-    min-height: 264px;
-    height: 100%;
-    border-radius: var(--border-radius-24);
-    overflow-x: hidden;
-    margin: unset;
-
-    /*
-        Применяем аппаратное ускорение с помощью will-change и backface-visibility
-        Также в классах анимации добавлен translateZ(0)
-    */
-    will-change: transform;
-    backface-visibility: hidden
-}
-
-.component.overlayHidden {
-        box-shadow: var(--shadow-m);
-    }
-
-.component .container {
-        height: 100%;
-    }

package/universal-modal/moderncssm/desktop/components/side-modal/styles/transitions/transitions.module.css

@@ -1,332 +0,0 @@
-:root {
-    --timeout: 200ms;
-}
-
-/* TODO Добавить плагин для переменных */
-
-/* prettier-ignore */
-
-.enterLeft-0 {
-        transform: translateX(calc(-100% - 0px)) translateZ(0);
-    }
-
-.enterLeft-2 {
-        transform: translateX(calc(-100% - 2px)) translateZ(0);
-    }
-
-.enterLeft-4 {
-        transform: translateX(calc(-100% - 4px)) translateZ(0);
-    }
-
-.enterLeft-8 {
-        transform: translateX(calc(-100% - 8px)) translateZ(0);
-    }
-
-.enterLeft-12 {
-        transform: translateX(calc(-100% - 12px)) translateZ(0);
-    }
-
-.enterLeft-16 {
-        transform: translateX(calc(-100% - 16px)) translateZ(0);
-    }
-
-.enterLeft-20 {
-        transform: translateX(calc(-100% - 20px)) translateZ(0);
-    }
-
-.enterLeft-24 {
-        transform: translateX(calc(-100% - 24px)) translateZ(0);
-    }
-
-.enterLeft-32 {
-        transform: translateX(calc(-100% - 32px)) translateZ(0);
-    }
-
-.enterLeft-40 {
-        transform: translateX(calc(-100% - 40px)) translateZ(0);
-    }
-
-.enterLeft-48 {
-        transform: translateX(calc(-100% - 48px)) translateZ(0);
-    }
-
-.enterLeft-56 {
-        transform: translateX(calc(-100% - 56px)) translateZ(0);
-    }
-
-.enterLeft-64 {
-        transform: translateX(calc(-100% - 64px)) translateZ(0);
-    }
-
-.enterLeft-72 {
-        transform: translateX(calc(-100% - 72px)) translateZ(0);
-    }
-
-.enterLeft-80 {
-        transform: translateX(calc(-100% - 80px)) translateZ(0);
-    }
-
-.enterLeft-96 {
-        transform: translateX(calc(-100% - 96px)) translateZ(0);
-    }
-
-.enterLeft-128 {
-        transform: translateX(calc(-100% - 128px)) translateZ(0);
-    }
-
-/* prettier-ignore */
-
-.enterRight-0 {
-        transform: translateX(calc(100% + 0px)) translateZ(0);
-    }
-
-.enterRight-2 {
-        transform: translateX(calc(100% + 2px)) translateZ(0);
-    }
-
-.enterRight-4 {
-        transform: translateX(calc(100% + 4px)) translateZ(0);
-    }
-
-.enterRight-8 {
-        transform: translateX(calc(100% + 8px)) translateZ(0);
-    }
-
-.enterRight-12 {
-        transform: translateX(calc(100% + 12px)) translateZ(0);
-    }
-
-.enterRight-16 {
-        transform: translateX(calc(100% + 16px)) translateZ(0);
-    }
-
-.enterRight-20 {
-        transform: translateX(calc(100% + 20px)) translateZ(0);
-    }
-
-.enterRight-24 {
-        transform: translateX(calc(100% + 24px)) translateZ(0);
-    }
-
-.enterRight-32 {
-        transform: translateX(calc(100% + 32px)) translateZ(0);
-    }
-
-.enterRight-40 {
-        transform: translateX(calc(100% + 40px)) translateZ(0);
-    }
-
-.enterRight-48 {
-        transform: translateX(calc(100% + 48px)) translateZ(0);
-    }
-
-.enterRight-56 {
-        transform: translateX(calc(100% + 56px)) translateZ(0);
-    }
-
-.enterRight-64 {
-        transform: translateX(calc(100% + 64px)) translateZ(0);
-    }
-
-.enterRight-72 {
-        transform: translateX(calc(100% + 72px)) translateZ(0);
-    }
-
-.enterRight-80 {
-        transform: translateX(calc(100% + 80px)) translateZ(0);
-    }
-
-.enterRight-96 {
-        transform: translateX(calc(100% + 96px)) translateZ(0);
-    }
-
-.enterRight-128 {
-        transform: translateX(calc(100% + 128px)) translateZ(0);
-    }
-
-.enterActive {
-    transform: translateX(0);
-    transition: transform var(--timeout) ease-in;
-}
-
-.enterDone {
-    transform: translateX(0);
-}
-
-.exit {
-    transform: translateX(0);
-}
-
-/* prettier-ignore */
-
-.exitActiveLeft-0 {
-        transform: translateX(calc(-100% - 0px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-2 {
-        transform: translateX(calc(-100% - 2px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-4 {
-        transform: translateX(calc(-100% - 4px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-8 {
-        transform: translateX(calc(-100% - 8px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-12 {
-        transform: translateX(calc(-100% - 12px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-16 {
-        transform: translateX(calc(-100% - 16px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-20 {
-        transform: translateX(calc(-100% - 20px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-24 {
-        transform: translateX(calc(-100% - 24px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-32 {
-        transform: translateX(calc(-100% - 32px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-40 {
-        transform: translateX(calc(-100% - 40px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-48 {
-        transform: translateX(calc(-100% - 48px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-56 {
-        transform: translateX(calc(-100% - 56px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-64 {
-        transform: translateX(calc(-100% - 64px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-72 {
-        transform: translateX(calc(-100% - 72px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-80 {
-        transform: translateX(calc(-100% - 80px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-96 {
-        transform: translateX(calc(-100% - 96px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveLeft-128 {
-        transform: translateX(calc(-100% - 128px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-/* prettier-ignore */
-
-.exitActiveRight-0 {
-        transform: translateX(calc(100% + 0px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-2 {
-        transform: translateX(calc(100% + 2px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-4 {
-        transform: translateX(calc(100% + 4px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-8 {
-        transform: translateX(calc(100% + 8px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-12 {
-        transform: translateX(calc(100% + 12px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-16 {
-        transform: translateX(calc(100% + 16px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-20 {
-        transform: translateX(calc(100% + 20px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-24 {
-        transform: translateX(calc(100% + 24px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-32 {
-        transform: translateX(calc(100% + 32px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-40 {
-        transform: translateX(calc(100% + 40px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-48 {
-        transform: translateX(calc(100% + 48px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-56 {
-        transform: translateX(calc(100% + 56px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-64 {
-        transform: translateX(calc(100% + 64px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-72 {
-        transform: translateX(calc(100% + 72px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-80 {
-        transform: translateX(calc(100% + 80px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-96 {
-        transform: translateX(calc(100% + 96px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }
-
-.exitActiveRight-128 {
-        transform: translateX(calc(100% + 128px)) translateZ(0);
-        transition: transform var(--timeout) ease-out;
-    }

package/universal-modal/moderncssm/desktop/constants/index.d.ts

@@ -1,3 +0,0 @@
-declare const SCROLLBAR_DEFAULT_GAP = 16;
-declare const FOOTER_MEDIUM_BREAKPOINT = 800;
-export { SCROLLBAR_DEFAULT_GAP, FOOTER_MEDIUM_BREAKPOINT };

package/universal-modal/moderncssm/desktop/constants/index.js

@@ -1,4 +0,0 @@
-const SCROLLBAR_DEFAULT_GAP = 16;
-const FOOTER_MEDIUM_BREAKPOINT = 800;
-
-export { FOOTER_MEDIUM_BREAKPOINT, SCROLLBAR_DEFAULT_GAP };

package/universal-modal/moderncssm/desktop/hooks/useModalHeight.d.ts

@@ -1,4 +0,0 @@
-import { MutableRefObject } from 'react';
-/** Устанавливает необходимую высоту модального окна */
-declare const useModalHeight: (height: number | 'fullHeight', open: boolean, componentRef: MutableRefObject<HTMLDivElement | null>) => void;
-export { useModalHeight };

package/universal-modal/moderncssm/desktop/hooks/useModalHeight.js

@@ -1,29 +0,0 @@
-import { useEffect } from 'react';
-import { isClient } from '../../../../shared/moderncssm';
-
-/** Устанавливает необходимую высоту модального окна */
-const useModalHeight = (height, open, componentRef) => {
-    const ref = componentRef;
-    useEffect(() => {
-        if (ref.current) {
-            let viewportHeight = 0;
-            let computedMarginTop = 0;
-            let computedMarginBottom = 0;
-            if (isClient()) {
-                viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-                // рассчитываем margin'ы для дальнейшего вычитания из высоты viewport'а
-                computedMarginTop = parseFloat(window.getComputedStyle(ref.current).marginTop);
-                computedMarginBottom = parseFloat(window.getComputedStyle(ref.current).marginBottom);
-            }
-            if (height > viewportHeight || height === 'fullHeight') {
-                ref.current.style.height = `calc(100% - ${computedMarginTop}px - ${computedMarginBottom}px)`;
-                return;
-            }
-            if (!Number.isNaN(parseFloat(String(height)))) {
-                ref.current.style.height = `${parseFloat(String(height))}px`;
-            }
-        }
-    }, [open, height, ref]);
-};
-
-export { useModalHeight };

package/universal-modal/moderncssm/desktop/hooks/useModalWheel.d.ts

@@ -1,6 +0,0 @@
-import { WheelEvent } from 'react';
-declare const useModalWheel: (overlay: boolean) => {
-    wheelDeltaY: number;
-    handleWheel: (e: WheelEvent<HTMLElement>) => void;
-};
-export { useModalWheel };

package/universal-modal/moderncssm/desktop/hooks/useModalWheel.js

@@ -1,15 +0,0 @@
-import { useState } from 'react';
-
-const useModalWheel = (overlay) => {
-    const [wheelDeltaY, setWheelDeltaY] = useState(0);
-    // передаем e.deltaY от события на элементе dialog компонента base-modal
-    const handleWheel = (e) => {
-        const target = e.target;
-        if (target.getAttribute('role') === 'dialog' && overlay) {
-            setWheelDeltaY(e.deltaY);
-        }
-    };
-    return { wheelDeltaY, handleWheel };
-};
-
-export { useModalWheel };

package/universal-modal/moderncssm/desktop/hooks/useModalWidth.d.ts

@@ -1,4 +0,0 @@
-import { MutableRefObject } from 'react';
-/** Устанавливает необходимую ширину модального окна */
-declare const useModalWidth: (width: number | 'fullWidth', open: boolean, componentRef: MutableRefObject<HTMLDivElement | null>) => void;
-export { useModalWidth };

package/universal-modal/moderncssm/desktop/hooks/useModalWidth.js

@@ -1,37 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { isClient } from '../../../../shared/moderncssm';
-import { ResponsiveContext } from '../../ResponsiveContext.js';
-
-/** Устанавливает необходимую ширину модального окна */
-const useModalWidth = (width, open, componentRef) => {
-    const ref = componentRef;
-    const context = useContext(ResponsiveContext);
-    const { setModalWidth } = context || {};
-    useEffect(() => {
-        if (ref.current) {
-            let viewportWidth = 0;
-            let computedMarginLeft = 0;
-            let computedMarginRight = 0;
-            if (isClient()) {
-                viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-                computedMarginLeft = parseFloat(window.getComputedStyle(ref.current).marginLeft);
-                computedMarginRight = parseFloat(window.getComputedStyle(ref.current).marginRight);
-            }
-            if (width > viewportWidth || width === 'fullWidth') {
-                ref.current.style.width = `calc(100% - ${computedMarginLeft}px - ${computedMarginRight}px)`;
-                if (setModalWidth) {
-                    setModalWidth(viewportWidth - computedMarginLeft - computedMarginRight);
-                }
-                return;
-            }
-            if (!Number.isNaN(parseFloat(String(width)))) {
-                ref.current.style.width = `${parseFloat(String(width))}px`;
-                if (setModalWidth) {
-                    setModalWidth(width);
-                }
-            }
-        }
-    }, [open, width, ref, setModalWidth, context]);
-};
-
-export { useModalWidth };

package/universal-modal/moderncssm/desktop/index.d.ts

@@ -1,10 +0,0 @@
-export { UniversalModalDesktop, UniversalModalDesktopComponent } from "./Component.desktop";
-export type { UniversalModalDesktopProps } from "./types/props";
-export { HeaderDesktop } from "../components/header/index";
-export type { HeaderDesktopProps } from "../components/header/index";
-export { FooterDesktop } from "../components/footer/index";
-export type { FooterDesktopProps } from "../components/footer/index";
-export { ContentDesktop } from "../components/content/index";
-export type { ContentDesktopProps } from "../components/content/index";
-export { CrossButtonDesktop } from "./components/buttons/cross-button/index";
-export { ArrowButtonDesktop } from "./components/buttons/arrow-button/index";

package/universal-modal/moderncssm/desktop/index.js

@@ -1,53 +0,0 @@
-export { UniversalModalDesktop, UniversalModalDesktopComponent } from './Component.desktop.js';
-import 'react';
-import '../../../mq/moderncssm';
-export { HeaderDesktop } from '../components/header/desktop/Component.desktop.js';
-import 'classnames';
-import '../../../navigation-bar-private/moderncssm';
-import '../../../shared/moderncssm';
-import '../../../base-modal/moderncssm';
-import '../components/header/base-header/index.module.css';
-import '../components/header/mobile/mobile.module.css';
-export { FooterDesktop } from '../components/footer/desktop/Component.desktop.js';
-import '../components/footer/base-footer/index.module.css';
-import '../components/footer/mobile/layout.mobile.module.css';
-import '../components/footer/mobile/mobile.module.css';
-export { ContentDesktop } from '../components/content/desktop/Component.desktop.js';
-import '../components/content/base-content/index.module.css';
-import '../components/content/mobile/mobile.module.css';
-export { CrossButtonDesktop } from './components/buttons/cross-button/cross-button.js';
-export { ArrowButtonDesktop } from './components/buttons/arrow-button/arrow-button.js';
-import '../ResponsiveContext.js';
-import './components/center-modal/center-modal.js';
-import './hooks/useModalHeight.js';
-import './hooks/useModalWheel.js';
-import './hooks/useModalWidth.js';
-import './utils/get-full-size-modal-transitions.js';
-import './styles/transitions/full-size-backdrop-transitions.module.css';
-import './styles/transitions/full-size-vertical-bottom-transitions.module.css';
-import './styles/transitions/full-size-vertical-center-transitions.module.css';
-import './styles/transitions/full-size-vertical-top-transitions.module.css';
-import './utils/get-margins.js';
-import './components/base-universal-modal-content/base-universal-modal-content.js';
-import '../../../scrollbar/moderncssm';
-import './constants/index.js';
-import './components/base-universal-modal-content/base-universal-modal-content.module.css';
-import './components/center-modal/styles/index.module.css';
-import './components/center-modal/styles/transitions/safari-transitions.module.css';
-import './components/center-modal/styles/transitions/transitions.module.css';
-import './components/side-modal/side-modal.js';
-import './components/side-modal/get-default-transition-props.js';
-import './components/side-modal/styles/transitions/transitions.module.css';
-import './components/side-modal/styles/index.module.css';
-import '../components/content/base-content/base-content.js';
-import '../Context.js';
-import '../components/footer/base-footer/base-footer.js';
-import '../components/footer/desktop/desktop.module.css';
-import '../components/footer/desktop/layout.module.css';
-import '../components/header/desktop/desktop.module.css';
-import '../../../button/moderncssm/desktop';
-import '@alfalab/icons-glyph/CrossMediumMIcon';
-import './components/buttons/cross-button/cross-button.module.css';
-import '../../../typography/moderncssm';
-import '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
-import './components/buttons/arrow-button/arrow-button.module.css';