@alfalab/core-components-modal 9.0.0 → 9.0.1

package/modern/desktop/index.js

@@ -6,9 +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-29d4c7c9.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/getDataTestId-a8aae71a.d.ts

@@ -0,0 +1,2 @@
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+export { getDataTestId };

package/modern/getDataTestId-a8aae71a.js

@@ -0,0 +1,6 @@
+const getDataTestId = (dataTestId, element) => {
+    const elementPart = element ? `-${element.toLowerCase()}` : '';
+    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
+};
+
+export { getDataTestId as g };

package/modern/index-a5b021bd.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import React from "react";
+/* eslint-disable no-plusplus, no-param-reassign */
+import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from "@maskito/core";
+import { useCustomWebkitScrollbar } from "./useCustomWebkitScrollbar-a216f694";
+declare const isClient: () => boolean;
+declare function isApplePlatform(): boolean;
+declare function isIOS(): boolean;
+declare const os: {
+    isIOS: typeof isIOS;
+    isApplePlatform: typeof isApplePlatform;
+};
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+/**
+ * Возвращает true, если значение равно null или undefined
+ */
+declare function isNil(value: unknown): boolean;
+/**
+ * Выбор значения между min max границами
+ */
+declare function clamp<T extends Date | number>(value: T, min: T, max: T): T;
+declare function noop(): void;
+declare const fnUtils: {
+    clamp: typeof clamp;
+    noop: typeof noop;
+    isNil: typeof isNil;
+};
+/**
+ *  Запрещает каретке становиться за указанные границы
+ */
+declare function caretGuard(guard: (value: string, selection: readonly [
+    from: number,
+    to: number
+]) => [
+    from: number,
+    to: number
+]): MaskitoPlugin;
+/**
+ *  Запрещает удалять указанный префикс
+ */
+declare function prefixPostprocessor(prefix: string): MaskitoPostprocessor;
+/**
+ * Препроцессор необходим для правильной вставки/автокомплита телефонного номера
+ */
+declare function insertionPhonePreprocessor(mask: Array<string | RegExp>, countryCode?: string, clearableCountryCode?: boolean): MaskitoPreprocessor;
+declare const maskUtils: {
+    insertionPhonePreprocessor: typeof insertionPhonePreprocessor;
+    prefixPostprocessor: typeof prefixPostprocessor;
+    caretGuard: typeof caretGuard;
+};
+declare const hooks: {
+    useCustomWebkitScrollbar: typeof useCustomWebkitScrollbar;
+};
+declare function preventDefault(e: React.UIEvent): void;
+declare const dom: {
+    preventDefault: typeof preventDefault;
+};
+export { isClient, os, createPaddingStyle, easingFns, fnUtils, maskUtils, hooks, dom };
+export * from "./getDataTestId-a8aae71a";
+export * from "./browser-a216f694";

package/modern/index.js

@@ -3,11 +3,13 @@ import 'react';
 import '@alfalab/core-components-mq/modern';
 import './components/content/Component.js';
 import 'classnames';
+import './getDataTestId-a8aae71a.js';
+import '@alfalab/hooks';
 import './Context.js';
 import '@alfalab/core-components-base-modal/modern';
 import './ResponsiveContext.js';
 import './components/controls/Component.js';
-import './layout.module-29d4c7c9.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/layout.module-bff97609.js

@@ -0,0 +1,4 @@
+const layoutStyles = {"column":"modal__column_14ay2","gap-16":"modal__gap-16_14ay2","gap-24":"modal__gap-24_14ay2","gap-32":"modal__gap-32_14ay2","start":"modal__start_14ay2","center":"modal__center_14ay2","space-between":"modal__space-between_14ay2"};
+require('./components/footer/layout.css')
+
+export { layoutStyles as l };

package/modern/mobile/Component.mobile.js

@@ -8,8 +8,10 @@ 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-29d4c7c9.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' })));

package/modern/mobile/index.js

@@ -6,9 +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-29d4c7c9.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: 1hozm */
+/* 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_odxlq {
+} .modal__component_1odq1 {
     flex: 1;
     width: 100%;
     max-width: 600px;

package/modern/transitions.css

@@ -1,24 +1,24 @@
-/* hash: i34gk */
-.modal__appear_4gu03,
-.modal__enter_4gu03 {
+/* hash: 1gnmd */
+.modal__appear_24xq3,
+.modal__enter_24xq3 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_4gu03,
-.modal__enterActive_4gu03 {
+.modal__appearActive_24xq3,
+.modal__enterActive_24xq3 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_4gu03 {
+.modal__exit_24xq3 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_4gu03,
-.modal__exitDone_4gu03 {
+.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

@@ -38,6 +38,7 @@ 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": "9.0.0",
+    "version": "9.0.1",
     "description": "Modal component",
     "keywords": [],
     "license": "MIT",
@@ -11,8 +11,8 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^5.7.0",
-        "@alfalab/core-components-navigation-bar": "^0.7.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",

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

@@ -1,6 +1,8 @@
 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';
@@ -42,7 +44,7 @@ export const Controls: React.FC<ControlsProps> = ({
     layout: layoutProp = 'start',
     mobileLayout = layoutProp,
 }) => {
-    const { view } = useContext(ResponsiveContext);
+    const { view, dataTestId } = useContext(ResponsiveContext);
 
     const layout = view === 'mobile' ? mobileLayout : layoutProp;
 
@@ -50,6 +52,7 @@ export const Controls: React.FC<ControlsProps> = ({
 
     return (
         <div
+            data-test-id={getDataTestId(dataTestId, 'controls')}
             className={cn(
                 styles.component,
                 layoutStyles[layout],

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,

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/typings.ts

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

package/transitions.css

@@ -1,24 +1,24 @@
-/* hash: i34gk */
-.modal__appear_4gu03,
-.modal__enter_4gu03 {
+/* hash: 1gnmd */
+.modal__appear_24xq3,
+.modal__enter_24xq3 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_4gu03,
-.modal__enterActive_4gu03 {
+.modal__appearActive_24xq3,
+.modal__enterActive_24xq3 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_4gu03 {
+.modal__exit_24xq3 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_4gu03,
-.modal__exitDone_4gu03 {
+.modal__exitActive_24xq3,
+.modal__exitDone_24xq3 {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/typings.d.ts

@@ -38,6 +38,7 @@ 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 };

package/esm/layout.module-9ffd30f9.js

@@ -1,4 +0,0 @@
-var layoutStyles = {"column":"modal__column_1gona","gap-16":"modal__gap-16_1gona","gap-24":"modal__gap-24_1gona","gap-32":"modal__gap-32_1gona","start":"modal__start_1gona","center":"modal__center_1gona","space-between":"modal__space-between_1gona"};
-require('./components/footer/layout.css')
-
-export { layoutStyles as l };

package/layout.module-57c7b9be.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var layoutStyles = {"column":"modal__column_1gona","gap-16":"modal__gap-16_1gona","gap-24":"modal__gap-24_1gona","gap-32":"modal__gap-32_1gona","start":"modal__start_1gona","center":"modal__center_1gona","space-between":"modal__space-between_1gona"};
-require('./components/footer/layout.css')
-
-exports.layoutStyles = layoutStyles;

package/modern/layout.module-29d4c7c9.js

@@ -1,4 +0,0 @@
-const layoutStyles = {"column":"modal__column_1gona","gap-16":"modal__gap-16_1gona","gap-24":"modal__gap-24_1gona","gap-32":"modal__gap-32_1gona","start":"modal__start_1gona","center":"modal__center_1gona","space-between":"modal__space-between_1gona"};
-require('./components/footer/layout.css')
-
-export { layoutStyles as l };