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

package/dist/esm/components/ChatStatusAnnouncement/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+export type TextItem = {
+    content: ReactNode;
+    shouldFocusOnHover?: boolean;
+};
+export type ChatStatusAnnouncementProps = {
+    icon?: ReactElement;
+    content: ReactNode | TextItem[];
+    actionLabel: string;
+    onActionClick?: () => void;
+    layoutType: LayoutType;
+    className?: string;
+};

package/dist/esm/components/ChatStatusAnnouncement/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/ChatStatusAnnouncement/utils/index.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { ChatStatusAnnouncementProps, TextItem } from '../types';
+export declare function isString(value: unknown): value is string;
+export declare function isReactNode(value: unknown): value is ReactNode;
+export declare const getContent: (textContent: ChatStatusAnnouncementProps["content"]) => TextItem[];

package/dist/esm/components/ChatStatusAnnouncement/utils/index.js

@@ -0,0 +1,38 @@
+import { isValidElement } from 'react';
+export function isString(value) {
+    return typeof value === 'string';
+}
+export function isReactNode(value) {
+    if (value === null ||
+        value === undefined ||
+        typeof value === 'boolean' ||
+        typeof value === 'string' ||
+        typeof value === 'number') {
+        return true;
+    }
+    if (isValidElement(value)) {
+        return true;
+    }
+    if (Array.isArray(value)) {
+        return value.every(item => isReactNode(item));
+    }
+    if (value && typeof value === 'object' && 'key' in value && 'props' in value && 'type' in value) {
+        return isValidElement(value);
+    }
+    return false;
+}
+export const getContent = (textContent) => {
+    if (isReactNode(textContent))
+        return [
+            {
+                content: textContent,
+            },
+        ];
+    if (textContent.length === 1)
+        return textContent;
+    const alertTextElement = textContent.find(item => item.shouldFocusOnHover);
+    if (!alertTextElement)
+        return textContent;
+    const totalTextItems = [...textContent, { content: alertTextElement.content }];
+    return totalTextItems;
+};

package/dist/esm/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/esm/components/IconGiga/IconGiga.js

@@ -0,0 +1,26 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { GIGA_ICON_GRADIENT_ID, GRADIENT_PARAMS, GRADIENT_STOPS, ICON_PATH } from './constants';
+export const IconGiga = 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 (_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: [_jsx("path", { d: ICON_PATH, fill: `url(#${GIGA_ICON_GRADIENT_ID})` }), _jsx("defs", { children: _jsx("radialGradient", Object.assign({ id: GIGA_ICON_GRADIENT_ID }, GRADIENT_PARAMS, { children: GRADIENT_STOPS.map(({ offset, stopColor }) => (_jsx("stop", { offset: offset, stopColor: stopColor }, offset))) })) })] })));
+    }
+    return (_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: _jsx("path", { d: ICON_PATH, fill: 'currentColor' }) })));
+});

package/dist/esm/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/esm/components/IconGiga/constants.js

@@ -0,0 +1,19 @@
+export 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 const GIGA_ICON_GRADIENT_ID = 'GIGA_ICON_GRADIENT_ID';
+export const 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' },
+];
+export const GRADIENT_PARAMS = {
+    cx: '0',
+    cy: '0',
+    r: '1',
+    gradientUnits: 'userSpaceOnUse',
+    gradientTransform: 'translate(14.8575 6.90447) scale(16.6554)',
+};

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

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

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

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

package/dist/esm/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/esm/components/RecommendPannel/RecommendPanel.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { Chip } from './helperComponents/Chip';
+import { ClaudiaChip } from './helperComponents/ClaudiaChip';
+import { CloseChip } from './helperComponents/CloseChip';
+import { DropdownChip } from './helperComponents/DropdownChip';
+import styles from './styles.module.css';
+import { CHIP_TYPE, SIZE } from './types';
+import { getVisibleChipsCount } from './utils/gitVisibleChipsCount';
+export function RecommendPanel({ chips, type = CHIP_TYPE.Default, size = SIZE.S, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }) {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [isCloseIconVisible, setCloseIconVisible] = useState(false);
+    const [chipWidths, setChipWidths] = useState([]);
+    const containerRef = useRef(null);
+    const allChipsRefs = useRef([]);
+    const isSmall = size === SIZE.S;
+    useEffect(() => {
+        if (layoutType === LAYOUT_TYPE.Mobile) {
+            setCloseIconVisible(true);
+            return;
+        }
+        setCloseIconVisible(false);
+    }, [layoutType]);
+    useEffect(() => {
+        const widths = allChipsRefs.current.map(ref => {
+            if (!ref)
+                return 0;
+            const rect = ref.getBoundingClientRect();
+            return rect.width;
+        });
+        setChipWidths(widths);
+    }, [chips, allChipsRefs]);
+    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 = 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 === LAYOUT_TYPE.Mobile)
+            return;
+        setCloseIconVisible(true);
+    };
+    const hideCloseIcon = () => {
+        if (layoutType === LAYOUT_TYPE.Mobile)
+            return;
+        setCloseIconVisible(false);
+    };
+    return (_jsxs("div", { className: styles.container, ref: containerRef, onMouseEnter: showCloseIcon, onMouseLeave: hideCloseIcon, children: [_jsx(ClaudiaChip, { layoutType: layoutType, onClick: onClaudiaClick, size: size, tooltip: tooltip }), visibleChips.map((chip, index) => (_jsx(Chip, { ref: chipElement => (allChipsRefs.current[index] = chipElement), label: chip.label, size: size, type: type, layoutType: layoutType, onClick: chip.onClick }, chip.id))), hasHiddenChips && (_jsx(DropdownChip, { layoutType: layoutType, type: type, size: size, label: `+${hiddenChips.length}`, dropdownItems: hiddenChips })), onCloseClick && onCloseChipLabel && (_jsx(CloseChip, { size: size, layoutType: layoutType, content: onCloseChipLabel, onClick: onCloseClick, isVisible: isCloseIconVisible }))] }));
+}

package/dist/esm/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/esm/components/RecommendPannel/helperComponents/Chip/Chip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { CHIP_TYPE, SIZE } from '../../types';
+import styles from './styles.module.css';
+export const Chip = forwardRef(({ layoutType, type, label, onClick, size, className }, ref) => {
+    const isDefaultType = type === CHIP_TYPE.Default;
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+    const isMobileChipSize = isMobile || size === SIZE.M;
+    return (_jsx("button", { ref: ref, "data-mobile": isMobileChipSize || undefined, className: cn(styles.chip, {
+            [styles.chipOutline]: !isDefaultType,
+            [styles.chipDefault]: isDefaultType,
+        }, className), onClick: onClick, children: _jsx(Typography.SansBodyS, { className: styles.text, children: _jsx(TruncateString, { variant: 'end', placement: 'top', text: label, maxLines: 1 }) }) }));
+});

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

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

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

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

package/dist/esm/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/esm/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/esm/components/RecommendPannel/helperComponents/ClaudiaChip/ClaudiaChip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { AgentClaudiaSVG } from '@sbercloud/uikit-product-icons';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { ButtonClaudia } from '../../../ButtonClaudia';
+import { SIZE } from '../../types';
+export const ClaudiaChip = forwardRef(({ onClick, size, tooltip, layoutType }, ref) => {
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile || size === SIZE.M;
+    const totalSize = isMobile ? SIZE.M : size;
+    if (!tooltip) {
+        return (_jsx(ButtonClaudia, { size: totalSize, "data-mobile": isMobile, ref: ref, onClick: onClick, icon: _jsx(AgentClaudiaSVG, { size: 24 }) }));
+    }
+    return (_jsx(Tooltip, { triggerRef: ref, tip: tooltip, children: _jsx(ButtonClaudia, { size: totalSize, "data-mobile": isMobile, onClick: onClick, icon: _jsx(AgentClaudiaSVG, { size: 24 }) }) }));
+});

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

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

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

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

package/dist/esm/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/esm/components/RecommendPannel/helperComponents/CloseChip/CloseChip.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { MoreInterfaceSVG } from '@sbercloud/uikit-product-icons';
+import { MobileDropdown } from '@sbercloud/uikit-product-mobile-dropdown';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { Typography } from '@snack-uikit/typography';
+import { useOutsideClick } from '../../hooks';
+import { SIZE } from '../../types';
+import styles from './styles.module.css';
+function DropdownContent({ content, onClick, closeDropdown, isMobileChipSize }) {
+    const onDropdownItemClick = () => {
+        closeDropdown();
+        onClick();
+    };
+    const TypographyComponent = isMobileChipSize ? Typography.SansBodyM : Typography.SansBodyS;
+    return (_jsx("div", { className: styles.dropdown, children: _jsx("button", { className: styles.dropdownItem, "data-mobile": isMobileChipSize || undefined, onClick: onDropdownItemClick, children: _jsx(TypographyComponent, { children: content }) }) }));
+}
+export function CloseChip({ size, content, onClick, isVisible, layoutType }) {
+    const [isDropdownOpen, setDropdownOpen] = useState(false);
+    const ref = useRef(null);
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+    const isMobileChipSize = isMobile || size === SIZE.M;
+    const openDropdown = () => setDropdownOpen(true);
+    const closeDropdown = () => setDropdownOpen(false);
+    useOutsideClick([ref], closeDropdown);
+    if (isMobile) {
+        return (_jsx(MobileDropdown, { open: isDropdownOpen, content: _jsx(DropdownContent, { isMobileChipSize: isMobileChipSize, closeDropdown: closeDropdown, content: content, onClick: onClick }), children: _jsx("button", { "data-hidden": !isVisible || undefined, "data-mobile": true, className: styles.closeChip, ref: ref, onClick: openDropdown, children: _jsx(MoreInterfaceSVG, { size: 24 }) }) }));
+    }
+    return (_jsx(Dropdown, { open: isDropdownOpen, triggerRef: ref, placement: 'bottom-end', content: _jsx(DropdownContent, { isMobileChipSize: isMobileChipSize, closeDropdown: closeDropdown, content: content, onClick: onClick }), children: _jsx("button", { "data-hidden": !isVisible || undefined, "data-mobile": isMobileChipSize || undefined, className: styles.closeChip, onClick: openDropdown, children: _jsx(MoreInterfaceSVG, { size: 24 }) }) }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/RecommendPannel/helperComponents/DropdownChip/DropdownChip.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { MobileDropdown } from '@sbercloud/uikit-product-mobile-dropdown';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { useOutsideClick } from '../../hooks';
+import { SIZE } from '../../types';
+import { Chip } from '../Chip';
+import styles from './styles.module.css';
+function DropdownContent({ size, dropdownItems, closeDropdown, isMobile }) {
+    const isMobileChipSize = isMobile || size === SIZE.M;
+    const TypographyComponent = isMobileChipSize ? Typography.SansBodyM : Typography.SansBodyS;
+    return (_jsx("div", { className: styles.dropdown, "data-mobile": isMobile || undefined, children: dropdownItems.map(item => (_jsx("button", { "data-mobile": isMobileChipSize || undefined, className: styles.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: _jsx(TypographyComponent, { children: _jsx(TruncateString, { variant: 'end', placement: 'top', text: item.label, maxLines: 1 }) }) }, item.id))) }));
+}
+export function DropdownChip({ size, layoutType, type, label, dropdownItems }) {
+    const [isDropdownOpen, setDropdownOpen] = useState(false);
+    const ref = useRef(null);
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+    const openDropdown = () => setDropdownOpen(true);
+    const closeDropdown = () => setDropdownOpen(false);
+    useOutsideClick([ref], closeDropdown);
+    if (isMobile) {
+        return (_jsx(MobileDropdown, { open: isDropdownOpen, content: _jsx(DropdownContent, { size: size, isMobile: isMobile, closeDropdown: closeDropdown, dropdownItems: dropdownItems }), children: _jsx(Chip, { ref: ref, isVisible: true, className: styles.dropdownChip, type: type, label: label, size: size, layoutType: layoutType, onClick: openDropdown }) }));
+    }
+    return (_jsx(Dropdown, { triggerRef: ref, open: isDropdownOpen, placement: 'bottom-end', content: _jsx(DropdownContent, { size: size, isMobile: isMobile, closeDropdown: closeDropdown, dropdownItems: dropdownItems }), children: _jsx(Chip, { isVisible: true, className: styles.dropdownChip, type: type, label: label, size: size, layoutType: layoutType, onClick: openDropdown }) }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/RecommendPannel/hooks/index.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+export const useOutsideClick = (ref, handler) => {
+    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]);
+};

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

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

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

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

package/dist/esm/components/RecommendPannel/styles.module.css

@@ -0,0 +1,4 @@
+.container{
+  display:flex;
+  gap:8px;
+}

package/dist/esm/components/RecommendPannel/types.d.ts

@@ -0,0 +1,16 @@
+import { ValueOf } from '@snack-uikit/utils';
+export declare const CHIP_TYPE: {
+    readonly Default: "default";
+    readonly Outline: "outline";
+};
+export type ChipType = ValueOf<typeof CHIP_TYPE>;
+export type ChipProps = {
+    id: string;
+    label: string;
+    onClick?: () => void;
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+};
+export type Size = ValueOf<typeof SIZE>;

package/dist/esm/components/RecommendPannel/types.js

@@ -0,0 +1,8 @@
+export const CHIP_TYPE = {
+    Default: 'default',
+    Outline: 'outline',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+};

package/dist/esm/components/RecommendPannel/utils/gitVisibleChipsCount.d.ts

@@ -0,0 +1,10 @@
+import { ChipProps } from '../types';
+type GetVisibleChipsCountArgs = {
+    containerWidth: number;
+    chipWidths: number[];
+    chips: ChipProps[];
+    isSmall: boolean;
+    isCloseChipExist: boolean;
+};
+export declare const getVisibleChipsCount: ({ containerWidth, chipWidths, chips, isSmall, isCloseChipExist, }: GetVisibleChipsCountArgs) => number;
+export {};