@alfalab/core-components 46.0.0-beta.1 → 46.0.0

package/bank-card/esm/index.js

@@ -7,4 +7,6 @@ import '@alfalab/icons-logotype/AlfaBankLIcon';
 import '@alfalab/icons-logotype/MastercardLIcon';
 import '@alfalab/icons-logotype/MirXxlIcon';
 import '@alfalab/icons-logotype/VisaXxlIcon';
+import './helpers/getDefaultInputLabel.js';
+import './enums.js';
 import './utils.js';

package/bank-card/esm/types.d.ts

@@ -0,0 +1,2 @@
+type MaskType = 'default' | 'card' | 'account-number';
+export { MaskType };

package/bank-card/helpers/getDefaultInputLabel.d.ts

@@ -0,0 +1,3 @@
+import { MaskType } from "../types";
+declare const getDefaultInputLabel: (maskType: MaskType) => "Номер карты" | "Номер счёта" | "Номер карты или счёта";
+export { getDefaultInputLabel };

package/bank-card/helpers/getDefaultInputLabel.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var enums = require('../enums.js');
+
+var getDefaultInputLabel = function (maskType) {
+    switch (maskType) {
+        case enums.MaskTypeEnum.Card:
+            return 'Номер карты';
+        case enums.MaskTypeEnum.AccountNumber:
+            return 'Номер счёта';
+        case enums.MaskTypeEnum.Default:
+        default:
+            return 'Номер карты или счёта';
+    }
+};
+
+exports.getDefaultInputLabel = getDefaultInputLabel;

package/bank-card/index.css

@@ -1,4 +1,4 @@
-/* hash: 11twg */
+/* hash: opma3 */
 :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 */ /* 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 {
     --color-light-neutral-1500: #121213;
@@ -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_k6v85 {
+} .bank-card__component_vzkzv {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_k6v85 {
+} .bank-card__aspectRatioContainer_vzkzv {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_k6v85 {
+} .bank-card__content_vzkzv {
     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_k6v85 {
+} .bank-card__label_vzkzv {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__label_vzkzv {
         font-size: 16px
 }
-    } .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+    } .bank-card__focused_vzkzv .bank-card__label_vzkzv,
+.bank-card__filled_vzkzv .bank-card__label_vzkzv {
     color: var(--color-light-neutral-1500);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__focused_vzkzv .bank-card__label_vzkzv,
+.bank-card__filled_vzkzv .bank-card__label_vzkzv {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_k6v85:before {
+    } .bank-card__focused_vzkzv:before {
     transform: scale(1) !important;
-} .bank-card__input_k6v85 {
+} .bank-card__input_vzkzv {
     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_k6v85 {
+} @media (max-width: 360px) { .bank-card__input_vzkzv {
         font-size: 16px
 }
-    } .bank-card__bankLogo_k6v85 {
+    } .bank-card__bankLogo_vzkzv {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_k6v85 svg {
+} .bank-card__bankLogo_vzkzv svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_k6v85 svg g {
+    } .bank-card__bankLogo_vzkzv svg g {
             fill: var(--color-light-neutral-1500);
-        } .bank-card__brandLogo_k6v85 {
+        } .bank-card__brandLogo_vzkzv {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_k6v85 svg {
+} .bank-card__brandLogo_vzkzv svg {
         display: block;
         fill: var(--color-light-neutral-1500);
-    } .bank-card__usePhoto_k6v85 {
+    } .bank-card__usePhoto_vzkzv {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_k6v85 svg {
+} .bank-card__usePhoto_vzkzv svg {
         fill: var(--color-light-neutral-1500);
         display: block;
     }

package/bank-card/modern/Component.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ChangeEvent, MouseEvent, ReactNode } from "react";
+import { MaskType } from "./types";
 type BankCardProps = {
     /**
      * Дополнительный класс
@@ -36,6 +37,11 @@ type BankCardProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)
+     * Если параметр не передавать - работает с обоими типами номеров
+     */
+    maskType?: MaskType;
 };
 declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
 export { BankCardProps, BankCard };

package/bank-card/modern/Component.js

@@ -6,9 +6,11 @@ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
 import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
 import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
+import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
+import { MaskTypeEnum } from './enums.js';
 import { validateCardNumber } from './utils.js';
 
-const styles = {"component":"bank-card__component_k6v85","aspectRatioContainer":"bank-card__aspectRatioContainer_k6v85","content":"bank-card__content_k6v85","label":"bank-card__label_k6v85","focused":"bank-card__focused_k6v85","filled":"bank-card__filled_k6v85","input":"bank-card__input_k6v85","bankLogo":"bank-card__bankLogo_k6v85","brandLogo":"bank-card__brandLogo_k6v85","usePhoto":"bank-card__usePhoto_k6v85"};
+const styles = {"component":"bank-card__component_vzkzv","aspectRatioContainer":"bank-card__aspectRatioContainer_vzkzv","content":"bank-card__content_vzkzv","label":"bank-card__label_vzkzv","focused":"bank-card__focused_vzkzv","filled":"bank-card__filled_vzkzv","input":"bank-card__input_vzkzv","bankLogo":"bank-card__bankLogo_vzkzv","brandLogo":"bank-card__brandLogo_vzkzv","usePhoto":"bank-card__usePhoto_vzkzv"};
 require('./index.css');
 
 // prettier-ignore
@@ -29,10 +31,20 @@ const getBrandIcon = (value = '') => {
     }
     return null;
 };
-const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIcon, null), backgroundColor = '#EF3124', inputLabel = 'Номер карты или счёта', value, className, onUsePhoto, onChange, dataTestId, }, ref) => {
+const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIcon, null), backgroundColor = '#EF3124', value, className, onUsePhoto, onChange, dataTestId, maskType = MaskTypeEnum.Default, inputLabel = getDefaultInputLabel(maskType), }, ref) => {
     const uncontrolled = value === undefined;
     const [brandIcon, setBrandIcon] = useState(getBrandIcon(value));
-    const getMask = useCallback((newValue) => newValue.length <= cardMask.length ? cardMask : accountNumberMask, []);
+    const getMask = useCallback((newValue) => {
+        switch (maskType) {
+            case MaskTypeEnum.Card:
+                return cardMask;
+            case MaskTypeEnum.AccountNumber:
+                return accountNumberMask;
+            case MaskTypeEnum.Default:
+            default:
+                return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
+        }
+    }, [maskType]);
     const handleInputChange = useCallback((event, payload) => {
         if (uncontrolled) {
             setBrandIcon(getBrandIcon(event.target.value));
@@ -53,10 +65,5 @@ const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIco
                 React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
                 brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
 });
-BankCard.defaultProps = {
-    bankLogo: React.createElement(AlfaBankLIcon, null),
-    backgroundColor: '#EF3124',
-    inputLabel: 'Номер карты или счёта',
-};
 
 export { BankCard };

package/bank-card/modern/enums.d.ts

@@ -0,0 +1,6 @@
+declare enum MaskTypeEnum {
+    Card = "card",
+    AccountNumber = "account-number",
+    Default = "default"
+}
+export { MaskTypeEnum };

package/bank-card/modern/enums.js

@@ -0,0 +1,8 @@
+var MaskTypeEnum;
+(function (MaskTypeEnum) {
+    MaskTypeEnum["Card"] = "card";
+    MaskTypeEnum["AccountNumber"] = "account-number";
+    MaskTypeEnum["Default"] = "default";
+})(MaskTypeEnum || (MaskTypeEnum = {}));
+
+export { MaskTypeEnum };

package/bank-card/modern/helpers/getDefaultInputLabel.d.ts

@@ -0,0 +1,3 @@
+import { MaskType } from "../types";
+declare const getDefaultInputLabel: (maskType: MaskType) => "Номер карты" | "Номер счёта" | "Номер карты или счёта";
+export { getDefaultInputLabel };

package/bank-card/modern/helpers/getDefaultInputLabel.js

@@ -0,0 +1,15 @@
+import { MaskTypeEnum } from '../enums.js';
+
+const getDefaultInputLabel = (maskType) => {
+    switch (maskType) {
+        case MaskTypeEnum.Card:
+            return 'Номер карты';
+        case MaskTypeEnum.AccountNumber:
+            return 'Номер счёта';
+        case MaskTypeEnum.Default:
+        default:
+            return 'Номер карты или счёта';
+    }
+};
+
+export { getDefaultInputLabel };

package/bank-card/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 11twg */
+/* hash: opma3 */
 :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 */ /* 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 {
     --color-light-neutral-1500: #121213;
@@ -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_k6v85 {
+} .bank-card__component_vzkzv {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_k6v85 {
+} .bank-card__aspectRatioContainer_vzkzv {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_k6v85 {
+} .bank-card__content_vzkzv {
     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_k6v85 {
+} .bank-card__label_vzkzv {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__label_vzkzv {
         font-size: 16px
 }
-    } .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+    } .bank-card__focused_vzkzv .bank-card__label_vzkzv,
+.bank-card__filled_vzkzv .bank-card__label_vzkzv {
     color: var(--color-light-neutral-1500);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__focused_vzkzv .bank-card__label_vzkzv,
+.bank-card__filled_vzkzv .bank-card__label_vzkzv {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_k6v85:before {
+    } .bank-card__focused_vzkzv:before {
     transform: scale(1) !important;
-} .bank-card__input_k6v85 {
+} .bank-card__input_vzkzv {
     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_k6v85 {
+} @media (max-width: 360px) { .bank-card__input_vzkzv {
         font-size: 16px
 }
-    } .bank-card__bankLogo_k6v85 {
+    } .bank-card__bankLogo_vzkzv {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_k6v85 svg {
+} .bank-card__bankLogo_vzkzv svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_k6v85 svg g {
+    } .bank-card__bankLogo_vzkzv svg g {
             fill: var(--color-light-neutral-1500);
-        } .bank-card__brandLogo_k6v85 {
+        } .bank-card__brandLogo_vzkzv {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_k6v85 svg {
+} .bank-card__brandLogo_vzkzv svg {
         display: block;
         fill: var(--color-light-neutral-1500);
-    } .bank-card__usePhoto_k6v85 {
+    } .bank-card__usePhoto_vzkzv {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_k6v85 svg {
+} .bank-card__usePhoto_vzkzv svg {
         fill: var(--color-light-neutral-1500);
         display: block;
     }

package/bank-card/modern/index.js

@@ -7,4 +7,6 @@ import '@alfalab/icons-logotype/AlfaBankLIcon';
 import '@alfalab/icons-logotype/MastercardLIcon';
 import '@alfalab/icons-logotype/MirXxlIcon';
 import '@alfalab/icons-logotype/VisaXxlIcon';
+import './helpers/getDefaultInputLabel.js';
+import './enums.js';
 import './utils.js';

package/bank-card/modern/types.d.ts

@@ -0,0 +1,2 @@
+type MaskType = 'default' | 'card' | 'account-number';
+export { MaskType };

package/bank-card/types.d.ts

@@ -0,0 +1,2 @@
+type MaskType = 'default' | 'card' | 'account-number';
+export { MaskType };

package/base-modal/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from 'react';
-import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
+import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BackdropProps } from "../backdrop";
 import { PortalProps } from "../portal";
@@ -13,7 +13,7 @@ type BaseModalProps = {
     /**
      * Компонент бэкдропа
      */
-    Backdrop?: FC<BackdropProps>;
+    Backdrop?: ComponentType<BackdropProps>;
     /**
      * Свойства для Бэкдропа
      */
@@ -134,6 +134,10 @@ type BaseModalProps = {
      * Реф, который должен быть установлен компонентной области
      */
     componentRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
 };
 type BaseModalContext = {
     parentRef: React.RefObject<HTMLDivElement>;

package/base-modal/Component.js

@@ -11,6 +11,7 @@ var coreComponentsBackdrop = require('../backdrop');
 var coreComponentsPortal = require('../portal');
 var coreComponentsShared = require('../shared');
 var coreComponentsStack = require('../stack');
+var helpers_lockScroll = require('./helpers/lockScroll.js');
 var utils = require('./utils.js');
 require('./matches-polyfill.js');
 
@@ -21,7 +22,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"base-modal__component_13am9","wrapper":"base-modal__wrapper_13am9","content":"base-modal__content_13am9","hidden":"base-modal__hidden_13am9","backdrop":"base-modal__backdrop_13am9","appear":"base-modal__appear_13am9","enter":"base-modal__enter_13am9","appearActive":"base-modal__appearActive_13am9","enterActive":"base-modal__enterActive_13am9","exit":"base-modal__exit_13am9","exitActive":"base-modal__exitActive_13am9","exitDone":"base-modal__exitDone_13am9"};
+var styles = {"component":"base-modal__component_13ldr","wrapper":"base-modal__wrapper_13ldr","content":"base-modal__content_13ldr","hidden":"base-modal__hidden_13ldr","backdrop":"base-modal__backdrop_13ldr","appear":"base-modal__appear_13ldr","enter":"base-modal__enter_13ldr","appearActive":"base-modal__appearActive_13ldr","enterActive":"base-modal__enterActive_13ldr","exit":"base-modal__exit_13ldr","exitActive":"base-modal__exitActive_13ldr","exitDone":"base-modal__exitDone_13ldr"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -41,14 +42,14 @@ var BaseModalContext = React__default.default.createContext({
     onClose: function () { return null; },
 });
 var BaseModal = React.forwardRef(function (_a, ref) {
-    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? coreComponentsStack.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
-    var _q = React.useState(null), exited = _q[0], setExited = _q[1];
-    var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
-    var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
-    var _t = React.useState(false), hasFooter = _t[0], setHasFooter = _t[1];
-    var _u = React.useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
-    var _v = React.useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
-    var _w = React.useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
+    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? coreComponentsStack.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p, _q = _a.iOSLock, iOSLock = _q === void 0 ? false : _q;
+    var _r = React.useState(null), exited = _r[0], setExited = _r[1];
+    var _s = React.useState(false), hasScroll = _s[0], setHasScroll = _s[1];
+    var _t = React.useState(false), hasHeader = _t[0], setHasHeader = _t[1];
+    var _u = React.useState(false), hasFooter = _u[0], setHasFooter = _u[1];
+    var _v = React.useState(false), headerHighlighted = _v[0], setHeaderHighlighted = _v[1];
+    var _w = React.useState(false), footerHighlighted = _w[0], setFooterHighlighted = _w[1];
+    var _x = React.useState(0), headerOffset = _x[0], setHeaderOffset = _x[1];
     var componentNodeRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -100,6 +101,9 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         }
     }, [hasFooter, hasHeader, headerOffset]);
     var handleClose = React.useCallback(function (event, reason) {
+        if (iOSLock && coreComponentsShared.os.isIOS()) {
+            helpers_lockScroll.unlockScroll();
+        }
         if (onClose) {
             onClose(event, reason);
         }
@@ -110,7 +114,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             onEscapeKeyDown(event);
         }
         return null;
-    }, [onBackdropClick, onClose, onEscapeKeyDown]);
+    }, [onBackdropClick, onClose, onEscapeKeyDown, iOSLock]);
     var handleBackdropMouseDown = function (event) {
         var _a;
         var clickedOnScrollbar = false;
@@ -185,7 +189,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         if (open && isExited) {
             if (!disableBlockingScroll) {
                 var el_1 = getContainer();
-                utils.handleContainer(el_1);
+                var shouldIOSLock = iOSLock && coreComponentsShared.os.isIOS();
+                utils.handleContainer(el_1, shouldIOSLock);
+                if (shouldIOSLock) {
+                    helpers_lockScroll.syncHeight();
+                    helpers_lockScroll.lockScroll();
+                }
                 restoreContainerStylesRef.current = function () {
                     restoreContainerStylesRef.current = null;
                     utils.restoreContainerStyles(el_1);
@@ -193,7 +202,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             }
             setExited(false);
         }
-    }, [getContainer, open, disableBlockingScroll, isExited]);
+    }, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
     React.useEffect(function () {
         var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
         resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
@@ -206,6 +215,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             }
         };
     }, []);
+    React.useEffect(function () {
+        var _a;
+        if (disableAutoFocus || !open)
+            return;
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [open, disableAutoFocus]);
     var contextValue = React.useMemo(function () { return ({
         parentRef: wrapperRef,
         componentRef: componentNodeRef,
@@ -234,7 +249,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
         var _a;
         return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
-            React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+            React__default.default.createElement(FocusLock__default.default, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
                 Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
                         zIndex: computedZIndex,
                     } }))),
@@ -244,9 +259,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
                         ref,
                         wrapperRef,
                         wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
-                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
-                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                    tabIndex: 0, "data-test-id": dataTestId, style: {
+                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
                         zIndex: computedZIndex,
                     } }),
                     React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from 'react';
-import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
+import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BackdropProps } from "../../backdrop";
 import { PortalProps } from "../../portal";
@@ -13,7 +13,7 @@ type BaseModalProps = {
     /**
      * Компонент бэкдропа
      */
-    Backdrop?: FC<BackdropProps>;
+    Backdrop?: ComponentType<BackdropProps>;
     /**
      * Свойства для Бэкдропа
      */
@@ -134,6 +134,10 @@ type BaseModalProps = {
      * Реф, который должен быть установлен компонентной области
      */
     componentRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
 };
 type BaseModalContext = {
     parentRef: React.RefObject<HTMLDivElement>;