@ozen-ui/kit 0.65.0 → 0.67.0

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/DialogHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DialogHeaderProps } from './types';
+export declare const cnDialogHeader: import("@bem-react/classname").ClassNameFormatter;
+export declare const DialogHeader: React.ForwardRefExoticComponent<Omit<DialogHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/DialogHeader.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogHeader = exports.cnDialogHeader = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../../utils/classname");
+var BottomSheetBase_1 = require("../../../BottomSheetBase");
+var Divider_1 = require("../../../Divider");
+var DialogContext_1 = require("../../DialogContext");
+var constants_1 = require("./constants");
+exports.cnDialogHeader = (0, classname_1.cn)('DialogNextHeader');
+exports.DialogHeader = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.withDivider, withDivider = _b === void 0 ? constants_1.DIALOG_HEADER_DEFAULT_WITH_DIVIDER : _b, other = tslib_1.__rest(_a, ["children", "className", "withDivider"]);
+    var _c = (0, DialogContext_1.useDialogContext)(), size = _c.size, deviceType = _c.deviceType, isBottomSheet = _c.isBottomSheet;
+    var Component = (isBottomSheet ? BottomSheetBase_1.BottomSheetBaseBlock : 'div');
+    var bottomSheetProps = isBottomSheet
+        ? {
+            expandOnDrag: true,
+        }
+        : null;
+    return (react_1.default.createElement(Component, tslib_1.__assign({}, other, bottomSheetProps, { ref: ref, className: (0, exports.cnDialogHeader)('Container', [className]) }),
+        react_1.default.createElement("div", { className: (0, exports.cnDialogHeader)({
+                size: size,
+                deviceType: deviceType,
+            }) }, children),
+        withDivider && react_1.default.createElement(Divider_1.Divider, { className: (0, exports.cnDialogHeader)('Divider') })));
+});
+exports.DialogHeader.displayName = 'DialogHeader';

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/constants.d.ts

@@ -0,0 +1 @@
+export declare const DIALOG_HEADER_DEFAULT_WITH_DIVIDER = false;

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DIALOG_HEADER_DEFAULT_WITH_DIVIDER = void 0;
+exports.DIALOG_HEADER_DEFAULT_WITH_DIVIDER = false;

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DialogHeader';
+export * from './types';

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DialogHeader"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+export type DialogHeaderRef = HTMLDivElement;
+export type DialogHeaderProps = ExtendableComponentPropsWithRef<{
+    /** Содержимое */
+    children: ReactNode;
+    /** Если `true`, то будет отображаться разделитель */
+    withDivider?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+}, 'div'>;

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/DialogNext/modules/DialogSubtitle/DialogSubtitle.css

@@ -0,0 +1,21 @@
+/* stylelint-disable */
+.DialogNextSubtitle {
+  --dialog-subtitle-margin-top: var(--spacing-3xs);
+
+  font: var(--typography-text-m-font);
+
+  letter-spacing: var(--typography-text-m-letter_spacing, 0);
+
+  text-transform: var(--typography-text-m-text_transform, none);
+  padding-inline-end: var(--dialog-header-item-padding-right);
+  color: var(--color-content-secondary);
+  margin-block-start: var(--dialog-subtitle-margin-top);
+}
+.DialogNextSubtitle_deviceType_desktop.DialogNextSubtitle_size_s {
+    font: var(--typography-text-s-font);
+    letter-spacing: var(--typography-text-s-letter_spacing, 0);
+    text-transform: var(--typography-text-s-text_transform, none);
+  }
+.DialogNextSubtitle_deviceType_desktop.DialogNextSubtitle_size_m {
+    --dialog-subtitle-margin-top: var(--spacing-2xs);
+  }

package/__inner__/cjs/components/DialogNext/modules/DialogSubtitle/DialogSubtitle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DialogSubtitleProps } from './types';
+export declare const cnDialogSubtitle: import("@bem-react/classname").ClassNameFormatter;
+export declare const DialogSubtitle: React.ForwardRefExoticComponent<Omit<DialogSubtitleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DialogNext/modules/DialogSubtitle/DialogSubtitle.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogSubtitle = exports.cnDialogSubtitle = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../../utils/classname");
+var DialogContext_1 = require("../../DialogContext");
+exports.cnDialogSubtitle = (0, classname_1.cn)('DialogNextSubtitle');
+exports.DialogSubtitle = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, other = tslib_1.__rest(_a, ["children", "className"]);
+    var _b = (0, DialogContext_1.useDialogContext)(), deviceType = _b.deviceType, size = _b.size;
+    return (react_1.default.createElement("div", tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnDialogSubtitle)({
+            deviceType: deviceType,
+            size: size,
+        }, [className]) }), children));
+});
+exports.DialogSubtitle.displayName = 'DialogSubtitle';

package/__inner__/cjs/components/DialogNext/modules/DialogSubtitle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DialogSubtitle';
+export * from './types';

package/__inner__/cjs/components/DialogNext/modules/DialogSubtitle/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DialogSubtitle"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/DialogNext/modules/DialogSubtitle/types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+export type DialogSubtitleRef = HTMLDivElement;
+export type DialogSubtitleProps = ExtendableComponentPropsWithRef<{
+    /** Содержимое */
+    children: ReactNode;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+}, 'div'>;

package/__inner__/cjs/components/DialogNext/modules/DialogSubtitle/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/DialogTitle.css

@@ -0,0 +1,23 @@
+/* stylelint-disable */
+.DialogNextTitle {
+  --dialog-title-gap: var(--spacing-xs);
+
+  font: var(--typography-heading-xl-font);
+
+  letter-spacing: var(--typography-heading-xl-letter_spacing, 0);
+
+  text-transform: var(--typography-heading-xl-text_transform, none);
+  display: flex;
+  align-items: center;
+  gap: var(--dialog-title-gap);
+  padding-inline-end: var(--dialog-header-item-padding-right);
+  color: var(--color-content-primary);
+}
+.DialogNextTitle_deviceType_desktop.DialogNextTitle_size_m {
+    font: var(--typography-heading-2xl-font);
+    letter-spacing: var(--typography-heading-2xl-letter_spacing, 0);
+    text-transform: var(--typography-heading-2xl-text_transform, none);
+  }
+.DialogNextTitle_size_m {
+    --dialog-title-gap: var(--spacing-s);
+  }

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/DialogTitle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DialogTitleProps } from './types';
+export declare const cnDialogTitle: import("@bem-react/classname").ClassNameFormatter;
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/DialogTitle.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogTitle = exports.cnDialogTitle = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../../utils/classname");
+var renderContent_1 = require("../../../../utils/renderContent");
+var DialogContext_1 = require("../../DialogContext");
+exports.cnDialogTitle = (0, classname_1.cn)('DialogNextTitle');
+exports.DialogTitle = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, iconLeft = _a.iconLeft, other = tslib_1.__rest(_a, ["children", "className", "iconLeft"]);
+    var _b = (0, DialogContext_1.useDialogContext)(), deviceType = _b.deviceType, size = _b.size;
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: 'm',
+            },
+        });
+    };
+    return (react_1.default.createElement("div", tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnDialogTitle)({ size: size, deviceType: deviceType }, [className]) }),
+        renderIcon(iconLeft),
+        children));
+});
+exports.DialogTitle.displayName = 'DialogTitle';

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/index.d.ts

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

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DialogTitle"), exports);

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+import type { RenderContentType } from '../../../../utils/renderContent';
+export type DialogTitleRef = HTMLHeadingElement;
+export type DialogTitleIcon = RenderContentType<IconProps>['content'];
+export type DialogTitleProps = ExtendableComponentPropsWithRef<{
+    /** Содержимое */
+    children: ReactNode;
+    /** Иконка слева */
+    iconLeft?: DialogTitleIcon;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+}, 'h2'>;

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/DialogNext/modules/index.d.ts

@@ -0,0 +1,8 @@
+export * from './DialogBody';
+export * from './DialogCloseButton';
+export * from './DialogFooter';
+export * from './DialogFooterButton';
+export * from './DialogFooterButtonsGroup';
+export * from './DialogHeader';
+export * from './DialogSubtitle';
+export * from './DialogTitle';

package/__inner__/cjs/components/DialogNext/modules/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DialogBody"), exports);
+tslib_1.__exportStar(require("./DialogCloseButton"), exports);
+tslib_1.__exportStar(require("./DialogFooter"), exports);
+tslib_1.__exportStar(require("./DialogFooterButton"), exports);
+tslib_1.__exportStar(require("./DialogFooterButtonsGroup"), exports);
+tslib_1.__exportStar(require("./DialogHeader"), exports);
+tslib_1.__exportStar(require("./DialogSubtitle"), exports);
+tslib_1.__exportStar(require("./DialogTitle"), exports);

package/__inner__/cjs/components/DialogNext/types.d.ts

@@ -0,0 +1,44 @@
+import type { RenderContentType } from '../../utils/renderContent';
+import type { BackdropProps } from '../Backdrop';
+import type { PortalProps } from '../Portal';
+import type { DialogBottomSheetProps, DialogModalProps } from './components';
+import type { DIALOG_DEFAULT_DEVICE_TYPE } from './constants';
+import type { DialogDeviceType, DialogSizeVariantByDeviceType, DialogVariant } from './entities';
+export type DialogRef = HTMLDivElement;
+export type DialogRenderCloseButton = RenderContentType<{}>['content'];
+export type DialogContentBottomSheetProps = Omit<DialogBottomSheetProps, 'hideCloseButton' | 'backdrop' | 'open' | 'size' | 'variant' | 'closeButton' | 'onClose' | 'className'>;
+export type DialogContentModalProps = Omit<DialogModalProps, 'open' | 'onClose' | 'hideCloseButton' | 'className' | 'closeButton' | 'size' | 'variant'>;
+export type DialogBaseProps = {
+    /** Если `true`, будет отображаться окно диалога */
+    open: boolean;
+    /** Вариант представления шторки */
+    variant?: DialogVariant;
+    /** Свойства компонента шторки */
+    bottomSheetProps?: DialogContentBottomSheetProps;
+    /** Свойства компонента модального окна */
+    modalProps?: DialogContentModalProps;
+    /** Кнопка закрытия */
+    renderCloseButton?: DialogRenderCloseButton;
+    /** Если `true`, скрывается кнопка закрытия */
+    hideCloseButton?: boolean;
+    /** Вызывается при закрытии Dialog */
+    onClose?: () => void;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Свойства компонента backdrop */
+    backdropProps?: BackdropProps;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+} & PortalProps;
+export type DialogDeviceTypeProps<DeviceType extends DialogDeviceType | undefined> = DialogBaseProps & (DeviceType extends DialogDeviceType ? {
+    /** Размер */
+    size?: DialogSizeVariantByDeviceType[DeviceType];
+    /** Тип устройства */
+    deviceType: DeviceType;
+} : {
+    /** Размер */
+    size?: DialogSizeVariantByDeviceType[typeof DIALOG_DEFAULT_DEVICE_TYPE];
+    /** Тип устройства */
+    deviceType?: undefined;
+});
+export type DialogProps = DialogDeviceTypeProps<DialogDeviceType> | DialogDeviceTypeProps<undefined>;

package/__inner__/cjs/components/DialogNext/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/Drawer/Drawer.d.ts

@@ -1,6 +1,9 @@
 import './Drawer.css';
 import React from 'react';
 export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент DrawerNext
+ */
 export declare const Drawer: React.ForwardRefExoticComponent<{
     variant?: import("./types").DrawerVariant;
     size?: import("./types").DrawerSizeVariant;
@@ -28,9 +31,7 @@ export declare const Drawer: React.ForwardRefExoticComponent<{
     transitionProps?: Partial<import("react-transition-group/CSSTransition").CSSTransitionProps> & {
         "data-testid"?: string;
     };
-    windowProps?: import("../Paper").PaperProps & {
-        "data-testid"?: string;
-    };
+    windowProps?: import("../Paper").PaperProps;
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];

package/__inner__/cjs/components/Drawer/Drawer.js

@@ -12,6 +12,9 @@ var Modal_1 = require("../Modal");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
 exports.cnDrawer = (0, classname_1.cn)('Drawer');
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент DrawerNext
+ */
 exports.Drawer = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,

package/__inner__/cjs/components/DrawerNext/Drawer.css

@@ -0,0 +1,117 @@
+.DrawerNext {
+  --drawer-inline-padding: var(--spacing-s);
+  --drawer-block-padding: var(--spacing-l);
+  --drawer-blocks-gap: var(--spacing-m);
+  display: flex;
+}
+
+  .DrawerNext .Modal-Window {
+    position: relative;
+    inline-size: 100%;
+    max-inline-size: var(--drawer-next-max-width);
+    block-size: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border: none;
+    inset-block-start: auto;
+    inset-inline-start: auto;
+    transform: none;
+    padding: 0;
+    outline: none;
+  }
+
+  /* ---- INNER CONTAINER ---- */
+
+  .DrawerNext-InnerContainer {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    max-block-size: 100%;
+    overflow: auto;
+  }
+
+  /* ---- FULL SCREEN ---- */
+
+  .DrawerNext_fullScreen .Modal-Window {
+      border-radius: 0;
+    }
+
+  /* ---- DEVICE TYPE ----  */
+
+  /* --- DESKTOP ---  */
+
+  .DrawerNext_deviceType_desktop.DrawerNext_size_s {
+    --drawer-inline-padding: var(--spacing-m);
+    --drawer-block-padding: var(--spacing-m);
+  }
+
+  .DrawerNext_deviceType_desktop.DrawerNext_size_m {
+    --drawer-inline-padding: var(--spacing-l);
+    --drawer-blocks-gap: var(--spacing-l);
+  }
+
+  /* ---- CLOSE BUTTON ----  */
+
+  .DrawerNext-CloseButtonContainer {
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+  }
+
+  .DrawerNext_hasCloseButton {
+    --drawer-header-item-padding-right: var(--spacing-m);
+  }
+
+  /* ---- PLACEMENT ---- */
+
+  .DrawerNext_placement_right {
+    --drawer-start-position: 100%;
+    justify-content: flex-end;
+  }
+
+  .DrawerNext_placement_right .Modal-Window {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .DrawerNext_placement_left {
+    --drawer-start-position: -100%;
+    justify-content: flex-start;
+  }
+
+  .DrawerNext_placement_left .Modal-Window {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+  /* ---- ANIMATION ---- */
+
+  .DrawerNext_animation-appear .Modal-Window, .DrawerNext_animation-enter .Modal-Window {
+      transform: translate(var(--drawer-start-position), 0);
+    }
+
+  .DrawerNext_animation-appear-active .Modal-Window, .DrawerNext_animation-enter-active .Modal-Window {
+      transition: transform var(--transition-slow);
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-enter-done .Modal-Window {
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-exit .Modal-Window {
+      visibility: visible;
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-exit-active .Modal-Window {
+      visibility: visible;
+      transition: transform var(--transition-slow);
+      transform: translate(var(--drawer-start-position), 0);
+    }
+
+  .DrawerNext_animation-exit-done .Modal-Window {
+      visibility: hidden;
+      transform: translate(var(--drawer-start-position), 0);
+    }

package/__inner__/cjs/components/DrawerNext/Drawer.d.ts

@@ -0,0 +1,11 @@
+import './Drawer.css';
+import './modules/DrawerBody/DrawerBody.css';
+import './modules/DrawerFooter/DrawerFooter.css';
+import './modules/DrawerFooterButtonsGroup/DrawerFooterButtonsGroup.css';
+import './modules/DrawerHeader/DrawerHeader.css';
+import './modules/DrawerSubtitle/DrawerSubtitle.css';
+import './modules/DrawerTitle/DrawerTitle.css';
+import React from 'react';
+import type { DrawerProps } from './types';
+export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DrawerNext/Drawer.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = exports.cnDrawer = void 0;
+var tslib_1 = require("tslib");
+require("./Drawer.css");
+require("./modules/DrawerBody/DrawerBody.css");
+require("./modules/DrawerFooter/DrawerFooter.css");
+require("./modules/DrawerFooterButtonsGroup/DrawerFooterButtonsGroup.css");
+require("./modules/DrawerHeader/DrawerHeader.css");
+require("./modules/DrawerSubtitle/DrawerSubtitle.css");
+require("./modules/DrawerTitle/DrawerTitle.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var css_1 = require("../../utils/css");
+var renderContent_1 = require("../../utils/renderContent");
+var Modal_1 = require("../Modal");
+var constants_1 = require("./constants");
+var DrawerContext_1 = require("./DrawerContext");
+var hooks_1 = require("./hooks");
+var modules_1 = require("./modules");
+var utils_1 = require("./utils");
+exports.cnDrawer = (0, classname_1.cn)('DrawerNext');
+exports.Drawer = (0, react_1.forwardRef)(function (inProps, ref) {
+    var _a;
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'DrawerNext',
+    });
+    var _b = props.variant, variant = _b === void 0 ? constants_1.DRAWER_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? constants_1.DRAWER_DEFAULT_SIZE : _c, _d = props.placement, placement = _d === void 0 ? constants_1.DRAWER_DEFAULT_PLACEMENT : _d, _e = props.hideCloseButton, hideCloseButton = _e === void 0 ? constants_1.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _e, _f = props.deviceType, deviceType = _f === void 0 ? constants_1.DRAWER_DEFAULT_DEVICE_TYPE : _f, open = props.open, _g = props.onClose, onClose = _g === void 0 ? function () { } : _g, children = props.children, className = props.className, windowProps = props.windowProps, transitionProps = props.transitionProps, _h = props.renderCloseButton, renderCloseButton = _h === void 0 ? react_1.default.createElement(modules_1.DrawerCloseButton, null) : _h, style = props.style, other = tslib_1.__rest(props, ["variant", "size", "placement", "hideCloseButton", "deviceType", "open", "onClose", "children", "className", "windowProps", "transitionProps", "renderCloseButton", "style"]);
+    var _j = (0, hooks_1.useDrawerWidth)({ variant: variant }), isFullWidth = _j.isFullWidth, maxWidth = _j.maxWidth;
+    var radius = utils_1.paperRadiusBySize[deviceType][size];
+    return (react_1.default.createElement(DrawerContext_1.DrawerContext.Provider, { value: {
+            size: size,
+            variant: variant,
+            onClose: onClose,
+            deviceType: deviceType,
+        } },
+        react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, style: tslib_1.__assign(tslib_1.__assign({}, style), (0, css_1.generateCSSVariables)((_a = {},
+                _a[constants_1.DRAWER_CSS_VARIABLE.MAX_WIDTH] = "".concat(maxWidth, "px"),
+                _a))), onClose: onClose, windowProps: tslib_1.__assign({ radius: radius, shadow: 'l' }, windowProps), className: (0, exports.cnDrawer)({
+                variant: variant,
+                size: size,
+                placement: placement,
+                deviceType: deviceType,
+                hasCloseButton: !hideCloseButton,
+                fullScreen: isFullWidth,
+            }, [className]), transitionProps: tslib_1.__assign({ classNames: (0, exports.cnDrawer)({ animation: true }) }, transitionProps), ref: ref }),
+            !hideCloseButton && (react_1.default.createElement("div", { className: (0, exports.cnDrawer)('CloseButtonContainer') }, (0, renderContent_1.renderContent)({
+                content: renderCloseButton,
+                props: {},
+            }))),
+            react_1.default.createElement("div", { className: (0, exports.cnDrawer)('InnerContainer') }, children))));
+});
+exports.Drawer.displayName = 'Drawer';

package/__inner__/cjs/components/DrawerNext/DrawerContext.d.ts

@@ -0,0 +1,10 @@
+import type { DrawerDeviceType, DrawerSizeVariantByDeviceType, DrawerVariant } from './entities';
+export type DrawerContextValue<DeviceType extends DrawerDeviceType> = {
+    size: DrawerSizeVariantByDeviceType[DeviceType];
+    variant: DrawerVariant;
+    onClose: () => void;
+    deviceType: DeviceType;
+};
+export declare const DrawerContextDefaultValue: DrawerContextValue<DrawerDeviceType>;
+export declare const DrawerContext: import("react").Context<DrawerContextValue<"mobile" | "desktop">>;
+export declare const useDrawerContext: <DeviceType extends DrawerDeviceType>() => DrawerContextValue<DeviceType>;

package/__inner__/cjs/components/DrawerNext/DrawerContext.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawerContext = exports.DrawerContext = exports.DrawerContextDefaultValue = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+var constants_1 = require("./constants");
+exports.DrawerContextDefaultValue = {
+    size: constants_1.DRAWER_DEFAULT_SIZE,
+    variant: constants_1.DRAWER_DEFAULT_VARIANT,
+    onClose: function () { },
+    deviceType: constants_1.DRAWER_DEFAULT_DEVICE_TYPE,
+};
+exports.DrawerContext = (0, react_1.createContext)(exports.DrawerContextDefaultValue);
+var useDrawerContext = function () {
+    return (0, react_1.useContext)(exports.DrawerContext);
+};
+exports.useDrawerContext = useDrawerContext;
+// Именованный провайдер
+if (environment_1.IS_DEV) {
+    exports.DrawerContext.displayName = 'DrawerContext';
+}

package/__inner__/cjs/components/DrawerNext/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const DRAWER_DEFAULT_VARIANT = "medium";
+export declare const DRAWER_DEFAULT_SIZE = "m";
+export declare const DRAWER_DEFAULT_PLACEMENT = "right";
+export declare const DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;
+export declare const DRAWER_DEFAULT_DEVICE_TYPE = "desktop";
+export declare const DRAWER_CSS_VARIABLE: {
+    readonly MAX_WIDTH: "drawer-next-max-width";
+};

package/__inner__/cjs/components/DrawerNext/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DRAWER_CSS_VARIABLE = exports.DRAWER_DEFAULT_DEVICE_TYPE = exports.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = exports.DRAWER_DEFAULT_PLACEMENT = exports.DRAWER_DEFAULT_SIZE = exports.DRAWER_DEFAULT_VARIANT = void 0;
+exports.DRAWER_DEFAULT_VARIANT = 'medium';
+exports.DRAWER_DEFAULT_SIZE = 'm';
+exports.DRAWER_DEFAULT_PLACEMENT = 'right';
+exports.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;
+exports.DRAWER_DEFAULT_DEVICE_TYPE = 'desktop';
+exports.DRAWER_CSS_VARIABLE = {
+    MAX_WIDTH: 'drawer-next-max-width',
+};

package/__inner__/cjs/components/DrawerNext/entities/device.d.ts

@@ -0,0 +1,2 @@
+export declare const drawerDeviceType: readonly ["mobile", "desktop"];
+export type DrawerDeviceType = (typeof drawerDeviceType)[number];

package/__inner__/cjs/components/DrawerNext/entities/device.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerDeviceType = void 0;
+exports.drawerDeviceType = ['mobile', 'desktop'];

package/__inner__/cjs/components/DrawerNext/entities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './device';
+export * from './placement';
+export * from './size';
+export * from './variant';

package/__inner__/cjs/components/DrawerNext/entities/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./device"), exports);
+tslib_1.__exportStar(require("./placement"), exports);
+tslib_1.__exportStar(require("./size"), exports);
+tslib_1.__exportStar(require("./variant"), exports);

package/__inner__/cjs/components/DrawerNext/entities/placement.d.ts

@@ -0,0 +1,2 @@
+export declare const drawerPlacementVariant: readonly ["left", "right"];
+export type DrawerPlacementVariant = (typeof drawerPlacementVariant)[number];

package/__inner__/cjs/components/DrawerNext/entities/placement.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerPlacementVariant = void 0;
+exports.drawerPlacementVariant = ['left', 'right'];

package/__inner__/cjs/components/DrawerNext/entities/size.d.ts

@@ -0,0 +1,11 @@
+import type { DrawerDeviceType } from './device';
+export declare const drawerSizeVariantByDeviceType: {
+    readonly desktop: readonly ["s", "m"];
+    readonly mobile: readonly ["m"];
+};
+export type DrawerSizeVariantByDeviceType = {
+    [key in DrawerDeviceType]: (typeof drawerSizeVariantByDeviceType)[key][number];
+};
+export type DrawerValueBySize<DeviceType extends DrawerDeviceType, Value> = {
+    [key in DrawerSizeVariantByDeviceType[DeviceType]]: Value;
+};