@alfalab/core-components 38.4.0 → 39.0.0-beta.1

package/bank-card/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1dgvt */
+/* hash: 1lyjn */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_1lznj {
+} .bank-card__component_43vtx {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_1lznj {
+} .bank-card__aspectRatioContainer_43vtx {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1lznj {
+} .bank-card__content_43vtx {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_1lznj {
+} .bank-card__label_43vtx {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1lznj {
+} @media (max-width: 360px) { .bank-card__label_43vtx {
         font-size: 16px
 }
-    } .bank-card__focused_1lznj .bank-card__label_1lznj,
-.bank-card__filled_1lznj .bank-card__label_1lznj {
+    } .bank-card__focused_43vtx .bank-card__label_43vtx,
+.bank-card__filled_43vtx .bank-card__label_43vtx {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1lznj .bank-card__label_1lznj,
-.bank-card__filled_1lznj .bank-card__label_1lznj {
+} @media (max-width: 360px) { .bank-card__focused_43vtx .bank-card__label_43vtx,
+.bank-card__filled_43vtx .bank-card__label_43vtx {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1lznj:before {
+    } .bank-card__focused_43vtx:before {
     transform: scale(1) !important;
-} .bank-card__input_1lznj {
+} .bank-card__input_43vtx {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_1lznj {
+} @media (max-width: 360px) { .bank-card__input_43vtx {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1lznj {
+    } .bank-card__bankLogo_43vtx {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1lznj svg {
+} .bank-card__bankLogo_43vtx svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1lznj svg g {
+    } .bank-card__bankLogo_43vtx svg g {
             fill: var(--color-black);
-        } .bank-card__brandLogo_1lznj {
+        } .bank-card__brandLogo_43vtx {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1lznj svg {
+} .bank-card__brandLogo_43vtx svg {
         display: block;
         fill: var(--color-black);
-    } .bank-card__usePhoto_1lznj {
+    } .bank-card__usePhoto_43vtx {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1lznj svg {
+} .bank-card__usePhoto_43vtx svg {
         fill: var(--color-black);
         display: block;
     }

package/base-modal/Component.d.ts

@@ -119,6 +119,8 @@ type BaseModalProps = {
     componentRef?: MutableRefObject<HTMLDivElement | null>;
 };
 type BaseModalContext = {
+    parentRef: React.RefObject<HTMLDivElement>;
+    componentRef: React.RefObject<HTMLDivElement>;
     hasFooter?: boolean;
     hasHeader?: boolean;
     hasScroll?: boolean;

package/base-modal/Component.js

@@ -19,11 +19,13 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"base-modal__component_1tgx5","wrapper":"base-modal__wrapper_1tgx5","content":"base-modal__content_1tgx5","hidden":"base-modal__hidden_1tgx5","backdrop":"base-modal__backdrop_1tgx5","appear":"base-modal__appear_1tgx5","enter":"base-modal__enter_1tgx5","appearActive":"base-modal__appearActive_1tgx5","enterActive":"base-modal__enterActive_1tgx5","exit":"base-modal__exit_1tgx5","exitActive":"base-modal__exitActive_1tgx5","exitDone":"base-modal__exitDone_1tgx5"};
+var styles = {"component":"base-modal__component_1f6ip","wrapper":"base-modal__wrapper_1f6ip","content":"base-modal__content_1f6ip","hidden":"base-modal__hidden_1f6ip","backdrop":"base-modal__backdrop_1f6ip","appear":"base-modal__appear_1f6ip","enter":"base-modal__enter_1f6ip","appearActive":"base-modal__appearActive_1f6ip","enterActive":"base-modal__enterActive_1f6ip","exit":"base-modal__exit_1f6ip","exitActive":"base-modal__exitActive_1f6ip","exitDone":"base-modal__exitDone_1f6ip"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 var BaseModalContext = React__default.default.createContext({
+    parentRef: { current: null },
+    componentRef: { current: null },
     hasFooter: false,
     hasHeader: false,
     hasScroll: false,
@@ -203,6 +205,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         };
     }, []);
     var contextValue = React.useMemo(function () { return ({
+        parentRef: wrapperRef,
+        componentRef: componentNodeRef,
         hasHeader: hasHeader,
         hasFooter: hasFooter,
         hasScroll: hasScroll,

package/base-modal/cssm/Component.d.ts

@@ -119,6 +119,8 @@ type BaseModalProps = {
     componentRef?: MutableRefObject<HTMLDivElement | null>;
 };
 type BaseModalContext = {
+    parentRef: React.RefObject<HTMLDivElement>;
+    componentRef: React.RefObject<HTMLDivElement>;
     hasFooter?: boolean;
     hasHeader?: boolean;
     hasScroll?: boolean;

package/base-modal/cssm/Component.js

@@ -23,6 +23,8 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 var BaseModalContext = React__default.default.createContext({
+    parentRef: { current: null },
+    componentRef: { current: null },
     hasFooter: false,
     hasHeader: false,
     hasScroll: false,
@@ -202,6 +204,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         };
     }, []);
     var contextValue = React.useMemo(function () { return ({
+        parentRef: wrapperRef,
+        componentRef: componentNodeRef,
         hasHeader: hasHeader,
         hasFooter: hasFooter,
         hasScroll: hasScroll,

package/base-modal/esm/Component.d.ts

@@ -119,6 +119,8 @@ type BaseModalProps = {
     componentRef?: MutableRefObject<HTMLDivElement | null>;
 };
 type BaseModalContext = {
+    parentRef: React.RefObject<HTMLDivElement>;
+    componentRef: React.RefObject<HTMLDivElement>;
     hasFooter?: boolean;
     hasHeader?: boolean;
     hasScroll?: boolean;

package/base-modal/esm/Component.js

@@ -12,11 +12,13 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
 import './matches-polyfill.js';
 import '../../global-store/esm';
 
-var styles = {"component":"base-modal__component_1tgx5","wrapper":"base-modal__wrapper_1tgx5","content":"base-modal__content_1tgx5","hidden":"base-modal__hidden_1tgx5","backdrop":"base-modal__backdrop_1tgx5","appear":"base-modal__appear_1tgx5","enter":"base-modal__enter_1tgx5","appearActive":"base-modal__appearActive_1tgx5","enterActive":"base-modal__enterActive_1tgx5","exit":"base-modal__exit_1tgx5","exitActive":"base-modal__exitActive_1tgx5","exitDone":"base-modal__exitDone_1tgx5"};
+var styles = {"component":"base-modal__component_1f6ip","wrapper":"base-modal__wrapper_1f6ip","content":"base-modal__content_1f6ip","hidden":"base-modal__hidden_1f6ip","backdrop":"base-modal__backdrop_1f6ip","appear":"base-modal__appear_1f6ip","enter":"base-modal__enter_1f6ip","appearActive":"base-modal__appearActive_1f6ip","enterActive":"base-modal__enterActive_1f6ip","exit":"base-modal__exit_1f6ip","exitActive":"base-modal__exitActive_1f6ip","exitDone":"base-modal__exitDone_1f6ip"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 var BaseModalContext = React.createContext({
+    parentRef: { current: null },
+    componentRef: { current: null },
     hasFooter: false,
     hasHeader: false,
     hasScroll: false,
@@ -196,6 +198,8 @@ var BaseModal = forwardRef(function (_a, ref) {
         };
     }, []);
     var contextValue = useMemo(function () { return ({
+        parentRef: wrapperRef,
+        componentRef: componentNodeRef,
         hasHeader: hasHeader,
         hasFooter: hasFooter,
         hasScroll: hasScroll,

package/base-modal/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1b946 */
+/* hash: zlupk */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -15,13 +15,13 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_1tgx5 {
+} .base-modal__component_1f6ip {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_1tgx5 {
+} .base-modal__wrapper_1f6ip {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,27 +33,27 @@
     flex-direction: column;
     align-items: center;
     outline: 0;
-} .base-modal__content_1tgx5 {
+} .base-modal__content_1f6ip {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_1tgx5 {
+} .base-modal__hidden_1f6ip {
     display: none;
-} .base-modal__backdrop_1tgx5 {
+} .base-modal__backdrop_1f6ip {
     z-index: 0;
-} .base-modal__appear_1tgx5,
-.base-modal__enter_1tgx5 {
+} .base-modal__appear_1f6ip,
+.base-modal__enter_1f6ip {
     opacity: 0;
-} .base-modal__appearActive_1tgx5,
-.base-modal__enterActive_1tgx5 {
+} .base-modal__appearActive_1f6ip,
+.base-modal__enterActive_1f6ip {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_1tgx5 {
+} .base-modal__exit_1f6ip {
     opacity: 1;
-} .base-modal__exitActive_1tgx5,
-.base-modal__exitDone_1tgx5 {
+} .base-modal__exitActive_1f6ip,
+.base-modal__exitDone_1f6ip {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/index.css

@@ -1,4 +1,4 @@
-/* hash: 1b946 */
+/* hash: zlupk */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -15,13 +15,13 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_1tgx5 {
+} .base-modal__component_1f6ip {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_1tgx5 {
+} .base-modal__wrapper_1f6ip {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,27 +33,27 @@
     flex-direction: column;
     align-items: center;
     outline: 0;
-} .base-modal__content_1tgx5 {
+} .base-modal__content_1f6ip {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_1tgx5 {
+} .base-modal__hidden_1f6ip {
     display: none;
-} .base-modal__backdrop_1tgx5 {
+} .base-modal__backdrop_1f6ip {
     z-index: 0;
-} .base-modal__appear_1tgx5,
-.base-modal__enter_1tgx5 {
+} .base-modal__appear_1f6ip,
+.base-modal__enter_1f6ip {
     opacity: 0;
-} .base-modal__appearActive_1tgx5,
-.base-modal__enterActive_1tgx5 {
+} .base-modal__appearActive_1f6ip,
+.base-modal__enterActive_1f6ip {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_1tgx5 {
+} .base-modal__exit_1f6ip {
     opacity: 1;
-} .base-modal__exitActive_1tgx5,
-.base-modal__exitDone_1tgx5 {
+} .base-modal__exitActive_1f6ip,
+.base-modal__exitDone_1f6ip {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/modern/Component.d.ts

@@ -119,6 +119,8 @@ type BaseModalProps = {
     componentRef?: MutableRefObject<HTMLDivElement | null>;
 };
 type BaseModalContext = {
+    parentRef: React.RefObject<HTMLDivElement>;
+    componentRef: React.RefObject<HTMLDivElement>;
     hasFooter?: boolean;
     hasHeader?: boolean;
     hasScroll?: boolean;

package/base-modal/modern/Component.js

@@ -11,12 +11,14 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
 import './matches-polyfill.js';
 import '../../global-store/modern';
 
-const styles = {"component":"base-modal__component_1tgx5","wrapper":"base-modal__wrapper_1tgx5","content":"base-modal__content_1tgx5","hidden":"base-modal__hidden_1tgx5","backdrop":"base-modal__backdrop_1tgx5","appear":"base-modal__appear_1tgx5","enter":"base-modal__enter_1tgx5","appearActive":"base-modal__appearActive_1tgx5","enterActive":"base-modal__enterActive_1tgx5","exit":"base-modal__exit_1tgx5","exitActive":"base-modal__exitActive_1tgx5","exitDone":"base-modal__exitDone_1tgx5"};
+const styles = {"component":"base-modal__component_1f6ip","wrapper":"base-modal__wrapper_1f6ip","content":"base-modal__content_1f6ip","hidden":"base-modal__hidden_1f6ip","backdrop":"base-modal__backdrop_1f6ip","appear":"base-modal__appear_1f6ip","enter":"base-modal__enter_1f6ip","appearActive":"base-modal__appearActive_1f6ip","enterActive":"base-modal__enterActive_1f6ip","exit":"base-modal__exit_1f6ip","exitActive":"base-modal__exitActive_1f6ip","exitDone":"base-modal__exitDone_1f6ip"};
 require('./index.css');
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 const BaseModalContext = React.createContext({
+    parentRef: { current: null },
+    componentRef: { current: null },
     hasFooter: false,
     hasHeader: false,
     hasScroll: false,
@@ -194,6 +196,8 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         };
     }, []);
     const contextValue = useMemo(() => ({
+        parentRef: wrapperRef,
+        componentRef: componentNodeRef,
         hasHeader,
         hasFooter,
         hasScroll,

package/base-modal/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1b946 */
+/* hash: zlupk */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -15,13 +15,13 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_1tgx5 {
+} .base-modal__component_1f6ip {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_1tgx5 {
+} .base-modal__wrapper_1f6ip {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,27 +33,27 @@
     flex-direction: column;
     align-items: center;
     outline: 0;
-} .base-modal__content_1tgx5 {
+} .base-modal__content_1f6ip {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_1tgx5 {
+} .base-modal__hidden_1f6ip {
     display: none;
-} .base-modal__backdrop_1tgx5 {
+} .base-modal__backdrop_1f6ip {
     z-index: 0;
-} .base-modal__appear_1tgx5,
-.base-modal__enter_1tgx5 {
+} .base-modal__appear_1f6ip,
+.base-modal__enter_1f6ip {
     opacity: 0;
-} .base-modal__appearActive_1tgx5,
-.base-modal__enterActive_1tgx5 {
+} .base-modal__appearActive_1f6ip,
+.base-modal__enterActive_1f6ip {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_1tgx5 {
+} .base-modal__exit_1f6ip {
     opacity: 1;
-} .base-modal__exitActive_1tgx5,
-.base-modal__exitDone_1tgx5 {
+} .base-modal__exitActive_1f6ip,
+.base-modal__exitDone_1f6ip {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/bottom-sheet/{component-7f6ec6ba.d.ts → component-b055d3e4.d.ts}

@@ -1,76 +1,15 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from "react";
-import { FC, ReactNode, HTMLAttributes, RefObject } from "react";
-import { BottomSheetTitleAlign } from "./index";
+import { FC, HTMLAttributes, ReactNode, RefObject } from "react";
+import { NavigationBarProps } from "../navigation-bar";
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "../base-modal";
-type HeaderProps = {
-    /**
-     * Заголовок
-     */
-    title?: ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    headerClassName?: string;
-    /**
-     * Дополнительный класс для аддонов
-     */
-    addonClassName?: string;
-    /**
-     * Дополнительный класс для компонента крестика
-     */
-    closerClassName?: string;
-    /**
-     * Дополнительный класс для компонента стрелки назад
-     */
-    backerClassName?: string;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-    /**
-     * Слот снизу
-     */
-    bottomAddons?: ReactNode;
-    /**
-     * Наличие компонента крестика
-     */
-    hasCloser?: boolean;
-    /**
-     * Наличие компонента стрелки назад
-     */
-    hasBacker?: boolean;
-    /**
-     * Выравнивание заголовка
-     */
-    titleAlign?: BottomSheetTitleAlign;
-    /**
-     * Будет ли обрезан заголовок
-     */
-    trimTitle?: boolean;
-    /**
-     * Фиксирует шапку
-     */
-    sticky?: boolean;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Обработчик нажатия на стрелку назад
-     */
-    onBack?: () => void;
-};
+type HeaderProps = Omit<NavigationBarProps, "view" | "size">;
 declare const Header: FC<HeaderProps>;
 declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
 declare const isClient: () => boolean;
-type BottomSheetTitleAlign$0 = 'center' | 'left';
+type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
     /**
      * Контент
@@ -84,6 +23,14 @@ type BottomSheetProps = {
      * Заголовок
      */
     title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps['titleSize'];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps['subtitle'];
     /**
      * Кнопка действия (обычно, это кнопка закрытия)
      */
@@ -178,7 +125,7 @@ type BottomSheetProps = {
     /**
      * Выравнивание заголовка
      */
-    titleAlign?: BottomSheetTitleAlign$0;
+    titleAlign?: BottomSheetTitleAlign;
     /**
      * Фиксирует шапку
      */
@@ -236,4 +183,4 @@ type BottomSheetProps = {
 declare const HEADER_OFFSET = 24;
 declare const CLOSE_OFFSET = 0.2;
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
-export { HeaderProps, Header, getDataTestId, isClient, BottomSheetTitleAlign$0 as BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };
+export { HeaderProps, Header, getDataTestId, isClient, BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };