@snack-uikit/drawer 0.8.8 → 0.8.10-preview-1f246c4a.0

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./components"), exports);

package/dist/cjs/types.js

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

package/dist/esm/components/Drawer/Drawer.d.ts

@@ -0,0 +1,40 @@
+import { ReactElement } from 'react';
+import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
+import { Size } from '../../types';
+import { DrawerCustomProps } from '../DrawerCustom';
+export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedDrawer' | 'push'> & Pick<DrawerHeaderProps, 'titleTooltip' | 'image'> & Pick<DrawerBodyProps, 'content'> & {
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Размер */
+    size?: Size;
+    /** Основная кнопка */
+    approveButton?: Omit<ButtonFilledProps, 'size'> & {
+        tooltip?: TooltipProps;
+    };
+    /** Кнопка отмены */
+    cancelButton?: Omit<ButtonOutlineProps, 'size'> & {
+        tooltip?: TooltipProps;
+    };
+    /** Дополнительная кнопка */
+    additionalButton?: Omit<ButtonSimpleProps, 'size'> & {
+        tooltip?: TooltipProps;
+    };
+    /** Вложенный Drawer */
+    nestedDrawer?: ReactElement<DrawerProps>;
+    /**
+     *  Максимальное кол-во строк
+     * <br> - `title` - в заголовке
+     * <br> - `subtitle` - в подзаголовке
+     * @default '{ <br>title: 1; <br>subtitle: 2; }'
+     */
+    truncate?: {
+        title?: number;
+        subtitle?: number;
+    };
+};
+/** Готовый компонент Drawer */
+export declare function Drawer({ title, titleTooltip, subtitle, image, content, approveButton, cancelButton, additionalButton, nestedDrawer, truncate, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Drawer/index.js

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

package/dist/esm/components/DrawerCustom/DrawerCustom.d.ts

@@ -0,0 +1,41 @@
+import 'rc-drawer/assets/index.css';
+import { DrawerProps as RcDrawerProps } from 'rc-drawer';
+import { PropsWithChildren, ReactElement } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { DrawerBody, DrawerBodyProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps } from '../../helperComponents';
+import { Mode, Position, Size } from '../../types';
+export type DrawerCustomProps = WithSupportProps<PropsWithChildren<{
+    /** Управление состоянием показан/не показан. */
+    open: boolean;
+    /** Колбэк закрытия */
+    onClose(): void;
+    /** Режим отображения */
+    mode?: Mode;
+    /** Расположение открытого Drawer */
+    position?: Position;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+    /** CSS-класс для корневого элемента */
+    rootClassName?: string;
+    /** Размер */
+    size?: Size | string | number;
+    /** Смещение при открытии "вложенного" компонента */
+    push?: RcDrawerProps['push'];
+    /** Контейнер в котором будет рендерится Drawer. По-умолчанию - body */
+    container?: string | HTMLElement;
+    /** Вложенный Drawer */
+    nestedDrawer?: ReactElement<DrawerCustomProps>;
+}>>;
+declare function DrawerCustomComponent({ open, mode, position, onClose, rootClassName, className, size, push, container, children, nestedDrawer, ...rest }: DrawerCustomProps): import("react/jsx-runtime").JSX.Element;
+/** Компонент-конструктор */
+export declare const DrawerCustom: typeof DrawerCustomComponent & {
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+};
+export declare namespace DrawerCustom {
+    type HeaderProps = DrawerHeaderProps;
+    type BodyProps = DrawerBodyProps;
+    type FooterProps = DrawerFooterProps;
+}
+export {};

package/dist/esm/components/DrawerCustom/constants.d.ts

@@ -0,0 +1,5 @@
+import './motion.css';
+import type { DrawerProps } from 'rc-drawer';
+export declare const maskMotion: DrawerProps['maskMotion'];
+export declare const motion: DrawerProps['motion'];
+export declare const motionProps: Partial<DrawerProps>;

package/dist/esm/components/DrawerCustom/index.js

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

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './DrawerCustom';
+export * from './Drawer';

package/dist/esm/constants.d.ts

@@ -0,0 +1,29 @@
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const SIZE_AS_VALUES: string[];
+export declare const MODE: {
+    readonly Regular: "regular";
+    readonly Soft: "soft";
+};
+export declare const POSITION: {
+    readonly Right: "right";
+    readonly Left: "left";
+};
+export declare const NESTED_DRAWER_PUSH_DISTANCE = 24;
+export declare const TEST_IDS: {
+    closeButton: string;
+    header: string;
+    title: string;
+    tooltip: string;
+    subtitle: string;
+    image: string;
+    content: string;
+    footer: string;
+    footerActions: string;
+    approveButton: string;
+    cancelButton: string;
+    additionalButton: string;
+};

package/dist/esm/helperComponents/Body/Body.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type DrawerBodyProps = WithSupportProps<{
+    /** Контент */
+    content: ReactNode;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Вспомогательный компонент для добавления "тела" в DrawerCustom */
+export declare function DrawerBody({ content, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Body/index.js

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

package/dist/esm/helperComponents/ButtonClose/ButtonClose.d.ts

@@ -0,0 +1,5 @@
+type ButtonCloseProps = {
+    onClick(): void;
+};
+export declare function ButtonClose({ onClick }: ButtonCloseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/ButtonClose/index.js

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

package/dist/esm/helperComponents/Footer/Footer.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type DrawerFooterProps = WithSupportProps<{
+    /** Слот для добавления кнопок-действий */
+    actions: ReactNode;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Вспомогательный компонент для добавления "футера" в DrawerCustom */
+export declare function DrawerFooter({ actions, className, ...rest }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Footer/index.js

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

package/dist/esm/helperComponents/Header/Header.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type DrawerHeaderProps = WithSupportProps<{
+    /** Изображение */
+    image?: {
+        src: string;
+        alt: string;
+    };
+    /** Заголовок */
+    title: ReactNode;
+    /** Тултип для заголовка */
+    titleTooltip?: TooltipProps['tip'];
+    /** Подзаголовок */
+    subtitle?: ReactNode;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
+export declare function DrawerHeader({ title, titleTooltip, subtitle, image, className, ...rest }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Header/index.js

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

package/dist/esm/helperComponents/WithTooltip/WithTooltip.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+type WithTooltipProps = PropsWithChildren<{
+    /** Тултип над кнопкой */
+    tooltip?: TooltipProps;
+}>;
+export declare function WithTooltip({ tooltip, children }: WithTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/WithTooltip/index.js

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

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,4 @@
+export * from './Body';
+export * from './ButtonClose';
+export * from './Footer';
+export * from './Header';

package/dist/esm/index.js

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

package/dist/esm/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { MODE, POSITION, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type Position = ValueOf<typeof POSITION>;

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Drawer",
-  "version": "0.8.8",
+  "version": "0.8.10-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/drawer",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Белов Алексей <anbelov@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,15 +34,15 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.17.5",
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/scroll": "0.6.1",
-    "@snack-uikit/tooltip": "0.13.10",
-    "@snack-uikit/truncate-string": "0.4.23",
-    "@snack-uikit/typography": "0.6.3",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/button": "0.17.6-preview-1f246c4a.0",
+    "@snack-uikit/icons": "0.22.2-preview-1f246c4a.0",
+    "@snack-uikit/scroll": "0.6.3-preview-1f246c4a.0",
+    "@snack-uikit/tooltip": "0.13.11-preview-1f246c4a.0",
+    "@snack-uikit/truncate-string": "0.4.25-preview-1f246c4a.0",
+    "@snack-uikit/typography": "0.6.4-preview-1f246c4a.0",
+    "@snack-uikit/utils": "3.4.1-preview-1f246c4a.0",
     "classnames": "2.3.2",
     "rc-drawer": "6.4.1"
   },
-  "gitHead": "fc6a22e54444112c7ded3349a79da17bb777fd0e"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }

package/dist/components/Drawer/styles.module.css

@@ -1,3 +0,0 @@
-.drawer{
-  box-sizing:border-box;
-}

package/dist/components/DrawerCustom/motion.css

@@ -1,63 +0,0 @@
-.maskMotion {
-  opacity: unset;
-}
-.maskMotion-enter, .maskMotion-appear {
-  opacity: 0;
-}
-.maskMotion-enter-active, .maskMotion-appear-active {
-  opacity: 1;
-  transition: opacity 0.2s;
-}
-.maskMotion-leave {
-  opacity: 1;
-}
-.maskMotion-leave-active {
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-
-.panelMotion {
-  transform: unset;
-}
-.panelMotion-left-enter-start, .panelMotion-left-appear-start, .panelMotion-left-leave-start {
-  transition: none !important;
-}
-.panelMotion-left-enter-active, .panelMotion-left-appear-active {
-  transition: transform 0.2s ease-in-out;
-}
-.panelMotion-left-leave-active {
-  transition: transform 0.1s ease-out;
-}
-.panelMotion-left-enter, .panelMotion-left-appear {
-  transform: translateX(-100%);
-}
-.panelMotion-left-enter-active, .panelMotion-left-appear-active {
-  transform: translateX(0);
-}
-.panelMotion-left-leave {
-  transform: translateX(0);
-}
-.panelMotion-left-leave-active {
-  transform: translateX(-100%) !important;
-}
-.panelMotion-right-enter-start, .panelMotion-right-appear-start, .panelMotion-right-leave-start {
-  transition: none !important;
-}
-.panelMotion-right-enter-active, .panelMotion-right-appear-active {
-  transition: transform 0.2s ease-in-out;
-}
-.panelMotion-right-leave-active {
-  transition: transform 0.1s ease-out;
-}
-.panelMotion-right-enter, .panelMotion-right-appear {
-  transform: translateX(100%);
-}
-.panelMotion-right-enter-active, .panelMotion-right-appear-active {
-  transform: translateX(0);
-}
-.panelMotion-right-leave {
-  transform: translateX(0);
-}
-.panelMotion-right-leave-active {
-  transform: translateX(100%) !important;
-}

package/dist/components/DrawerCustom/styles.module.css

@@ -1,53 +0,0 @@
-.drawerRoot{
-  z-index:auto !important;
-}
-
-div[data-content-wrapper=true]{
-  will-change:transform;
-  z-index:auto;
-  overflow:unset;
-  max-width:calc(100% - var(--space-drawer-outside-gap, 24px));
-  height:100%;
-}
-div[data-content-wrapper=true][data-size=s]{
-  min-width:var(--size-drawer-min-width-s, 304px);
-  width:var(--size-drawer-width-s, 464px);
-}
-div[data-content-wrapper=true][data-size=m]{
-  min-width:var(--size-drawer-min-width-m, 304px);
-  width:var(--size-drawer-width-m, 864px);
-}
-div[data-content-wrapper=true][data-size=l]{
-  min-width:var(--size-drawer-min-width-l, 304px);
-  width:var(--size-drawer-width-l, 1872px);
-}
-div[data-content-wrapper=true][data-mode=regular] .drawer{
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-div[data-content-wrapper=true][data-mode=soft] .drawer{
-  background-color:var(--sys-neutral-background2-level, #ffffff);
-}
-
-.drawer{
-  overflow:unset;
-  display:flex;
-  flex-direction:column;
-  box-sizing:border-box;
-  box-shadow:var(--box-shadow-elevation-level5, 0px 0px 16px 0px rgba(0, 0, 0, 0.0784313725), 0px 24px 16px 0px rgba(0, 0, 0, 0.0784313725));
-}
-
-.headerElements{
-  padding-top:var(--space-drawer-header-elements-top, 32px);
-  padding-right:var(--space-drawer-header-elements-side, 32px);
-  gap:var(--space-drawer-headline-layout-badge-elements-layout-gap, 16px);
-  position:absolute;
-  top:0;
-  right:0;
-  display:flex;
-  align-items:center;
-}
-
-.mask{
-  z-index:auto !important;
-  background-color:var(--sys-blackout, rgba(0, 0, 0, 0.3215686275));
-}

package/dist/helperComponents/Body/styles.module.css

@@ -1,8 +0,0 @@
-.drawerBody{
-  padding-left:var(--space-drawer-body-side, 32px);
-  padding-right:var(--space-drawer-body-side, 32px);
-  flex:1 1 auto;
-  box-sizing:border-box;
-  min-height:var(--dimension-2m, 16px);
-  color:var(--sys-neutral-text-main, #41424e);
-}

package/dist/helperComponents/ButtonClose/styles.module.css

@@ -1,35 +0,0 @@
-.buttonClose{
-  width:var(--size-drawer-button-close, 32px);
-  height:var(--size-drawer-button-close, 32px);
-  border-radius:var(--radius-drawer-button-close, 16px);
-  cursor:pointer;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-  margin:0;
-  padding:0;
-  color:var(--sys-neutral-text-support, #6d707f);
-  background-color:var(--sys-neutral-decor-default, #dde0ea);
-  border:0 solid transparent;
-  outline:0;
-  outline-offset:var(--spacing-state-focus-offset, 2px);
-}
-.buttonClose:hover, .buttonClose:focus-visible{
-  color:var(--sys-neutral-text-main, #41424e);
-  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
-}
-.buttonClose:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.buttonClose:active{
-  color:var(--sys-neutral-text-main, #41424e);
-  background-color:var(--sys-neutral-decor-activated, #bec2cf);
-}
-.buttonClose svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}

package/dist/helperComponents/Footer/styles.module.css

@@ -1,17 +0,0 @@
-.footer{
-  padding-top:var(--space-drawer-footer-top, 24px);
-  padding-left:var(--space-drawer-footer-side, 32px);
-  padding-right:var(--space-drawer-footer-side, 32px);
-  padding-bottom:var(--space-drawer-footer-bottom, 32px);
-  gap:var(--space-drawer-footer-gap, 16px);
-  display:flex;
-  flex-direction:column;
-}
-
-.footerActions{
-  gap:var(--space-drawer-footer-action-row-gap, 8px);
-  display:flex;
-  flex-direction:row-reverse;
-  flex-wrap:wrap-reverse;
-  align-items:center;
-}

package/dist/helperComponents/Header/styles.module.css

@@ -1,35 +0,0 @@
-.drawerHeader{
-}
-
-.image{
-  height:var(--size-drawer-image, 184px);
-  display:block;
-  width:100%;
-  -o-object-fit:cover;
-     object-fit:cover;
-}
-
-.headlineLayout{
-  padding-top:var(--space-drawer-headline-layout-top, 32px);
-  padding-left:var(--space-drawer-headline-layout-side-s, 32px);
-  padding-right:var(--space-drawer-headline-layout-side-m, 64px);
-  padding-bottom:var(--space-drawer-headline-layout-bottom, 24px);
-  gap:var(--space-drawer-headline-layout-gap, 8px);
-  display:flex;
-  flex-direction:column;
-}
-
-.headline{
-  gap:var(--space-drawer-headline-layout-headline, 4px);
-  display:flex;
-  align-items:center;
-}
-
-.title{
-  display:grid;
-  color:var(--sys-neutral-text-main, #41424e);
-}
-
-.subtitle{
-  color:var(--sys-neutral-text-support, #6d707f);
-}