@sima-land/moleculas 16.0.0-alpha.22 → 16.0.0-alpha.23

package/README.md

@@ -18,6 +18,6 @@ yarn add @sima-land/moleculas
 
 Компоненты библиотеки используют:
 
-- импорты css/scss-файлов как css-модулей (каждый такой файл промаркирован в виде `*.module.{css,scss}`)
+- импорты css/scss-файлов как css-модулей (каждый такой файл промаркирован в виде `*.m.{css,scss}`)
 
 Поэтому, для использования библиотеки необходимо сконфигурировать среду (сборщик или тестовый фреймворк) таким образом чтобы данные импорты работали корректно.

package/common/components/hover-slider/hover-slider-nav.d.ts

@@ -0,0 +1,7 @@
+import type { HoverSliderNavProps } from './types';
+/**
+ * Навигация карусели. Отображает общее количество и текущий элемент.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function HoverSliderNav({ current, total, className, ...restProps }: HoverSliderNavProps): import("react/jsx-runtime").JSX.Element;

package/common/components/hover-slider/hover-slider-nav.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoverSliderNav = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const hover_slider_nav_m_scss_1 = __importDefault(require("./hover-slider-nav.m.scss"));
+/**
+ * Навигация карусели. Отображает общее количество и текущий элемент.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HoverSliderNav({ current, total, className, ...restProps }) {
+    const indices = (0, react_1.useMemo)(() => [...Array(total).keys()], [total]);
+    return ((0, jsx_runtime_1.jsx)("div", { ...restProps, className: (0, classnames_1.default)(hover_slider_nav_m_scss_1.default.nav, className), children: indices.map(index => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(hover_slider_nav_m_scss_1.default['nav-item'], index === current && hover_slider_nav_m_scss_1.default['nav-item-active']) }, index))) }));
+}
+exports.HoverSliderNav = HoverSliderNav;
+//# sourceMappingURL=hover-slider-nav.js.map

package/common/components/hover-slider/hover-slider-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-slider-nav.js","sourceRoot":"","sources":["../../../../src/common/components/hover-slider/hover-slider-nav.tsx"],"names":[],"mappings":";;;;;;;AACA,iCAAgC;AAChC,4DAAoC;AACpC,wFAA+C;AAE/C;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAuB;IAC7F,MAAM,OAAO,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,mCAAS,SAAS,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAM,CAAC,GAAG,EAAE,SAAS,CAAC,YAC7D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpB,gCAEE,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,OAAO,IAAI,iCAAM,CAAC,iBAAiB,CAAC,CAAC,IADpF,KAAK,CAEV,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAbD,wCAaC"}

package/common/components/hover-slider/hover-slider-nav.m.scss

@@ -0,0 +1,22 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.nav {
+  padding: 2px;
+  display: flex;
+}
+
+.nav-item {
+  flex-grow: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: colors.$basic-gray38;
+  opacity: 0.32;
+}
+
+.nav-item + .nav-item {
+  margin-left: 4px;
+}
+
+.nav-item-active {
+  opacity: 1;
+}

package/common/components/hover-slider/hover-slider.d.ts

@@ -0,0 +1,9 @@
+import { HoverSliderProps, HoverSliderItemProps } from './types';
+/**
+ * Блок карусели с прокруткой при движении мыши над ним.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function HoverSlider({ rootRef: rootRefProp, withNav, children, beforeList, afterList, className, 'data-testid': testId, ...restProps }: HoverSliderProps): import("react/jsx-runtime").JSX.Element;
+/** @inheritdoc */
+export declare function HoverSliderItem({ children, className, ...restProps }: HoverSliderItemProps): import("react/jsx-runtime").JSX.Element;

package/common/components/hover-slider/hover-slider.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoverSliderItem = exports.HoverSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const hover_slider_nav_1 = require("./hover-slider-nav");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const helpers_1 = require("@sima-land/ui-nucleons/helpers");
+const classnames_1 = __importDefault(require("classnames"));
+const hover_slider_m_scss_1 = __importDefault(require("./hover-slider.m.scss"));
+/**
+ * Блок карусели с прокруткой при движении мыши над ним.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HoverSlider({ rootRef: rootRefProp, withNav = true, children, beforeList, afterList, className, 'data-testid': testId = 'hover-slider', ...restProps }) {
+    const rootRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const { count, contextValue } = (0, utils_1.useSlideCount)();
+    (0, react_1.useImperativeHandle)(rootRefProp, () => rootRef.current);
+    // ВАЖНО: подписываемся напрямую через ref так как React вызывает onMouseLeave не на mouseleave а на mouseout
+    (0, react_1.useEffect)(() => {
+        const list = listRef.current;
+        const root = rootRef.current;
+        if (!root || !list || count < 2) {
+            return;
+        }
+        /** @inheritdoc */
+        const onMouseMove = (event) => {
+            const rootRect = root.getBoundingClientRect();
+            const rootClientX = event.clientX - rootRect.left;
+            const imageIndex = Math.floor(rootClientX / (rootRect.width / count));
+            list.scrollLeft = rootRect.width * imageIndex;
+            setActiveIndex(imageIndex);
+        };
+        /** @inheritdoc */
+        const onMouseLeave = () => {
+            list.scrollLeft = 0;
+            setActiveIndex(0);
+        };
+        const off = [
+            //
+            (0, helpers_1.on)(root, 'mousemove', onMouseMove),
+            (0, helpers_1.on)(root, 'mouseleave', onMouseLeave),
+        ];
+        return () => {
+            off.forEach(fn => fn());
+        };
+    }, [count]);
+    (0, react_1.useEffect)(() => {
+        const list = listRef.current;
+        if (!list || count < 2) {
+            return;
+        }
+        /** @inheritdoc */
+        const onScroll = () => {
+            setActiveIndex(Math.round(list.scrollLeft / list.getBoundingClientRect().width));
+        };
+        const off = [
+            //
+            (0, helpers_1.on)(list, 'scroll', onScroll),
+        ];
+        return () => {
+            off.forEach(fn => fn());
+        };
+    }, [count]);
+    return ((0, jsx_runtime_1.jsx)(utils_1.HoverSliderContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)("div", { ...restProps, ref: rootRef, className: (0, classnames_1.default)(hover_slider_m_scss_1.default.root, className), "data-testid": testId, children: [beforeList, (0, jsx_runtime_1.jsx)("div", { ref: listRef, className: hover_slider_m_scss_1.default.list, children: children }), afterList, withNav && count > 1 && ((0, jsx_runtime_1.jsx)(hover_slider_nav_1.HoverSliderNav, { current: activeIndex, total: count, className: hover_slider_m_scss_1.default.nav }))] }) }));
+}
+exports.HoverSlider = HoverSlider;
+/** @inheritdoc */
+function HoverSliderItem({ children, className, ...restProps }) {
+    const { itemMounted, itemUnmounted } = (0, react_1.useContext)(utils_1.HoverSliderContext);
+    const itemId = (0, react_1.useMemo)(() => Math.random().toString(16).slice(2), []);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        itemMounted(itemId);
+        return () => {
+            itemUnmounted(itemId);
+        };
+    }, [itemId, itemMounted, itemUnmounted]);
+    return ((0, jsx_runtime_1.jsx)("div", { ...restProps, className: (0, classnames_1.default)(hover_slider_m_scss_1.default['list-item'], className), children: children }));
+}
+exports.HoverSliderItem = HoverSliderItem;
+//# sourceMappingURL=hover-slider.js.map

package/common/components/hover-slider/hover-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-slider.js","sourceRoot":"","sources":["../../../../src/common/components/hover-slider/hover-slider.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA8F;AAE9F,mCAA4D;AAC5D,yDAAoD;AACpD,wDAAyE;AACzE,4DAAoD;AACpD,4DAAoC;AACpC,gFAA2C;AAE3C;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAC1B,OAAO,EAAE,WAAW,EACpB,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,EAAE,MAAM,GAAG,cAAc,EACtC,GAAG,SAAS,EACK;IACjB,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAC1D,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAA,qBAAa,GAAE,CAAC;IAEhD,IAAA,2BAAmB,EACjB,WAAW,EACX,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CACtB,CAAC;IAEF,6GAA6G;IAC7G,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAE7B,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QAED,kBAAkB;QAClB,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC;YAClD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;YAEtE,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,KAAK,GAAG,UAAU,CAAC;YAC9C,cAAc,CAAC,UAAU,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEF,kBAAkB;QAClB,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;YACpB,cAAc,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC,CAAC;QAEF,MAAM,GAAG,GAAG;YACV,EAAE;YACF,IAAA,YAAE,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,CAAC;YAClC,IAAA,YAAE,EAAC,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC;SACrC,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAE7B,IAAI,CAAC,IAAI,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,kBAAkB;QAClB,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QACnF,CAAC,CAAC;QAEF,MAAM,GAAG,GAAG;YACV,EAAE;YACF,IAAA,YAAE,EAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC;SAC7B,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,uBAAC,0BAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC9C,oCACM,SAAS,EACb,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAA,oBAAU,EAAC,6BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,iBAChC,MAAM,aAElB,UAAU,EAEX,gCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,6BAAM,CAAC,IAAI,YACtC,QAAQ,GACL,EAEL,SAAS,EAET,OAAO,IAAI,KAAK,GAAG,CAAC,IAAI,CACvB,uBAAC,iCAAc,IAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,6BAAM,CAAC,GAAG,GAAI,CAC9E,IACG,GACsB,CAC/B,CAAC;AACJ,CAAC;AApGD,kCAoGC;AAED,kBAAkB;AAClB,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAwB;IACzF,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,IAAA,kBAAU,EAAC,0BAAkB,CAAC,CAAC;IACtE,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEtE,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,WAAW,CAAC,MAAM,CAAC,CAAC;QAEpB,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,MAAM,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAEzC,OAAO,CACL,mCAAS,SAAS,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,6BAAM,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,YACtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAjBD,0CAiBC"}

package/common/components/hover-slider/hover-slider.m.scss

@@ -0,0 +1,36 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.root {
+  position: relative;
+  width: var(--hover-slider-width, 320px);
+  height: var(--hover-slider-height, 320px);
+}
+
+.list {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  overflow-x: auto;
+  display: flex;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior: none;
+  @include utils.hidden-scrollbars;
+}
+
+.list-item {
+  scroll-snap-align: center;
+  display: block;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  flex-grow: 1;
+}
+
+.nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  pointer-events: none;
+}

package/common/components/hover-slider/index.d.ts

@@ -0,0 +1,3 @@
+export type { HoverSliderStyle, HoverSliderProps, HoverSliderItemProps } from './types';
+export { HoverSlider, HoverSliderItem } from './hover-slider';
+export { HoverSliderNav } from './hover-slider-nav';

package/common/components/hover-slider/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoverSliderNav = exports.HoverSliderItem = exports.HoverSlider = void 0;
+var hover_slider_1 = require("./hover-slider");
+Object.defineProperty(exports, "HoverSlider", { enumerable: true, get: function () { return hover_slider_1.HoverSlider; } });
+Object.defineProperty(exports, "HoverSliderItem", { enumerable: true, get: function () { return hover_slider_1.HoverSliderItem; } });
+var hover_slider_nav_1 = require("./hover-slider-nav");
+Object.defineProperty(exports, "HoverSliderNav", { enumerable: true, get: function () { return hover_slider_nav_1.HoverSliderNav; } });
+//# sourceMappingURL=index.js.map

package/common/components/hover-slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/hover-slider/index.ts"],"names":[],"mappings":";;;AACA,+CAA8D;AAArD,2GAAA,WAAW,OAAA;AAAE,+GAAA,eAAe,OAAA;AACrC,uDAAoD;AAA3C,kHAAA,cAAc,OAAA"}

package/common/components/hover-slider/types.d.ts

@@ -0,0 +1,28 @@
+import type { WithTestId } from '@sima-land/ui-nucleons/types';
+import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface HoverSliderStyle extends CSSProperties {
+    '--hover-slider-width'?: string;
+    '--hover-slider-height'?: string;
+}
+export interface HoverSliderProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Нужно ли показывать навигационные элементы. */
+    withNav?: boolean;
+    /** Контент перед элементом списка. */
+    beforeList?: ReactNode;
+    /** Контент после элемента списка. */
+    afterList?: ReactNode;
+    /** Стили. */
+    style?: HoverSliderStyle;
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+}
+export interface HoverSliderItemProps extends HTMLAttributes<HTMLDivElement> {
+}
+export interface HoverSliderNavProps extends HTMLAttributes<HTMLDivElement> {
+    current: number;
+    total: number;
+}
+export interface HoverSliderContextValue {
+    itemMounted: (itemId: string) => void;
+    itemUnmounted: (itemId: string) => void;
+}

package/common/components/hover-slider/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/hover-slider/types.ts"],"names":[],"mappings":""}

package/common/components/hover-slider/utils.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HoverSliderContextValue } from './types';
+export declare const HoverSliderContext: import("react").Context<HoverSliderContextValue>;
+/** @inheritdoc */
+export declare function useSlideCount(): {
+    count: number;
+    contextValue: HoverSliderContextValue;
+};

package/common/components/hover-slider/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSlideCount = exports.HoverSliderContext = void 0;
+const react_1 = require("react");
+exports.HoverSliderContext = (0, react_1.createContext)({
+    itemMounted: () => { },
+    itemUnmounted: () => { },
+});
+/** @inheritdoc */
+function useSlideCount() {
+    const [slideIds, setSlideIds] = (0, react_1.useState)(() => []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        itemMounted: itemId => {
+            setSlideIds(list => (list.includes(itemId) ? list : [...list, itemId]));
+        },
+        itemUnmounted: itemId => {
+            setSlideIds(list => (list.includes(itemId) ? list.filter(item => item !== itemId) : list));
+        },
+    }), []);
+    return { count: slideIds.length, contextValue };
+}
+exports.useSlideCount = useSlideCount;
+//# sourceMappingURL=utils.js.map

package/common/components/hover-slider/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/common/components/hover-slider/utils.ts"],"names":[],"mappings":";;;AAAA,iCAAyD;AAG5C,QAAA,kBAAkB,GAAG,IAAA,qBAAa,EAA0B;IACvE,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;CACxB,CAAC,CAAC;AAEH,kBAAkB;AAClB,SAAgB,aAAa;IAC3B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAW,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;IAE7D,MAAM,YAAY,GAAG,IAAA,eAAO,EAC1B,GAAG,EAAE,CAAC,CAAC;QACL,WAAW,EAAE,MAAM,CAAC,EAAE;YACpB,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;QAC1E,CAAC;QACD,aAAa,EAAE,MAAM,CAAC,EAAE;YACtB,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7F,CAAC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC;AAClD,CAAC;AAhBD,sCAgBC"}

package/common/components/product-image/index.d.ts

@@ -0,0 +1,3 @@
+export type { ProductImageProps, ProductImageStyle } from './types';
+export { ProductImage } from './product-image';
+export { ProductImageContext } from './utils';

package/common/components/product-image/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductImageContext = exports.ProductImage = void 0;
+var product_image_1 = require("./product-image");
+Object.defineProperty(exports, "ProductImage", { enumerable: true, get: function () { return product_image_1.ProductImage; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "ProductImageContext", { enumerable: true, get: function () { return utils_1.ProductImageContext; } });
+//# sourceMappingURL=index.js.map

package/common/components/product-image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/product-image/index.ts"],"names":[],"mappings":";;;AACA,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,iCAA8C;AAArC,4GAAA,mBAAmB,OAAA"}

package/common/components/product-image/product-image.d.ts

@@ -0,0 +1,10 @@
+import { type ProductImageProps } from './types';
+/**
+ * Изображение товара.
+ * Добавляет наложение поверх по гайдам.
+ * Размывает изображения для взрослых при указании атрибута adult.
+ * Выводит заглушку для не загрузившихся изображений.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ProductImage({ src, alt, style, className, rootRef, imageRef, imageProps, adult: adultFromProps, adultContent, stubContent, 'data-testid': testId, ...restProps }: ProductImageProps): import("react/jsx-runtime").JSX.Element;

package/common/components/product-image/product-image.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("./utils");
+const react_1 = require("react");
+const hooks_1 = require("../../../common/hooks");
+const img_stub_1 = require("../img-stub");
+const EighteenPlus_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Stroked/EighteenPlus"));
+const classnames_1 = __importDefault(require("classnames"));
+const product_image_m_scss_1 = __importDefault(require("./product-image.m.scss"));
+const defaultAdultContent = (0, jsx_runtime_1.jsx)(EighteenPlus_1.default, { className: product_image_m_scss_1.default['adult-icon'] });
+const defaultStubContent = (0, jsx_runtime_1.jsx)(img_stub_1.ImgStub, { className: product_image_m_scss_1.default['broken-stub'] });
+/**
+ * Изображение товара.
+ * Добавляет наложение поверх по гайдам.
+ * Размывает изображения для взрослых при указании атрибута adult.
+ * Выводит заглушку для не загрузившихся изображений.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ProductImage({ src, alt = '', style, className, rootRef, imageRef, imageProps, adult: adultFromProps, adultContent = defaultAdultContent, stubContent = defaultStubContent, 'data-testid': testId = 'product-image', ...restProps }) {
+    var _a, _b;
+    const { adult: adultFromContext } = (0, react_1.useContext)(utils_1.ProductImageContext);
+    const { failed, handleError } = (0, hooks_1.useImageStub)(src, imageProps === null || imageProps === void 0 ? void 0 : imageProps.onError);
+    const adult = adultFromProps !== null && adultFromProps !== void 0 ? adultFromProps : adultFromContext;
+    return ((0, jsx_runtime_1.jsxs)("div", { ...restProps, ref: rootRef, style: style, className: (0, classnames_1.default)(product_image_m_scss_1.default.root, !failed && product_image_m_scss_1.default.overlay, className), "data-testid": testId, children: [(0, jsx_runtime_1.jsx)("img", { ...imageProps, ref: imageRef, src: (_a = imageProps === null || imageProps === void 0 ? void 0 : imageProps.src) !== null && _a !== void 0 ? _a : src, alt: (_b = imageProps === null || imageProps === void 0 ? void 0 : imageProps.alt) !== null && _b !== void 0 ? _b : alt, onError: handleError, className: (0, classnames_1.default)(product_image_m_scss_1.default.image, adult && product_image_m_scss_1.default.adult, imageProps === null || imageProps === void 0 ? void 0 : imageProps.className) }), adult && adultContent, failed && stubContent] }));
+}
+exports.ProductImage = ProductImage;
+//# sourceMappingURL=product-image.js.map

package/common/components/product-image/product-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-image.js","sourceRoot":"","sources":["../../../../src/common/components/product-image/product-image.tsx"],"names":[],"mappings":";;;;;;;AACA,mCAA8C;AAC9C,iCAAmC;AACnC,iDAAqD;AACrD,0CAAsC;AACtC,yGAAoF;AACpF,4DAAoC;AACpC,kFAA4C;AAE5C,MAAM,mBAAmB,GAAG,uBAAC,sBAAe,IAAC,SAAS,EAAE,8BAAM,CAAC,YAAY,CAAC,GAAI,CAAC;AAEjF,MAAM,kBAAkB,GAAG,uBAAC,kBAAO,IAAC,SAAS,EAAE,8BAAM,CAAC,aAAa,CAAC,GAAI,CAAC;AAEzE;;;;;;;GAOG;AACH,SAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,GAAG,GAAG,EAAE,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,EACV,KAAK,EAAE,cAAc,EACrB,YAAY,GAAG,mBAAmB,EAClC,WAAW,GAAG,kBAAkB,EAChC,aAAa,EAAE,MAAM,GAAG,eAAe,EACvC,GAAG,SAAS,EACM;;IAClB,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,2BAAmB,CAAC,CAAC;IACpE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,oBAAY,EAAC,GAAG,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,gBAAgB,CAAC;IAEjD,OAAO,CACL,oCACM,SAAS,EACb,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAU,EAAC,8BAAM,CAAC,IAAI,EAAE,CAAC,MAAM,IAAI,8BAAM,CAAC,OAAO,EAAE,SAAS,CAAC,iBAC3D,MAAM,aAEnB,mCACM,UAAU,EACd,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,GAAG,mCAAI,GAAG,EAC3B,GAAG,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,GAAG,mCAAI,GAAG,EAC3B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,IAAA,oBAAU,EAAC,8BAAM,CAAC,KAAK,EAAE,KAAK,IAAI,8BAAM,CAAC,KAAK,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,CAAC,GACjF,EAED,KAAK,IAAI,YAAY,EAErB,MAAM,IAAI,WAAW,IAClB,CACP,CAAC;AACJ,CAAC;AAzCD,oCAyCC"}

package/common/components/product-image/product-image.m.scss

@@ -0,0 +1,62 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  position: relative;
+  width: var(--product-image-width, 200px);
+  height: var(--product-image-height, 200px);
+  overflow: hidden;
+}
+
+.overlay::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--product-image-overlay-color, rgba(0, 0, 0, 0.04));
+
+  // ВАЖНО: чтобы можно было сохранять фото с помощью контекстного меню
+  pointer-events: none;
+}
+
+.image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  max-width: 100%;
+  object-fit: var(--product-image-object-fit, contain);
+}
+
+.adult {
+  opacity: 0.2;
+
+  // ВАЖНО: чтобы нельзя было сохранить с помощью ПКМ
+  pointer-events: none;
+  user-select: none;
+
+  // @todo на больших изображениях blur(24px) не будет скрывать изображение также как на маленьких
+  filter: blur(24px);
+}
+
+.broken-stub {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.adult-icon {
+  display: block;
+  position: absolute;
+  width: 40%;
+  height: 40%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  fill: colors.$basic-gray38;
+}

package/common/components/product-image/types.d.ts

@@ -0,0 +1,30 @@
+import { WithTestId } from '@sima-land/ui-nucleons/types';
+import type { CSSProperties, HTMLAttributes, ImgHTMLAttributes, ReactNode, Ref } from 'react';
+export interface ProductImageStyle extends CSSProperties {
+    '--product-image-width'?: string;
+    '--product-image-height'?: string;
+    '--product-image-object-fit'?: string;
+    '--product-image-overlay-color'?: string;
+}
+export interface ProductImageProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Источник изображения. */
+    src?: string;
+    /** Альтернативный текст. */
+    alt?: string;
+    /** Нужно ли размыть изображение и добавить маркировку 18+. */
+    adult?: boolean;
+    /** Стили корневого элемента. */
+    style?: ProductImageStyle;
+    /** Класс корневого элемента. */
+    className?: string;
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Реф элемента img. */
+    imageRef?: Ref<HTMLImageElement>;
+    /** Прочие свойства элемента img. */
+    imageProps?: ImgHTMLAttributes<HTMLImageElement>;
+    /** Доп.контент, который будет выведен при adult=true. */
+    adultContent?: ReactNode;
+    /** Доп.контент, который будет выведен при ошибке загрузки. */
+    stubContent?: ReactNode;
+}

package/common/components/product-image/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/common/components/product-image/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/product-image/types.ts"],"names":[],"mappings":""}

package/common/components/product-image/utils.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ProductImageProps } from './types';
+export declare const ProductImageContext: import("react").Context<Pick<ProductImageProps, "adult">>;

package/common/components/product-image/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductImageContext = void 0;
+const react_1 = require("react");
+exports.ProductImageContext = (0, react_1.createContext)({});
+//# sourceMappingURL=utils.js.map

package/common/components/product-image/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/common/components/product-image/utils.ts"],"names":[],"mappings":";;;AAAA,iCAAsC;AAGzB,QAAA,mBAAmB,GAAG,IAAA,qBAAa,EAAmC,EAAE,CAAC,CAAC"}

package/common/components/product-info/index.d.ts

@@ -1 +1,4 @@
-export { type ProductInfoProps, ProductInfo, Parts } from './product-info';
+export type { ProductInfoProps, ProductInfoRestriction } from './types';
+export { ProductInfo } from './product-info';
+export { ProductInfoContext } from './utils';
+export { Parts } from './parts';

package/common/components/product-info/index.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Parts = exports.ProductInfo = void 0;
+exports.Parts = exports.ProductInfoContext = exports.ProductInfo = void 0;
 var product_info_1 = require("./product-info");
 Object.defineProperty(exports, "ProductInfo", { enumerable: true, get: function () { return product_info_1.ProductInfo; } });
-Object.defineProperty(exports, "Parts", { enumerable: true, get: function () { return product_info_1.Parts; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "ProductInfoContext", { enumerable: true, get: function () { return utils_1.ProductInfoContext; } });
+var parts_1 = require("./parts");
+Object.defineProperty(exports, "Parts", { enumerable: true, get: function () { return parts_1.Parts; } });
 //# sourceMappingURL=index.js.map

package/common/components/product-info/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/product-info/index.ts"],"names":[],"mappings":";;;AAAA,+CAA2E;AAA3C,2GAAA,WAAW,OAAA;AAAE,qGAAA,KAAK,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/product-info/index.ts"],"names":[],"mappings":";;;AACA,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,iCAA6C;AAApC,2GAAA,kBAAkB,OAAA;AAC3B,iCAAgC;AAAvB,8FAAA,KAAK,OAAA"}

package/common/components/product-info/parts/adult-confirm-button.d.ts

@@ -0,0 +1,7 @@
+import { type LinkProps } from '@sima-land/ui-nucleons/link';
+/**
+ * Кнопка "подтвердить".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function AdultConfirmButton({ children, pseudo, color, className, 'data-testid': testId, ...restProps }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/common/components/product-info/parts/adult-confirm-button.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdultConfirmButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = require("@sima-land/ui-nucleons/link");
+const classnames_1 = __importDefault(require("classnames"));
+const parts_m_scss_1 = __importDefault(require("./parts.m.scss"));
+/**
+ * Кнопка "подтвердить".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function AdultConfirmButton({ children = 'Подтвердить', pseudo = true, color = 'basic-blue', className, 'data-testid': testId = 'product-info:adult-confirm-button', ...restProps }) {
+    return ((0, jsx_runtime_1.jsx)(link_1.Link, { ...restProps, pseudo: pseudo, color: color, className: (0, classnames_1.default)(parts_m_scss_1.default['text-button'], className), "data-testid": testId, children: children }));
+}
+exports.AdultConfirmButton = AdultConfirmButton;
+//# sourceMappingURL=adult-confirm-button.js.map

package/common/components/product-info/parts/adult-confirm-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adult-confirm-button.js","sourceRoot":"","sources":["../../../../../src/common/components/product-info/parts/adult-confirm-button.tsx"],"names":[],"mappings":";;;;;;;AAAA,sDAAmE;AACnE,4DAAoC;AACpC,kEAAoC;AAEpC;;;;GAIG;AACH,SAAgB,kBAAkB,CAAC,EACjC,QAAQ,GAAG,aAAa,EACxB,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,YAAY,EACpB,SAAS,EACT,aAAa,EAAE,MAAM,GAAG,mCAAmC,EAC3D,GAAG,SAAS,EACF;IACV,OAAO,CACL,uBAAC,WAAI,OACC,SAAS,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAU,EAAC,sBAAM,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,iBAC1C,MAAM,YAElB,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAnBD,gDAmBC"}

package/common/components/product-info/parts/badges.d.ts

@@ -0,0 +1,7 @@
+import { type BadgeListProps } from '../../badge-list';
+/**
+ * Слот для вывода шильдиков.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ProductInfoBadges({ children, className, ...restProps }: BadgeListProps): import("react/jsx-runtime").JSX.Element;

package/common/components/product-info/parts/badges.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductInfoBadges = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const badge_list_1 = require("../../badge-list");
+const classnames_1 = __importDefault(require("classnames"));
+const badges_m_scss_1 = __importDefault(require("./badges.m.scss"));
+/**
+ * Слот для вывода шильдиков.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ProductInfoBadges({ children, className, ...restProps }) {
+    return ((0, jsx_runtime_1.jsx)(badge_list_1.BadgeList, { className: (0, classnames_1.default)(badges_m_scss_1.default.badges, className), ...restProps, children: children }));
+}
+exports.ProductInfoBadges = ProductInfoBadges;
+//# sourceMappingURL=badges.js.map

package/common/components/product-info/parts/badges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badges.js","sourceRoot":"","sources":["../../../../../src/common/components/product-info/parts/badges.tsx"],"names":[],"mappings":";;;;;;;AAAA,iDAAkE;AAClE,4DAAoC;AACpC,oEAAqC;AAErC;;;;GAIG;AACH,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAkB;IACrF,OAAO,CACL,uBAAC,sBAAS,IAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,uBAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAM,SAAS,YACtE,QAAQ,GACC,CACb,CAAC;AACJ,CAAC;AAND,8CAMC"}

package/common/components/product-info/parts/badges.m.scss

@@ -0,0 +1,3 @@
+.badges {
+  margin-bottom: 8px;
+}

package/common/components/product-info/parts/cart-control.d.ts

@@ -0,0 +1,7 @@
+import { ProductInfoCartControlProps } from '../types';
+/**
+ * Блок управления корзиной.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ProductInfoCartControl({ children, stepText, markupText, loading, }: ProductInfoCartControlProps): import("react/jsx-runtime").JSX.Element;

package/common/components/product-info/parts/cart-control.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductInfoCartControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cart_control_m_scss_1 = __importDefault(require("./cart-control.m.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * Блок управления корзиной.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ProductInfoCartControl({ children, stepText, markupText, loading, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(cart_control_m_scss_1.default.root, loading && cart_control_m_scss_1.default.loading), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(cart_control_m_scss_1.default.main), children: !loading && children }), (loading || stepText) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(cart_control_m_scss_1.default.aside), "data-testid": 'product-info:cart-step', children: !loading && stepText })), !loading && markupText && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(cart_control_m_scss_1.default.footer), "data-testid": 'product-info:cart-info', children: markupText }))] }));
+}
+exports.ProductInfoCartControl = ProductInfoCartControl;
+//# sourceMappingURL=cart-control.js.map