@alfalab/core-components-modal 8.1.2 → 9.0.0

package/src/mobile/index.ts

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

package/src/{mobile.module.css → mobile/mobile.module.css}

@@ -1,4 +1,4 @@
-@import './vars.css';
+@import '../vars.css';
 
 .component {
     flex: 1;

package/src/typings.ts

@@ -36,6 +36,11 @@ export type ModalResponsiveProps = ModalDesktopProps & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export type View = 'desktop' | 'mobile';

package/src/vars.css

@@ -3,8 +3,8 @@
 :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-header-background: var(--color-light-modal-bg-primary);
+    --modal-footer-background: var(--color-light-modal-bg-primary);
     --modal-footer-default-gap: var(--gap-m);
 
     /* sizes */
@@ -20,14 +20,14 @@
     --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);
+    --modal-header-highlight-background: var(--color-light-modal-bg-primary);
+    --modal-footer-highlight-background: var(--color-light-modal-bg-primary);
+    --modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
+    --modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
 
     /* desktop */
     --modal-s-header-desktop-content-paddings: var(--gap-s);
-    --modal-s-header-desktop-font-size: 20px;
+    --modal-s-header-desktop-font-size: 22px;
     --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;

package/transitions.css

@@ -1,24 +1,24 @@
-/* hash: glixi */
-.modal__appear_b0sx6,
-.modal__enter_b0sx6 {
+/* hash: i34gk */
+.modal__appear_4gu03,
+.modal__enter_4gu03 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_b0sx6,
-.modal__enterActive_b0sx6 {
+.modal__appearActive_4gu03,
+.modal__enterActive_4gu03 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_b0sx6 {
+.modal__exit_4gu03 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_b0sx6,
-.modal__exitDone_b0sx6 {
+.modal__exitActive_4gu03,
+.modal__exitDone_4gu03 {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/typings.d.ts

@@ -29,6 +29,10 @@ type ModalResponsiveProps = ModalDesktopProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 type View = 'desktop' | 'mobile';
 type TResponsiveModalContext = {

package/Component.desktop.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BaseModalProps } from "@alfalab/core-components-base-modal";
-declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
-    fullscreen?: boolean | undefined;
-    fixedPosition?: boolean | undefined;
-    hasCloser?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-};
-export { ModalDesktop };

package/Component.mobile.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ModalMobileProps } from "./typings";
-declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-};
-export { ModalMobile };

package/cssm/Component.desktop.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BaseModalProps } from "@alfalab/core-components-base-modal";
-declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
-    fullscreen?: boolean | undefined;
-    fixedPosition?: boolean | undefined;
-    hasCloser?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-};
-export { ModalDesktop };

package/cssm/Component.desktop.js

@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var components_content_Component = require('./components/content/Component.js');
-var components_footer_Component = require('./components/footer/Component.js');
-var components_header_Component = require('./components/header/Component.js');
-var Component = require('./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/desktop.module.css');
-require('./components/footer/index.module.css');
-require('./components/footer/layout.module.css');
-require('./components/footer/mobile.module.css');
-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('react-merge-refs');
-require('./desktop.module.css');
-require('./mobile.module.css');
-require('./transitions.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var ModalDesktopComponent = React.forwardRef(function (props, ref) { return (React__default.default.createElement(Component.Modal, tslib.__assign({}, props, { ref: ref, view: 'desktop' }))); });
-var ModalDesktop = Object.assign(ModalDesktopComponent, {
-    Content: components_content_Component.Content,
-    Header: components_header_Component.Header,
-    Footer: components_footer_Component.Footer,
-});
-
-exports.ModalDesktop = ModalDesktop;

package/cssm/Component.mobile.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ModalMobileProps } from "./typings";
-declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-};
-export { ModalMobile };

package/cssm/Component.mobile.js

@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var components_content_Component = require('./components/content/Component.js');
-var components_footer_Component = require('./components/footer/Component.js');
-var components_header_Component = require('./components/header/Component.js');
-var Component = require('./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/desktop.module.css');
-require('./components/footer/index.module.css');
-require('./components/footer/layout.module.css');
-require('./components/footer/mobile.module.css');
-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('react-merge-refs');
-require('./desktop.module.css');
-require('./mobile.module.css');
-require('./transitions.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var ModalMobileComponent = React.forwardRef(function (props, ref) { return (React__default.default.createElement(Component.Modal, tslib.__assign({}, props, { ref: ref, view: 'mobile' }))); });
-var ModalMobile = Object.assign(ModalMobileComponent, {
-    Content: components_content_Component.Content,
-    Header: components_header_Component.Header,
-    Footer: components_footer_Component.Footer,
-});
-
-exports.ModalMobile = ModalMobile;

package/esm/Component.desktop.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BaseModalProps } from "@alfalab/core-components-base-modal";
-declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
-    fullscreen?: boolean | undefined;
-    fixedPosition?: boolean | undefined;
-    hasCloser?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-};
-export { ModalDesktop };

package/esm/Component.mobile.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ModalMobileProps } from "./typings";
-declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-};
-export { ModalMobile };

package/modern/Component.desktop.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BaseModalProps } from "@alfalab/core-components-base-modal";
-declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
-    fullscreen?: boolean | undefined;
-    fixedPosition?: boolean | undefined;
-    hasCloser?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-};
-export { ModalDesktop };

package/modern/Component.mobile.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ModalMobileProps } from "./typings";
-declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps>;
-};
-export { ModalMobile };

package/src/Component.desktop.tsx

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { BaseModalProps } from '@alfalab/core-components-base-modal';
-
-import { Content } from './components/content/Component';
-import { Footer } from './components/footer/Component';
-import { Header } from './components/header/Component';
-import { Modal } from './Component';
-import type { ModalDesktopProps } from './typings';
-
-const ModalDesktopComponent = forwardRef<HTMLDivElement, ModalDesktopProps>((props, ref) => (
-    <Modal {...props} ref={ref} view='desktop' />
-));
-
-export const ModalDesktop = Object.assign(ModalDesktopComponent, {
-    Content,
-    Header,
-    Footer,
-});

package/src/Component.mobile.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import { Content } from './components/content/Component';
-import { Footer } from './components/footer/Component';
-import { Header } from './components/header/Component';
-import { Modal } from './Component';
-import type { ModalMobileProps } from './typings';
-
-const ModalMobileComponent = forwardRef<HTMLDivElement, ModalMobileProps>((props, ref) => (
-    <Modal {...props} ref={ref} view='mobile' />
-));
-
-export const ModalMobile = Object.assign(ModalMobileComponent, {
-    Content,
-    Header,
-    Footer,
-});