@cloud-ru/uikit-product-claudia 1.6.2 → 1.6.3

package/dist/cjs/components/IconGiga/IconGiga.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, SVGProps } from 'react';
+export type IconGigaProps = {
+    className?: string;
+    size?: number;
+    style?: CSSProperties;
+    withBranding?: boolean;
+} & SVGProps<SVGSVGElement>;
+export declare const IconGiga: import("react").ForwardRefExoticComponent<Omit<IconGigaProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/cjs/components/IconGiga/IconGiga.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconGiga = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("./constants");
+exports.IconGiga = (0, react_1.forwardRef)((_a, ref) => {
+    var { size = 24, className, style, withBranding } = _a, props = __rest(_a, ["size", "className", "style", "withBranding"]);
+    const customStyle = Object.assign({}, style);
+    if (typeof size === 'number') {
+        customStyle.width = `${size}px`;
+        customStyle.height = `${size}px`;
+    }
+    if (withBranding) {
+        return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ ref: ref, width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: customStyle, className: className }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: constants_1.ICON_PATH, fill: `url(#${constants_1.GIGA_ICON_GRADIENT_ID})` }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("radialGradient", Object.assign({ id: constants_1.GIGA_ICON_GRADIENT_ID }, constants_1.GRADIENT_PARAMS, { children: constants_1.GRADIENT_STOPS.map(({ offset, stopColor }) => ((0, jsx_runtime_1.jsx)("stop", { offset: offset, stopColor: stopColor }, offset))) })) })] })));
+    }
+    return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ ref: ref, width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: customStyle, className: className }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: constants_1.ICON_PATH, fill: 'currentColor' }) })));
+});

package/dist/cjs/components/IconGiga/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const ICON_PATH = "M12 3C7.02902 3 3 7.0297 3 12C3 16.9703 7.0297 21 12 21C16.9703 21 21 16.9703 21 12C21 7.0297 16.9703 3 12 3ZM5.54642 10.3679C5.4259 9.98549 5.40974 9.54784 5.49794 9.0698C5.65146 8.28473 6.04938 7.48418 6.64861 6.75499L6.65737 6.74422C8.04234 4.91352 10.4521 3.82075 13.1035 3.82075C13.6503 3.82075 14.1882 3.86721 14.7121 3.95878C12.7581 4.1399 10.7436 5.00038 8.71901 6.51934C8.63283 6.58398 8.57762 6.6816 8.56752 6.78866C8.55742 6.89571 8.59243 7.00277 8.66515 7.08289C9.32566 7.8114 9.98684 8.60791 10.7443 9.59026C10.8702 9.75387 11.1011 9.78821 11.2708 9.66769C12.7979 8.57358 14.1229 7.76292 15.4062 7.14147C15.349 7.79928 14.469 8.81866 13.5493 9.58959C12.0788 10.7934 10.308 12.0451 8.32176 12.2054L8.24434 12.2121C7.95213 12.2256 7.63769 12.1912 7.31114 12.1104C6.5254 11.9091 5.83257 11.223 5.54777 10.3686L5.54642 10.3679ZM11.9939 19.7827C10.1908 19.7827 8.53183 19.1673 7.21419 18.1358C7.466 18.1587 7.73128 18.1701 8.02012 18.1701C8.26184 18.1701 8.52039 18.162 8.79846 18.1466C10.4413 18.0267 12.1394 17.5372 13.7095 16.7326C15.2971 15.9186 16.6808 14.8178 17.713 13.5459C18.3822 12.6989 19.1841 11.3974 19.4117 9.81985C19.4258 9.83938 19.44 9.85958 19.4541 9.87978C19.6494 10.5605 19.7544 11.2796 19.7544 12.0236C19.7544 16.3091 16.2802 19.7833 11.9946 19.7833L11.9939 19.7827Z";
+export declare const GIGA_ICON_GRADIENT_ID = "GIGA_ICON_GRADIENT_ID";
+export declare const GRADIENT_STOPS: {
+    offset: string;
+    stopColor: string;
+}[];
+export declare const GRADIENT_PARAMS: {
+    cx: string;
+    cy: string;
+    r: string;
+    gradientUnits: string;
+    gradientTransform: string;
+};

package/dist/cjs/components/IconGiga/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GRADIENT_PARAMS = exports.GRADIENT_STOPS = exports.GIGA_ICON_GRADIENT_ID = exports.ICON_PATH = void 0;
+exports.ICON_PATH = 'M12 3C7.02902 3 3 7.0297 3 12C3 16.9703 7.0297 21 12 21C16.9703 21 21 16.9703 21 12C21 7.0297 16.9703 3 12 3ZM5.54642 10.3679C5.4259 9.98549 5.40974 9.54784 5.49794 9.0698C5.65146 8.28473 6.04938 7.48418 6.64861 6.75499L6.65737 6.74422C8.04234 4.91352 10.4521 3.82075 13.1035 3.82075C13.6503 3.82075 14.1882 3.86721 14.7121 3.95878C12.7581 4.1399 10.7436 5.00038 8.71901 6.51934C8.63283 6.58398 8.57762 6.6816 8.56752 6.78866C8.55742 6.89571 8.59243 7.00277 8.66515 7.08289C9.32566 7.8114 9.98684 8.60791 10.7443 9.59026C10.8702 9.75387 11.1011 9.78821 11.2708 9.66769C12.7979 8.57358 14.1229 7.76292 15.4062 7.14147C15.349 7.79928 14.469 8.81866 13.5493 9.58959C12.0788 10.7934 10.308 12.0451 8.32176 12.2054L8.24434 12.2121C7.95213 12.2256 7.63769 12.1912 7.31114 12.1104C6.5254 11.9091 5.83257 11.223 5.54777 10.3686L5.54642 10.3679ZM11.9939 19.7827C10.1908 19.7827 8.53183 19.1673 7.21419 18.1358C7.466 18.1587 7.73128 18.1701 8.02012 18.1701C8.26184 18.1701 8.52039 18.162 8.79846 18.1466C10.4413 18.0267 12.1394 17.5372 13.7095 16.7326C15.2971 15.9186 16.6808 14.8178 17.713 13.5459C18.3822 12.6989 19.1841 11.3974 19.4117 9.81985C19.4258 9.83938 19.44 9.85958 19.4541 9.87978C19.6494 10.5605 19.7544 11.2796 19.7544 12.0236C19.7544 16.3091 16.2802 19.7833 11.9946 19.7833L11.9939 19.7827Z';
+exports.GIGA_ICON_GRADIENT_ID = 'GIGA_ICON_GRADIENT_ID';
+exports.GRADIENT_STOPS = [
+    { offset: '0.08', stopColor: '#7CB5F2' },
+    { offset: '0.17', stopColor: '#78B9EC' },
+    { offset: '0.28', stopColor: '#70C6DD' },
+    { offset: '0.38', stopColor: '#64D8C7' },
+    { offset: '0.44', stopColor: '#5FD7C2' },
+    { offset: '0.51', stopColor: '#54D5B3' },
+    { offset: '0.58', stopColor: '#40D39C' },
+    { offset: '0.66', stopColor: '#26D07C' },
+];
+exports.GRADIENT_PARAMS = {
+    cx: '0',
+    cy: '0',
+    r: '1',
+    gradientUnits: 'userSpaceOnUse',
+    gradientTransform: 'translate(14.8575 6.90447) scale(16.6554)',
+};

package/dist/cjs/components/IconGiga/index.d.ts

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

package/dist/cjs/components/IconGiga/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./IconGiga"), exports);

package/dist/cjs/components/RecommendPannel/RecommendPanel.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { ChipProps, ChipType, Size } from './types';
+export type RecommendPanelProps = {
+    chips: ChipProps[];
+    size: Size;
+    type?: ChipType;
+    layoutType?: LayoutType;
+    onCloseClick?: () => void;
+    onCloseChipLabel?: ReactNode;
+    tooltip?: ReactNode;
+    onClaudiaClick?: () => void;
+};
+export declare function RecommendPanel({ chips, type, size, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }: RecommendPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RecommendPannel/RecommendPanel.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecommendPanel = RecommendPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const Chip_1 = require("./helperComponents/Chip");
+const ClaudiaChip_1 = require("./helperComponents/ClaudiaChip");
+const CloseChip_1 = require("./helperComponents/CloseChip");
+const DropdownChip_1 = require("./helperComponents/DropdownChip");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const types_1 = require("./types");
+const gitVisibleChipsCount_1 = require("./utils/gitVisibleChipsCount");
+function RecommendPanel({ chips, type = types_1.CHIP_TYPE.Default, size = types_1.SIZE.S, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }) {
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    const [isCloseIconVisible, setCloseIconVisible] = (0, react_1.useState)(false);
+    const [chipWidths, setChipWidths] = (0, react_1.useState)([]);
+    const containerRef = (0, react_1.useRef)(null);
+    const allChipsRefs = (0, react_1.useRef)([]);
+    const isSmall = size === types_1.SIZE.S;
+    (0, react_1.useEffect)(() => {
+        if (layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile) {
+            setCloseIconVisible(true);
+            return;
+        }
+        setCloseIconVisible(false);
+    }, [layoutType]);
+    (0, react_1.useEffect)(() => {
+        const widths = allChipsRefs.current.map(ref => {
+            if (!ref)
+                return 0;
+            const rect = ref.getBoundingClientRect();
+            return rect.width;
+        });
+        setChipWidths(widths);
+    }, [chips, allChipsRefs]);
+    (0, react_1.useEffect)(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                setContainerWidth(entry.contentRect.width);
+            }
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    const visibleChipsCount = (0, gitVisibleChipsCount_1.getVisibleChipsCount)({
+        containerWidth,
+        chips,
+        chipWidths,
+        isSmall,
+        isCloseChipExist: Boolean(onCloseClick) && Boolean(onCloseChipLabel),
+    });
+    const visibleChips = chips.slice(0, visibleChipsCount);
+    const hiddenChips = chips.slice(visibleChipsCount);
+    const hasHiddenChips = hiddenChips.length > 0;
+    const showCloseIcon = () => {
+        if (layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile)
+            return;
+        setCloseIconVisible(true);
+    };
+    const hideCloseIcon = () => {
+        if (layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile)
+            return;
+        setCloseIconVisible(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, ref: containerRef, onMouseEnter: showCloseIcon, onMouseLeave: hideCloseIcon, children: [(0, jsx_runtime_1.jsx)(ClaudiaChip_1.ClaudiaChip, { layoutType: layoutType, onClick: onClaudiaClick, size: size, tooltip: tooltip }), visibleChips.map((chip, index) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { ref: chipElement => (allChipsRefs.current[index] = chipElement), label: chip.label, size: size, type: type, layoutType: layoutType, onClick: chip.onClick }, chip.id))), hasHiddenChips && ((0, jsx_runtime_1.jsx)(DropdownChip_1.DropdownChip, { layoutType: layoutType, type: type, size: size, label: `+${hiddenChips.length}`, dropdownItems: hiddenChips })), onCloseClick && onCloseChipLabel && ((0, jsx_runtime_1.jsx)(CloseChip_1.CloseChip, { size: size, layoutType: layoutType, content: onCloseChipLabel, onClick: onCloseClick, isVisible: isCloseIconVisible }))] }));
+}

package/dist/cjs/components/RecommendPannel/helperComponents/Chip/Chip.d.ts

@@ -0,0 +1,14 @@
+import { MouseEventHandler } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { ChipType, Size } from '../../types';
+type ChipProps = {
+    type: ChipType;
+    label: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    className?: string;
+    isVisible?: boolean;
+    size: Size;
+    layoutType?: LayoutType;
+};
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/components/RecommendPannel/helperComponents/Chip/Chip.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const types_1 = require("../../types");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.Chip = (0, react_1.forwardRef)(({ layoutType, type, label, onClick, size, className }, ref) => {
+    const isDefaultType = type === types_1.CHIP_TYPE.Default;
+    const isMobile = layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile;
+    const isMobileChipSize = isMobile || size === types_1.SIZE.M;
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, "data-mobile": isMobileChipSize || undefined, className: (0, classnames_1.default)(styles_module_scss_1.default.chip, {
+            [styles_module_scss_1.default.chipOutline]: !isDefaultType,
+            [styles_module_scss_1.default.chipDefault]: isDefaultType,
+        }, className), onClick: onClick, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.text, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: 'end', placement: 'top', text: label, maxLines: 1 }) }) }));
+});

package/dist/cjs/components/RecommendPannel/helperComponents/Chip/index.d.ts

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

package/dist/cjs/components/RecommendPannel/helperComponents/Chip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Chip"), exports);

package/dist/cjs/components/RecommendPannel/helperComponents/Chip/styles.module.css

@@ -0,0 +1,39 @@
+.text{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.chip{
+  height:32px;
+  border-radius:4px;
+  padding:8px;
+  box-sizing:border-box;
+  cursor:pointer;
+  max-width:250px;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.chip[data-mobile]{
+  height:40px;
+}
+.chip:hover{
+  border:1px solid var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.chip:hover .text{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.chip:focus{
+  border:1px solid var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.chip:active{
+  border:1px solid var(--sys-neutral-decor-activated, #b6bac7);
+}
+
+.chipDefault{
+  border:1px solid var(--sys-neutral-background, #eeeff3);
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+
+.chipOutline{
+  border:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  background-color:transparent;
+}

package/dist/cjs/components/RecommendPannel/helperComponents/ClaudiaChip/ClaudiaChip.d.ts

@@ -0,0 +1,11 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { Size } from '../../types';
+type ClaudiaChipProps = {
+    onClick?: MouseEventHandler<HTMLElement>;
+    size: Size;
+    tooltip?: ReactNode;
+    layoutType?: LayoutType;
+};
+export declare const ClaudiaChip: import("react").ForwardRefExoticComponent<ClaudiaChipProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+export {};

package/dist/cjs/components/RecommendPannel/helperComponents/ClaudiaChip/ClaudiaChip.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClaudiaChip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const ButtonClaudia_1 = require("../../../ButtonClaudia");
+const types_1 = require("../../types");
+exports.ClaudiaChip = (0, react_1.forwardRef)(({ onClick, size, tooltip, layoutType }, ref) => {
+    const isMobile = layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile || size === types_1.SIZE.M;
+    const totalSize = isMobile ? types_1.SIZE.M : size;
+    if (!tooltip) {
+        return ((0, jsx_runtime_1.jsx)(ButtonClaudia_1.ButtonClaudia, { size: totalSize, "data-mobile": isMobile, ref: ref, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.AgentClaudiaSVG, { size: 24 }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { triggerRef: ref, tip: tooltip, children: (0, jsx_runtime_1.jsx)(ButtonClaudia_1.ButtonClaudia, { size: totalSize, "data-mobile": isMobile, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.AgentClaudiaSVG, { size: 24 }) }) }));
+});

package/dist/cjs/components/RecommendPannel/helperComponents/ClaudiaChip/index.d.ts

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

package/dist/cjs/components/RecommendPannel/helperComponents/ClaudiaChip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ClaudiaChip"), exports);

package/dist/cjs/components/RecommendPannel/helperComponents/CloseChip/CloseChip.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { Size } from '../../types';
+type CloseChipProps = {
+    content: ReactNode;
+    size: Size;
+    layoutType?: LayoutType;
+    onClick: () => void;
+    isVisible?: boolean;
+};
+export declare function CloseChip({ size, content, onClick, isVisible, layoutType }: CloseChipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/RecommendPannel/helperComponents/CloseChip/CloseChip.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseChip = CloseChip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const typography_1 = require("@snack-uikit/typography");
+const hooks_1 = require("../../hooks");
+const types_1 = require("../../types");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function DropdownContent({ content, onClick, closeDropdown, isMobileChipSize }) {
+    const onDropdownItemClick = () => {
+        closeDropdown();
+        onClick();
+    };
+    const TypographyComponent = isMobileChipSize ? typography_1.Typography.SansBodyM : typography_1.Typography.SansBodyS;
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.dropdown, children: (0, jsx_runtime_1.jsx)("button", { className: styles_module_scss_1.default.dropdownItem, "data-mobile": isMobileChipSize || undefined, onClick: onDropdownItemClick, children: (0, jsx_runtime_1.jsx)(TypographyComponent, { children: content }) }) }));
+}
+function CloseChip({ size, content, onClick, isVisible, layoutType }) {
+    const [isDropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const isMobile = layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile;
+    const isMobileChipSize = isMobile || size === types_1.SIZE.M;
+    const openDropdown = () => setDropdownOpen(true);
+    const closeDropdown = () => setDropdownOpen(false);
+    (0, hooks_1.useOutsideClick)([ref], closeDropdown);
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDropdown, { open: isDropdownOpen, content: (0, jsx_runtime_1.jsx)(DropdownContent, { isMobileChipSize: isMobileChipSize, closeDropdown: closeDropdown, content: content, onClick: onClick }), children: (0, jsx_runtime_1.jsx)("button", { "data-hidden": !isVisible || undefined, "data-mobile": true, className: styles_module_scss_1.default.closeChip, ref: ref, onClick: openDropdown, children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MoreInterfaceSVG, { size: 24 }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { open: isDropdownOpen, triggerRef: ref, placement: 'bottom-end', content: (0, jsx_runtime_1.jsx)(DropdownContent, { isMobileChipSize: isMobileChipSize, closeDropdown: closeDropdown, content: content, onClick: onClick }), children: (0, jsx_runtime_1.jsx)("button", { "data-hidden": !isVisible || undefined, "data-mobile": isMobileChipSize || undefined, className: styles_module_scss_1.default.closeChip, onClick: openDropdown, children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MoreInterfaceSVG, { size: 24 }) }) }));
+}

package/dist/cjs/components/RecommendPannel/helperComponents/CloseChip/index.d.ts

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

package/dist/cjs/components/RecommendPannel/helperComponents/CloseChip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CloseChip"), exports);

package/dist/cjs/components/RecommendPannel/helperComponents/CloseChip/styles.module.css

@@ -0,0 +1,64 @@
+.closeChip{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:32px;
+  height:32px;
+  transform:rotate(90deg);
+  cursor:pointer;
+  border:unset;
+  background-color:unset;
+}
+.closeChip[data-hidden]{
+  pointer-events:none;
+  opacity:0;
+}
+.closeChip[data-mobile]{
+  width:40px;
+  height:40px;
+}
+.closeChip svg{
+  fill:var(--sys-neutral-text-support, #6d707f);
+}
+.closeChip:hover svg{
+  fill:var(--sys-neutral-text-main, #41424e);
+}
+
+.dropdown{
+  display:flex;
+  flex-direction:column;
+  border-radius:4px;
+  padding:4px 0px;
+  box-sizing:border-box;
+}
+
+.dropdownItem{
+  width:100%;
+  height:32px;
+  display:flex;
+  justify-content:flex-start;
+  align-items:center;
+  cursor:pointer;
+  border:unset;
+  background-color:unset;
+  position:relative;
+  padding:0px 8px;
+}
+.dropdownItem[data-mobile]{
+  padding:0px 10px;
+  height:40px;
+}
+.dropdownItem:before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:transparent;
+}
+.dropdownItem:hover::before{
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+  opacity:0.08;
+}

package/dist/cjs/components/RecommendPannel/helperComponents/DropdownChip/DropdownChip.d.ts

@@ -0,0 +1,11 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { ChipProps, ChipType, Size } from '../../types';
+type DropdownChip = {
+    label: string;
+    type: ChipType;
+    size: Size;
+    layoutType?: LayoutType;
+    dropdownItems: ChipProps[];
+};
+export declare function DropdownChip({ size, layoutType, type, label, dropdownItems }: DropdownChip): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/RecommendPannel/helperComponents/DropdownChip/DropdownChip.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownChip = DropdownChip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const hooks_1 = require("../../hooks");
+const types_1 = require("../../types");
+const Chip_1 = require("../Chip");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function DropdownContent({ size, dropdownItems, closeDropdown, isMobile }) {
+    const isMobileChipSize = isMobile || size === types_1.SIZE.M;
+    const TypographyComponent = isMobileChipSize ? typography_1.Typography.SansBodyM : typography_1.Typography.SansBodyS;
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.dropdown, "data-mobile": isMobile || undefined, children: dropdownItems.map(item => ((0, jsx_runtime_1.jsx)("button", { "data-mobile": isMobileChipSize || undefined, className: styles_module_scss_1.default.dropdownItem, onClick: () => {
+                var _a;
+                closeDropdown();
+                (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+            }, children: (0, jsx_runtime_1.jsx)(TypographyComponent, { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: 'end', placement: 'top', text: item.label, maxLines: 1 }) }) }, item.id))) }));
+}
+function DropdownChip({ size, layoutType, type, label, dropdownItems }) {
+    const [isDropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const isMobile = layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile;
+    const openDropdown = () => setDropdownOpen(true);
+    const closeDropdown = () => setDropdownOpen(false);
+    (0, hooks_1.useOutsideClick)([ref], closeDropdown);
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDropdown, { open: isDropdownOpen, content: (0, jsx_runtime_1.jsx)(DropdownContent, { size: size, isMobile: isMobile, closeDropdown: closeDropdown, dropdownItems: dropdownItems }), children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { ref: ref, isVisible: true, className: styles_module_scss_1.default.dropdownChip, type: type, label: label, size: size, layoutType: layoutType, onClick: openDropdown }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { triggerRef: ref, open: isDropdownOpen, placement: 'bottom-end', content: (0, jsx_runtime_1.jsx)(DropdownContent, { size: size, isMobile: isMobile, closeDropdown: closeDropdown, dropdownItems: dropdownItems }), children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { isVisible: true, className: styles_module_scss_1.default.dropdownChip, type: type, label: label, size: size, layoutType: layoutType, onClick: openDropdown }) }));
+}

package/dist/cjs/components/RecommendPannel/helperComponents/DropdownChip/index.d.ts

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

package/dist/cjs/components/RecommendPannel/helperComponents/DropdownChip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DropdownChip"), exports);

package/dist/cjs/components/RecommendPannel/helperComponents/DropdownChip/styles.module.css

@@ -0,0 +1,49 @@
+.dropdown{
+  width:256px;
+  display:flex;
+  flex-direction:column;
+  border-radius:4px;
+  padding:4px 0px;
+  box-sizing:border-box;
+}
+.dropdown[data-mobile]{
+  width:100%;
+}
+
+.dropdownChip{
+  min-width:33px;
+}
+.dropdownChip[data-mobile]{
+  min-width:40px;
+}
+
+.dropdownItem{
+  width:100%;
+  height:32px;
+  display:flex;
+  justify-content:flex-start;
+  align-items:center;
+  cursor:pointer;
+  border:unset;
+  background-color:unset;
+  padding:4px 8px;
+  position:relative;
+}
+.dropdownItem[data-mobile]{
+  padding:8px 10px;
+  height:40px;
+}
+.dropdownItem:before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:transparent;
+}
+.dropdownItem:hover::before{
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+  opacity:0.08;
+}

package/dist/cjs/components/RecommendPannel/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useOutsideClick: (ref: RefObject<HTMLElement>[], handler: () => void) => void;

package/dist/cjs/components/RecommendPannel/hooks/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideClick = void 0;
+const react_1 = require("react");
+const useOutsideClick = (ref, handler) => {
+    (0, react_1.useEffect)(() => {
+        const handleClick = (event) => {
+            ref.forEach(ref => {
+                if (ref.current && event.target instanceof Element && !ref.current.contains(event.target)) {
+                    handler();
+                }
+            });
+        };
+        document.body.addEventListener('click', handleClick);
+        return () => document.body.removeEventListener('click', handleClick);
+    }, [ref, handler]);
+};
+exports.useOutsideClick = useOutsideClick;

package/dist/cjs/components/RecommendPannel/index.d.ts

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