@alfalab/core-components-modal 8.1.3 → 9.0.1

package/modern/mobile/Component.mobile.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
 import { Modal } from '../Component.js';
 import { Content } from '../components/content/Component.js';
+import { Controls } from '../components/controls/Component.js';
 import { Footer } from '../components/footer/Component.js';
 import { Header } from '../components/header/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-base-modal/modern';
 import '../ResponsiveContext.js';
+import '../getDataTestId-a8aae71a.js';
+import '@alfalab/hooks';
 import '../Context.js';
+import '../layout.module-bff97609.js';
 import '@alfalab/core-components-navigation-bar/modern';
 
 const ModalMobileComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'mobile' })));
@@ -15,6 +19,7 @@ const ModalMobile = Object.assign(ModalMobileComponent, {
     Content,
     Header,
     Footer,
+    Controls: Controls,
 });
 
 export { ModalMobile };

package/modern/mobile/index.js

@@ -6,7 +6,11 @@ import 'classnames';
 import '@alfalab/core-components-base-modal/modern';
 import '../ResponsiveContext.js';
 import '../components/content/Component.js';
+import '../getDataTestId-a8aae71a.js';
+import '@alfalab/hooks';
 import '../Context.js';
+import '../components/controls/Component.js';
+import '../layout.module-bff97609.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '@alfalab/core-components-navigation-bar/modern';

package/modern/mobile/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1kjid */
+/* hash: 1w9p2 */
 :root {
 } /* 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 */
@@ -27,7 +27,7 @@
     /* mobile */
 
     /* paddings */
-} .modal__component_o9513 {
+} .modal__component_1odq1 {
     flex: 1;
     width: 100%;
     max-width: 600px;

package/modern/transitions.css

@@ -1,24 +1,24 @@
-/* hash: 1sdt2 */
-.modal__appear_4lmkq,
-.modal__enter_4lmkq {
+/* hash: 1gnmd */
+.modal__appear_24xq3,
+.modal__enter_24xq3 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_4lmkq,
-.modal__enterActive_4lmkq {
+.modal__appearActive_24xq3,
+.modal__enterActive_24xq3 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_4lmkq {
+.modal__exit_24xq3 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_4lmkq,
-.modal__exitDone_4lmkq {
+.modal__exitActive_24xq3,
+.modal__exitDone_24xq3 {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/modern/typings.d.ts

@@ -29,11 +29,16 @@ type ModalResponsiveProps = ModalDesktopProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 type View = 'desktop' | 'mobile';
 type TResponsiveModalContext = {
     view: View;
     size: NonNullable<ModalDesktopProps['size']>;
+    dataTestId?: string;
 };
 type ContentProps = {
     /**

package/modern/useCustomWebkitScrollbar-a216f694.d.ts

@@ -0,0 +1,2 @@
+declare function useCustomWebkitScrollbar(): boolean;
+export { useCustomWebkitScrollbar };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-modal",
-    "version": "8.1.3",
+    "version": "9.0.1",
     "description": "Modal component",
     "keywords": [],
     "license": "MIT",
@@ -11,9 +11,9 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^5.6.0",
-        "@alfalab/core-components-navigation-bar": "^0.6.0",
-        "@alfalab/hooks": "^1.13.0",
+        "@alfalab/core-components-base-modal": "^5.7.1",
+        "@alfalab/core-components-navigation-bar": "^0.8.0",
+        "@alfalab/core-components-mq": "^4.2.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"

package/src/Component.responsive.tsx

@@ -1,27 +1,20 @@
 import React, { forwardRef } from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { BaseModalProps } from '@alfalab/core-components-base-modal';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '@alfalab/core-components-mq';
 
 import { Content } from './components/content/Component';
+import { Controls } from './components/controls';
 import { Footer } from './components/footer/Component';
 import { Header } from './components/header/Component';
 import { Modal } from './Component';
-import type { ModalResponsiveProps, View } from './typings';
+import type { ModalResponsiveProps } from './typings';
 
 const ModalResponsiveComponent = forwardRef<HTMLDivElement, ModalResponsiveProps>(
-    ({ children, breakpoint = 1024, ...restProps }, ref) => {
-        const [view] = useMedia<View>(
-            [
-                ['mobile', `(max-width: ${breakpoint - 1}px)`],
-                ['desktop', `(min-width: ${breakpoint}px)`],
-            ],
-            'desktop',
-        );
+    ({ children, breakpoint = 1024, defaultMatchMediaValue = true, ...restProps }, ref) => {
+        const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
 
         return (
-            <Modal ref={ref} {...restProps} view={view}>
+            <Modal ref={ref} {...restProps} view={isDesktop ? 'desktop' : 'mobile'}>
                 {children}
             </Modal>
         );
@@ -32,4 +25,5 @@ export const ModalResponsive = Object.assign(ModalResponsiveComponent, {
     Header,
     Content,
     Footer,
+    Controls,
 });

package/src/Component.tsx

@@ -22,6 +22,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View
             wrapperClassName,
             transitionProps = {},
             view,
+            dataTestId,
             ...restProps
         },
         ref,
@@ -81,11 +82,14 @@ export const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View
                       className: cn(className, mobileStyles.component),
                   };
 
-        const contextValue = useMemo(() => ({ size: componentSize, view }), [componentSize, view]);
+        const contextValue = useMemo(
+            () => ({ size: componentSize, view, dataTestId }),
+            [componentSize, view, dataTestId],
+        );
 
         return (
             <ResponsiveContext.Provider value={contextValue}>
-                <BaseModal {...restProps} {...baseModalProps}>
+                <BaseModal {...restProps} {...baseModalProps} dataTestId={dataTestId}>
                     {children}
                 </BaseModal>
             </ResponsiveContext.Provider>

package/src/components/content/Component.tsx

@@ -1,6 +1,8 @@
 import React, { FC, Ref, useContext } from 'react';
 import cn from 'classnames';
 
+import { getDataTestId } from '@alfalab/core-components-shared';
+
 import { ModalContext } from '../../Context';
 import { ResponsiveContext } from '../../ResponsiveContext';
 import { ContentProps } from '../../typings';
@@ -11,7 +13,7 @@ import mobileStyles from './mobile.module.css';
 
 export const Content: FC<ContentProps> = ({ children, flex, className }) => {
     const { contentRef, hasHeader } = useContext(ModalContext);
-    const { size, view } = useContext(ResponsiveContext);
+    const { size, view, dataTestId } = useContext(ResponsiveContext);
 
     return (
         <div
@@ -22,6 +24,7 @@ export const Content: FC<ContentProps> = ({ children, flex, className }) => {
                 [mobileStyles.content]: view === 'mobile',
             })}
             ref={contentRef as Ref<HTMLDivElement>}
+            data-test-id={getDataTestId(dataTestId, 'content')}
         >
             {children}
         </div>

package/src/components/controls/Component.tsx

@@ -0,0 +1,75 @@
+import React, { ReactNode, useContext } from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { ResponsiveContext } from '../../ResponsiveContext';
+
+import layoutStyles from '../footer/layout.module.css';
+import styles from './index.module.css';
+
+export interface ControlsProps {
+    /**
+     * Основной слот
+     */
+    primary?: ReactNode;
+
+    /**
+     * Дополнительный слот
+     */
+    secondary?: ReactNode;
+
+    /**
+     * Выравнивание элементов футера
+     * @default start
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+
+    /**
+     * Выравнивание элементов футера (мобильный view)
+     * @default start
+     */
+    mobileLayout?: 'start' | 'center' | 'space-between' | 'column';
+
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+}
+
+export const Controls: React.FC<ControlsProps> = ({
+    primary,
+    secondary,
+    gap = 16,
+    layout: layoutProp = 'start',
+    mobileLayout = layoutProp,
+}) => {
+    const { view, dataTestId } = useContext(ResponsiveContext);
+
+    const layout = view === 'mobile' ? mobileLayout : layoutProp;
+
+    const shouldReverse = view === 'mobile' && layout !== 'column';
+
+    return (
+        <div
+            data-test-id={getDataTestId(dataTestId, 'controls')}
+            className={cn(
+                styles.component,
+                layoutStyles[layout],
+                gap && layoutStyles[`gap-${gap}`],
+            )}
+        >
+            {shouldReverse ? (
+                <React.Fragment>
+                    {secondary}
+                    {primary}
+                </React.Fragment>
+            ) : (
+                <React.Fragment>
+                    {primary}
+                    {secondary}
+                </React.Fragment>
+            )}
+        </div>
+    );
+};

package/src/components/controls/index.module.css

@@ -0,0 +1,3 @@
+.component {
+    width: 100%;
+}

package/src/components/controls/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/components/footer/Component.tsx

@@ -1,6 +1,8 @@
 import React, { FC, ReactNode, useContext, useEffect } from 'react';
 import cn from 'classnames';
 
+import { getDataTestId } from '@alfalab/core-components-shared';
+
 import { ModalContext } from '../../Context';
 import { ResponsiveContext } from '../../ResponsiveContext';
 
@@ -38,7 +40,7 @@ export type FooterProps = {
 
 export const Footer: FC<FooterProps> = ({ children, className, sticky, layout = 'start', gap }) => {
     const { footerHighlighted, setHasFooter } = useContext(ModalContext);
-    const { size, view } = useContext(ResponsiveContext);
+    const { size, view, dataTestId } = useContext(ResponsiveContext);
 
     useEffect(() => {
         setHasFooter(true);
@@ -46,6 +48,7 @@ export const Footer: FC<FooterProps> = ({ children, className, sticky, layout =
 
     return (
         <div
+            data-test-id={getDataTestId(dataTestId, 'footer')}
             className={cn(
                 styles.footer,
                 className,
@@ -59,7 +62,6 @@ export const Footer: FC<FooterProps> = ({ children, className, sticky, layout =
                     [desktopStyles[size]]: view === 'desktop',
                     [mobileStyles.footer]: view === 'mobile',
                     [mobileStyles.sticky]: view === 'mobile' && sticky,
-                    [layoutStyles[`${layout}-mobile`]]: view === 'mobile',
                 },
             )}
         >

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

@@ -4,44 +4,23 @@
     display: flex;
     flex-direction: column;
 
-    & > * {
+    & > *:not(:last-child):not(:only-child) {
         margin-bottom: var(--modal-footer-default-gap);
     }
 
-    & > *:last-child,
-    & > *:only-child {
-        margin-bottom: 0;
-    }
-
-    &.gap-16 > * {
+    &.gap-16 > *:not(:last-child):not(:only-child) {
         margin-bottom: var(--gap-m);
     }
 
-    &.gap-24 > * {
+    &.gap-24 > *:not(:last-child):not(:only-child) {
         margin-bottom: var(--gap-xl);
     }
 
-    &.gap-32 > * {
+    &.gap-32 > *:not(:last-child):not(:only-child) {
         margin-bottom: var(--gap-2xl);
     }
 }
 
-.column-mobile {
-    flex-direction: column-reverse;
-
-    & > * {
-        margin-bottom: 0;
-    }
-
-    & > *:last-child {
-        margin-bottom: var(--modal-footer-default-gap);
-    }
-
-    & > *:only-child {
-        margin-bottom: 0;
-    }
-}
-
 .start {
     justify-content: flex-start;
 }
@@ -63,24 +42,19 @@
 .space-between {
     display: flex;
 
-    & > * {
+    & > *:not(:last-child):not(:only-child) {
         margin-right: var(--modal-footer-default-gap);
     }
 
-    & > *:last-child,
-    & > *:only-child {
-        margin-right: 0;
-    }
-
-    &.gap-16 > * {
+    &.gap-16 > *:not(:last-child):not(:only-child) {
         margin-right: var(--gap-m);
     }
 
-    &.gap-24 > * {
+    &.gap-24 > *:not(:last-child):not(:only-child) {
         margin-right: var(--gap-xl);
     }
 
-    &.gap-32 > * {
+    &.gap-32 > *:not(:last-child):not(:only-child) {
         margin-right: var(--gap-2xl);
     }
 }

package/src/components/header/Component.tsx

@@ -2,6 +2,7 @@ import React, { FC, useContext, useEffect } from 'react';
 import cn from 'classnames';
 
 import { NavigationBar, NavigationBarProps } from '@alfalab/core-components-navigation-bar';
+import { getDataTestId } from '@alfalab/core-components-shared';
 
 import { ModalContext } from '../../Context';
 import { ResponsiveContext } from '../../ResponsiveContext';
@@ -22,7 +23,7 @@ export const Header: FC<HeaderProps> = ({
     ...restProps
 }) => {
     const { setHasHeader, headerHighlighted, parentRef, onClose } = useContext(ModalContext);
-    const { view, size } = useContext(ResponsiveContext);
+    const { view, size, dataTestId } = useContext(ResponsiveContext);
 
     useEffect(() => {
         setHasHeader(true);
@@ -33,6 +34,7 @@ export const Header: FC<HeaderProps> = ({
     return (
         <NavigationBar
             {...restProps}
+            dataTestId={getDataTestId(dataTestId, 'header')}
             scrollableParentRef={parentRef}
             hasCloser={hasCloser}
             sticky={sticky}

package/src/desktop/Component.desktop.tsx

@@ -1,12 +1,10 @@
 import React, { forwardRef } from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { BaseModalProps } from '@alfalab/core-components-base-modal';
-
 import { Modal } from '../Component';
 import { Content } from '../components/content/Component';
+import { Controls, ControlsProps } from '../components/controls';
 import { Footer } from '../components/footer/Component';
-import { Header } from '../components/header/Component';
+import { Header, HeaderProps } from '../components/header/Component';
 import type { ModalDesktopProps } from '../typings';
 
 const ModalDesktopComponent = forwardRef<HTMLDivElement, ModalDesktopProps>((props, ref) => (
@@ -15,6 +13,7 @@ const ModalDesktopComponent = forwardRef<HTMLDivElement, ModalDesktopProps>((pro
 
 export const ModalDesktop = Object.assign(ModalDesktopComponent, {
     Content,
-    Header,
+    Header: Header as React.FC<Omit<HeaderProps, 'titleSize' | 'subtitle'>>,
     Footer,
+    Controls: Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>,
 });

package/src/mobile/Component.mobile.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { Modal } from '../Component';
 import { Content } from '../components/content/Component';
+import { Controls, ControlsProps } from '../components/controls';
 import { Footer } from '../components/footer/Component';
 import { Header } from '../components/header/Component';
 import type { ModalMobileProps } from '../typings';
@@ -14,4 +15,5 @@ export const ModalMobile = Object.assign(ModalMobileComponent, {
     Content,
     Header,
     Footer,
+    Controls: Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>,
 });

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';
@@ -43,6 +48,7 @@ export type View = 'desktop' | 'mobile';
 export type TResponsiveModalContext = {
     view: View;
     size: NonNullable<ModalDesktopProps['size']>;
+    dataTestId?: string;
 };
 
 export type ContentProps = {

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: 1sdt2 */
-.modal__appear_4lmkq,
-.modal__enter_4lmkq {
+/* hash: 1gnmd */
+.modal__appear_24xq3,
+.modal__enter_24xq3 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_4lmkq,
-.modal__enterActive_4lmkq {
+.modal__appearActive_24xq3,
+.modal__enterActive_24xq3 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_4lmkq {
+.modal__exit_24xq3 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_4lmkq,
-.modal__exitDone_4lmkq {
+.modal__exitActive_24xq3,
+.modal__exitDone_24xq3 {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/typings.d.ts

@@ -29,11 +29,16 @@ type ModalResponsiveProps = ModalDesktopProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 type View = 'desktop' | 'mobile';
 type TResponsiveModalContext = {
     view: View;
     size: NonNullable<ModalDesktopProps['size']>;
+    dataTestId?: string;
 };
 type ContentProps = {
     /**

package/useCustomWebkitScrollbar-a216f694.d.ts

@@ -0,0 +1,2 @@
+declare function useCustomWebkitScrollbar(): boolean;
+export { useCustomWebkitScrollbar };