@alfalab/core-components 45.9.0-beta.3 → 45.10.0

package/base-modal/modern/Component.js

@@ -6,8 +6,9 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { Backdrop } from '../../backdrop/modern';
 import { Portal } from '../../portal/modern';
-import { browser } from '../../shared/modern';
+import { os, browser } from '../../shared/modern';
 import { stackingOrder, Stack } from '../../stack/modern';
+import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
 import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
 import './matches-polyfill.js';
 import '../../global-store/modern';
@@ -32,7 +33,7 @@ const BaseModalContext = React.createContext({
     setHasFooter: () => null,
     onClose: () => null,
 });
-const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, }, ref) => {
+const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, iOSLock = false, }, ref) => {
     const [exited, setExited] = useState(null);
     const [hasScroll, setHasScroll] = useState(false);
     const [hasHeader, setHasHeader] = useState(false);
@@ -91,6 +92,9 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         }
     }, [hasFooter, hasHeader, headerOffset]);
     const handleClose = useCallback((event, reason) => {
+        if (iOSLock && os.isIOS()) {
+            unlockScroll();
+        }
         if (onClose) {
             onClose(event, reason);
         }
@@ -101,7 +105,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             onEscapeKeyDown(event);
         }
         return null;
-    }, [onBackdropClick, onClose, onEscapeKeyDown]);
+    }, [onBackdropClick, onClose, onEscapeKeyDown, iOSLock]);
     const handleBackdropMouseDown = (event) => {
         let clickedOnScrollbar = false;
         const clientWidth = event.target?.clientWidth;
@@ -175,7 +179,12 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         if (open && isExited) {
             if (!disableBlockingScroll) {
                 const el = getContainer();
-                handleContainer(el);
+                const shouldIOSLock = iOSLock && os.isIOS();
+                handleContainer(el, shouldIOSLock);
+                if (shouldIOSLock) {
+                    syncHeight();
+                    lockScroll();
+                }
                 restoreContainerStylesRef.current = () => {
                     restoreContainerStylesRef.current = null;
                     restoreContainerStyles(el);
@@ -183,7 +192,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             }
             setExited(false);
         }
-    }, [getContainer, open, disableBlockingScroll, isExited]);
+    }, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
     useEffect(() => {
         const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
         resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
@@ -196,6 +205,11 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             }
         };
     }, []);
+    useEffect(() => {
+        if (disableAutoFocus || !open)
+            return;
+        wrapperRef.current?.focus();
+    }, [open, disableAutoFocus]);
     const contextValue = useMemo(() => ({
         parentRef: wrapperRef,
         componentRef: componentNodeRef,
@@ -222,7 +236,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         handleClose,
     ]);
     const renderContent = () => (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(BaseModalContext.Provider, { value: contextValue },
-        React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+        React.createElement(FocusLock, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
             Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
                     zIndex: computedZIndex,
                 } })),
@@ -232,9 +246,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
                     ref,
                     wrapperRef,
                     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.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },

package/base-modal/modern/helpers/lockScroll.d.ts

@@ -0,0 +1,4 @@
+declare const lockScroll: () => void;
+declare const unlockScroll: () => void;
+declare const syncHeight: () => void;
+export { lockScroll, unlockScroll, syncHeight };

package/base-modal/modern/helpers/lockScroll.js

@@ -0,0 +1,14 @@
+let scrollY;
+const lockScroll = () => {
+    scrollY = window.scrollY;
+    document.body.classList.add('is-locked');
+};
+const unlockScroll = () => {
+    document.body.classList.remove('is-locked');
+    window.scrollTo(0, scrollY);
+};
+const syncHeight = () => {
+    document.body.style.setProperty('--window-inner-scrollY', `${window.scrollY}px`);
+};
+
+export { lockScroll, syncHeight, unlockScroll };

package/base-modal/modern/index.css

@@ -15,6 +15,12 @@
 } :root {
 } :root {
 } :root {
+} :root {
+    --window-inner-scrollY: 10px; /* fallback value to prevent ci error */
+} body.is-locked {
+    margin-top: calc(var(--window-inner-scrollY) * -1);
+    position: fixed;
+    overflow: hidden;
 } .base-modal__component_1apcq {
     position: relative;
     box-sizing: border-box;

package/base-modal/modern/index.js

@@ -10,5 +10,6 @@ import '../../backdrop/modern';
 import '../../portal/modern';
 import '../../shared/modern';
 import '../../stack/modern';
+import './helpers/lockScroll.js';
 import './matches-polyfill.js';
 import '../../global-store/modern';

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

@@ -2,5 +2,5 @@ declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
 declare const restoreContainerStyles: (container: HTMLElement) => void;
-declare const handleContainer: (container?: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement, shouldIOSLock?: boolean) => void;
 export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/modern/utils.js

@@ -36,7 +36,7 @@ const restoreContainerStyles = (container) => {
         });
     }
 };
-const handleContainer = (container) => {
+const handleContainer = (container, shouldIOSLock = false) => {
     if (!container)
         return;
     const modalRestoreStyles = getModalStore().getRestoreStyles();
@@ -74,7 +74,9 @@ const handleContainer = (container) => {
             el: scrollContainer,
         });
     }
-    scrollContainer.style.overflow = 'hidden';
+    if (!shouldIOSLock) {
+        scrollContainer.style.overflow = 'hidden';
+    }
     modalRestoreStyles.push({
         container,
         modals: 1,

package/base-modal/utils.d.ts

@@ -2,5 +2,5 @@ declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
 declare const restoreContainerStyles: (container: HTMLElement) => void;
-declare const handleContainer: (container?: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement, shouldIOSLock?: boolean) => void;
 export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/utils.js

@@ -41,7 +41,8 @@ var restoreContainerStyles = function (container) {
         });
     }
 };
-var handleContainer = function (container) {
+var handleContainer = function (container, shouldIOSLock) {
+    if (shouldIOSLock === void 0) { shouldIOSLock = false; }
     if (!container)
         return;
     var modalRestoreStyles = coreComponentsGlobalStore.getModalStore().getRestoreStyles();
@@ -79,7 +80,9 @@ var handleContainer = function (container) {
             el: scrollContainer,
         });
     }
-    scrollContainer.style.overflow = 'hidden';
+    if (!shouldIOSLock) {
+        scrollContainer.style.overflow = 'hidden';
+    }
     modalRestoreStyles.push({
         container: container,
         modals: 1,

package/bottom-sheet/components/header/Component.d.ts

@@ -1,6 +1,6 @@
 import { FC, RefObject } from 'react';
-import { NavigationBarProps } from "../../../navigation-bar";
-type HeaderProps = Omit<NavigationBarProps, 'view' | 'size'> & {
+import { NavigationBarPrivateProps } from "../../../navigation-bar-private";
+type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {
     headerRef: RefObject<HTMLDivElement>;
     headerOffset: number;
 };

package/bottom-sheet/components/header/Component.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../../../base-modal');
-var coreComponentsNavigationBar = require('../../../navigation-bar');
+var coreComponentsNavigationBarPrivate = require('../../../navigation-bar-private');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -25,7 +25,7 @@ var Header = function (_a) {
         setHasHeader(true);
     }, [setHasHeader]);
     var hasContent = Boolean(title || children);
-    return (React__default.default.createElement(coreComponentsNavigationBar.NavigationBar, tslib.__assign({}, restProps, { ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn__default.default(styles.headerWrapper, className, (_b = {},
+    return (React__default.default.createElement(coreComponentsNavigationBarPrivate.NavigationBarPrivate, tslib.__assign({}, restProps, { ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn__default.default(styles.headerWrapper, className, (_b = {},
             _b[styles.highlighted] = hasContent && headerHighlighted && sticky,
             _b[styles.sticky] = sticky,
             _b[styles.hasContent] = hasContent,

package/bottom-sheet/cssm/components/header/Component.d.ts

@@ -1,6 +1,6 @@
 import { FC, RefObject } from 'react';
-import { NavigationBarProps } from "../../../../navigation-bar";
-type HeaderProps = Omit<NavigationBarProps, 'view' | 'size'> & {
+import { NavigationBarPrivateProps } from "../../../../navigation-bar-private";
+type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {
     headerRef: RefObject<HTMLDivElement>;
     headerOffset: number;
 };

package/bottom-sheet/cssm/components/header/Component.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../../../../base-modal/cssm');
-var coreComponentsNavigationBar = require('../../../../navigation-bar/cssm');
+var coreComponentsNavigationBarPrivate = require('../../../../navigation-bar-private/cssm');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -24,7 +24,7 @@ var Header = function (_a) {
         setHasHeader(true);
     }, [setHasHeader]);
     var hasContent = Boolean(title || children);
-    return (React__default.default.createElement(coreComponentsNavigationBar.NavigationBar, tslib.__assign({}, restProps, { ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn__default.default(styles__default.default.headerWrapper, className, (_b = {},
+    return (React__default.default.createElement(coreComponentsNavigationBarPrivate.NavigationBarPrivate, tslib.__assign({}, restProps, { ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn__default.default(styles__default.default.headerWrapper, className, (_b = {},
             _b[styles__default.default.highlighted] = hasContent && headerHighlighted && sticky,
             _b[styles__default.default.sticky] = sticky,
             _b[styles__default.default.hasContent] = hasContent,

package/bottom-sheet/cssm/types.d.ts

@@ -3,7 +3,7 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import { HandledEvents } from 'react-swipeable/es/types';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "../../base-modal";
-import { NavigationBarProps } from "../../navigation-bar";
+import { NavigationBarPrivateProps as NavigationBarProps } from "../../navigation-bar-private";
 type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {

package/bottom-sheet/esm/component.js

@@ -11,7 +11,7 @@ import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 import { horizontalDirections } from './consts/swipeConsts.js';
 import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
-import '../../navigation-bar/esm';
+import '../../navigation-bar-private/esm';
 import '../../backdrop/esm';
 import './enums/swipeEnums.js';
 

package/bottom-sheet/esm/components/header/Component.d.ts

@@ -1,6 +1,6 @@
 import { FC, RefObject } from 'react';
-import { NavigationBarProps } from "../../../../navigation-bar";
-type HeaderProps = Omit<NavigationBarProps, 'view' | 'size'> & {
+import { NavigationBarPrivateProps } from "../../../../navigation-bar-private";
+type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {
     headerRef: RefObject<HTMLDivElement>;
     headerOffset: number;
 };

package/bottom-sheet/esm/components/header/Component.js

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/esm';
-import { NavigationBar } from '../../../../navigation-bar/esm';
+import { NavigationBarPrivate } from '../../../../navigation-bar-private/esm';
 
 var styles = {"headerWrapper":"bottom-sheet__headerWrapper_i4e69","hasContent":"bottom-sheet__hasContent_i4e69","header":"bottom-sheet__header_i4e69","sticky":"bottom-sheet__sticky_i4e69","highlighted":"bottom-sheet__highlighted_i4e69","justifyEnd":"bottom-sheet__justifyEnd_i4e69","addon":"bottom-sheet__addon_i4e69","addonFixed":"bottom-sheet__addonFixed_i4e69","title":"bottom-sheet__title_i4e69","titleCenter":"bottom-sheet__titleCenter_i4e69","titleLeft":"bottom-sheet__titleLeft_i4e69","trimTitle":"bottom-sheet__trimTitle_i4e69"};
 require('./index.css');
@@ -18,7 +18,7 @@ var Header = function (_a) {
         setHasHeader(true);
     }, [setHasHeader]);
     var hasContent = Boolean(title || children);
-    return (React.createElement(NavigationBar, __assign({}, restProps, { ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles.headerWrapper, className, (_b = {},
+    return (React.createElement(NavigationBarPrivate, __assign({}, restProps, { ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles.headerWrapper, className, (_b = {},
             _b[styles.highlighted] = hasContent && headerHighlighted && sticky,
             _b[styles.sticky] = sticky,
             _b[styles.hasContent] = hasContent,

package/bottom-sheet/esm/index.js

@@ -10,7 +10,7 @@ import '../../base-modal/esm';
 import '../../shared/esm';
 import './components/footer/Component.js';
 import './components/header/Component.js';
-import '../../navigation-bar/esm';
+import '../../navigation-bar-private/esm';
 import './components/swipeable-backdrop/Component.js';
 import '../../backdrop/esm';
 import './consts/swipeConsts.js';

package/bottom-sheet/esm/types.d.ts

@@ -3,7 +3,7 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import { HandledEvents } from 'react-swipeable/es/types';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "../../base-modal";
-import { NavigationBarProps } from "../../navigation-bar";
+import { NavigationBarPrivateProps as NavigationBarProps } from "../../navigation-bar-private";
 type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {

package/bottom-sheet/modern/component.js

@@ -10,7 +10,7 @@ import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 import { horizontalDirections } from './consts/swipeConsts.js';
 import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
-import '../../navigation-bar/modern';
+import '../../navigation-bar-private/modern';
 import '../../backdrop/modern';
 import './enums/swipeEnums.js';
 

package/bottom-sheet/modern/components/header/Component.d.ts

@@ -1,6 +1,6 @@
 import { FC, RefObject } from 'react';
-import { NavigationBarProps } from "../../../../navigation-bar";
-type HeaderProps = Omit<NavigationBarProps, 'view' | 'size'> & {
+import { NavigationBarPrivateProps } from "../../../../navigation-bar-private";
+type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {
     headerRef: RefObject<HTMLDivElement>;
     headerOffset: number;
 };

package/bottom-sheet/modern/components/header/Component.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/modern';
-import { NavigationBar } from '../../../../navigation-bar/modern';
+import { NavigationBarPrivate } from '../../../../navigation-bar-private/modern';
 
 const styles = {"headerWrapper":"bottom-sheet__headerWrapper_i4e69","hasContent":"bottom-sheet__hasContent_i4e69","header":"bottom-sheet__header_i4e69","sticky":"bottom-sheet__sticky_i4e69","highlighted":"bottom-sheet__highlighted_i4e69","justifyEnd":"bottom-sheet__justifyEnd_i4e69","addon":"bottom-sheet__addon_i4e69","addonFixed":"bottom-sheet__addonFixed_i4e69","title":"bottom-sheet__title_i4e69","titleCenter":"bottom-sheet__titleCenter_i4e69","titleLeft":"bottom-sheet__titleLeft_i4e69","trimTitle":"bottom-sheet__trimTitle_i4e69"};
 require('./index.css');
@@ -15,7 +15,7 @@ const Header = ({ className, sticky, headerRef, headerOffset, title, children, .
         setHasHeader(true);
     }, [setHasHeader]);
     const hasContent = Boolean(title || children);
-    return (React.createElement(NavigationBar, { ...restProps, ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles.headerWrapper, className, {
+    return (React.createElement(NavigationBarPrivate, { ...restProps, ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles.headerWrapper, className, {
             [styles.highlighted]: hasContent && headerHighlighted && sticky,
             [styles.sticky]: sticky,
             [styles.hasContent]: hasContent,

package/bottom-sheet/modern/index.js

@@ -9,7 +9,7 @@ import '../../base-modal/modern';
 import '../../shared/modern';
 import './components/footer/Component.js';
 import './components/header/Component.js';
-import '../../navigation-bar/modern';
+import '../../navigation-bar-private/modern';
 import './components/swipeable-backdrop/Component.js';
 import '../../backdrop/modern';
 import './consts/swipeConsts.js';

package/bottom-sheet/modern/types.d.ts

@@ -3,7 +3,7 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import { HandledEvents } from 'react-swipeable/es/types';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "../../base-modal";
-import { NavigationBarProps } from "../../navigation-bar";
+import { NavigationBarPrivateProps as NavigationBarProps } from "../../navigation-bar-private";
 type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {

package/bottom-sheet/types.d.ts

@@ -3,7 +3,7 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import { HandledEvents } from 'react-swipeable/es/types';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "../base-modal";
-import { NavigationBarProps } from "../navigation-bar";
+import { NavigationBarPrivateProps as NavigationBarProps } from "../navigation-bar-private";
 type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {

package/calendar/components/calendar-mobile/Component.js

@@ -151,7 +151,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         if (monthOnlyView) {
             return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
-        return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles.calendar), contentClassName: styles.content }, commonProps, restProps)));
+        return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles.calendar), contentClassName: styles.content, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {

package/calendar/components/period-slider/Component.js

@@ -6,6 +6,7 @@ var endOfWeek = require('date-fns/endOfWeek');
 var startOfWeek = require('date-fns/startOfWeek');
 var desktop = require('../../../button/desktop');
 var coreComponentsIconButton = require('../../../icon-button');
+var coreComponentsShared = require('../../../shared');
 var ChevronBackMIcon = require('@alfalab/icons-glyph/ChevronBackMIcon');
 var utils = require('../../utils.js');
 var components_periodSlider_utils = require('./utils.js');
@@ -21,8 +22,8 @@ var styles = {"component":"calendar__component_sa2fq","period":"calendar__period
 require('./index.css');
 
 var PeriodSlider = function (_a) {
-    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _l = _a.emptyValueText, emptyValueText = _l === void 0 ? 'Укажите период' : _l;
-    var _m = React.useMemo(function () {
+    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, _l = _a.dataTestId, dataTestId = _l === void 0 ? 'period-slider' : _l, _m = _a.emptyValueText, emptyValueText = _m === void 0 ? 'Укажите период' : _m;
+    var _o = React.useMemo(function () {
         var _a;
         var from;
         var to;
@@ -39,7 +40,7 @@ var PeriodSlider = function (_a) {
             }
         }
         return [from, to];
-    }, [periodType, value]), valueFrom = _m[0], valueTo = _m[1];
+    }, [periodType, value]), valueFrom = _o[0], valueTo = _o[1];
     var yearSelectorValue = React.useMemo(function () { return components_periodSlider_utils.getYearSelectorValue(valueFrom, showCurrentYearSelector); }, [showCurrentYearSelector, valueFrom]);
     var showArrow = function (direction) {
         if (hideDisabledArrows) {
@@ -87,9 +88,9 @@ var PeriodSlider = function (_a) {
         return (React__default.default.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
     };
     return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
-        showArrow('prev') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+        showArrow('prev') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-previous-day') })),
         renderHeader(),
-        showArrow('next') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+        showArrow('next') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-next-day') }))));
 };
 
 exports.PeriodSlider = PeriodSlider;

package/calendar/cssm/components/calendar-mobile/Component.js

@@ -148,7 +148,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         if (monthOnlyView) {
             return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
-        return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles__default.default.calendar), contentClassName: styles__default.default.content }, commonProps, restProps)));
+        return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles__default.default.calendar), contentClassName: styles__default.default.content, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {

package/calendar/cssm/components/period-slider/Component.js

@@ -6,6 +6,7 @@ var endOfWeek = require('date-fns/endOfWeek');
 var startOfWeek = require('date-fns/startOfWeek');
 var desktop = require('../../../../button/cssm/desktop');
 var coreComponentsIconButton = require('../../../../icon-button/cssm');
+var coreComponentsShared = require('../../../../shared/cssm');
 var ChevronBackMIcon = require('@alfalab/icons-glyph/ChevronBackMIcon');
 var utils = require('../../utils.js');
 var components_periodSlider_utils = require('./utils.js');
@@ -20,8 +21,8 @@ var startOfWeek__default = /*#__PURE__*/_interopDefaultCompat(startOfWeek);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var PeriodSlider = function (_a) {
-    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _l = _a.emptyValueText, emptyValueText = _l === void 0 ? 'Укажите период' : _l;
-    var _m = React.useMemo(function () {
+    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, _l = _a.dataTestId, dataTestId = _l === void 0 ? 'period-slider' : _l, _m = _a.emptyValueText, emptyValueText = _m === void 0 ? 'Укажите период' : _m;
+    var _o = React.useMemo(function () {
         var _a;
         var from;
         var to;
@@ -38,7 +39,7 @@ var PeriodSlider = function (_a) {
             }
         }
         return [from, to];
-    }, [periodType, value]), valueFrom = _m[0], valueTo = _m[1];
+    }, [periodType, value]), valueFrom = _o[0], valueTo = _o[1];
     var yearSelectorValue = React.useMemo(function () { return components_periodSlider_utils.getYearSelectorValue(valueFrom, showCurrentYearSelector); }, [showCurrentYearSelector, valueFrom]);
     var showArrow = function (direction) {
         if (hideDisabledArrows) {
@@ -86,9 +87,9 @@ var PeriodSlider = function (_a) {
         return (React__default.default.createElement("span", { className: styles__default.default.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
     };
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
-        showArrow('prev') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles__default.default.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+        showArrow('prev') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles__default.default.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-previous-day') })),
         renderHeader(),
-        showArrow('next') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles__default.default.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+        showArrow('next') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles__default.default.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-next-day') }))));
 };
 
 exports.PeriodSlider = PeriodSlider;

package/calendar/cssm/desktop/Component.desktop.js

@@ -134,7 +134,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
             _b[styles__default.default.sixWeeks] = weeks.length === 6,
             _b[styles__default.default.responsive] = responsive,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles__default.default.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default.default.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles__default.default.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'slider') })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default.default.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React__default.default.createElement("div", { ref: scrollableNodeRef, className: cn__default.default(styles__default.default.container, (_c = {},
                 _c[styles__default.default.customScrollbar] = view === 'years' && shouldUseCustomScrollbar,
                 _c[styles__default.default.nativeScrollbar] = view === 'years' && !shouldUseCustomScrollbar,

package/calendar/cssm/utils.d.ts

@@ -93,5 +93,7 @@ declare function getCalendarMobileTestIds(dataTestId: string): {
     closer: string;
     btnApply: string;
     btnReset: string;
+    btnNextDate: string;
+    btnPreviousDate: string;
 };
 export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds };

package/calendar/cssm/utils.js

@@ -247,6 +247,8 @@ function getCalendarMobileTestIds(dataTestId) {
         closer: coreComponentsShared.getDataTestId(dataTestId, 'header-closer'),
         btnApply: coreComponentsShared.getDataTestId(dataTestId, 'btn-apply'),
         btnReset: coreComponentsShared.getDataTestId(dataTestId, 'btn-reset'),
+        btnNextDate: coreComponentsShared.getDataTestId(dataTestId, 'slider-btn-next-day'),
+        btnPreviousDate: coreComponentsShared.getDataTestId(dataTestId, 'slider-btn-previous-day'),
     };
 }
 

package/calendar/desktop/Component.desktop.js

@@ -135,7 +135,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
             _b[styles.sixWeeks] = weeks.length === 6,
             _b[styles.responsive] = responsive,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'slider') })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React__default.default.createElement("div", { ref: scrollableNodeRef, className: cn__default.default(styles.container, (_c = {},
                 _c[styles.customScrollbar] = view === 'years' && shouldUseCustomScrollbar,
                 _c[styles.nativeScrollbar] = view === 'years' && !shouldUseCustomScrollbar,

package/calendar/esm/components/calendar-mobile/Component.js

@@ -190,7 +190,7 @@ var CalendarMobile = forwardRef(function (_a, ref) {
         if (monthOnlyView) {
             return (React.createElement(CalendarMonthOnlyView, __assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
-        return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content }, commonProps, restProps)));
+        return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {