@astral/ui 4.113.0 → 4.113.2

package/components/DatePicker/DatePickerPopover/DatePickerPopover.d.ts

@@ -1,10 +1,11 @@
 import { type PopperProps } from '@mui/material/Popper';
 import { type PropsWithChildren } from 'react';
+import { type CloseEventReason } from '../../types/CloseEventReason';
 import { type WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
 export type DatePickerPopperProps = PropsWithChildren<Omit<WithoutEmotionSpecific<PopperProps>, 'children' | 'disablePortal' | 'transition'> & {
     /**
      * Обработчик закрытия Popper
      */
-    onClose: () => void;
+    onClose: (event?: Event, reason?: CloseEventReason) => void;
 }>;
 export declare const DatePickerPopover: ({ children, onMouseEnter, onMouseLeave, onClose, anchorEl, title, open, ...props }: DatePickerPopperProps) => import("react/jsx-runtime").JSX.Element;

package/components/DatePicker/DatePickerPopover/DatePickerPopover.js

@@ -5,13 +5,15 @@ import { usePopoverAnimation } from '../../usePopoverAnimation';
 import { useViewportType } from '../../useViewportType';
 import { datePickerClassnames } from '../constants';
 import { AnimatedWrapper, InnerContainer, StyledPopper } from './styles';
+import { useLogic } from './useLogic';
 export const DatePickerPopover = ({ children, onMouseEnter, onMouseLeave, onClose, anchorEl, title, open, ...props }) => {
     const { isMobile } = useViewportType();
     const { shouldRender, handleAnimationEnd } = usePopoverAnimation(open);
+    const { handleClickAway, handleDrawerClose } = useLogic({ onClose });
     if (isMobile) {
-        return (_jsx(BottomDrawer, { className: datePickerClassnames.popover, title: title, open: open, onClose: onClose, 
+        return (_jsx(BottomDrawer, { className: datePickerClassnames.popover, title: title, open: open, onClose: handleDrawerClose, 
             // Отключает простановку фокуса в инпут при закрытии Drawer
             disableRestoreFocus: true, children: children }));
     }
-    return (_jsx(StyledPopper, { className: datePickerClassnames.popover, open: shouldRender, anchorEl: anchorEl, ...props, children: _jsx(AnimatedWrapper, { "$isOpen": open, onAnimationEnd: handleAnimationEnd, children: _jsx(ClickAwayListener, { onClickAway: onClose, children: _jsx(InnerContainer, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: datePickerClassnames.popoverContainer, children: children }) }) }) }));
+    return (_jsx(StyledPopper, { className: datePickerClassnames.popover, open: shouldRender, anchorEl: anchorEl, ...props, children: _jsx(AnimatedWrapper, { "$isOpen": open, onAnimationEnd: handleAnimationEnd, children: _jsx(ClickAwayListener, { isActive: open, onClickAway: handleClickAway, children: _jsx(InnerContainer, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: datePickerClassnames.popoverContainer, children: children }) }) }) }));
 };

package/components/DatePicker/DatePickerPopover/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/DatePicker/DatePickerPopover/useLogic/index.js

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/DatePicker/DatePickerPopover/useLogic/useLogic.d.ts

@@ -0,0 +1,9 @@
+import { type CloseEventReason } from '../../../types/CloseEventReason';
+type UseLogicParams = {
+    onClose: (event?: Event, reason?: CloseEventReason) => void;
+};
+export declare const useLogic: ({ onClose }: UseLogicParams) => {
+    handleClickAway: (event: PointerEvent, reason: CloseEventReason) => void;
+    handleDrawerClose: () => void;
+};
+export {};

package/components/DatePicker/DatePickerPopover/useLogic/useLogic.js

@@ -0,0 +1,9 @@
+import { stopNextMouseDownPropagation } from './utils';
+export const useLogic = ({ onClose }) => {
+    const handleClickAway = (event, reason) => {
+        stopNextMouseDownPropagation();
+        onClose(event, reason);
+    };
+    const handleDrawerClose = () => onClose();
+    return { handleClickAway, handleDrawerClose };
+};

package/components/DatePicker/DatePickerPopover/useLogic/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './stopNextMouseDownPropagation';

package/components/DatePicker/DatePickerPopover/useLogic/utils/index.js

@@ -0,0 +1 @@
+export * from './stopNextMouseDownPropagation';

package/components/DatePicker/DatePickerPopover/useLogic/utils/stopNextMouseDownPropagation/index.d.ts

@@ -0,0 +1 @@
+export * from './stopNextMouseDownPropagation';

package/components/DatePicker/DatePickerPopover/useLogic/utils/stopNextMouseDownPropagation/index.js

@@ -0,0 +1 @@
+export * from './stopNextMouseDownPropagation';

package/components/DatePicker/DatePickerPopover/useLogic/utils/stopNextMouseDownPropagation/stopNextMouseDownPropagation.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Останавливает всплытие следующего mousedown.
+ */
+export declare const stopNextMouseDownPropagation: () => void;

package/components/DatePicker/DatePickerPopover/useLogic/utils/stopNextMouseDownPropagation/stopNextMouseDownPropagation.js

@@ -0,0 +1,15 @@
+/**
+ * Останавливает всплытие следующего mousedown.
+ */
+export const stopNextMouseDownPropagation = () => {
+    const stopMouseDown = (event) => {
+        event.stopPropagation();
+        removeListeners();
+    };
+    const removeListeners = () => {
+        window.removeEventListener('mousedown', stopMouseDown, true);
+        window.removeEventListener('pointerdown', removeListeners, true);
+    };
+    window.addEventListener('mousedown', stopMouseDown, true);
+    window.addEventListener('pointerdown', removeListeners, true);
+};

package/components/DatePicker/useLogic/useLogic.d.ts

@@ -1,11 +1,12 @@
 import { type Ref, type SyntheticEvent } from 'react';
+import { type CloseEventReason } from '../../types/CloseEventReason';
 import { type DatePickerProps } from '../types/props';
 type UseLogicParams = DatePickerProps & {
     forwardedRef: Ref<HTMLDivElement>;
 };
 export declare const useLogic: ({ label, value, maxDate, minDate, mask, onOpen, onClose, onBlur, onChange, forwardedRef, }: UseLogicParams) => {
     handleOpen: (event: SyntheticEvent) => void;
-    handleClose: () => void;
+    handleClose: (event?: Event, reason?: CloseEventReason) => void;
     confirmButtonProps: {
         onClick: () => void;
         disabled: boolean;
@@ -22,7 +23,7 @@ export declare const useLogic: ({ label, value, maxDate, minDate, mask, onOpen,
     datePickerProps: {
         open: boolean;
         anchorEl: HTMLDivElement | null;
-        onClose: () => void;
+        onClose: (event?: Event, reason?: CloseEventReason) => void;
         title: string | undefined;
     };
 };

package/components/DatePicker/useLogic/useLogic.js

@@ -41,11 +41,11 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
         onMaskedValueBlur();
         onBlur?.();
     };
-    function handleClose() {
+    const handleClose = (event, reason) => {
         flushMaskedValueAndCallOnBlur();
-        onClose?.();
+        onClose?.(event, reason);
         close();
-    }
+    };
     const handleInputBlur = () => {
         if (isOpen) {
             return;

package/components/DateRangePicker/useLogic/useLogic.d.ts

@@ -1,4 +1,5 @@
 import { type ForwardedRef, type SyntheticEvent } from 'react';
+import { type CloseEventReason } from '../../types/CloseEventReason';
 import { type DateRangePickerProps } from '../types';
 type UseLogicParams = DateRangePickerProps;
 export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpen, onClose, onBlur, }: UseLogicParams, forwardedRef: ForwardedRef<HTMLDivElement>) => {
@@ -25,7 +26,7 @@ export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpe
         anchorEl: HTMLDivElement | null;
         onMouseEnter: () => void;
         onMouseLeave: () => void;
-        onClose: () => void;
+        onClose: (event?: Event, reason?: CloseEventReason) => void;
     };
     minMaxDateContextProviderProps: {
         minDate: Date;

package/components/DateRangePicker/useLogic/useLogic.js

@@ -88,10 +88,10 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
             onMaskedEndValueBlur();
         }
     };
-    const handleClose = () => {
+    const handleClose = (event, reason) => {
         flushActiveMaskedValueOnClose();
         onBlur?.();
-        onClose?.();
+        onClose?.(event, reason);
         close();
     };
     const handleStartInputBlur = () => {

package/components/NotificationList/Tabs/Tabs.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tab } from '../../Tabs';
-import { StyledTabs } from './styles';
+import { Tabs as AstralUITabs, Tab } from '../../Tabs';
 export const Tabs = ({ listType, notificationsCount, unreadNotificationsCount, onChange, }) => {
     const handleChange = (_, value) => {
         onChange(value);
     };
-    return (_jsxs(StyledTabs, { value: listType, onChange: handleChange, children: [_jsx(Tab, { value: "unread", label: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0435", count: unreadNotificationsCount }), _jsx(Tab, { value: "all", label: "\u0412\u0441\u0435", count: notificationsCount })] }));
+    return (_jsxs(AstralUITabs, { value: listType, onChange: handleChange, children: [_jsx(Tab, { value: "unread", label: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0435", count: unreadNotificationsCount }), _jsx(Tab, { value: "all", label: "\u0412\u0441\u0435", count: notificationsCount })] }));
 };

package/components/Tabs/Tab/styles.js

@@ -1,8 +1,8 @@
 import Tab from '@mui/material/Tab';
-import { HOVER_MEDIA } from '../../constants';
+import { HOVER_MEDIA, TABS_HEIGHT, TABS_HEIGHT_MOBILE } from '../../constants';
 import { styled } from '../../styled';
 export const StyledTab = styled(Tab) `
-  min-height: 36px;
+  min-height: ${TABS_HEIGHT};
   padding: 0;
 
   line-height: 20px;
@@ -10,6 +10,10 @@ export const StyledTab = styled(Tab) `
 
   border: 2px solid transparent;
 
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    min-height: ${TABS_HEIGHT_MOBILE};
+  }
+
   &:last-child {
     margin-right: 0;
   }

package/components/Tabs/styles.js

@@ -1,4 +1,5 @@
 import MuiTabs, { tabsClasses } from '@mui/material/Tabs';
+import { TABS_HEIGHT, TABS_HEIGHT_MOBILE } from '../constants';
 import { styled } from '../styled';
 export const Container = styled.div `
   overflow-x: auto;
@@ -20,8 +21,9 @@ export const Container = styled.div `
   }
 `;
 export const Divider = styled.div `
-  position: relative;
-  bottom: 2px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 
   width: 100%;
   height: 1px;
@@ -40,7 +42,14 @@ export const StyledTabs = styled(MuiTabs) `
   }
 `;
 export const Wrapper = styled.div `
+  position: relative;
+
   display: inline-block;
 
   min-width: 100%;
+  height: ${TABS_HEIGHT};
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    height: ${TABS_HEIGHT_MOBILE};
+  }
 `;

package/components/constants/index.d.ts

@@ -3,3 +3,4 @@ export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
 export * from './media';
+export * from './tabs';

package/components/constants/index.js

@@ -3,3 +3,4 @@ export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
 export * from './media';
+export * from './tabs';

package/components/constants/tabs.d.ts

@@ -0,0 +1,2 @@
+export declare const TABS_HEIGHT = "34px";
+export declare const TABS_HEIGHT_MOBILE = "40px";

package/components/constants/tabs.js

@@ -0,0 +1,2 @@
+export const TABS_HEIGHT = '34px';
+export const TABS_HEIGHT_MOBILE = '40px';

package/components/theme/components/MuiTabs.js

@@ -1,9 +1,13 @@
 export const MuiTabs = {
     styleOverrides: {
-        root() {
+        root({ theme }) {
             return {
-                minHeight: 38,
-                height: 38,
+                minHeight: 34,
+                height: 34,
+                [theme.breakpoints.down('mobile')]: {
+                    minHeight: 40,
+                    height: 40,
+                },
             };
         },
         indicator({ theme }) {

package/node/components/DatePicker/DatePickerPopover/DatePickerPopover.d.ts

@@ -1,10 +1,11 @@
 import { type PopperProps } from '@mui/material/Popper';
 import { type PropsWithChildren } from 'react';
+import { type CloseEventReason } from '../../types/CloseEventReason';
 import { type WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
 export type DatePickerPopperProps = PropsWithChildren<Omit<WithoutEmotionSpecific<PopperProps>, 'children' | 'disablePortal' | 'transition'> & {
     /**
      * Обработчик закрытия Popper
      */
-    onClose: () => void;
+    onClose: (event?: Event, reason?: CloseEventReason) => void;
 }>;
 export declare const DatePickerPopover: ({ children, onMouseEnter, onMouseLeave, onClose, anchorEl, title, open, ...props }: DatePickerPopperProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/DatePicker/DatePickerPopover/DatePickerPopover.js

@@ -8,14 +8,16 @@ const usePopoverAnimation_1 = require("../../usePopoverAnimation");
 const useViewportType_1 = require("../../useViewportType");
 const constants_1 = require("../constants");
 const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
 const DatePickerPopover = ({ children, onMouseEnter, onMouseLeave, onClose, anchorEl, title, open, ...props }) => {
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const { shouldRender, handleAnimationEnd } = (0, usePopoverAnimation_1.usePopoverAnimation)(open);
+    const { handleClickAway, handleDrawerClose } = (0, useLogic_1.useLogic)({ onClose });
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { className: constants_1.datePickerClassnames.popover, title: title, open: open, onClose: onClose, 
+        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { className: constants_1.datePickerClassnames.popover, title: title, open: open, onClose: handleDrawerClose, 
             // Отключает простановку фокуса в инпут при закрытии Drawer
             disableRestoreFocus: true, children: children }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledPopper, { className: constants_1.datePickerClassnames.popover, open: shouldRender, anchorEl: anchorEl, ...props, children: (0, jsx_runtime_1.jsx)(styles_1.AnimatedWrapper, { "$isOpen": open, onAnimationEnd: handleAnimationEnd, children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.ClickAwayListener, { onClickAway: onClose, children: (0, jsx_runtime_1.jsx)(styles_1.InnerContainer, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: constants_1.datePickerClassnames.popoverContainer, children: children }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledPopper, { className: constants_1.datePickerClassnames.popover, open: shouldRender, anchorEl: anchorEl, ...props, children: (0, jsx_runtime_1.jsx)(styles_1.AnimatedWrapper, { "$isOpen": open, onAnimationEnd: handleAnimationEnd, children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.ClickAwayListener, { isActive: open, onClickAway: handleClickAway, children: (0, jsx_runtime_1.jsx)(styles_1.InnerContainer, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: constants_1.datePickerClassnames.popoverContainer, children: children }) }) }) }));
 };
 exports.DatePickerPopover = DatePickerPopover;

package/node/components/DatePicker/DatePickerPopover/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/DatePicker/DatePickerPopover/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/DatePicker/DatePickerPopover/useLogic/useLogic.d.ts

@@ -0,0 +1,9 @@
+import { type CloseEventReason } from '../../../types/CloseEventReason';
+type UseLogicParams = {
+    onClose: (event?: Event, reason?: CloseEventReason) => void;
+};
+export declare const useLogic: ({ onClose }: UseLogicParams) => {
+    handleClickAway: (event: PointerEvent, reason: CloseEventReason) => void;
+    handleDrawerClose: () => void;
+};
+export {};

package/node/components/DatePicker/DatePickerPopover/useLogic/useLogic.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const utils_1 = require("./utils");
+const useLogic = ({ onClose }) => {
+    const handleClickAway = (event, reason) => {
+        (0, utils_1.stopNextMouseDownPropagation)();
+        onClose(event, reason);
+    };
+    const handleDrawerClose = () => onClose();
+    return { handleClickAway, handleDrawerClose };
+};
+exports.useLogic = useLogic;

package/node/components/DatePicker/DatePickerPopover/useLogic/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './stopNextMouseDownPropagation';

package/node/components/DatePicker/DatePickerPopover/useLogic/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./stopNextMouseDownPropagation"), exports);

package/node/components/DatePicker/DatePickerPopover/useLogic/utils/stopNextMouseDownPropagation/index.d.ts

@@ -0,0 +1 @@
+export * from './stopNextMouseDownPropagation';

package/node/components/DatePicker/DatePickerPopover/useLogic/utils/stopNextMouseDownPropagation/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./stopNextMouseDownPropagation"), exports);

package/node/components/DatePicker/DatePickerPopover/useLogic/utils/stopNextMouseDownPropagation/stopNextMouseDownPropagation.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Останавливает всплытие следующего mousedown.
+ */
+export declare const stopNextMouseDownPropagation: () => void;

package/node/components/DatePicker/DatePickerPopover/useLogic/utils/stopNextMouseDownPropagation/stopNextMouseDownPropagation.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stopNextMouseDownPropagation = void 0;
+/**
+ * Останавливает всплытие следующего mousedown.
+ */
+const stopNextMouseDownPropagation = () => {
+    const stopMouseDown = (event) => {
+        event.stopPropagation();
+        removeListeners();
+    };
+    const removeListeners = () => {
+        window.removeEventListener('mousedown', stopMouseDown, true);
+        window.removeEventListener('pointerdown', removeListeners, true);
+    };
+    window.addEventListener('mousedown', stopMouseDown, true);
+    window.addEventListener('pointerdown', removeListeners, true);
+};
+exports.stopNextMouseDownPropagation = stopNextMouseDownPropagation;

package/node/components/DatePicker/useLogic/useLogic.d.ts

@@ -1,11 +1,12 @@
 import { type Ref, type SyntheticEvent } from 'react';
+import { type CloseEventReason } from '../../types/CloseEventReason';
 import { type DatePickerProps } from '../types/props';
 type UseLogicParams = DatePickerProps & {
     forwardedRef: Ref<HTMLDivElement>;
 };
 export declare const useLogic: ({ label, value, maxDate, minDate, mask, onOpen, onClose, onBlur, onChange, forwardedRef, }: UseLogicParams) => {
     handleOpen: (event: SyntheticEvent) => void;
-    handleClose: () => void;
+    handleClose: (event?: Event, reason?: CloseEventReason) => void;
     confirmButtonProps: {
         onClick: () => void;
         disabled: boolean;
@@ -22,7 +23,7 @@ export declare const useLogic: ({ label, value, maxDate, minDate, mask, onOpen,
     datePickerProps: {
         open: boolean;
         anchorEl: HTMLDivElement | null;
-        onClose: () => void;
+        onClose: (event?: Event, reason?: CloseEventReason) => void;
         title: string | undefined;
     };
 };

package/node/components/DatePicker/useLogic/useLogic.js

@@ -44,11 +44,11 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
         onMaskedValueBlur();
         onBlur?.();
     };
-    function handleClose() {
+    const handleClose = (event, reason) => {
         flushMaskedValueAndCallOnBlur();
-        onClose?.();
+        onClose?.(event, reason);
         close();
-    }
+    };
     const handleInputBlur = () => {
         if (isOpen) {
             return;

package/node/components/DateRangePicker/useLogic/useLogic.d.ts

@@ -1,4 +1,5 @@
 import { type ForwardedRef, type SyntheticEvent } from 'react';
+import { type CloseEventReason } from '../../types/CloseEventReason';
 import { type DateRangePickerProps } from '../types';
 type UseLogicParams = DateRangePickerProps;
 export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpen, onClose, onBlur, }: UseLogicParams, forwardedRef: ForwardedRef<HTMLDivElement>) => {
@@ -25,7 +26,7 @@ export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpe
         anchorEl: HTMLDivElement | null;
         onMouseEnter: () => void;
         onMouseLeave: () => void;
-        onClose: () => void;
+        onClose: (event?: Event, reason?: CloseEventReason) => void;
     };
     minMaxDateContextProviderProps: {
         minDate: Date;

package/node/components/DateRangePicker/useLogic/useLogic.js

@@ -91,10 +91,10 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
             onMaskedEndValueBlur();
         }
     };
-    const handleClose = () => {
+    const handleClose = (event, reason) => {
         flushActiveMaskedValueOnClose();
         onBlur?.();
-        onClose?.();
+        onClose?.(event, reason);
         close();
     };
     const handleStartInputBlur = () => {

package/node/components/NotificationList/Tabs/Tabs.js

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tabs_1 = require("../../Tabs");
-const styles_1 = require("./styles");
 const Tabs = ({ listType, notificationsCount, unreadNotificationsCount, onChange, }) => {
     const handleChange = (_, value) => {
         onChange(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledTabs, { value: listType, onChange: handleChange, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { value: "unread", label: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0435", count: unreadNotificationsCount }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { value: "all", label: "\u0412\u0441\u0435", count: notificationsCount })] }));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { value: listType, onChange: handleChange, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { value: "unread", label: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0435", count: unreadNotificationsCount }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { value: "all", label: "\u0412\u0441\u0435", count: notificationsCount })] }));
 };
 exports.Tabs = Tabs;

package/node/components/Tabs/Tab/styles.js

@@ -8,7 +8,7 @@ const Tab_1 = __importDefault(require("@mui/material/Tab"));
 const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 exports.StyledTab = (0, styled_1.styled)(Tab_1.default) `
-  min-height: 36px;
+  min-height: ${constants_1.TABS_HEIGHT};
   padding: 0;
 
   line-height: 20px;
@@ -16,6 +16,10 @@ exports.StyledTab = (0, styled_1.styled)(Tab_1.default) `
 
   border: 2px solid transparent;
 
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    min-height: ${constants_1.TABS_HEIGHT_MOBILE};
+  }
+
   &:last-child {
     margin-right: 0;
   }

package/node/components/Tabs/styles.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = exports.StyledTabs = exports.Divider = exports.Container = void 0;
 const Tabs_1 = __importStar(require("@mui/material/Tabs"));
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 exports.Container = styled_1.styled.div `
   overflow-x: auto;
@@ -46,8 +47,9 @@ exports.Container = styled_1.styled.div `
   }
 `;
 exports.Divider = styled_1.styled.div `
-  position: relative;
-  bottom: 2px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 
   width: 100%;
   height: 1px;
@@ -66,7 +68,14 @@ exports.StyledTabs = (0, styled_1.styled)(Tabs_1.default) `
   }
 `;
 exports.Wrapper = styled_1.styled.div `
+  position: relative;
+
   display: inline-block;
 
   min-width: 100%;
+  height: ${constants_1.TABS_HEIGHT};
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    height: ${constants_1.TABS_HEIGHT_MOBILE};
+  }
 `;

package/node/components/constants/index.d.ts

@@ -3,3 +3,4 @@ export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
 export * from './media';
+export * from './tabs';

package/node/components/constants/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./scrollbar"), exports);
 __exportStar(require("./footer"), exports);
 __exportStar(require("./classnames"), exports);
 __exportStar(require("./media"), exports);
+__exportStar(require("./tabs"), exports);

package/node/components/constants/tabs.d.ts

@@ -0,0 +1,2 @@
+export declare const TABS_HEIGHT = "34px";
+export declare const TABS_HEIGHT_MOBILE = "40px";

package/node/components/constants/tabs.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TABS_HEIGHT_MOBILE = exports.TABS_HEIGHT = void 0;
+exports.TABS_HEIGHT = '34px';
+exports.TABS_HEIGHT_MOBILE = '40px';

package/node/components/theme/components/MuiTabs.js

@@ -3,10 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiTabs = void 0;
 exports.MuiTabs = {
     styleOverrides: {
-        root() {
+        root({ theme }) {
             return {
-                minHeight: 38,
-                height: 38,
+                minHeight: 34,
+                height: 34,
+                [theme.breakpoints.down('mobile')]: {
+                    minHeight: 40,
+                    height: 40,
+                },
             };
         },
         indicator({ theme }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.113.0",
+  "version": "4.113.2",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {

package/components/NotificationList/Tabs/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const StyledTabs: import("../../styled").StyledComponent<import("../../Tabs").TabsProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/components/NotificationList/Tabs/styles.js

@@ -1,5 +0,0 @@
-import { styled } from '../../styled';
-import { Tabs } from '../../Tabs';
-export const StyledTabs = styled(Tabs) `
-  min-height: 36px;
-`;

package/node/components/NotificationList/Tabs/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const StyledTabs: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Tabs").TabsProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/node/components/NotificationList/Tabs/styles.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTabs = void 0;
-const styled_1 = require("../../styled");
-const Tabs_1 = require("../../Tabs");
-exports.StyledTabs = (0, styled_1.styled)(Tabs_1.Tabs) `
-  min-height: 36px;
-`;