@alfalab/core-components-modal 9.8.1 → 9.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-modal",
-    "version": "9.8.1",
+    "version": "9.8.3",
     "description": "Modal component",
     "keywords": [],
     "license": "MIT",
@@ -11,10 +11,10 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^5.8.3",
-        "@alfalab/core-components-navigation-bar-private": "^0.5.0",
-        "@alfalab/core-components-shared": "^0.13.0",
-        "@alfalab/core-components-mq": "^4.3.0",
+        "@alfalab/core-components-base-modal": "^5.8.4",
+        "@alfalab/core-components-navigation-bar-private": "^0.5.2",
+        "@alfalab/core-components-shared": "^0.14.0",
+        "@alfalab/core-components-mq": "^4.4.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"

package/src/Component.responsive.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { useMatchMedia } from '@alfalab/core-components-mq';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { Content } from './components/content/Component';
 import { Controls } from './components/controls';
@@ -14,13 +13,14 @@ const ModalResponsiveComponent = forwardRef<HTMLDivElement, ModalResponsiveProps
     (
         {
             children,
-            breakpoint = getComponentBreakpoint(),
-            defaultMatchMediaValue = true,
+            breakpoint,
+            client,
+            defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
             ...restProps
         },
         ref,
     ) => {
-        const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
 
         return (
             <Modal ref={ref} {...restProps} view={isDesktop ? 'desktop' : 'mobile'}>

package/src/typings.ts

@@ -43,8 +43,14 @@ export type ModalResponsiveProps = ModalDesktopProps & {
      */
     breakpoint?: number;
 
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };

package/transitions.css

@@ -1,24 +1,24 @@
-/* hash: 19ir4 */
-.modal__appear_1amau,
-.modal__enter_1amau {
+/* hash: 1uc60 */
+.modal__appear_1k9dz,
+.modal__enter_1k9dz {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_1amau,
-.modal__enterActive_1amau {
+.modal__appearActive_1k9dz,
+.modal__enterActive_1k9dz {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_1amau {
+.modal__exit_1k9dz {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_1amau,
-.modal__exitDone_1amau {
+.modal__exitActive_1k9dz,
+.modal__exitDone_1k9dz {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/typings.d.ts

@@ -34,8 +34,13 @@ type ModalResponsiveProps = ModalDesktopProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };

package/esm/layout.module-641cbbcd.js

@@ -1,4 +0,0 @@
-var layoutStyles = {"column":"modal__column_p2276","gap-16":"modal__gap-16_p2276","gap-24":"modal__gap-24_p2276","gap-32":"modal__gap-32_p2276","start":"modal__start_p2276","center":"modal__center_p2276","space-between":"modal__space-between_p2276"};
-require('./components/footer/layout.css')
-
-export { layoutStyles as l };

package/layout.module-f2e7f2ed.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var layoutStyles = {"column":"modal__column_p2276","gap-16":"modal__gap-16_p2276","gap-24":"modal__gap-24_p2276","gap-32":"modal__gap-32_p2276","start":"modal__start_p2276","center":"modal__center_p2276","space-between":"modal__space-between_p2276"};
-require('./components/footer/layout.css')
-
-exports.layoutStyles = layoutStyles;

package/modern/layout.module-34db5b3d.js

@@ -1,4 +0,0 @@
-const layoutStyles = {"column":"modal__column_p2276","gap-16":"modal__gap-16_p2276","gap-24":"modal__gap-24_p2276","gap-32":"modal__gap-32_p2276","start":"modal__start_p2276","center":"modal__center_p2276","space-between":"modal__space-between_p2276"};
-require('./components/footer/layout.css')
-
-export { layoutStyles as l };