@alfalab/core-components 44.7.0-beta.0 → 44.7.0-beta.1

package/pure-cell/esm/components/footer-button/component.js

@@ -2,7 +2,7 @@ import 'tslib';
 import 'react';
 import '../../../../button/esm';
 import '../../../../shared/esm';
-export { d as FooterButton } from '../../component-991fe90e.js';
+export { d as FooterButton } from '../../component-8dcf2e94.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/esm';

package/pure-cell/esm/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-991fe90e";
+export * from "../../component-8dcf2e94";

package/pure-cell/esm/components/footer-button/index.js

@@ -1,4 +1,4 @@
-export { d as FooterButton } from '../../component-991fe90e.js';
+export { d as FooterButton } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/footer-text/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/esm';
 import '../../../../typography/esm';
-export { e as FooterText } from '../../component-991fe90e.js';
+export { e as FooterText } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/esm/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-991fe90e";
+export * from "../../component-8dcf2e94";

package/pure-cell/esm/components/footer-text/index.js

@@ -1,4 +1,4 @@
-export { e as FooterText } from '../../component-991fe90e.js';
+export { e as FooterText } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/graphics/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/esm';
-export { G as Graphics } from '../../component-991fe90e.js';
+export { G as Graphics } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react-merge-refs';
 import '../../../../comment/esm';

package/pure-cell/esm/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-991fe90e";
+export * from "../../component-8dcf2e94";

package/pure-cell/esm/components/graphics/index.js

@@ -1,4 +1,4 @@
-export { G as Graphics } from '../../component-991fe90e.js';
+export { G as Graphics } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/main/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/esm';
-export { M as Main } from '../../component-991fe90e.js';
+export { M as Main } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react-merge-refs';
 import '../../../../comment/esm';

package/pure-cell/esm/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-991fe90e";
+export * from "../../component-8dcf2e94";

package/pure-cell/esm/components/main/index.js

@@ -1,4 +1,4 @@
-export { M as Main } from '../../component-991fe90e.js';
+export { M as Main } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/text/component.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../../shared/esm';
 import '../../../../typography/esm';
-export { T as Text } from '../../component-991fe90e.js';
+export { T as Text } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react-merge-refs';
 import '../../../../comment/esm';

package/pure-cell/esm/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-991fe90e";
+export * from "../../component-8dcf2e94";

package/pure-cell/esm/components/text/index.js

@@ -1,4 +1,4 @@
-export { T as Text } from '../../component-991fe90e.js';
+export { T as Text } from '../../component-8dcf2e94.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/index.js

@@ -1,4 +1,4 @@
-export { P as PureCell } from './component-991fe90e.js';
+export { P as PureCell } from './component-8dcf2e94.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('./component-8965c1f1.js');
+var components_addon_component = require('./component-ba329973.js');
 
 
 

package/pure-cell/modern/component.js

@@ -3,7 +3,7 @@ import 'react-merge-refs';
 import 'classnames';
 import '../../comment/modern';
 import '@alfalab/hooks';
-export { P as PureCell, f as PureCellContext } from './component-23ae9ab3.js';
+export { P as PureCell, f as PureCellContext } from './component-4c3cdd38.js';
 import '../../shared/modern';
 import '../../amount/modern';
 import '../../typography/modern';

package/pure-cell/modern/components/addon/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { A as Addon } from '../../component-23ae9ab3.js';
+export { A as Addon } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/addon/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/addon/index.js

@@ -1,4 +1,4 @@
-export { A as Addon } from '../../component-23ae9ab3.js';
+export { A as Addon } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/amount/component.js

@@ -3,7 +3,7 @@ import 'classnames';
 import '../../../../amount/modern';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { a as Amount } from '../../component-23ae9ab3.js';
+export { a as Amount } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/amount/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/amount/index.js

@@ -1,4 +1,4 @@
-export { a as Amount } from '../../component-23ae9ab3.js';
+export { a as Amount } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/amount-title/component.js

@@ -3,7 +3,7 @@ import 'classnames';
 import '../../../../amount/modern';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { b as AmountTitle } from '../../component-23ae9ab3.js';
+export { b as AmountTitle } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/amount-title/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/amount-title/index.js

@@ -1,4 +1,4 @@
-export { b as AmountTitle } from '../../component-23ae9ab3.js';
+export { b as AmountTitle } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/category/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { C as Category } from '../../component-23ae9ab3.js';
+export { C as Category } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/category/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/category/index.js

@@ -1,4 +1,4 @@
-export { C as Category } from '../../component-23ae9ab3.js';
+export { C as Category } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/content/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { c as Content } from '../../component-23ae9ab3.js';
+export { c as Content } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/content/index.js

@@ -1,4 +1,4 @@
-export { c as Content } from '../../component-23ae9ab3.js';
+export { c as Content } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { F as Footer } from '../../component-23ae9ab3.js';
+export { F as Footer } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/footer/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/footer/index.js

@@ -1,4 +1,4 @@
-export { F as Footer } from '../../component-23ae9ab3.js';
+export { F as Footer } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer-button/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../button/modern';
 import '../../../../shared/modern';
-export { d as FooterButton } from '../../component-23ae9ab3.js';
+export { d as FooterButton } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/footer-button/index.js

@@ -1,4 +1,4 @@
-export { d as FooterButton } from '../../component-23ae9ab3.js';
+export { d as FooterButton } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer-text/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { e as FooterText } from '../../component-23ae9ab3.js';
+export { e as FooterText } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/footer-text/index.js

@@ -1,4 +1,4 @@
-export { e as FooterText } from '../../component-23ae9ab3.js';
+export { e as FooterText } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/graphics/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { G as Graphics } from '../../component-23ae9ab3.js';
+export { G as Graphics } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/graphics/index.js

@@ -1,4 +1,4 @@
-export { G as Graphics } from '../../component-23ae9ab3.js';
+export { G as Graphics } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/main/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { M as Main } from '../../component-23ae9ab3.js';
+export { M as Main } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/main/index.js

@@ -1,4 +1,4 @@
-export { M as Main } from '../../component-23ae9ab3.js';
+export { M as Main } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/text/component.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { T as Text } from '../../component-23ae9ab3.js';
+export { T as Text } from '../../component-4c3cdd38.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-23ae9ab3";
+export * from "../../component-4c3cdd38";

package/pure-cell/modern/components/text/index.js

@@ -1,4 +1,4 @@
-export { T as Text } from '../../component-23ae9ab3.js';
+export { T as Text } from '../../component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/index.js

@@ -1,4 +1,4 @@
-export { P as PureCell } from './component-23ae9ab3.js';
+export { P as PureCell } from './component-4c3cdd38.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/select/components/base-select/Component.js

@@ -37,7 +37,6 @@ function (_a, ref) {
     var listRef = React.useRef(null);
     var initiatorRef = React.useRef(null);
     var searchRef = React.useRef(null);
-    var alreadyClickedRef = React.useRef(false);
     var scrollableContainerRef = React.useRef(null);
     var onOpenRef = React.useRef(onOpen);
     var _3 = React__default.default.useState(''), searchState = _3[0], setSearchState = _3[1];
@@ -98,6 +97,24 @@ function (_a, ref) {
         isItemDisabled: isItemDisabled,
         defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,
         scrollIntoView: scrollIntoView,
+        onSelectedItemChange: function (changes) {
+            var selectedItem = changes.selectedItem || initiatorRef.current;
+            if (selectedItem && !selectedItem.disabled) {
+                var alreadySelected = selectedItems.includes(selectedItem);
+                var allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
+                if (alreadySelected && allowRemove) {
+                    removeSelectedItem(selectedItem);
+                }
+                if (!alreadySelected) {
+                    if (multiple) {
+                        addSelectedItem(selectedItem);
+                    }
+                    else {
+                        setSelectedItems([selectedItem]);
+                    }
+                }
+            }
+        },
         onIsOpenChange: function (changes) {
             if (onOpenRef.current) {
                 /**
@@ -126,16 +143,9 @@ function (_a, ref) {
                 }
             }
         },
-        // eslint-disable-next-line complexity
         stateReducer: function (state, actionAndChanges) {
             var type = actionAndChanges.type, changes = actionAndChanges.changes;
-            var selectedItem = changes.selectedItem;
             switch (type) {
-                case downshift.useCombobox.stateChangeTypes.InputBlur:
-                    if (view === 'mobile') {
-                        return state;
-                    }
-                    return changes;
                 case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
                     if (!circularNavigation && state.highlightedIndex === options.length - 1) {
                         return tslib.__assign(tslib.__assign({}, changes), { highlightedIndex: state.highlightedIndex });
@@ -147,42 +157,36 @@ function (_a, ref) {
                     }
                     return changes;
                 case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-                case downshift.useCombobox.stateChangeTypes.ItemClick:
+                case downshift.useCombobox.stateChangeTypes.ItemClick: {
+                    var selectedItem = changes.selectedItem;
                     initiatorRef.current = selectedItem || null;
-                    if (selectedItem && !selectedItem.disabled && !alreadyClickedRef.current) {
-                        // TODO!!! Проблема downshift + React 18. ItemClick срабатывает дважды. См https://github.com/downshift-js/downshift/issues/1384
-                        if (view === 'mobile' && React__default.default.version.indexOf('18') === 0) {
-                            alreadyClickedRef.current = true;
-                            setTimeout(function () {
-                                alreadyClickedRef.current = false;
-                            });
-                        }
-                        var alreadySelected = selectedItems.includes(selectedItem);
-                        var allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
-                        if (alreadySelected && allowRemove) {
-                            removeSelectedItem(selectedItem);
-                        }
-                        if (!alreadySelected) {
-                            if (multiple) {
-                                addSelectedItem(selectedItem);
-                            }
-                            else {
-                                setSelectedItems([selectedItem]);
-                            }
-                        }
-                    }
-                    return tslib.__assign(tslib.__assign({}, changes), { isOpen: !closeOnSelect || (view === 'mobile' && multiple), 
+                    return tslib.__assign(tslib.__assign({}, changes), { selectedItem: state.selectedItem === selectedItem ? null : selectedItem, isOpen: !closeOnSelect || (view === 'mobile' && multiple), 
                         // при closeOnSelect === false - сохраняем подсвеченный индекс
                         highlightedIndex: state.isOpen && !closeOnSelect
                             ? state.highlightedIndex
                             : changes.highlightedIndex });
+                }
                 default:
                     return changes;
             }
         },
     }), open = _7.isOpen, getMenuProps = _7.getMenuProps, getInputProps = _7.getInputProps, getItemProps = _7.getItemProps, getLabelProps = _7.getLabelProps, highlightedIndex = _7.highlightedIndex, toggleMenu = _7.toggleMenu, openMenu = _7.openMenu, closeMenu = _7.closeMenu, setHighlightedIndex = _7.setHighlightedIndex;
-    var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
+    React.useEffect(function () {
+        /*
+         * При изменении openProp, состояние внутри downshift в useEnhancedReducer не меняется, поэтому меняем его таким способом
+         * Скорее всего это исправят в будущих версиях downshift
+         */
+        if (openProp !== undefined) {
+            if (openProp) {
+                openMenu();
+            }
+            else {
+                closeMenu();
+            }
+        }
+    }, [openProp, openMenu, closeMenu]);
     var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
+    var _8 = getMenuProps({ ref: listRef }, { suppressRefError: true }), menuRef = _8.ref, menuProps = tslib.__rest(_8, ["ref"]);
     var handleEntered = function (node, isAppearing) {
         var _a, _b, _c, _d, _e;
         if (showSearch)
@@ -333,7 +337,7 @@ function (_a, ref) {
                 _a[mobileStyles.search] = view === 'mobile',
                 _a)), ref: mergeRefs__default.default([searchRef, ((_c = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _c === void 0 ? void 0 : _c.ref) || null]) })));
     };
-    var _8 = optionsListProps, header = _8.header, emptyPlaceholder = _8.emptyPlaceholder;
+    var _9 = optionsListProps, header = _9.header, emptyPlaceholder = _9.emptyPlaceholder;
     var renderOptionsListHeader = function () {
         if (header || (view === 'desktop' && showSearch)) {
             return (React__default.default.createElement(React__default.default.Fragment, null,
@@ -356,7 +360,7 @@ function (_a, ref) {
         if (flatOptions.length === 0 && !showEmptyOptionsList && !showSearch)
             return null;
         var listProps = optionsListProps;
-        return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) }),
+        return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) }),
             React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_b = {}, _b[mobileStyles.scrollbar] = view === 'mobile', _b)), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
                     _c[mobileStyles.optionGroup] = view === 'mobile',
                     _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
@@ -370,7 +374,7 @@ function (_a, ref) {
     };
     var renderInBottomSheet = function () {
         if (!nativeSelect && BottomSheet) {
-            return (React__default.default.createElement(BottomSheet, tslib.__assign({ dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'bottom-sheet'), open: open, className: mobileStyles.sheet, contentClassName: mobileStyles.sheetContent, containerClassName: mobileStyles.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, initialHeight: showSearch ? 'full' : 'default' }, bottomSheetProps, { scrollableContainerRef: scrollableContainerRef, onClose: function () {
+            return (React__default.default.createElement(BottomSheet, tslib.__assign({ dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'bottom-sheet'), open: open, className: mobileStyles.sheet, contentClassName: mobileStyles.sheetContent, containerClassName: mobileStyles.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, initialHeight: showSearch ? 'full' : 'default' }, bottomSheetProps, { sheetContainerRef: menuRef, scrollableContainerRef: scrollableContainerRef, onClose: function () {
                     var _a;
                     closeMenu();
                     (_a = bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.onClose) === null || _a === void 0 ? void 0 : _a.call(bottomSheetProps);
@@ -382,7 +386,7 @@ function (_a, ref) {
     };
     var renderInModalMobile = function () {
         if (!nativeSelect && ModalMobile) {
-            return (React__default.default.createElement(ModalMobile, tslib.__assign({ dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'modal'), open: open, hasCloser: true }, modalProps, { onClose: function () {
+            return (React__default.default.createElement(ModalMobile, tslib.__assign({ dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'modal'), open: open, hasCloser: true }, modalProps, { componentRef: menuRef, onClose: function () {
                     var _a;
                     var args = [];
                     for (var _i = 0; _i < arguments.length; _i++) {