@sima-land/ui-nucleons 45.0.0-alpha.21 → 45.0.0-alpha.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sima-land/ui-nucleons",
   "type": "commonjs",
-  "version": "45.0.0-alpha.21",
+  "version": "45.0.0-alpha.22",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -34,7 +34,7 @@
     "focus-trap": "^7.2.0",
     "overlayscrollbars": "^2.8.0",
     "overlayscrollbars-react": "^0.5.6",
-    "react-transition-group": "^4.4.2",
+    "react-transition-state": "^2.1.2",
     "redux": "^4.2.0"
   },
   "devDependencies": {
@@ -51,7 +51,6 @@
     "@types/overlayscrollbars": "^1.12.1",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "@types/react-transition-group": "^4.4.4",
     "babel-jest": "^27.5.1",
     "copyfiles": "^2.4.1",
     "eslint": "^9.8.0",

package/side-page/index.d.ts

@@ -1,3 +1,4 @@
 export type { SidePageProps } from './types';
 export { SidePage } from './side-page';
-export { SidePageHeader, SidePageBody, SidePageFooter } from './slots';
+export { SidePageBody } from './side-page-body';
+export { getResponsiveSidePageProps, useSidePageTransition } from './utils';

package/side-page/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidePageFooter = exports.SidePageBody = exports.SidePageHeader = exports.SidePage = void 0;
+exports.useSidePageTransition = exports.getResponsiveSidePageProps = exports.SidePageBody = exports.SidePage = void 0;
 var side_page_1 = require("./side-page");
 Object.defineProperty(exports, "SidePage", { enumerable: true, get: function () { return side_page_1.SidePage; } });
-var slots_1 = require("./slots");
-Object.defineProperty(exports, "SidePageHeader", { enumerable: true, get: function () { return slots_1.SidePageHeader; } });
-Object.defineProperty(exports, "SidePageBody", { enumerable: true, get: function () { return slots_1.SidePageBody; } });
-Object.defineProperty(exports, "SidePageFooter", { enumerable: true, get: function () { return slots_1.SidePageFooter; } });
+var side_page_body_1 = require("./side-page-body");
+Object.defineProperty(exports, "SidePageBody", { enumerable: true, get: function () { return side_page_body_1.SidePageBody; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getResponsiveSidePageProps", { enumerable: true, get: function () { return utils_1.getResponsiveSidePageProps; } });
+Object.defineProperty(exports, "useSidePageTransition", { enumerable: true, get: function () { return utils_1.useSidePageTransition; } });
 //# sourceMappingURL=index.js.map

package/side-page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/side-page/index.ts"],"names":[],"mappings":";;;AACA,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,iCAAuE;AAA9D,uGAAA,cAAc,OAAA;AAAE,qGAAA,YAAY,OAAA;AAAE,uGAAA,cAAc,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/side-page/index.ts"],"names":[],"mappings":";;;AACA,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,mDAAgD;AAAvC,8GAAA,YAAY,OAAA;AACrB,iCAA4E;AAAnE,mHAAA,0BAA0B,OAAA;AAAE,8GAAA,qBAAqB,OAAA"}

package/side-page/side-page-body.d.ts

@@ -0,0 +1,7 @@
+import { SidePageBodyProps } from './types';
+/**
+ * Основной контент SidePage.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SidePageBody({ rootRef, children, className, withScrollDisable, scrollDisableOptions, 'data-testid': testId, ...restProps }: SidePageBodyProps): import("react/jsx-runtime").JSX.Element;

package/side-page/side-page-body.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePageBody = SidePageBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const helpers_1 = require("../helpers");
+const classnames_1 = __importDefault(require("classnames"));
+const side_page_body_m_scss_1 = __importDefault(require("./side-page-body.m.scss"));
+/**
+ * Основной контент SidePage.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SidePageBody({ rootRef, children, className, withScrollDisable, scrollDisableOptions, 'data-testid': testId, ...restProps }) {
+    const innerRootRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_1.useMemo)(() => (0, helpers_1.mergeRefs)([rootRef, innerRootRef]), [rootRef, innerRootRef]);
+    (0, page_scroll_lock_1.usePageScrollLock)(innerRootRef, {
+        lockEnabled: withScrollDisable,
+        ...scrollDisableOptions,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: mergedRef, className: (0, classnames_1.default)(side_page_body_m_scss_1.default.body, className), ...restProps, "data-testid": testId, children: children }));
+}
+//# sourceMappingURL=side-page-body.js.map

package/side-page/side-page-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-page-body.js","sourceRoot":"","sources":["../../src/side-page/side-page-body.tsx"],"names":[],"mappings":";;;;;AAYA,oCA2BC;;AAtCD,iCAAwC;AACxC,oEAAkE;AAClE,wCAAuC;AACvC,4DAAoC;AACpC,oFAA6C;AAE7C;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACM;IAClB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,mBAAS,EAAC,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7F,IAAA,oCAAiB,EAAC,YAAY,EAAE;QAC9B,WAAW,EAAE,iBAAiB;QAC9B,GAAG,oBAAoB;KACxB,CAAC,CAAC;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,KACzC,SAAS,iBACA,MAAM,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/side-page/side-page-body.m.scss

@@ -0,0 +1,4 @@
+.body {
+  flex-grow: 1;
+  overflow-y: auto;
+}

package/side-page/side-page-util.scss

@@ -0,0 +1,9 @@
+@use '../shadows';
+
+@mixin size-s {
+  --side-page-max-width: 488px;
+}
+
+@mixin size-m {
+  --side-page-max-width: 968px;
+}

package/side-page/side-page.d.ts

@@ -1,13 +1,7 @@
 import type { SidePageProps } from './types';
-import { SidePageBody, SidePageFooter, SidePageHeader } from './slots';
 /**
  * Модальное окно, прикрепленное к правой стороне экрана.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function SidePage({ shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps }: SidePageProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SidePage {
-    var Header: typeof SidePageHeader;
-    var Body: typeof SidePageBody;
-    var Footer: typeof SidePageFooter;
-}
+export declare function SidePage({ size, className, children, onClose, overlayProps, 'data-testid': testId, ...restProps }: SidePageProps): import("react/jsx-runtime").JSX.Element;

package/side-page/side-page.js

@@ -5,53 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidePage = SidePage;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const define_slots_1 = require("../helpers/define-slots");
-const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
-const slots_1 = require("./slots");
-const CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
 const modal_overlay_1 = require("../modal-overlay");
 const utils_1 = require("../modal-overlay/utils");
 const bind_1 = __importDefault(require("classnames/bind"));
 const side_page_m_scss_1 = __importDefault(require("./side-page.m.scss"));
 const cx = bind_1.default.bind(side_page_m_scss_1.default);
-const transitionClasses = {
-    enter: cx('enter'),
-    enterActive: cx('enter-active'),
-    exit: cx('exit'),
-    exitActive: cx('exit-active'),
-};
 /**
  * Модальное окно, прикрепленное к правой стороне экрана.
  * @param props Свойства.
  * @return Элемент.
  */
-function SidePage({ shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps }) {
-    const transitionDuration = withTransitions ? 300 : 0;
-    return ((0, jsx_runtime_1.jsx)(CSSTransition_1.default, { in: shown, timeout: transitionDuration, classNames: transitionClasses, unmountOnExit: true, onEntering: onEntering, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, children: transitionStatus => ((0, jsx_runtime_1.jsx)(SidePageInner, { ...restProps, transitionStatus, transitionDuration })) }));
-}
-/**
- * Фиктивный компонент, необходимый для того чтобы задействовать хук блокировки прокрутки внутри CSSTransition.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePageInner({ size = 'm', children, onClose, withScrollDisable = false, scrollDisableOptions, transitionStatus, transitionDuration, }) {
-    const overlayClickBind = (0, utils_1.useExactClick)(onClose);
-    const ref = (0, react_1.useRef)(null);
-    (0, page_scroll_lock_1.usePageScrollLock)(ref, { lockEnabled: withScrollDisable, ...scrollDisableOptions });
-    const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
-        header: SidePage.Header,
-        body: SidePage.Body,
-        footer: SidePage.Footer,
+function SidePage({ size = 'm', className, children, onClose, overlayProps, 'data-testid': testId = 'side-page', ...restProps }) {
+    const overlayClickProps = (0, utils_1.useExactClick)(onClose, {
+        onMouseDown: overlayProps?.onMouseDown,
+        onMouseUp: overlayProps?.onMouseUp,
     });
-    const overlayProps = {
-        style: { '--transition-duration': `${transitionDuration}ms` },
-        // условие нужно чтобы не было моментального закрытия на double click
-        ...(transitionStatus !== 'entering' && overlayClickBind),
-    };
-    return ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, { ...overlayProps, children: (0, jsx_runtime_1.jsxs)("div", { className: cx('side-page', `size-${size}`), "data-testid": 'side-page', children: [header, (0, jsx_runtime_1.jsx)("div", { ref: ref, className: cx('body'), children: body }), footer] }) }));
+    const overlayClassName = cx('overlay', 
+    // ВАЖНО: классы размера и скруглений кидаем на ModalOverlay для того чтобы понизить специфичность
+    // а также потому что надо регулировать отступы от края
+    size !== 'unset' && `size-${size}`, overlayProps?.className);
+    const sidePageClassName = cx('side-page', className);
+    return ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, { ...overlayProps, className: overlayClassName, ...overlayClickProps, children: (0, jsx_runtime_1.jsx)("div", { className: sidePageClassName, "data-testid": testId, ...restProps, children: children }) }));
 }
-SidePage.Header = slots_1.SidePageHeader;
-SidePage.Body = slots_1.SidePageBody;
-SidePage.Footer = slots_1.SidePageFooter;
 //# sourceMappingURL=side-page.js.map

package/side-page/side-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-page.js","sourceRoot":"","sources":["../../src/side-page/side-page.tsx"],"names":[],"mappings":";;;;;AAyBA,4BA+BC;;AAvDD,iCAA8C;AAC9C,0DAAsD;AACtD,oEAAkE;AAClE,mCAAuE;AACvE,yFAAiE;AACjE,oDAAmE;AACnE,kDAAuD;AACvD,2DAAyC;AACzC,0EAAwC;AAExC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,0BAAM,CAAC,CAAC;AAEnC,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC;IAClB,WAAW,EAAE,EAAE,CAAC,cAAc,CAAC;IAC/B,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC;IAChB,UAAU,EAAE,EAAE,CAAC,aAAa,CAAC;CACrB,CAAC;AAEX;;;;GAIG;AACH,SAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,eAAe,EACf,OAAO,EACP,UAAU,EACV,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACE;IACd,MAAM,kBAAkB,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,OAAO,CACL,uBAAC,uBAAa,IACZ,EAAE,EAAE,KAAK,EACT,OAAO,EAAE,kBAAkB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,aAAa,QACb,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAEjB,gBAAgB,CAAC,EAAE,CAAC,CACnB,uBAAC,aAAa,OAAK,SAAS,EAAQ,gBAAgB,EAAE,kBAAkB,GAAM,CAC/E,GACa,CACjB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,aAAa,CAAC,EACrB,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,OAAO,EACP,iBAAiB,GAAG,KAAK,EACzB,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,GAInB;IACC,MAAM,gBAAgB,GAAG,IAAA,qBAAa,EAAC,OAAO,CAAC,CAAC;IAEhD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,IAAA,oCAAiB,EAAC,GAAG,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC,CAAC;IAEpF,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAA,0BAAW,EAAC,QAAQ,EAAE;QACrD,MAAM,EAAE,QAAQ,CAAC,MAAM;QACvB,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,MAAM,EAAE,QAAQ,CAAC,MAAM;KACxB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAsB;QACtC,KAAK,EAAE,EAAE,uBAAuB,EAAE,GAAG,kBAAkB,IAAI,EAAmB;QAE9E,qEAAqE;QACrE,GAAG,CAAC,gBAAgB,KAAK,UAAU,IAAI,gBAAgB,CAAC;KACzD,CAAC;IAEF,OAAO,CACL,uBAAC,4BAAY,OAAK,YAAY,YAC5B,iCAAK,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,QAAQ,IAAI,EAAE,CAAC,iBAAc,WAAW,aACrE,MAAM,EACP,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YACjC,IAAI,GACD,EACL,MAAM,IACH,GACO,CAChB,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,MAAM,GAAG,sBAAc,CAAC;AACjC,QAAQ,CAAC,IAAI,GAAG,oBAAY,CAAC;AAC7B,QAAQ,CAAC,MAAM,GAAG,sBAAc,CAAC"}
+{"version":3,"file":"side-page.js","sourceRoot":"","sources":["../../src/side-page/side-page.tsx"],"names":[],"mappings":";;;;;AAaA,4BA+BC;;AA3CD,oDAAgD;AAChD,kDAAuD;AACvD,2DAAyC;AACzC,0EAAwC;AAExC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,0BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,QAAQ,CAAC,EACvB,IAAI,GAAG,GAAG,EACV,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,aAAa,EAAE,MAAM,GAAG,WAAW,EACnC,GAAG,SAAS,EACE;IACd,MAAM,iBAAiB,GAAG,IAAA,qBAAa,EAAC,OAAO,EAAE;QAC/C,WAAW,EAAE,YAAY,EAAE,WAAW;QACtC,SAAS,EAAE,YAAY,EAAE,SAAS;KACnC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,EAAE,CACzB,SAAS;IACT,kGAAkG;IAClG,uDAAuD;IACvD,IAAI,KAAK,OAAO,IAAI,QAAQ,IAAI,EAAE,EAClC,YAAY,EAAE,SAAS,CACxB,CAAC;IAEF,MAAM,iBAAiB,GAAG,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,uBAAC,4BAAY,OAAK,YAAY,EAAE,SAAS,EAAE,gBAAgB,KAAM,iBAAiB,YAChF,gCAAK,SAAS,EAAE,iBAAiB,iBAAe,MAAM,KAAM,SAAS,YAClE,QAAQ,GACL,GACO,CAChB,CAAC;AACJ,CAAC"}

package/side-page/side-page.m.scss

@@ -1,7 +1,5 @@
-@use '../colors';
 @use '../breakpoints';
-@use '../top-bar/top-bar-util';
-@use '../bottom-bar/bottom-bar-util';
+@use './side-page-util';
 @use '../modal-overlay/modal-overlay-util';
 
 .side-page {
@@ -13,77 +11,13 @@
   display: flex;
   flex-direction: column;
   background: #fff;
-  @include breakpoints.down('xs') {
-    width: 100%;
-    .header {
-      @include top-bar-util.size-m;
-    }
-    .footer {
-      @include bottom-bar-util.size-m;
-    }
-  }
-  @include breakpoints.up('xs') {
-    &.size-s {
-      max-width: 488px;
-    }
-    &.size-m {
-      max-width: 968px;
-    }
-    .header {
-      @include top-bar-util.size-xl;
-    }
-    .footer {
-      @include bottom-bar-util.size-l;
-    }
-  }
+  max-width: var(--side-page-max-width, auto);
 }
 
-.header {
-  flex-shrink: 0;
-  width: 100%;
-}
-
-.body {
-  flex-grow: 1;
-  overflow-y: auto;
-}
-
-.footer {
-  flex-shrink: 0;
-  width: 100%;
-}
-
-// transitions
-.enter {
-  background-color: transparent;
-  .side-page {
-    transform: translateX(100%);
-  }
-}
-
-.enter-active {
-  transition: background-color var(--transition-duration) ease-in-out;
-  background-color: modal-overlay-util.$overlay-color;
-  overflow: hidden;
-  .side-page {
-    transition: transform var(--transition-duration) ease-in-out;
-    transform: translateX(0);
-  }
-}
-
-.exit {
-  background-color: modal-overlay-util.$overlay-color;
-  .side-page {
-    transform: translateX(0);
-  }
+.size-s {
+  @include side-page-util.size-s;
 }
 
-.exit-active {
-  transition: background-color var(--transition-duration) ease-in-out;
-  background-color: transparent;
-  overflow: hidden;
-  .side-page {
-    transition: transform var(--transition-duration) ease-in-out;
-    transform: translateX(100%);
-  }
+.size-m {
+  @include side-page-util.size-m;
 }

package/side-page/types.d.ts

@@ -1,27 +1,15 @@
-import type { ReactNode } from 'react';
-import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { HTMLAttributes, Ref } from 'react';
+import type { WithTestId } from '../types';
+import type { ModalOverlayProps } from '../modal-overlay';
 import type { WithPageScrollLock } from '../_internal/page-scroll-lock';
-export interface SidePageProps extends WithPageScrollLock {
-    /** Нужно ли показать компонент. */
-    shown?: boolean;
-    /** Нужно ли использовать анимации при открытии/закрытии. */
-    withTransitions?: boolean;
+export interface SidePageProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
     /** Ширина. */
-    size?: 's' | 'm';
-    /** Содержимое. */
-    children?: ReactNode;
-    /** Сработает при закрытии. */
+    size?: 's' | 'm' | 'unset';
+    /** Будет вызвана при закрытии. */
     onClose?: () => void;
-    /** Обработчик "onEntering" для CSSTransition. */
-    onEntering?: CSSTransitionProps['onEntering'];
-    /** Обработчик "onEnter" для CSSTransition. */
-    onEnter?: CSSTransitionProps['onEnter'];
-    /** Обработчик "onEntered" для CSSTransition. */
-    onEntered?: CSSTransitionProps['onEntered'];
-    /** Обработчик "onExiting" для CSSTransition. */
-    onExiting?: CSSTransitionProps['onExiting'];
-    /** Обработчик "onExited" для CSSTransition. */
-    onExited?: CSSTransitionProps['onExited'];
-    /** Обработчик "onExit" для CSSTransition. */
-    onExit?: CSSTransitionProps['onExit'];
+    /** Свойства компонента ModalOverlay. */
+    overlayProps?: ModalOverlayProps;
+}
+export interface SidePageBodyProps extends HTMLAttributes<HTMLDivElement>, WithTestId, WithPageScrollLock {
+    rootRef?: Ref<HTMLDivElement>;
 }

package/side-page/utils.d.ts

@@ -0,0 +1,26 @@
+import type { SidePageProps } from './types';
+import { type TransitionOptions, type TransitionState } from 'react-transition-state';
+/**
+ * Вернет свойства SidePage для формирования отзывчивого дизайна по гайдам.
+ * @param props Свойства SidePage.
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @param props.size Размер на desktop-разрешениях.
+ * @return Свойства SidePage.
+ */
+export declare function getResponsiveSidePageProps(props: SidePageProps): SidePageProps;
+/**
+ * Хук для формирования перехода (плавного появления/исчезания) SidePage.
+ * @param config Конфиг.
+ * @param config.extraProps Свойства SidePage и свойства состояния (shown).
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @return Состояние перехода и Свойства SidePage.
+ */
+export declare function useSidePageTransition({ shown, timeout, onStateChange, extraProps, }: {
+    shown?: boolean;
+    timeout?: number;
+    onStateChange?: TransitionOptions['onStateChange'];
+    extraProps?: SidePageProps;
+}): {
+    state: TransitionState;
+    sidePageProps: SidePageProps;
+};

package/side-page/utils.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResponsiveSidePageProps = getResponsiveSidePageProps;
+exports.useSidePageTransition = useSidePageTransition;
+const hooks_1 = require("../hooks");
+const react_transition_state_1 = require("react-transition-state");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_m_scss_1 = __importDefault(require("./utils.m.scss"));
+/**
+ * Вернет свойства SidePage для формирования отзывчивого дизайна по гайдам.
+ * @param props Свойства SidePage.
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @param props.size Размер на desktop-разрешениях.
+ * @return Свойства SidePage.
+ */
+function getResponsiveSidePageProps(props) {
+    const { size, overlayProps, ...restProps } = props;
+    return {
+        ...restProps,
+        size: 'unset',
+        // ВАЖНО: накидываем класс именно на ModalOverlay так как размер влияет и на него в том числе
+        overlayProps: {
+            ...overlayProps,
+            className: (0, classnames_1.default)(utils_m_scss_1.default[`size-${size}`], overlayProps?.className),
+        },
+    };
+}
+/**
+ * Хук для формирования перехода (плавного появления/исчезания) SidePage.
+ * @param config Конфиг.
+ * @param config.extraProps Свойства SidePage и свойства состояния (shown).
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @return Состояние перехода и Свойства SidePage.
+ */
+function useSidePageTransition({ shown, timeout = 300, onStateChange, extraProps, }) {
+    const [state, toggle] = (0, react_transition_state_1.useTransition)({
+        initialEntered: shown,
+        preEnter: true,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        timeout,
+        onStateChange,
+    });
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        toggle(shown);
+    }, [shown]);
+    return {
+        state,
+        sidePageProps: {
+            ...extraProps,
+            className: (0, classnames_1.default)(extraProps?.className, utils_m_scss_1.default['side-page']),
+            onClose: state.status === 'entering' ? undefined : extraProps?.onClose,
+            overlayProps: {
+                ...extraProps?.overlayProps,
+                className: (0, classnames_1.default)(extraProps?.overlayProps?.className, utils_m_scss_1.default[state.status]),
+                style: timeout !== 300
+                    ? {
+                        '--side-page-transition-duration': `${timeout}ms`,
+                        ...extraProps?.overlayProps?.style,
+                    }
+                    : extraProps?.overlayProps?.style,
+            },
+        },
+    };
+}
+//# sourceMappingURL=utils.js.map

package/side-page/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/side-page/utils.ts"],"names":[],"mappings":";;;;;AAkBA,gEAeC;AASD,sDAoDC;AA5FD,oCAAqD;AACrD,mEAIgC;AAChC,4DAAoC;AACpC,kEAAoC;AAEpC;;;;;;GAMG;AACH,SAAgB,0BAA0B,CAAC,KAAoB;IAC7D,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO;QACL,GAAG,SAAS;QAEZ,IAAI,EAAE,OAAO;QAEb,6FAA6F;QAC7F,YAAY,EAAE;YACZ,GAAG,YAAY;YAEf,SAAS,EAAE,IAAA,oBAAU,EAAC,sBAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC;SACvE;KACF,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,OAAO,GAAG,GAAG,EACb,aAAa,EACb,UAAU,GAMX;IAIC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,sCAAa,EAAC;QACpC,cAAc,EAAE,KAAK;QACrB,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE,IAAI;QAClB,aAAa,EAAE,IAAI;QACnB,OAAO;QACP,aAAa;KACd,CAAC,CAAC;IAEH,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO;QACL,KAAK;QAEL,aAAa,EAAE;YACb,GAAG,UAAU;YAEb,SAAS,EAAE,IAAA,oBAAU,EAAC,UAAU,EAAE,SAAS,EAAE,sBAAM,CAAC,WAAW,CAAC,CAAC;YAEjE,OAAO,EAAE,KAAK,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,OAAO;YAEtE,YAAY,EAAE;gBACZ,GAAG,UAAU,EAAE,YAAY;gBAE3B,SAAS,EAAE,IAAA,oBAAU,EAAC,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBAEhF,KAAK,EACH,OAAO,KAAK,GAAG;oBACb,CAAC,CAAE;wBACC,iCAAiC,EAAE,GAAG,OAAO,IAAI;wBACjD,GAAG,UAAU,EAAE,YAAY,EAAE,KAAK;qBACjB;oBACrB,CAAC,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK;aACtC;SACF;KACF,CAAC;AACJ,CAAC"}

package/side-page/utils.m.scss

@@ -0,0 +1,67 @@
+@use '../breakpoints';
+@use './side-page-util';
+@use '../top-bar/top-bar-util';
+@use '../bottom-bar/bottom-bar-util';
+@use '../modal-overlay/modal-overlay-util';
+
+@include breakpoints.lt('xs') {
+  .size-s {
+    @include top-bar-util.size-m;
+    @include bottom-bar-util.size-m;
+  }
+  .size-m {
+    @include top-bar-util.size-m;
+    @include bottom-bar-util.size-m;
+  }
+}
+
+@include breakpoints.gte('xs') {
+  .size-s {
+    @include side-page-util.size-s;
+    @include top-bar-util.size-xl;
+    @include bottom-bar-util.size-l;
+  }
+  .size-m {
+    @include side-page-util.size-m;
+    @include top-bar-util.size-xl;
+    @include bottom-bar-util.size-l;
+  }
+}
+
+// transitions
+
+/* stylelint-disable-next-line selector-class-pattern */
+.preEnter {
+  background-color: transparent;
+  .side-page {
+    transform: translateX(100%);
+  }
+}
+
+.entering {
+  transition: background-color var(--side-page-transition-duration, 300ms) ease-in-out;
+  background-color: modal-overlay-util.$overlay-color;
+  overflow: hidden;
+  .side-page {
+    transition: transform var(--side-page-transition-duration, 300ms) ease-in-out;
+    transform: translateX(0);
+  }
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.preExit {
+  background-color: modal-overlay-util.$overlay-color;
+  .side-page {
+    transform: translateX(0);
+  }
+}
+
+.exiting {
+  transition: background-color var(--side-page-transition-duration, 300ms) ease-in-out;
+  background-color: transparent;
+  overflow: hidden;
+  .side-page {
+    transition: transform var(--side-page-transition-duration, 300ms) ease-in-out;
+    transform: translateX(100%);
+  }
+}

package/side-page/slots.d.ts

@@ -1,26 +0,0 @@
-import { ReactNode } from 'react';
-import { TopBarProps } from '../top-bar';
-import { BottomBarProps } from '../bottom-bar';
-/**
- * Шапка SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function SidePageHeader({ onBack, onClose, buttons, ...topBarProps }: TopBarProps & {
-    onBack?: () => void;
-    onClose?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * Основной контент SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function SidePageBody({ children }: {
-    children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * Подвал SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function SidePageFooter({ ...props }: BottomBarProps): import("react/jsx-runtime").JSX.Element;

package/side-page/slots.js

@@ -1,39 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidePageHeader = SidePageHeader;
-exports.SidePageBody = SidePageBody;
-exports.SidePageFooter = SidePageFooter;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const top_bar_1 = require("../top-bar");
-const bottom_bar_1 = require("../bottom-bar");
-const utils_1 = require("../top-bar/utils");
-const classnames_1 = __importDefault(require("classnames"));
-const side_page_m_scss_1 = __importDefault(require("./side-page.m.scss"));
-/**
- * Шапка SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePageHeader({ onBack, onClose, buttons, ...topBarProps }) {
-    return ((0, jsx_runtime_1.jsx)(top_bar_1.TopBar, { ...topBarProps, size: 'unset', className: side_page_m_scss_1.default.header, buttons: (0, utils_1.navigationButtons)({ buttons, onBack, onClose }) }));
-}
-/**
- * Основной контент SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePageBody({ children }) {
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-}
-/**
- * Подвал SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePageFooter({ ...props }) {
-    return (0, jsx_runtime_1.jsx)(bottom_bar_1.BottomBar, { ...props, size: 'unset', className: (0, classnames_1.default)(side_page_m_scss_1.default.footer) });
-}
-//# sourceMappingURL=slots.js.map

package/side-page/slots.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../src/side-page/slots.tsx"],"names":[],"mappings":";;;;;AAYA,wCAiBC;AAOD,oCAEC;AAOD,wCAEC;;AA9CD,wCAAiD;AACjD,8CAA0D;AAC1D,4CAAqD;AACrD,4DAAoC;AACpC,0EAAwC;AAExC;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,OAAO,EACP,GAAG,WAAW,EAIf;IACC,OAAO,CACL,uBAAC,gBAAM,OACD,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,0BAAM,CAAC,MAAM,EACxB,OAAO,EAAE,IAAA,yBAAiB,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GACxD,CACH,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAAE,QAAQ,EAA4B;IACjE,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAED;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAAE,GAAG,KAAK,EAAkB;IACzD,OAAO,uBAAC,sBAAS,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,0BAAM,CAAC,MAAM,CAAC,GAAI,CAAC;AACrF,CAAC"}