@sima-land/moleculas 16.0.0-alpha.11 → 16.0.0-alpha.13

package/common/components/media-modal/parts/all-round-view.js

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
 const all_round_view_1 = require("../../../../desktop/components/gallery-modal/components/all-round-view");
-const utils_1 = require("../utils");
+const hooks_1 = require("../../../../common/hooks");
 const TouchScrollX_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Colorful/TouchScrollX"));
 const all_round_view_module_scss_1 = __importDefault(require("./all-round-view.module.scss"));
 /**
@@ -17,7 +17,7 @@ const all_round_view_module_scss_1 = __importDefault(require("./all-round-view.m
  * @return Элемент.
  */
 function AllRoundView(props) {
-    const mounted = (0, utils_1.useMounted)();
+    const mounted = (0, hooks_1.useMounted)();
     const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
     if (!mounted) {
         return null;

package/common/components/media-modal/parts/all-round-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-round-view.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/all-round-view.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA8C;AAC9C,wEAAwE;AACxE,2GAIgF;AAChF,oCAAsC;AACtC,0GAA8E;AAC9E,8FAAkD;AAElD;;;;GAIG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,CAAC;IAErC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,OAAO,uBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACrD,CAAC;AATD,oCASC;AAED;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA4C;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACxF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACtC,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,QAAQ,CAAC,UAAU,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,iCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI,aACxB,CAAC,OAAO,IAAI,QAAQ,IAAI,CACvB,gCAAK,SAAS,EAAE,oCAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,YAC1D,uBAAC,sBAAQ,KAAG,GACR,CACP,EAED,uBAAC,6BAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAI,IACrF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"all-round-view.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/all-round-view.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA8C;AAC9C,wEAAwE;AACxE,2GAIgF;AAChF,oDAAsD;AACtD,0GAA8E;AAC9E,8FAAkD;AAElD;;;;GAIG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,CAAC;IAErC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,OAAO,uBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACrD,CAAC;AATD,oCASC;AAED;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA4C;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACxF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACtC,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,QAAQ,CAAC,UAAU,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,iCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI,aACxB,CAAC,OAAO,IAAI,QAAQ,IAAI,CACvB,gCAAK,SAAS,EAAE,oCAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,YAC1D,uBAAC,sBAAQ,KAAG,GACR,CACP,EAED,uBAAC,6BAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAI,IACrF,CACP,CAAC;AACJ,CAAC"}

package/common/components/media-modal/parts/index.js

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const layout_1 = require("@sima-land/ui-nucleons/layout");
 const define_slots_1 = require("@sima-land/ui-nucleons/helpers/define-slots");
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
-const utils_1 = require("../utils");
+const hooks_1 = require("../../../../common/hooks");
 const scroll_section_1 = require("./scroll-section");
 const Left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Left"));
 const parts_module_scss_1 = __importDefault(require("./parts.module.scss"));
@@ -32,7 +32,7 @@ exports.Preset = {
  * @return Элемент.
  */
 function HeaderLayout({ children }) {
-    const mounted = (0, utils_1.useMounted)();
+    const mounted = (0, hooks_1.useMounted)();
     const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
     const { tabs, button } = (0, define_slots_1.defineSlots)(children, {
         tabs: HeaderLayoutTabs,

package/common/components/media-modal/parts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/index.tsx"],"names":[],"mappings":";;;;;;;AACA,0DAAuD;AAGvD,8EAA0E;AAC1E,wEAAwE;AACxE,oCAAsC;AACtC,qDAAiD;AACjD,gGAA2E;AAC3E,4EAAyC;AAE5B,QAAA,MAAM,GAAG;IACpB,UAAU,EAAE,CAAC,SAAqB,EAAa,EAAE,CAAC,CAAC;QACjD,IAAI,EAAE,iBAAiB;QACvB,GAAG,SAAS;KACb,CAAC;IAEF,YAAY,EAAE,CAAC,SAA2B,EAAmB,EAAE,CAAC,CAAC;QAC/D,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,cAAO;QAClB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,2BAAM,CAAC,eAAe,CAAC;QAClC,QAAQ,EAAE,8BAA8B;QACxC,GAAG,SAAS;KACb,CAAC;CACM,CAAC;AAEX;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAAE,QAAQ,EAA4B;IACjE,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAA,0BAAW,EAAC,QAAQ,EAAE;QAC7C,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,kBAAkB;KAC3B,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,gCAAK,SAAS,EAAE,2BAAM,CAAC,eAAe,CAAC,GAAQ,CAAC;KACxD;IAED,OAAO,CACL,iCAAK,SAAS,EAAE,2BAAM,CAAC,eAAe,CAAC,aACpC,CAAC,OAAO,IAAI,CACX,6DACG,IAAI,IAAI,uBAAC,8BAAa,cAAE,IAAI,GAAiB,EAC7C,MAAM,IAAI,uBAAC,eAAM,cAAE,MAAM,GAAU,IACnC,CACJ,EAEA,OAAO,IAAI,CACV,6DACG,IAAI,EACJ,MAAM,IACN,CACJ,IACG,CACP,CAAC;AACJ,CAAC;AA9BD,oCA8BC;AAED,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AACrC,YAAY,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAEzC;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAA4B;IAC9D,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAED;;;;GAIG;AACH,SAAS,kBAAkB,CAAC,EAAE,QAAQ,EAA4B;IAChE,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/index.tsx"],"names":[],"mappings":";;;;;;;AACA,0DAAuD;AAGvD,8EAA0E;AAC1E,wEAAwE;AACxE,oDAAsD;AACtD,qDAAiD;AACjD,gGAA2E;AAC3E,4EAAyC;AAE5B,QAAA,MAAM,GAAG;IACpB,UAAU,EAAE,CAAC,SAAqB,EAAa,EAAE,CAAC,CAAC;QACjD,IAAI,EAAE,iBAAiB;QACvB,GAAG,SAAS;KACb,CAAC;IAEF,YAAY,EAAE,CAAC,SAA2B,EAAmB,EAAE,CAAC,CAAC;QAC/D,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,cAAO;QAClB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,2BAAM,CAAC,eAAe,CAAC;QAClC,QAAQ,EAAE,8BAA8B;QACxC,GAAG,SAAS;KACb,CAAC;CACM,CAAC;AAEX;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAAE,QAAQ,EAA4B;IACjE,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAA,0BAAW,EAAC,QAAQ,EAAE;QAC7C,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,kBAAkB;KAC3B,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,gCAAK,SAAS,EAAE,2BAAM,CAAC,eAAe,CAAC,GAAQ,CAAC;KACxD;IAED,OAAO,CACL,iCAAK,SAAS,EAAE,2BAAM,CAAC,eAAe,CAAC,aACpC,CAAC,OAAO,IAAI,CACX,6DACG,IAAI,IAAI,uBAAC,8BAAa,cAAE,IAAI,GAAiB,EAC7C,MAAM,IAAI,uBAAC,eAAM,cAAE,MAAM,GAAU,IACnC,CACJ,EAEA,OAAO,IAAI,CACV,6DACG,IAAI,EACJ,MAAM,IACN,CACJ,IACG,CACP,CAAC;AACJ,CAAC;AA9BD,oCA8BC;AAED,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AACrC,YAAY,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAEzC;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAA4B;IAC9D,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAED;;;;GAIG;AACH,SAAS,kBAAkB,CAAC,EAAE,QAAQ,EAA4B;IAChE,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC"}

package/common/components/media-modal/parts/media-area.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+/**
+ * Формирует ограничения высоты и ширины для вывода меда контента по гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaArea({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Центральная часть зоны для медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaAreaMain({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Боковая часть зоны для медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaAreaAside({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/common/components/media-modal/parts/media-area.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaAreaAside = exports.MediaAreaMain = exports.MediaArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("@sima-land/ui-nucleons/layout");
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const media_area_module_scss_1 = __importDefault(require("./media-area.module.scss"));
+const cx = bind_1.default.bind(media_area_module_scss_1.default);
+/**
+ * Формирует ограничения высоты и ширины для вывода меда контента по гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaArea({ children }) {
+    const ref = (0, react_1.useRef)(null);
+    const rect = (0, utils_1.useClientRect)(ref);
+    const style = rect.ready
+        ? {
+            '--media-gallery-width': `${rect.width}px`,
+            '--media-gallery-height': `${rect.height}px`,
+            '--media-view-width': `var(--media-gallery-width)`,
+            '--media-view-height': `var(--media-gallery-height)`,
+        }
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(layout_1.Layout, { rootRef: ref, disabledOn: ['mxs', 'ms', 'xs', 's', 'm', 'l', 'xl'], className: cx('root'), style: style, children: children }));
+}
+exports.MediaArea = MediaArea;
+/**
+ * Центральная часть зоны для медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaAreaMain({ children }) {
+    const ref = (0, react_1.useRef)(null);
+    const rect = (0, utils_1.useClientRect)(ref);
+    const style = rect.ready
+        ? {
+            '--media-gallery-width': `${rect.width}px`,
+            '--media-gallery-height': `${rect.height}px`,
+            '--media-view-width': `var(--media-gallery-width)`,
+            '--media-view-height': `var(--media-gallery-height)`,
+        }
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cx('main'), style: style, children: children }));
+}
+exports.MediaAreaMain = MediaAreaMain;
+/**
+ * Боковая часть зоны для медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaAreaAside({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('aside'), children: children });
+}
+exports.MediaAreaAside = MediaAreaAside;
+//# sourceMappingURL=media-area.js.map

package/common/components/media-modal/parts/media-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-area.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/media-area.tsx"],"names":[],"mappings":";;;;;;;AAAA,0DAAuD;AACvD,iCAAyD;AACzD,oCAAyC;AACzC,2DAAyC;AACzC,sFAA8C;AAE9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EAAE,QAAQ,EAA4B;IAC9D,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,qBAAa,EAAC,GAAG,CAAC,CAAC;IAEhC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,CAAC,CAAE;YACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;YAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;YAC5C,oBAAoB,EAAE,4BAA4B;YAClD,qBAAqB,EAAE,6BAA6B;SACnC;QACrB,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,uBAAC,eAAM,IACL,OAAO,EAAE,GAAG,EACZ,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EACpD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EACrB,KAAK,EAAE,KAAK,YAEX,QAAQ,GACF,CACV,CAAC;AACJ,CAAC;AAvBD,8BAuBC;AAED;;;;GAIG;AACH,SAAgB,aAAa,CAAC,EAAE,QAAQ,EAA4B;IAClE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,qBAAa,EAAC,GAAG,CAAC,CAAC;IAEhC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,CAAC,CAAE;YACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;YAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;YAC5C,oBAAoB,EAAE,4BAA4B;YAClD,qBAAqB,EAAE,6BAA6B;SACnC;QACrB,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,YAC/C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAlBD,sCAkBC;AAED;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAAE,QAAQ,EAA4B;IACnE,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAG,QAAQ,GAAO,CAAC;AACvD,CAAC;AAFD,wCAEC"}

package/common/components/media-modal/parts/media-area.module.scss

@@ -0,0 +1,21 @@
+.root {
+  position: relative;
+  flex-grow: 1;
+  height: max(50vh, 240px);
+  display: flex;
+}
+
+.aside + .main,
+.main + .aside {
+  margin-left: 24px;
+}
+
+.main {
+  flex-grow: 1;
+  position: relative;
+}
+
+.aside {
+  display: flex;
+  align-items: center;
+}

package/common/components/media-modal/parts/media-view.d.ts

@@ -1,13 +1,20 @@
-import { VideoHTMLAttributes } from 'react';
+import { CSSProperties, Ref, VideoHTMLAttributes } from 'react';
 import { MediaData } from '../types';
+export interface MediaViewStyle extends CSSProperties {
+    '--media-view-width'?: string;
+    '--media-view-height'?: string;
+}
 export interface MediaViewProps {
+    rootRef?: Ref<HTMLDivElement>;
     media?: MediaData;
     loading?: boolean;
     videoProps?: VideoHTMLAttributes<HTMLVideoElement>;
+    style?: MediaViewStyle;
+    className?: string;
 }
 /**
  * Отображает медиа-контент - 360, видео или изображение.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function MediaView({ media, loading, videoProps }: MediaViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaView({ media, loading, videoProps, style, className, rootRef, }: MediaViewProps): import("react/jsx-runtime").JSX.Element;

package/common/components/media-modal/parts/media-view.js

@@ -6,19 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediaView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
-const classnames_1 = __importDefault(require("classnames"));
 const all_round_view_1 = require("./all-round-view");
-const media_view_module_scss_1 = __importDefault(require("./media-view.module.scss"));
 const hooks_1 = require("../../../hooks");
 const img_stub_1 = require("../../img-stub");
+const bind_1 = __importDefault(require("classnames/bind"));
+const media_view_module_scss_1 = __importDefault(require("./media-view.module.scss"));
+const cx = bind_1.default.bind(media_view_module_scss_1.default);
 /**
  * Отображает медиа-контент - 360, видео или изображение.
  * @param props Свойства.
  * @return Элемент.
  */
-function MediaView({ media, loading, videoProps }) {
+function MediaView({ media, loading, videoProps, style, className, rootRef, }) {
     const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
     let imageSrc = undefined;
     if ((media === null || media === void 0 ? void 0 : media.type) === 'image') {
@@ -38,9 +38,9 @@ function MediaView({ media, loading, videoProps }) {
         }
     }, [loading, videoSrc]);
     if (loading) {
-        return (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(media_view_module_scss_1.default.root, media_view_module_scss_1.default.loading) });
+        return (0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: cx('root', 'loading') });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(media_view_module_scss_1.default.root), children: [(media === null || media === void 0 ? void 0 : media.type) === 'image' && ((0, jsx_runtime_1.jsxs)(image_overlay_1.ImageOverlay, { className: media_view_module_scss_1.default.image, children: [failed && (0, jsx_runtime_1.jsx)(img_stub_1.ImgStub, { className: media_view_module_scss_1.default.stub }), !failed && (0, jsx_runtime_1.jsx)("img", { src: media.data.src, alt: media.data.alt || '', onError: handleError })] })), (media === null || media === void 0 ? void 0 : media.type) === 'video' && ((0, jsx_runtime_1.jsx)("video", { autoPlay: false, controls: true, controlsList: 'nodownload', ...videoProps, ref: videoRef, children: (0, jsx_runtime_1.jsx)("source", { src: media.data.src }) })), (media === null || media === void 0 ? void 0 : media.type) === '360' && (0, jsx_runtime_1.jsx)(all_round_view_1.AllRoundView, { photos: media.data.photos, controls: desktop })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: cx('root', className), style: style, children: [(media === null || media === void 0 ? void 0 : media.type) === 'image' && ((0, jsx_runtime_1.jsxs)("div", { className: cx('image'), children: [failed && (0, jsx_runtime_1.jsx)(img_stub_1.ImgStub, { className: media_view_module_scss_1.default.stub }), !failed && (0, jsx_runtime_1.jsx)("img", { src: media.data.src, alt: media.data.alt || '', onError: handleError })] })), (media === null || media === void 0 ? void 0 : media.type) === 'video' && ((0, jsx_runtime_1.jsx)("video", { autoPlay: false, controls: true, controlsList: 'nodownload', ...videoProps, ref: videoRef, children: (0, jsx_runtime_1.jsx)("source", { src: media.data.src }) })), (media === null || media === void 0 ? void 0 : media.type) === '360' && (0, jsx_runtime_1.jsx)(all_round_view_1.AllRoundView, { photos: media.data.photos, controls: desktop })] }));
 }
 exports.MediaView = MediaView;
 //# sourceMappingURL=media-view.js.map

package/common/components/media-modal/parts/media-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-view.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/media-view.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA+D;AAC/D,yGAAqG;AAErG,wEAAwE;AACxE,4DAAoC;AACpC,qDAAgD;AAChD,sFAA8C;AAC9C,0CAA8C;AAC9C,6CAAyC;AAQzC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAkB;IACtE,MAAM,OAAO,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,CAAC;IACrC,IAAI,QAAQ,GAAuB,SAAS,CAAC;IAE7C,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,EAAE;QAC3B,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;KAC3B;SAAM,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,EAAE;QAClC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;KACjC;IAED,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,oBAAY,EAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,8FAA8F;QAC9F,IAAI,QAAQ,EAAE;YACZ,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,IAAI,OAAO,EAAE;QACX,OAAO,gCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,IAAI,EAAE,gCAAM,CAAC,OAAO,CAAC,GAAQ,CAAC;KACxE;IAED,OAAO,CACL,iCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,IAAI,CAAC,aACpC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,IAAI,CAC1B,wBAAC,4BAAY,IAAC,SAAS,EAAE,gCAAM,CAAC,KAAK,aAClC,MAAM,IAAI,uBAAC,kBAAO,IAAC,SAAS,EAAE,gCAAM,CAAC,IAAI,GAAI,EAC7C,CAAC,MAAM,IAAI,gCAAK,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,GAAI,IAC5E,CAChB,EAEA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,IAAI,CAC1B,kCAAO,QAAQ,EAAE,KAAK,EAAE,QAAQ,QAAC,YAAY,EAAC,YAAY,KAAK,UAAU,EAAE,GAAG,EAAE,QAAQ,YACtF,mCAAQ,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,GAAI,GACzB,CACT,EAEA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,KAAK,IAAI,uBAAC,6BAAY,IAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAI,IACpF,CACP,CAAC;AACJ,CAAC;AA5CD,8BA4CC"}
+{"version":3,"file":"media-view.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/media-view.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmF;AAEnF,wEAAwE;AACxE,qDAAgD;AAChD,0CAA8C;AAC9C,6CAAyC;AACzC,2DAAyC;AACzC,sFAA8C;AAgB9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,UAAU,EACV,KAAK,EACL,SAAS,EACT,OAAO,GACQ;IACf,MAAM,OAAO,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,CAAC;IACrC,IAAI,QAAQ,GAAuB,SAAS,CAAC;IAE7C,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,EAAE;QAC3B,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;KAC3B;SAAM,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,EAAE;QAClC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;KACjC;IAED,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,oBAAY,EAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,8FAA8F;QAC9F,IAAI,QAAQ,EAAE;YACZ,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,IAAI,OAAO,EAAE;QACX,OAAO,gCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,GAAQ,CAAC;KACpE;IAED,OAAO,CACL,iCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAC9D,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,IAAI,CAC1B,iCAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,aACxB,MAAM,IAAI,uBAAC,kBAAO,IAAC,SAAS,EAAE,gCAAM,CAAC,IAAI,GAAI,EAC7C,CAAC,MAAM,IAAI,gCAAK,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,GAAI,IACrF,CACP,EAEA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,IAAI,CAC1B,kCAAO,QAAQ,EAAE,KAAK,EAAE,QAAQ,QAAC,YAAY,EAAC,YAAY,KAAK,UAAU,EAAE,GAAG,EAAE,QAAQ,YACtF,mCAAQ,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,GAAI,GACzB,CACT,EAEA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,KAAK,IAAI,uBAAC,6BAAY,IAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAI,IACpF,CACP,CAAC;AACJ,CAAC;AAnDD,8BAmDC"}

package/common/components/media-modal/parts/media-view.module.scss

@@ -1,16 +1,16 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .root {
-  width: var(--media-width, 320px);
-  height: var(--media-height, 240px);
   position: absolute;
+  width: var(--media-view-width, 320px);
+  height: var(--media-view-height, 240px);
   display: flex;
   align-items: center;
   justify-content: center;
   &.loading {
     background: colors.$basic-gray4;
   }
-  --all-round-view-size: min(var(--media-width), var(--media-height));
+  --all-round-view-size: min(var(--media-view-width, 320px), var(--media-view-height, 240px));
   video,
   .image {
     position: absolute;

package/common/components/media-modal/parts/product-brief.module.scss

@@ -40,13 +40,6 @@
 
 .footer {
   display: flex;
-  > * {
-    width: 128px;
-    --stepper-width: 128px;
-  }
-  > *:last-child {
-    margin-left: 8px;
-  }
 }
 
 .size-s {

package/common/components/media-modal/parts/scroll-section.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const layout_1 = require("@sima-land/ui-nucleons/layout");
+const page_scroll_lock_1 = require("@sima-land/ui-nucleons/_internal/page-scroll-lock");
 const scroll_section_module_scss_1 = __importDefault(require("./scroll-section.module.scss"));
 /**
  * Секция с прокруткой по горизонтали по дизайн-гайдам.
@@ -13,7 +14,7 @@ const scroll_section_module_scss_1 = __importDefault(require("./scroll-section.m
  * @return Элемент.
  */
 function ScrollSection({ children, scrollRef, contentRef, }) {
-    return ((0, jsx_runtime_1.jsx)(layout_1.Layout, { disabledOn: ['mxs', 'ms'], children: (0, jsx_runtime_1.jsxs)("div", { ref: scrollRef, className: scroll_section_module_scss_1.default.inner, children: [(0, jsx_runtime_1.jsx)("div", { className: scroll_section_module_scss_1.default.gutter }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: scroll_section_module_scss_1.default.content, children: children }), (0, jsx_runtime_1.jsx)("div", { className: scroll_section_module_scss_1.default.gutter })] }) }));
+    return ((0, jsx_runtime_1.jsx)(layout_1.Layout, { disabledOn: ['mxs', 'ms'], children: (0, jsx_runtime_1.jsxs)("div", { ref: scrollRef, className: scroll_section_module_scss_1.default.inner, ...{ [page_scroll_lock_1.BSL_IGNORE_ATTR]: true }, children: [(0, jsx_runtime_1.jsx)("div", { className: scroll_section_module_scss_1.default.gutter }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: scroll_section_module_scss_1.default.content, children: children }), (0, jsx_runtime_1.jsx)("div", { className: scroll_section_module_scss_1.default.gutter })] }) }));
 }
 exports.ScrollSection = ScrollSection;
 //# sourceMappingURL=scroll-section.js.map

package/common/components/media-modal/parts/scroll-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-section.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/scroll-section.tsx"],"names":[],"mappings":";;;;;;;AAAA,0DAAuD;AAEvD,8FAAkD;AAElD;;;;GAIG;AACH,SAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,UAAU,GAKX;IACC,OAAO,CACL,uBAAC,eAAM,IAAC,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,YAC/B,iCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,oCAAM,CAAC,KAAK,aAC1C,gCAAK,SAAS,EAAE,oCAAM,CAAC,MAAM,GAAI,EACjC,gCAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,oCAAM,CAAC,OAAO,YAC5C,QAAQ,GACL,EACN,gCAAK,SAAS,EAAE,oCAAM,CAAC,MAAM,GAAI,IAC7B,GACC,CACV,CAAC;AACJ,CAAC;AApBD,sCAoBC"}
+{"version":3,"file":"scroll-section.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/scroll-section.tsx"],"names":[],"mappings":";;;;;;;AAAA,0DAAuD;AAEvD,wFAAoF;AACpF,8FAAkD;AAElD;;;;GAIG;AACH,SAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,UAAU,GAKX;IACC,OAAO,CACL,uBAAC,eAAM,IAAC,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,YAC/B,iCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,oCAAM,CAAC,KAAK,KAAM,EAAE,CAAC,kCAAe,CAAC,EAAE,IAAI,EAAE,aAC3E,gCAAK,SAAS,EAAE,oCAAM,CAAC,MAAM,GAAI,EACjC,gCAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,oCAAM,CAAC,OAAO,YAC5C,QAAQ,GACL,EACN,gCAAK,SAAS,EAAE,oCAAM,CAAC,MAAM,GAAI,IAC7B,GACC,CACV,CAAC;AACJ,CAAC;AApBD,sCAoBC"}

package/common/components/media-modal/parts/thumbnails.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
 const utils_1 = require("../utils");
+const hooks_1 = require("../../../../common/hooks");
 const scroll_section_1 = require("./scroll-section");
 const thumbnail_1 = require("./thumbnail");
 const bind_1 = __importDefault(require("classnames/bind"));
@@ -19,7 +20,7 @@ const cx = bind_1.default.bind(thumbnails_module_scss_1.default);
  * @return Элемент.
  */
 function Thumbnails({ children, targetIndex, ...rest }) {
-    const mounted = (0, utils_1.useMounted)();
+    const mounted = (0, hooks_1.useMounted)();
     const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
     const scrollRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);

package/common/components/media-modal/parts/thumbnails.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnails.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/thumbnails.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAqD;AACrD,wEAAwE;AACxE,oCAA6C;AAC7C,qDAAiD;AACjD,2CAA8D;AAC9D,2DAAyC;AACzC,sFAA8C;AAQ9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,EAAmB;IAC5E,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QAEjC,IAAI,CAAC,CAAC,OAAO,IAAI,MAAM,IAAI,OAAO,WAAW,KAAK,QAAQ,CAAC,EAAE;YAC3D,OAAO;SACR;QAED,MAAM,MAAM,GAAG,OAAO;YACpB,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;YACzC,CAAC,CAAC,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE9C,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,IAAI,OAAO,EAAE;YACX,MAAM,CAAC,SAAS,IAAI,aAAK,CAAC,gBAAgB,CACxC,aAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAC9B,aAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAC/B,CAAC;SACH;aAAM;YACL,MAAM,WAAW,GAAG,aAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;YAErD,MAAM,CAAC,UAAU,IAAI,aAAK,CAAC,gBAAgB,CACzC;gBACE,sDAAsD;gBACtD,KAAK,EAAE,WAAW,CAAC,KAAK,GAAG,EAAE;gBAC7B,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,EAAE;aAChC,EACD,aAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CACjC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CACL,uBAAC,4BAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,YACtD,uBAAC,8BAAa,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,YACxD,QAAQ,GACK,GACU,CAC7B,CAAC;KACH;IAED,OAAO,CACL,uBAAC,4BAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,YACtD,gCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,YAC/C,QAAQ,GACL,GACoB,CAC7B,CAAC;AACJ,CAAC;AA7DD,gCA6DC"}
+{"version":3,"file":"thumbnails.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/thumbnails.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAqD;AACrD,wEAAwE;AACxE,oCAAiC;AACjC,oDAAsD;AACtD,qDAAiD;AACjD,2CAA8D;AAC9D,2DAAyC;AACzC,sFAA8C;AAQ9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,EAAmB;IAC5E,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QAEjC,IAAI,CAAC,CAAC,OAAO,IAAI,MAAM,IAAI,OAAO,WAAW,KAAK,QAAQ,CAAC,EAAE;YAC3D,OAAO;SACR;QAED,MAAM,MAAM,GAAG,OAAO;YACpB,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;YACzC,CAAC,CAAC,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE9C,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,IAAI,OAAO,EAAE;YACX,MAAM,CAAC,SAAS,IAAI,aAAK,CAAC,gBAAgB,CACxC,aAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAC9B,aAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAC/B,CAAC;SACH;aAAM;YACL,MAAM,WAAW,GAAG,aAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;YAErD,MAAM,CAAC,UAAU,IAAI,aAAK,CAAC,gBAAgB,CACzC;gBACE,sDAAsD;gBACtD,KAAK,EAAE,WAAW,CAAC,KAAK,GAAG,EAAE;gBAC7B,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,EAAE;aAChC,EACD,aAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CACjC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CACL,uBAAC,4BAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,YACtD,uBAAC,8BAAa,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,YACxD,QAAQ,GACK,GACU,CAC7B,CAAC;KACH;IAED,OAAO,CACL,uBAAC,4BAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,YACtD,gCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,YAC/C,QAAQ,GACL,GACoB,CAC7B,CAAC;AACJ,CAAC;AA7DD,gCA6DC"}

package/common/components/media-modal/types.d.ts

@@ -6,6 +6,7 @@ export interface MediaShape<T extends string, D extends Record<string, any>> {
 export type MediaImage = MediaShape<'image', {
     src: string;
     alt?: string;
+    thumbnail?: string;
 }>;
 export type MediaVideo = MediaShape<'video', {
     src: string;

package/common/components/media-modal/utils.d.ts

@@ -35,11 +35,6 @@ export declare function useClientRect(ref: RefObject<HTMLElement>): {
     width: number;
     height: number;
 };
-/**
- * Возвращает true если компонент смонтирован.
- * @return True если компонент смонтирован.
- */
-export declare function useMounted(): boolean;
 /**
  * Хук получения доступа к visualViewport.
  * @param handle Получит visualViewport.

package/common/components/media-modal/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVisualViewport = exports.useMounted = exports.useClientRect = exports.Range = void 0;
+exports.useVisualViewport = exports.useClientRect = exports.Range = void 0;
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
 const identity_1 = require("@sima-land/ui-nucleons/hooks/identity");
 const react_1 = require("react");
 /** Диапазон. */
@@ -58,7 +59,7 @@ function useClientRect(ref) {
         width: 0,
         height: 0,
     }));
-    (0, react_1.useEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (ref.current) {
             const element = ref.current;
             setRect({
@@ -80,19 +81,6 @@ function useClientRect(ref) {
     return rect;
 }
 exports.useClientRect = useClientRect;
-/**
- * Возвращает true если компонент смонтирован.
- * @return True если компонент смонтирован.
- */
-function useMounted() {
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        setMounted(true);
-        return () => setMounted(false);
-    }, []);
-    return mounted;
-}
-exports.useMounted = useMounted;
 /**
  * Хук получения доступа к visualViewport.
  * @param handle Получит visualViewport.

package/common/components/media-modal/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/common/components/media-modal/utils.ts"],"names":[],"mappings":";;;AAAA,oEAAuE;AACvE,iCAAuD;AAOvD,gBAAgB;AAChB,MAAa,KAAK;IAChB;;;;OAIG;IACH,MAAM,CAAC,gBAAgB,CAAC,EAAW;QACjC,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;QAExC,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,GAAG;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,kBAAkB,CAAC,EAAW;QACnC,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;QAExC,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,IAAI;YAChB,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,gBAAgB,CAAC,KAAY,EAAE,MAAa;QACjD,IAAI,MAAM,GAAG,CAAC,CAAC;QAEf,IAAI,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE;YAChC,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;SACvC;aAAM,IAAI,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE;YACrC,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;SACxC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;CACF;AA9CD,sBA8CC;AAED;;;;GAIG;AACH,SAAgB,aAAa,CAAC,GAA2B;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAoD,GAAG,EAAE,CAAC,CAAC;QACzF,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV,CAAC,CAAC,CAAC;IAEJ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;YAE5B,OAAO,CAAC;gBACN,KAAK,EAAE,IAAI;gBACX,KAAK,EAAE,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK;gBAC5C,MAAM,EAAE,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;aAC/C,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBACvC,OAAO,CAAC;oBACN,KAAK,EAAE,IAAI;oBACX,KAAK,EAAE,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK;oBAC5C,MAAM,EAAE,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;iBAC/C,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAE1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,IAAI,CAAC;AACd,CAAC;AAhCD,sCAgCC;AAED;;;GAGG;AACH,SAAgB,UAAU;IACxB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CAAC;AACjB,CAAC;AATD,gCASC;AAED;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,MAA0C;IAC1E,MAAM,GAAG,GAAG,IAAA,yBAAc,EAAC,MAAM,CAAC,CAAC;IAEnC,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,MAAM,QAAQ,GAAG,MAAM,CAAC,cAAc,CAAC;QAEvC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QAED,yCAAyC;QACzC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAE3C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC1C,MAAA,MAAM,CAAC,cAAc,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC1D,MAAA,MAAM,CAAC,cAAc,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE1D,MAAM,EAAE,CAAC;QAET,OAAO,GAAG,EAAE;;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC7C,MAAA,MAAM,CAAC,cAAc,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC7D,MAAA,MAAM,CAAC,cAAc,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC/D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAzBD,8CAyBC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/common/components/media-modal/utils.ts"],"names":[],"mappings":"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"}

package/common/hooks/index.d.ts

@@ -12,3 +12,8 @@ export declare function useImageStub(src?: string, onError?: ReactEventHandler<H
     setFailed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     handleError: ReactEventHandler<HTMLImageElement>;
 };
+/**
+ * Возвращает true если компонент смонтирован.
+ * @return True если компонент смонтирован.
+ */
+export declare function useMounted(): boolean;

package/common/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImageStub = void 0;
+exports.useMounted = exports.useImageStub = void 0;
 const hooks_1 = require("@sima-land/ui-nucleons/hooks");
 const react_1 = require("react");
 /**
@@ -23,4 +23,17 @@ function useImageStub(src, onError) {
     return { failed, setFailed, handleError };
 }
 exports.useImageStub = useImageStub;
+/**
+ * Возвращает true если компонент смонтирован.
+ * @return True если компонент смонтирован.
+ */
+function useMounted() {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
+    return mounted;
+}
+exports.useMounted = useMounted;
 //# sourceMappingURL=index.js.map

package/common/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/common/hooks/index.ts"],"names":[],"mappings":";;;AAAA,wDAAyE;AACzE,iCAAiE;AAEjE;;;;;;;GAOG;AACH,SAAgB,YAAY,CAAC,GAAY,EAAE,OAA6C;IACtF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAC5C,CAAC;AAhBD,oCAgBC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/common/hooks/index.ts"],"names":[],"mappings":";;;AAAA,wDAAyE;AACzE,iCAAiE;AAEjE;;;;;;;GAOG;AACH,SAAgB,YAAY,CAAC,GAAY,EAAE,OAA6C;IACtF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAC5C,CAAC;AAhBD,oCAgBC;AAED;;;GAGG;AACH,SAAgB,UAAU;IACxB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CAAC;AACjB,CAAC;AATD,gCASC"}

package/desktop/components/breadcrumbs/breadcrumbs.module.scss

@@ -25,17 +25,50 @@ $line-gutter: 12px;
   &:not(:last-child)::after {
     content: '/';
     display: block;
-    margin: 0 16px;
+    margin: 0 8px;
+  }
+}
+
+.breadcrumb-name {
+  position: relative;
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: 0;
+    right: 0;
+  }
+  &.with-siblings::before {
+    right: -2px;
+  }
+  &:not(.with-siblings)::before {
+    right: -8px;
   }
 }
 
 .toggle-icon {
-  fill: colors.$basic-gray87;
-  opacity: 0.3;
+  position: relative;
+  margin-left: 2px;
+  stroke: colors.$basic-gray87;
   display: block;
   cursor: pointer;
   &.close {
     transform: scaleY(-1);
+    stroke: colors.$basic-gray38;
+  }
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: 0;
+    right: -8px;
+  }
+  > svg {
+    display: block;
   }
 }
 

package/desktop/components/breadcrumbs/index.js

@@ -12,9 +12,12 @@ const link_1 = require("@sima-land/ui-nucleons/link");
 const lodash_1 = require("lodash");
 const bind_1 = __importDefault(require("classnames/bind"));
 const breadcrumbs_module_scss_1 = __importDefault(require("./breadcrumbs.module.scss"));
-const DownSquare_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/DownSquare"));
 const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
 const cx = bind_1.default.bind(breadcrumbs_module_scss_1.default);
+/** @inheritdoc */
+function DownSVG(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', ...props, children: (0, jsx_runtime_1.jsx)("path", { d: 'M4 6L8 10L12 6', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
+}
 /**
  * Список "хлебных крошек".
  * @param props Свойства.
@@ -37,15 +40,15 @@ const Breadcrumb = ({ data, onSiblingsPopupOpen, isSiblingActive, }) => {
             return (0, on_1.default)(window, 'mousedown', togglePopup.bind(null, false));
         }
     }, [withPopup]);
-    const selfName = ((0, jsx_runtime_1.jsx)(link_1.Link, { color: 'basic-gray87', href: data.url, pseudo: !data.url, children: data.name }));
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": 'breadcrumb', className: cx('breadcrumb'), children: [selfName, data.siblings && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DownSquare_1.default, { "data-testid": 'breadcrumb:siblings-opener', className: cx('toggle-icon'), onClick: () => {
+    const selfName = ((0, jsx_runtime_1.jsx)(link_1.Link, { color: 'basic-gray87', href: data.url, pseudo: !data.url, className: cx('breadcrumb-name', data.siblings && 'with-siblings'), children: data.name }));
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": 'breadcrumb', className: cx('breadcrumb'), children: [selfName, data.siblings && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": 'breadcrumb:siblings-opener', className: cx('toggle-icon'), onClick: () => {
                             togglePopup(true);
                             onSiblingsPopupOpen();
-                        } }), (0, jsx_runtime_1.jsx)(CSSTransition_1.default, { in: withPopup, timeout: 200, unmountOnExit: true, classNames: {
+                        }, children: (0, jsx_runtime_1.jsx)(DownSVG, {}) }), (0, jsx_runtime_1.jsx)(CSSTransition_1.default, { in: withPopup, timeout: 200, unmountOnExit: true, classNames: {
                             enter: cx('fade-enter'),
                             enterActive: cx('fade-enter-active'),
                             exit: cx('fade-exit'),
                             exitActive: cx('fade-exit-active'),
-                        }, children: (0, jsx_runtime_1.jsxs)(plate_1.Plate, { ref: popupRef, shadow: 'z3', rounds: 'm', className: cx('popup'), children: [(0, jsx_runtime_1.jsxs)("div", { className: cx('popup-header'), children: [selfName, (0, jsx_runtime_1.jsx)(DownSquare_1.default, { "data-testid": 'breadcrumb:siblings-closer', className: cx('toggle-icon', 'close'), onClick: () => togglePopup(false) })] }), (0, jsx_runtime_1.jsxs)("ul", { className: cx('siblings'), children: [data.siblings.state === 'fetching' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, lodash_1.times)(8).map(index => ((0, jsx_runtime_1.jsx)("div", { className: cx('sibling-placeholder') }, index))) })), data.siblings.state === 'ready' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (_a = data.siblings.data) === null || _a === void 0 ? void 0 : _a.map((sibling, index) => ((0, jsx_runtime_1.jsx)("li", { className: cx('sibling'), "data-testid": 'breadcrumb-sibling', children: isSiblingActive(sibling) ? ((0, jsx_runtime_1.jsx)("span", { className: cx('active'), children: sibling.name })) : ((0, jsx_runtime_1.jsx)(link_1.Link, { color: 'basic-gray87', className: cx('link'), href: sibling.url, children: sibling.name })) }, index))) }))] })] }) })] }))] }));
+                        }, children: (0, jsx_runtime_1.jsxs)(plate_1.Plate, { ref: popupRef, shadow: 'z3', rounds: 'm', className: cx('popup'), children: [(0, jsx_runtime_1.jsxs)("div", { className: cx('popup-header'), children: [selfName, (0, jsx_runtime_1.jsx)("span", { "data-testid": 'breadcrumb:siblings-closer', className: cx('toggle-icon', 'close'), onClick: () => togglePopup(false), children: (0, jsx_runtime_1.jsx)(DownSVG, {}) })] }), (0, jsx_runtime_1.jsxs)("ul", { className: cx('siblings'), children: [data.siblings.state === 'fetching' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, lodash_1.times)(8).map(index => ((0, jsx_runtime_1.jsx)("div", { className: cx('sibling-placeholder') }, index))) })), data.siblings.state === 'ready' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (_a = data.siblings.data) === null || _a === void 0 ? void 0 : _a.map((sibling, index) => ((0, jsx_runtime_1.jsx)("li", { className: cx('sibling'), "data-testid": 'breadcrumb-sibling', children: isSiblingActive(sibling) ? ((0, jsx_runtime_1.jsx)("span", { className: cx('active'), children: sibling.name })) : ((0, jsx_runtime_1.jsx)(link_1.Link, { color: 'basic-gray87', className: cx('link'), href: sibling.url, children: sibling.name })) }, index))) }))] })] }) })] }))] }));
 };
 //# sourceMappingURL=index.js.map

package/desktop/components/breadcrumbs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/desktop/components/breadcrumbs/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/desktop/components/breadcrumbs/index.tsx"],"names":[],"mappings":"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"}

package/desktop/components/gallery-modal/components/all-round-view.js

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const identity_1 = require("@sima-land/ui-nucleons/hooks/identity");
 const with_hint_1 = require("@sima-land/ui-nucleons/with-hint");
-const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
+const on_1 = require("@sima-land/ui-nucleons/helpers/on");
 const utils_1 = require("../utils");
 const bind_1 = __importDefault(require("classnames/bind"));
 const all_round_view_module_scss_1 = __importDefault(require("./all-round-view.module.scss"));
@@ -57,8 +57,13 @@ const AllRoundView = ({ photos, controls = true, state: stateProp = 'autoplay',
             return;
         }
         const offList = [
-            (0, on_1.default)(image, 'pointerdown', e => {
+            (0, on_1.on)(image, 'pointerdown', e => {
                 e.preventDefault();
+                e.stopPropagation();
+                // ВАЖНО: preventDefault предотвращает расфокусировку полей ввода - форсируем
+                if (document.activeElement instanceof HTMLElement) {
+                    document.activeElement.blur();
+                }
                 setState('default');
                 const imageLeft = image.getBoundingClientRect().left;
                 image.style.touchAction = 'none';
@@ -67,7 +72,7 @@ const AllRoundView = ({ photos, controls = true, state: stateProp = 'autoplay',
                     index: indexRef.current,
                 };
             }),
-            (0, on_1.default)(window, 'pointermove', e => {
+            (0, on_1.on)(window, 'pointermove', e => {
                 if (dragStartRef.current !== null) {
                     const imageWidth = image.clientWidth;
                     const imageLeft = image.getBoundingClientRect().left;
@@ -79,7 +84,7 @@ const AllRoundView = ({ photos, controls = true, state: stateProp = 'autoplay',
                     setIndex(nextIndex);
                 }
             }),
-            (0, on_1.default)(window, 'pointerup', () => {
+            (0, on_1.on)(window, 'pointerup', () => {
                 dragStartRef.current = null;
                 image.style.touchAction = '';
             }),