@alfalab/core-components-modal 9.1.2 → 9.2.0

package/modern/consts.d.ts

@@ -0,0 +1,12 @@
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    fullscreen: string;
+    500: string;
+    600: string;
+    800: string;
+    1140: string;
+};
+export { SIZE_TO_CLASSNAME_MAP };

package/modern/consts.js

@@ -0,0 +1,13 @@
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-500',
+    m: 'size-600',
+    l: 'size-800',
+    xl: 'size-1140',
+    fullscreen: 'fullscreen',
+    500: 'size-500',
+    600: 'size-600',
+    800: 'size-800',
+    1140: 'size-1140',
+};
+
+export { SIZE_TO_CLASSNAME_MAP };

package/modern/desktop/Component.desktop.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ControlsProps } from "../components/controls/index";
 import { HeaderProps } from "../components/header/Component";
 declare const ModalDesktop: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | 500 | 600 | 800 | 1140 | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;

package/modern/desktop/desktop.css

@@ -1,5 +1,5 @@
-/* hash: ks124 */
-:root {
+/* hash: a5mgv */
+: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 */ /* 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 */ /* 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 */
 } :root {
@@ -35,25 +35,25 @@
     /* mobile */
 
     /* paddings */
-} .modal__wrapper_1m94n {
+} .modal__wrapper_n49hs {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);
-} .modal__component_1m94n {
+} .modal__component_n49hs {
     width: 100%;
     max-width: 100%;
     border-radius: var(--modal-border-radius);
-} .modal__fullscreen_1m94n {
+} .modal__fullscreen_n49hs {
     padding-top: 0;
     padding-bottom: 0
-} .modal__fullscreen_1m94n .modal__component_1m94n {
+} .modal__fullscreen_n49hs .modal__component_n49hs {
         flex: 1;
         border-radius: 0;
-    } .modal__s_1m94n {
+    } .modal__size-500_n49hs {
     width: var(--modal-s-width);
-} .modal__m_1m94n {
+} .modal__size-600_n49hs {
     width: var(--modal-m-width);
-} .modal__l_1m94n {
+} .modal__size-800_n49hs {
     width: var(--modal-l-width);
-} .modal__xl_1m94n {
+} .modal__size-1140_n49hs {
     width: var(--modal-xl-width);
 }

package/modern/layout.module-8b353bc6.js

@@ -0,0 +1,4 @@
+const layoutStyles = {"column":"modal__column_1tj5a","gap-16":"modal__gap-16_1tj5a","gap-24":"modal__gap-24_1tj5a","gap-32":"modal__gap-32_1tj5a","start":"modal__start_1tj5a","center":"modal__center_1tj5a","space-between":"modal__space-between_1tj5a"};
+require('./components/footer/layout.css')
+
+export { layoutStyles as l };

package/modern/mobile/mobile.css

@@ -1,5 +1,5 @@
-/* hash: mkti5 */
-:root {
+/* hash: 11fzb */
+: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 */ /* 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 */ /* 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 */
 } :root {
@@ -27,7 +27,7 @@
     /* mobile */
 
     /* paddings */
-} .modal__component_mug7j {
+} .modal__component_z5it3 {
     flex: 1;
     width: 100%;
     max-width: 600px;

package/modern/transitions.css

@@ -1,24 +1,24 @@
-/* hash: rbdvb */
-.modal__appear_5m9j3,
-.modal__enter_5m9j3 {
+/* hash: yc4rg */
+.modal__appear_1bxuk,
+.modal__enter_1bxuk {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_5m9j3,
-.modal__enterActive_5m9j3 {
+.modal__appearActive_1bxuk,
+.modal__enterActive_1bxuk {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_5m9j3 {
+.modal__exit_1bxuk {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_5m9j3,
-.modal__exitDone_5m9j3 {
+.modal__exitActive_1bxuk,
+.modal__exitDone_1bxuk {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/modern/typings.d.ts

@@ -3,9 +3,10 @@ import { BaseModalProps } from "@alfalab/core-components-base-modal";
 type ModalDesktopProps = BaseModalProps & {
     /**
      * Ширина модального окна
-     * @default "m"
+     * @default 600
+     * @description s, m, l, xl deprecated, используйте вместо них 500, 600, 800, 1140 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen' | 500 | 600 | 800 | 1140;
     /**
      * Растягивает модальное окно на весь экран
      * @deprecated Используйте размер fullscreen

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-modal",
-    "version": "9.1.2",
+    "version": "9.2.0",
     "description": "Modal component",
     "keywords": [],
     "license": "MIT",
@@ -12,7 +12,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-base-modal": "^5.7.2",
-        "@alfalab/core-components-navigation-bar": "^0.8.3",
+        "@alfalab/core-components-navigation-bar": "^0.8.4",
         "@alfalab/core-components-shared": "^0.9.1",
         "@alfalab/core-components-mq": "^4.2.0",
         "classnames": "^2.3.1",

package/src/Component.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames';
 
 import { BaseModal } from '@alfalab/core-components-base-modal';
 
+import { SIZE_TO_CLASSNAME_MAP } from './consts';
 import { ResponsiveContext } from './ResponsiveContext';
 import { ModalDesktopProps, View } from './typings';
 
@@ -14,7 +15,7 @@ import transitions from './transitions.module.css';
 export const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View }>(
     (
         {
-            size = 's',
+            size = 500,
             fixedPosition,
             fullscreen,
             children,
@@ -60,7 +61,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View
                       className: cn(
                           desktopStyles.component,
                           className,
-                          desktopStyles[componentSize],
+                          desktopStyles[SIZE_TO_CLASSNAME_MAP[componentSize]],
                       ),
                       backdropProps: {
                           invisible: componentSize === 'fullscreen',

package/src/ResponsiveContext.tsx

@@ -4,5 +4,5 @@ import type { TResponsiveModalContext } from './typings';
 
 export const ResponsiveContext = React.createContext<TResponsiveModalContext>({
     view: 'desktop',
-    size: 's',
+    size: 500,
 });

package/src/components/content/Component.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
 import { ModalContext } from '../../Context';
 import { ResponsiveContext } from '../../ResponsiveContext';
 import { ContentProps } from '../../typings';
@@ -20,7 +21,7 @@ export const Content: FC<ContentProps> = ({ children, flex, className }) => {
             className={cn(styles.content, className, {
                 [styles.flex]: flex,
                 [styles.withHeader]: hasHeader,
-                [desktopStyles[size]]: view === 'desktop' && size,
+                [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop' && size,
                 [mobileStyles.content]: view === 'mobile',
             })}
             ref={contentRef as Ref<HTMLDivElement>}

package/src/components/content/desktop.module.css

@@ -1,9 +1,9 @@
 @import '../../vars.css';
 
-.s,
-.m,
-.l,
-.xl,
+.size-500,
+.size-600,
+.size-800,
+.size-1140,
 .fullscreen {
     padding: var(--modal-s-content-paddings);
 

package/src/components/footer/Component.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
 import { ModalContext } from '../../Context';
 import { ResponsiveContext } from '../../ResponsiveContext';
 
@@ -59,7 +60,7 @@ export const Footer: FC<FooterProps> = ({ children, className, sticky, layout =
                     [styles.sticky]: sticky,
                     [desktopStyles.footer]: view === 'desktop',
                     [desktopStyles.sticky]: view === 'desktop' && sticky,
-                    [desktopStyles[size]]: view === 'desktop',
+                    [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',
                     [mobileStyles.footer]: view === 'mobile',
                     [mobileStyles.sticky]: view === 'mobile' && sticky,
                 },

package/src/components/footer/desktop.module.css

@@ -13,10 +13,10 @@
     }
 }
 
-.s,
-.m,
-.l,
-.xl,
+.size-500,
+.size-600,
+.size-800,
+.size-1140,
 .fullscreen {
     padding: var(--modal-s-footer-paddings);
 }

package/src/components/header/Component.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import { NavigationBar, NavigationBarProps } from '@alfalab/core-components-navigation-bar';
 import { getDataTestId } from '@alfalab/core-components-shared';
 
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
 import { ModalContext } from '../../Context';
 import { ResponsiveContext } from '../../ResponsiveContext';
 
@@ -47,7 +48,7 @@ export const Header: FC<HeaderProps> = ({
                 [styles.hasContent]: hasContent,
                 [desktopStyles.header]: view === 'desktop',
                 [desktopStyles.sticky]: view === 'desktop' && sticky,
-                [desktopStyles[size]]: view === 'desktop',
+                [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',
                 [mobileStyles.header]: view === 'mobile',
                 [mobileStyles.sticky]: view === 'mobile' && sticky,
             })}

package/src/components/header/desktop.module.css

@@ -10,25 +10,25 @@
     font-family: var(--modal-header-desktop-font-family);
 }
 
-.s .content,
-.m .content {
+.size-500 .content,
+.size-600 .content {
     padding: var(--modal-s-header-desktop-content-paddings);
     font-size: var(--modal-s-header-desktop-font-size);
     line-height: var(--modal-s-header-desktop-line-height);
 }
 
-.l .content,
-.xl .content,
+.size-800 .content,
+.size-1140 .content,
 .fullscreen .content {
     padding: var(--modal-l-header-desktop-content-paddings);
     font-size: var(--modal-l-header-desktop-font-size);
     line-height: var(--modal-l-header-desktop-line-height);
 }
 
-.s,
-.m,
-.l,
-.xl,
+.size-500,
+.size-600,
+.size-800,
+.size-1140,
 .fullscreen {
     padding: var(--modal-s-header-paddings);
 }

package/src/consts.ts

@@ -0,0 +1,11 @@
+export const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-500',
+    m: 'size-600',
+    l: 'size-800',
+    xl: 'size-1140',
+    fullscreen: 'fullscreen',
+    500: 'size-500',
+    600: 'size-600',
+    800: 'size-800',
+    1140: 'size-1140',
+};

package/src/desktop/desktop.module.css

@@ -21,18 +21,18 @@
     }
 }
 
-.s {
+.size-500 {
     width: var(--modal-s-width);
 }
 
-.m {
+.size-600 {
     width: var(--modal-m-width);
 }
 
-.l {
+.size-800 {
     width: var(--modal-l-width);
 }
 
-.xl {
+.size-1140 {
     width: var(--modal-xl-width);
 }

package/src/typings.ts

@@ -5,9 +5,10 @@ import type { BaseModalProps } from '@alfalab/core-components-base-modal';
 export type ModalDesktopProps = BaseModalProps & {
     /**
      * Ширина модального окна
-     * @default "m"
+     * @default 600
+     * @description s, m, l, xl deprecated, используйте вместо них 500, 600, 800, 1140 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen' | 500 | 600 | 800 | 1140;
 
     /**
      * Растягивает модальное окно на весь экран

package/transitions.css

@@ -1,24 +1,24 @@
-/* hash: rbdvb */
-.modal__appear_5m9j3,
-.modal__enter_5m9j3 {
+/* hash: yc4rg */
+.modal__appear_1bxuk,
+.modal__enter_1bxuk {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_5m9j3,
-.modal__enterActive_5m9j3 {
+.modal__appearActive_1bxuk,
+.modal__enterActive_1bxuk {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_5m9j3 {
+.modal__exit_1bxuk {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_5m9j3,
-.modal__exitDone_5m9j3 {
+.modal__exitActive_1bxuk,
+.modal__exitDone_1bxuk {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/typings.d.ts

@@ -3,9 +3,10 @@ import { BaseModalProps } from "@alfalab/core-components-base-modal";
 type ModalDesktopProps = BaseModalProps & {
     /**
      * Ширина модального окна
-     * @default "m"
+     * @default 600
+     * @description s, m, l, xl deprecated, используйте вместо них 500, 600, 800, 1140 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen' | 500 | 600 | 800 | 1140;
     /**
      * Растягивает модальное окно на весь экран
      * @deprecated Используйте размер fullscreen

package/esm/layout.module-18d2351f.js

@@ -1,4 +0,0 @@
-var layoutStyles = {"column":"modal__column_1h82o","gap-16":"modal__gap-16_1h82o","gap-24":"modal__gap-24_1h82o","gap-32":"modal__gap-32_1h82o","start":"modal__start_1h82o","center":"modal__center_1h82o","space-between":"modal__space-between_1h82o"};
-require('./components/footer/layout.css')
-
-export { layoutStyles as l };

package/layout.module-fd9ac366.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var layoutStyles = {"column":"modal__column_1h82o","gap-16":"modal__gap-16_1h82o","gap-24":"modal__gap-24_1h82o","gap-32":"modal__gap-32_1h82o","start":"modal__start_1h82o","center":"modal__center_1h82o","space-between":"modal__space-between_1h82o"};
-require('./components/footer/layout.css')
-
-exports.layoutStyles = layoutStyles;

package/modern/layout.module-8196cddb.js

@@ -1,4 +0,0 @@
-const layoutStyles = {"column":"modal__column_1h82o","gap-16":"modal__gap-16_1h82o","gap-24":"modal__gap-24_1h82o","gap-32":"modal__gap-32_1h82o","start":"modal__start_1h82o","center":"modal__center_1h82o","space-between":"modal__space-between_1h82o"};
-require('./components/footer/layout.css')
-
-export { layoutStyles as l };