@hh.ru/magritte-ui-avatar 8.2.25 → 8.2.27

package/Avatar.d.ts

@@ -1,3 +1,3 @@
 import type { PolymorphicComponentWithRef } from '@hh.ru/magritte-types';
-import type { AvatarProps } from '@hh.ru/magritte-ui-avatar/types';
+import type { AvatarProps } from './types';
 export declare const Avatar: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<PolymorphicComponentWithRef<AvatarProps, "div">, AvatarProps>;

package/Avatar.js

@@ -1,10 +1,10 @@
 import './index.css';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
 import classnames from 'classnames';
 import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
-import { A as AvatarSkeleton, s as styles } from './Skeleton-Cu3ALT1-.js';
+import { A as AvatarSkeleton, s as styles } from './Skeleton-DYEbW_CE.js';
 import { AVATAR_TYPOGRAPHY_MAP, formatLetters } from './utils.js';
 import { IconDynamic } from '@hh.ru/magritte-ui-icon';
 import { PlayFilledSize24, PlayFilledSize16 } from '@hh.ru/magritte-ui-icon/variants/icon';
@@ -12,163 +12,249 @@ import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
 import { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';
 
 const VIDEO_SIZE_MAP = {
-    208: {
-        Icon: PlayFilledSize24,
-        padding: 8,
-    },
-    120: {
-        Icon: PlayFilledSize16,
-        padding: 8,
-    },
-    96: {
-        Icon: PlayFilledSize16,
-        padding: 8,
-    },
-    80: {
-        Icon: PlayFilledSize16,
-        padding: 6,
-    },
+  208: {
+    Icon: PlayFilledSize24,
+    padding: 8
+  },
+  120: {
+    Icon: PlayFilledSize16,
+    padding: 8
+  },
+  96: {
+    Icon: PlayFilledSize16,
+    padding: 8
+  },
+  80: {
+    Icon: PlayFilledSize16,
+    padding: 6
+  }
 };
 const ACTION_ICON_SIZE_MAP = {
-    208: {
-        padding: 8,
-    },
-    120: {
-        padding: 6,
-    },
-    96: {
-        padding: 6,
-    },
-    80: {
-        padding: 6,
-    },
-    48: {
-        padding: 4,
-    },
-    40: {
-        padding: 4,
-    },
+  208: {
+    padding: 8
+  },
+  120: {
+    padding: 6
+  },
+  96: {
+    padding: 6
+  },
+  80: {
+    padding: 6
+  },
+  48: {
+    padding: 4
+  },
+  40: {
+    padding: 4
+  }
 };
-const AvatarForwardRefRenderFunc = ({ mode, size = 24, 'aria-label': ariaLabel, shapeCircle = false, online = false, styleOnline = 'positive', disabled = false, letters, style, icon, image, video: _video, actionIconGlyph: ActionIcon, placeholder = 'undefined', Element = 'div', containerDataQa = '', ...avatarProps }, ref) => {
-    const [imageState, setImageState] = useState('loading');
-    const imageRef = useRef(null);
-    const forwardedRef = ref;
-    const elementRef = useRef(null);
-    const avatarRef = useMultipleRefs(forwardedRef, elementRef);
-    const withVideo = _video && !shapeCircle && size in VIDEO_SIZE_MAP;
-    const withActionIcon = !!ActionIcon && !online && size in ACTION_ICON_SIZE_MAP;
-    const isActive = !!avatarProps.onClick || Element === 'a';
-    let video = null;
-    let actionIcon = null;
-    const forceDisabled = useDisabled();
-    const isComponentDisabled = disabled || forceDisabled;
-    const isModeLetters = mode === 'letters';
-    const isModeIcon = mode === 'icon';
-    const isModePlaceholder = mode === 'placeholder' || (mode === 'image' && imageState === 'error');
-    const isModeImage = mode === 'image' && imageState !== 'error';
-    const additionalAttributes = {};
-    if (Element === 'button') {
-        additionalAttributes.type = 'button';
-    }
-    if (isComponentDisabled && Element === 'a') {
-        additionalAttributes.tabIndex = -1;
-    }
-    additionalAttributes.ref = avatarRef;
-    if (withVideo) {
-        const { Icon, padding } = VIDEO_SIZE_MAP[size];
-        const colorProps = {
-            initialColor: 'constant',
-            backgroundStyle: 'overlay',
-            ...(isActive &&
-                {
-                    highlightedColor: 'constant',
-                    pressedColor: 'constant',
-                    hoverBackgroundStyle: 'overlay',
-                    pressedBackgroundStyle: 'overlay',
-                }),
-        };
-        video = (jsx("span", { className: styles.video, "data-qa": "avatar-video", children: jsx(Icon, { ...colorProps, padding: padding, borderRadius: 'halfHeight' }) }));
+const AvatarForwardRefRenderFunc = ({
+  mode,
+  size = 24,
+  "aria-label": ariaLabel,
+  shapeCircle = false,
+  online = false,
+  styleOnline = "positive",
+  disabled = false,
+  letters,
+  style,
+  icon,
+  image,
+  video: _video,
+  actionIconGlyph: ActionIcon,
+  placeholder = "undefined",
+  Element = "div",
+  containerDataQa = "",
+  ...avatarProps
+}, ref) => {
+  const [imageState, setImageState] = useState("loading");
+  const imageRef = useRef(null);
+  const forwardedRef = ref;
+  const elementRef = useRef(null);
+  const avatarRef = useMultipleRefs(forwardedRef, elementRef);
+  const withVideo = _video && !shapeCircle && size in VIDEO_SIZE_MAP;
+  const withActionIcon = !!ActionIcon && !online && size in ACTION_ICON_SIZE_MAP;
+  const isActive = !!avatarProps.onClick || Element === "a";
+  let video = null;
+  let actionIcon = null;
+  const forceDisabled = useDisabled();
+  const isComponentDisabled = disabled || forceDisabled;
+  const isModeLetters = mode === "letters";
+  const isModeIcon = mode === "icon";
+  const isModePlaceholder = mode === "placeholder" || mode === "image" && imageState === "error";
+  const isModeImage = mode === "image" && imageState !== "error";
+  const additionalAttributes = {};
+  if (Element === "button") {
+    additionalAttributes.type = "button";
+  }
+  if (isComponentDisabled && Element === "a") {
+    additionalAttributes.tabIndex = -1;
+  }
+  additionalAttributes.ref = avatarRef;
+  if (withVideo) {
+    const { Icon, padding } = VIDEO_SIZE_MAP[size];
+    const colorProps = {
+      initialColor: "constant",
+      backgroundStyle: "overlay",
+      ...isActive && {
+        highlightedColor: "constant",
+        pressedColor: "constant",
+        hoverBackgroundStyle: "overlay",
+        pressedBackgroundStyle: "overlay"
+      }
+    };
+    video = /* @__PURE__ */ jsx("span", { className: styles.video, "data-qa": "avatar-video", children: /* @__PURE__ */ jsx(Icon, { ...colorProps, padding, borderRadius: "halfHeight" }) });
+  }
+  if (withActionIcon) {
+    const { padding } = ACTION_ICON_SIZE_MAP[size];
+    const colorProps = {
+      initialColor: "constant",
+      backgroundStyle: "accent",
+      ...isActive && {
+        highlightedColor: "constant",
+        pressedColor: "constant",
+        hoverBackgroundStyle: "accent",
+        pressedBackgroundStyle: "accent"
+      }
+    };
+    actionIcon = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: styles[`avatar-focus-border-${size}`] }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classnames(styles.actionIcon, {
+            [styles[`action-icon-square-size-${size}`]]: !shapeCircle,
+            [styles[`action-icon-circle-size-${size}`]]: !!shapeCircle
+          }),
+          "data-qa": "avatar-action",
+          onClick: () => elementRef.current?.click(),
+          children: /* @__PURE__ */ jsx(ActionIcon, { ...colorProps, padding, borderRadius: "halfHeight" })
+        }
+      )
+    ] });
+  }
+  const classNames = {
+    [styles.avatar]: true,
+    [styles.avatarShapeCircle]: shapeCircle,
+    [styles.avatarModeImage]: mode === "image" && imageState === "loaded",
+    [styles.avatarModeLetters]: isModeLetters,
+    [styles.avatarModeIcon]: isModeIcon,
+    [styles.avatarModePlaceholder]: isModePlaceholder,
+    [styles[`avatar_size-${size}`]]: !!size,
+    [styles[`avatar_with-online-badge-${size}`]]: online,
+    [styles[`avatar_with-action-icon`]]: withActionIcon,
+    [styles[`avatar_with-action-icon-${size}`]]: withActionIcon
+  };
+  if ((isModeLetters || isModeIcon) && style) {
+    classNames[styles[`avatar_style-${style}`]] = !!style;
+  }
+  useLayoutEffect(() => {
+    const imageElement = imageRef.current;
+    if (!imageElement || !image) {
+      return void 0;
     }
-    if (withActionIcon) {
-        const { padding } = ACTION_ICON_SIZE_MAP[size];
-        const colorProps = {
-            initialColor: 'constant',
-            backgroundStyle: 'accent',
-            ...(isActive &&
-                {
-                    highlightedColor: 'constant',
-                    pressedColor: 'constant',
-                    hoverBackgroundStyle: 'accent',
-                    pressedBackgroundStyle: 'accent',
-                }),
+    const loadingStartTime = Date.now();
+    const handleOnLoad = () => {
+      if (Date.now() - loadingStartTime > 300) {
+        const handleAnimationEnd = () => {
+          imageElement.removeEventListener("animationend", handleAnimationEnd);
+          setImageState("loaded");
         };
-        actionIcon = (jsxs(Fragment, { children: [jsx("span", { className: styles[`avatar-focus-border-${size}`] }), jsx("span", { className: classnames(styles.actionIcon, {
-                        [styles[`action-icon-square-size-${size}`]]: !shapeCircle,
-                        [styles[`action-icon-circle-size-${size}`]]: !!shapeCircle,
-                    }), "data-qa": "avatar-action", onClick: () => elementRef.current?.click(), children: jsx(ActionIcon, { ...colorProps, padding: padding, borderRadius: 'halfHeight' }) })] }));
-    }
-    const classNames = {
-        [styles.avatar]: true,
-        [styles.avatarShapeCircle]: shapeCircle,
-        [styles.avatarModeImage]: mode === 'image' && imageState === 'loaded',
-        [styles.avatarModeLetters]: isModeLetters,
-        [styles.avatarModeIcon]: isModeIcon,
-        [styles.avatarModePlaceholder]: isModePlaceholder,
-        [styles[`avatar_size-${size}`]]: !!size,
-        [styles[`avatar_with-online-badge-${size}`]]: online,
-        [styles[`avatar_with-action-icon`]]: withActionIcon,
-        [styles[`avatar_with-action-icon-${size}`]]: withActionIcon,
+        imageElement.addEventListener("animationend", handleAnimationEnd);
+        setImageState("loading-animation");
+      } else {
+        setImageState("loaded");
+      }
     };
-    if ((isModeLetters || isModeIcon) && style) {
-        classNames[styles[`avatar_style-${style}`]] = !!style;
-    }
-    useLayoutEffect(() => {
-        const imageElement = imageRef.current;
-        if (!imageElement || !image) {
-            return void 0;
-        }
-        const loadingStartTime = Date.now();
-        const handleOnLoad = () => {
-            // если картинка грузилась дольше 300мс, анимируем прозрачность, иначе показываем без анимации
-            if (Date.now() - loadingStartTime > 300) {
-                const handleAnimationEnd = () => {
-                    imageElement.removeEventListener('animationend', handleAnimationEnd);
-                    setImageState('loaded');
-                };
-                imageElement.addEventListener('animationend', handleAnimationEnd);
-                setImageState('loading-animation');
-            }
-            else {
-                setImageState('loaded');
+    const handleOnError = () => setImageState("error");
+    imageRef.current.addEventListener("load", handleOnLoad);
+    imageRef.current.addEventListener("error", handleOnError);
+    imageRef.current.src = image;
+    setImageState("loading");
+    return () => {
+      imageElement.removeEventListener("load", handleOnLoad);
+      imageElement.removeEventListener("error", handleOnError);
+    };
+  }, [image]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classnames(styles.avatarContainer, {
+        [styles.avatarContainerWithAddons]: online || withVideo || !!ActionIcon,
+        [styles.avatarContainerDisabled]: isComponentDisabled,
+        [styles[`avatar-container_size-${size}`]]: online || withVideo || !!ActionIcon,
+        [styles.active]: isActive
+      }),
+      ...containerDataQa ? { "data-qa": containerDataQa } : {},
+      children: /* @__PURE__ */ jsx(IconDynamic, { children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs(
+          Element,
+          {
+            ...additionalAttributes,
+            ...avatarProps,
+            className: classnames(classNames),
+            disabled: Element === "button" ? isComponentDisabled : false,
+            "aria-disabled": isComponentDisabled,
+            "aria-label": ariaLabel,
+            children: [
+              isModeLetters && /* @__PURE__ */ jsx(BaseText, { style: "primary", Element: "span", typography: AVATAR_TYPOGRAPHY_MAP[size], children: formatLetters(letters || "") }),
+              isModeIcon && icon,
+              isModePlaceholder && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classnames({
+                    [styles.female]: placeholder === "female",
+                    [styles.male]: placeholder === "male",
+                    [styles.city]: placeholder === "city",
+                    [styles.undefined]: placeholder === "undefined"
+                  }),
+                  "data-qa": `placeholder-${placeholder}`,
+                  style: { width: size, height: size }
+                }
+              ),
+              isModeImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+                (imageState === "loading" || imageState === "loading-animation") && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: classnames(styles.avatarImageLoading, {
+                      [styles[`avatar_size-${size}`]]: size,
+                      [styles.avatarShapeCircle]: shapeCircle
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    ref: imageRef,
+                    alt: ariaLabel,
+                    className: classnames(styles.avatarImage, {
+                      [styles.avatarImageHidden]: imageState === "loading",
+                      [styles.avatarImageAnimation]: imageState === "loading-animation"
+                    })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        online && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: styles[`avatar-focus-border-${size}`] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classnames(
+                styles[`avatar-online-badge-${size}`],
+                styles[`avatar-online-badge_style_${styleOnline}`]
+              )
             }
-        };
-        const handleOnError = () => setImageState('error');
-        imageRef.current.addEventListener('load', handleOnLoad);
-        imageRef.current.addEventListener('error', handleOnError);
-        imageRef.current.src = image;
-        setImageState('loading');
-        return () => {
-            imageElement.removeEventListener('load', handleOnLoad);
-            imageElement.removeEventListener('error', handleOnError);
-        };
-    }, [image]);
-    return (jsx("div", { className: classnames(styles.avatarContainer, {
-            [styles.avatarContainerWithAddons]: online || withVideo || !!ActionIcon,
-            [styles.avatarContainerDisabled]: isComponentDisabled,
-            [styles[`avatar-container_size-${size}`]]: online || withVideo || !!ActionIcon,
-            [styles.active]: isActive,
-        }), ...(containerDataQa ? { 'data-qa': containerDataQa } : {}), children: jsx(IconDynamic, { children: jsxs("div", { children: [jsxs(Element, { ...additionalAttributes, ...avatarProps, className: classnames(classNames), disabled: Element === 'button' ? isComponentDisabled : false, "aria-disabled": isComponentDisabled, "aria-label": ariaLabel, children: [isModeLetters && (jsx(BaseText, { style: "primary", Element: "span", typography: AVATAR_TYPOGRAPHY_MAP[size], children: formatLetters(letters || '') })), isModeIcon && icon, isModePlaceholder && (jsx("span", { className: classnames({
-                                    [styles.female]: placeholder === 'female',
-                                    [styles.male]: placeholder === 'male',
-                                    [styles.city]: placeholder === 'city',
-                                    [styles.undefined]: placeholder === 'undefined',
-                                }), "data-qa": `placeholder-${placeholder}`, style: { width: size, height: size } })), isModeImage && (jsxs(Fragment, { children: [(imageState === 'loading' || imageState === 'loading-animation') && (jsx("span", { className: classnames(styles.avatarImageLoading, {
-                                            [styles[`avatar_size-${size}`]]: size,
-                                            [styles.avatarShapeCircle]: shapeCircle,
-                                        }) })), jsx("img", { ref: imageRef, alt: ariaLabel, className: classnames(styles.avatarImage, {
-                                            [styles.avatarImageHidden]: imageState === 'loading',
-                                            [styles.avatarImageAnimation]: imageState === 'loading-animation',
-                                        }) })] }))] }), online && (jsxs(Fragment, { children: [jsx("div", { className: styles[`avatar-focus-border-${size}`] }), jsx("div", { className: classnames(styles[`avatar-online-badge-${size}`], styles[`avatar-online-badge_style_${styleOnline}`]) })] })), actionIcon, video] }) }) }));
+          )
+        ] }),
+        actionIcon,
+        video
+      ] }) })
+    }
+  );
 };
 const AvatarComponent = forwardRef(AvatarForwardRefRenderFunc);
 const Avatar = enrichWithSkeleton(AvatarComponent, AvatarSkeleton);

package/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["src/Avatar.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { AvatarSkeleton } from '@hh.ru/magritte-ui-avatar/Skeleton';\nimport type { AvatarProps } from '@hh.ru/magritte-ui-avatar/types';\nimport { AVATAR_TYPOGRAPHY_MAP, formatLetters } from '@hh.ru/magritte-ui-avatar/utils';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { PlayFilledSize16, PlayFilledSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';\n\nimport styles from './avatar.less';\n\nconst VIDEO_SIZE_MAP = {\n    208: {\n        Icon: PlayFilledSize24,\n        padding: 8,\n    },\n    120: {\n        Icon: PlayFilledSize16,\n        padding: 8,\n    },\n    96: {\n        Icon: PlayFilledSize16,\n        padding: 8,\n    },\n    80: {\n        Icon: PlayFilledSize16,\n        padding: 6,\n    },\n} as const;\n\nconst ACTION_ICON_SIZE_MAP = {\n    208: {\n        padding: 8,\n    },\n    120: {\n        padding: 6,\n    },\n    96: {\n        padding: 6,\n    },\n    80: {\n        padding: 6,\n    },\n    48: {\n        padding: 4,\n    },\n    40: {\n        padding: 4,\n    },\n} as const;\n\nconst AvatarForwardRefRenderFunc: PolymorphicForwardRefRenderFunc<AvatarProps, 'div'> = (\n    {\n        mode,\n        size = 24,\n        'aria-label': ariaLabel,\n        shapeCircle = false,\n        online = false,\n        styleOnline = 'positive',\n        disabled = false,\n        letters,\n        style,\n        icon,\n        image,\n        video: _video,\n        actionIconGlyph: ActionIcon,\n        placeholder = 'undefined',\n        Element = 'div',\n        containerDataQa = '',\n        ...avatarProps\n    },\n    ref\n) => {\n    const [imageState, setImageState] = useState<'loading' | 'loading-animation' | 'loaded' | 'error'>('loading');\n    const imageRef = useRef<HTMLImageElement>(null);\n    const forwardedRef = ref as ForwardedRef<HTMLElement>;\n    const elementRef = useRef<HTMLElement>(null);\n    const avatarRef = useMultipleRefs(forwardedRef, elementRef);\n    const withVideo = _video && !shapeCircle && size in VIDEO_SIZE_MAP;\n    const withActionIcon = !!ActionIcon && !online && size in ACTION_ICON_SIZE_MAP;\n    const isActive = !!avatarProps.onClick || Element === 'a';\n    let video = null;\n    let actionIcon = null;\n\n    const forceDisabled = useDisabled();\n\n    const isComponentDisabled = disabled || forceDisabled;\n\n    const isModeLetters = mode === 'letters';\n    const isModeIcon = mode === 'icon';\n    const isModePlaceholder = mode === 'placeholder' || (mode === 'image' && imageState === 'error');\n    const isModeImage = mode === 'image' && imageState !== 'error';\n\n    const additionalAttributes: Record<string, unknown> = {};\n\n    if (Element === 'button') {\n        additionalAttributes.type = 'button';\n    }\n\n    if (isComponentDisabled && Element === 'a') {\n        additionalAttributes.tabIndex = -1;\n    }\n\n    additionalAttributes.ref = avatarRef;\n\n    if (withVideo) {\n        const { Icon, padding } = VIDEO_SIZE_MAP[size as keyof typeof VIDEO_SIZE_MAP];\n        const colorProps = {\n            initialColor: 'constant',\n            backgroundStyle: 'overlay',\n            ...(isActive &&\n                ({\n                    highlightedColor: 'constant',\n                    pressedColor: 'constant',\n                    hoverBackgroundStyle: 'overlay',\n                    pressedBackgroundStyle: 'overlay',\n                } as const)),\n        } as const;\n        video = (\n            <span className={styles.video} data-qa=\"avatar-video\">\n                <Icon {...colorProps} padding={padding} borderRadius={'halfHeight'} />\n            </span>\n        );\n    }\n\n    if (withActionIcon) {\n        const { padding } = ACTION_ICON_SIZE_MAP[size as keyof typeof ACTION_ICON_SIZE_MAP];\n        const colorProps = {\n            initialColor: 'constant',\n            backgroundStyle: 'accent',\n            ...(isActive &&\n                ({\n                    highlightedColor: 'constant',\n                    pressedColor: 'constant',\n                    hoverBackgroundStyle: 'accent',\n                    pressedBackgroundStyle: 'accent',\n                } as const)),\n        } as const;\n        actionIcon = (\n            <>\n                <span className={styles[`avatar-focus-border-${size}`]} />\n                <span\n                    className={classnames(styles.actionIcon, {\n                        [styles[`action-icon-square-size-${size}`]]: !shapeCircle,\n                        [styles[`action-icon-circle-size-${size}`]]: !!shapeCircle,\n                    })}\n                    data-qa=\"avatar-action\"\n                    onClick={() => elementRef.current?.click()}\n                >\n                    <ActionIcon {...colorProps} padding={padding} borderRadius={'halfHeight'} />\n                </span>\n            </>\n        );\n    }\n\n    const classNames = {\n        [styles.avatar]: true,\n        [styles.avatarShapeCircle]: shapeCircle,\n        [styles.avatarModeImage]: mode === 'image' && imageState === 'loaded',\n        [styles.avatarModeLetters]: isModeLetters,\n        [styles.avatarModeIcon]: isModeIcon,\n        [styles.avatarModePlaceholder]: isModePlaceholder,\n        [styles[`avatar_size-${size}`]]: !!size,\n        [styles[`avatar_with-online-badge-${size}`]]: online,\n        [styles[`avatar_with-action-icon`]]: withActionIcon,\n        [styles[`avatar_with-action-icon-${size}`]]: withActionIcon,\n    };\n\n    if ((isModeLetters || isModeIcon) && style) {\n        classNames[styles[`avatar_style-${style}`]] = !!style;\n    }\n\n    useLayoutEffect(() => {\n        const imageElement = imageRef.current;\n        if (!imageElement || !image) {\n            return void 0;\n        }\n\n        const loadingStartTime = Date.now();\n\n        const handleOnLoad = () => {\n            // если картинка грузилась дольше 300мс, анимируем прозрачность, иначе показываем без анимации\n            if (Date.now() - loadingStartTime > 300) {\n                const handleAnimationEnd = () => {\n                    imageElement.removeEventListener('animationend', handleAnimationEnd);\n                    setImageState('loaded');\n                };\n                imageElement.addEventListener('animationend', handleAnimationEnd);\n                setImageState('loading-animation');\n            } else {\n                setImageState('loaded');\n            }\n        };\n\n        const handleOnError = () => setImageState('error');\n\n        imageRef.current.addEventListener('load', handleOnLoad);\n        imageRef.current.addEventListener('error', handleOnError);\n        imageRef.current.src = image;\n        setImageState('loading');\n\n        return () => {\n            imageElement.removeEventListener('load', handleOnLoad);\n            imageElement.removeEventListener('error', handleOnError);\n        };\n    }, [image]);\n\n    return (\n        <div\n            className={classnames(styles.avatarContainer, {\n                [styles.avatarContainerWithAddons]: online || withVideo || !!ActionIcon,\n                [styles.avatarContainerDisabled]: isComponentDisabled,\n                [styles[`avatar-container_size-${size}`]]: online || withVideo || !!ActionIcon,\n                [styles.active]: isActive,\n            })}\n            {...(containerDataQa ? { 'data-qa': containerDataQa } : {})}\n        >\n            <IconDynamic>\n                <div>\n                    <Element\n                        {...additionalAttributes}\n                        {...avatarProps}\n                        className={classnames(classNames)}\n                        disabled={Element === 'button' ? isComponentDisabled : false}\n                        aria-disabled={isComponentDisabled}\n                        aria-label={ariaLabel}\n                    >\n                        {isModeLetters && (\n                            <BaseText style=\"primary\" Element=\"span\" typography={AVATAR_TYPOGRAPHY_MAP[size]}>\n                                {formatLetters(letters || '')}\n                            </BaseText>\n                        )}\n                        {isModeIcon && icon}\n                        {isModePlaceholder && (\n                            <span\n                                className={classnames({\n                                    [styles.female]: placeholder === 'female',\n                                    [styles.male]: placeholder === 'male',\n                                    [styles.city]: placeholder === 'city',\n                                    [styles.undefined]: placeholder === 'undefined',\n                                })}\n                                data-qa={`placeholder-${placeholder}`}\n                                style={{ width: size, height: size }}\n                            />\n                        )}\n                        {isModeImage && (\n                            <>\n                                {(imageState === 'loading' || imageState === 'loading-animation') && (\n                                    <span\n                                        className={classnames(styles.avatarImageLoading, {\n                                            [styles[`avatar_size-${size}`]]: size,\n                                            [styles.avatarShapeCircle]: shapeCircle,\n                                        })}\n                                    />\n                                )}\n                                <img\n                                    ref={imageRef}\n                                    alt={ariaLabel}\n                                    className={classnames(styles.avatarImage, {\n                                        [styles.avatarImageHidden]: imageState === 'loading',\n                                        [styles.avatarImageAnimation]: imageState === 'loading-animation',\n                                    })}\n                                />\n                            </>\n                        )}\n                    </Element>\n                    {online && (\n                        <>\n                            <div className={styles[`avatar-focus-border-${size}`]} />\n                            <div\n                                className={classnames(\n                                    styles[`avatar-online-badge-${size}`],\n                                    styles[`avatar-online-badge_style_${styleOnline}`]\n                                )}\n                            />\n                        </>\n                    )}\n                    {actionIcon}\n                    {video}\n                </div>\n            </IconDynamic>\n        </div>\n    );\n};\n\nconst AvatarComponent = forwardRef(AvatarForwardRefRenderFunc) as PolymorphicComponentWithRef<AvatarProps, 'div'>;\n\nexport const Avatar = enrichWithSkeleton(AvatarComponent, AvatarSkeleton);\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["src/Avatar.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { AvatarSkeleton } from '@hh.ru/magritte-ui-avatar/Skeleton';\nimport type { AvatarProps } from '@hh.ru/magritte-ui-avatar/types';\nimport { AVATAR_TYPOGRAPHY_MAP, formatLetters } from '@hh.ru/magritte-ui-avatar/utils';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { PlayFilledSize16, PlayFilledSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';\n\nimport styles from './avatar.less';\n\nconst VIDEO_SIZE_MAP = {\n    208: {\n        Icon: PlayFilledSize24,\n        padding: 8,\n    },\n    120: {\n        Icon: PlayFilledSize16,\n        padding: 8,\n    },\n    96: {\n        Icon: PlayFilledSize16,\n        padding: 8,\n    },\n    80: {\n        Icon: PlayFilledSize16,\n        padding: 6,\n    },\n} as const;\n\nconst ACTION_ICON_SIZE_MAP = {\n    208: {\n        padding: 8,\n    },\n    120: {\n        padding: 6,\n    },\n    96: {\n        padding: 6,\n    },\n    80: {\n        padding: 6,\n    },\n    48: {\n        padding: 4,\n    },\n    40: {\n        padding: 4,\n    },\n} as const;\n\nconst AvatarForwardRefRenderFunc: PolymorphicForwardRefRenderFunc<AvatarProps, 'div'> = (\n    {\n        mode,\n        size = 24,\n        'aria-label': ariaLabel,\n        shapeCircle = false,\n        online = false,\n        styleOnline = 'positive',\n        disabled = false,\n        letters,\n        style,\n        icon,\n        image,\n        video: _video,\n        actionIconGlyph: ActionIcon,\n        placeholder = 'undefined',\n        Element = 'div',\n        containerDataQa = '',\n        ...avatarProps\n    },\n    ref\n) => {\n    const [imageState, setImageState] = useState<'loading' | 'loading-animation' | 'loaded' | 'error'>('loading');\n    const imageRef = useRef<HTMLImageElement>(null);\n    const forwardedRef = ref as ForwardedRef<HTMLElement>;\n    const elementRef = useRef<HTMLElement>(null);\n    const avatarRef = useMultipleRefs(forwardedRef, elementRef);\n    const withVideo = _video && !shapeCircle && size in VIDEO_SIZE_MAP;\n    const withActionIcon = !!ActionIcon && !online && size in ACTION_ICON_SIZE_MAP;\n    const isActive = !!avatarProps.onClick || Element === 'a';\n    let video = null;\n    let actionIcon = null;\n\n    const forceDisabled = useDisabled();\n\n    const isComponentDisabled = disabled || forceDisabled;\n\n    const isModeLetters = mode === 'letters';\n    const isModeIcon = mode === 'icon';\n    const isModePlaceholder = mode === 'placeholder' || (mode === 'image' && imageState === 'error');\n    const isModeImage = mode === 'image' && imageState !== 'error';\n\n    const additionalAttributes: Record<string, unknown> = {};\n\n    if (Element === 'button') {\n        additionalAttributes.type = 'button';\n    }\n\n    if (isComponentDisabled && Element === 'a') {\n        additionalAttributes.tabIndex = -1;\n    }\n\n    additionalAttributes.ref = avatarRef;\n\n    if (withVideo) {\n        const { Icon, padding } = VIDEO_SIZE_MAP[size as keyof typeof VIDEO_SIZE_MAP];\n        const colorProps = {\n            initialColor: 'constant',\n            backgroundStyle: 'overlay',\n            ...(isActive &&\n                ({\n                    highlightedColor: 'constant',\n                    pressedColor: 'constant',\n                    hoverBackgroundStyle: 'overlay',\n                    pressedBackgroundStyle: 'overlay',\n                } as const)),\n        } as const;\n        video = (\n            <span className={styles.video} data-qa=\"avatar-video\">\n                <Icon {...colorProps} padding={padding} borderRadius={'halfHeight'} />\n            </span>\n        );\n    }\n\n    if (withActionIcon) {\n        const { padding } = ACTION_ICON_SIZE_MAP[size as keyof typeof ACTION_ICON_SIZE_MAP];\n        const colorProps = {\n            initialColor: 'constant',\n            backgroundStyle: 'accent',\n            ...(isActive &&\n                ({\n                    highlightedColor: 'constant',\n                    pressedColor: 'constant',\n                    hoverBackgroundStyle: 'accent',\n                    pressedBackgroundStyle: 'accent',\n                } as const)),\n        } as const;\n        actionIcon = (\n            <>\n                <span className={styles[`avatar-focus-border-${size}`]} />\n                <span\n                    className={classnames(styles.actionIcon, {\n                        [styles[`action-icon-square-size-${size}`]]: !shapeCircle,\n                        [styles[`action-icon-circle-size-${size}`]]: !!shapeCircle,\n                    })}\n                    data-qa=\"avatar-action\"\n                    onClick={() => elementRef.current?.click()}\n                >\n                    <ActionIcon {...colorProps} padding={padding} borderRadius={'halfHeight'} />\n                </span>\n            </>\n        );\n    }\n\n    const classNames = {\n        [styles.avatar]: true,\n        [styles.avatarShapeCircle]: shapeCircle,\n        [styles.avatarModeImage]: mode === 'image' && imageState === 'loaded',\n        [styles.avatarModeLetters]: isModeLetters,\n        [styles.avatarModeIcon]: isModeIcon,\n        [styles.avatarModePlaceholder]: isModePlaceholder,\n        [styles[`avatar_size-${size}`]]: !!size,\n        [styles[`avatar_with-online-badge-${size}`]]: online,\n        [styles[`avatar_with-action-icon`]]: withActionIcon,\n        [styles[`avatar_with-action-icon-${size}`]]: withActionIcon,\n    };\n\n    if ((isModeLetters || isModeIcon) && style) {\n        classNames[styles[`avatar_style-${style}`]] = !!style;\n    }\n\n    useLayoutEffect(() => {\n        const imageElement = imageRef.current;\n        if (!imageElement || !image) {\n            return void 0;\n        }\n\n        const loadingStartTime = Date.now();\n\n        const handleOnLoad = () => {\n            // если картинка грузилась дольше 300мс, анимируем прозрачность, иначе показываем без анимации\n            if (Date.now() - loadingStartTime > 300) {\n                const handleAnimationEnd = () => {\n                    imageElement.removeEventListener('animationend', handleAnimationEnd);\n                    setImageState('loaded');\n                };\n                imageElement.addEventListener('animationend', handleAnimationEnd);\n                setImageState('loading-animation');\n            } else {\n                setImageState('loaded');\n            }\n        };\n\n        const handleOnError = () => setImageState('error');\n\n        imageRef.current.addEventListener('load', handleOnLoad);\n        imageRef.current.addEventListener('error', handleOnError);\n        imageRef.current.src = image;\n        setImageState('loading');\n\n        return () => {\n            imageElement.removeEventListener('load', handleOnLoad);\n            imageElement.removeEventListener('error', handleOnError);\n        };\n    }, [image]);\n\n    return (\n        <div\n            className={classnames(styles.avatarContainer, {\n                [styles.avatarContainerWithAddons]: online || withVideo || !!ActionIcon,\n                [styles.avatarContainerDisabled]: isComponentDisabled,\n                [styles[`avatar-container_size-${size}`]]: online || withVideo || !!ActionIcon,\n                [styles.active]: isActive,\n            })}\n            {...(containerDataQa ? { 'data-qa': containerDataQa } : {})}\n        >\n            <IconDynamic>\n                <div>\n                    <Element\n                        {...additionalAttributes}\n                        {...avatarProps}\n                        className={classnames(classNames)}\n                        disabled={Element === 'button' ? isComponentDisabled : false}\n                        aria-disabled={isComponentDisabled}\n                        aria-label={ariaLabel}\n                    >\n                        {isModeLetters && (\n                            <BaseText style=\"primary\" Element=\"span\" typography={AVATAR_TYPOGRAPHY_MAP[size]}>\n                                {formatLetters(letters || '')}\n                            </BaseText>\n                        )}\n                        {isModeIcon && icon}\n                        {isModePlaceholder && (\n                            <span\n                                className={classnames({\n                                    [styles.female]: placeholder === 'female',\n                                    [styles.male]: placeholder === 'male',\n                                    [styles.city]: placeholder === 'city',\n                                    [styles.undefined]: placeholder === 'undefined',\n                                })}\n                                data-qa={`placeholder-${placeholder}`}\n                                style={{ width: size, height: size }}\n                            />\n                        )}\n                        {isModeImage && (\n                            <>\n                                {(imageState === 'loading' || imageState === 'loading-animation') && (\n                                    <span\n                                        className={classnames(styles.avatarImageLoading, {\n                                            [styles[`avatar_size-${size}`]]: size,\n                                            [styles.avatarShapeCircle]: shapeCircle,\n                                        })}\n                                    />\n                                )}\n                                <img\n                                    ref={imageRef}\n                                    alt={ariaLabel}\n                                    className={classnames(styles.avatarImage, {\n                                        [styles.avatarImageHidden]: imageState === 'loading',\n                                        [styles.avatarImageAnimation]: imageState === 'loading-animation',\n                                    })}\n                                />\n                            </>\n                        )}\n                    </Element>\n                    {online && (\n                        <>\n                            <div className={styles[`avatar-focus-border-${size}`]} />\n                            <div\n                                className={classnames(\n                                    styles[`avatar-online-badge-${size}`],\n                                    styles[`avatar-online-badge_style_${styleOnline}`]\n                                )}\n                            />\n                        </>\n                    )}\n                    {actionIcon}\n                    {video}\n                </div>\n            </IconDynamic>\n        </div>\n    );\n};\n\nconst AvatarComponent = forwardRef(AvatarForwardRefRenderFunc) as PolymorphicComponentWithRef<AvatarProps, 'div'>;\n\nexport const Avatar = enrichWithSkeleton(AvatarComponent, AvatarSkeleton);\n"],"names":[],"mappings":"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"}

package/AvatarStack.d.ts

@@ -1,2 +1,2 @@
-import type { AvatarStackProps } from '@hh.ru/magritte-ui-avatar/types';
+import type { AvatarStackProps } from './types';
 export declare const AvatarStack: import("react").ForwardRefExoticComponent<AvatarStackProps & import("react").RefAttributes<HTMLElement>>;

package/AvatarStack.js

@@ -3,16 +3,26 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, Children, cloneElement } from 'react';
 import classnames from 'classnames';
 
-var styles = {"avatar-stack":"magritte-avatar-stack___5qOCC_8-2-25","avatarStack":"magritte-avatar-stack___5qOCC_8-2-25","avatar-stack-inline":"magritte-avatar-stack-inline___aXUFe_8-2-25","avatarStackInline":"magritte-avatar-stack-inline___aXUFe_8-2-25","avatar-stack-item":"magritte-avatar-stack-item___hDdq8_8-2-25","avatarStackItem":"magritte-avatar-stack-item___hDdq8_8-2-25","avatar-stack-size-16":"magritte-avatar-stack-size-16___Yuwfu_8-2-25","avatarStackSize16":"magritte-avatar-stack-size-16___Yuwfu_8-2-25","avatar-stack-circle":"magritte-avatar-stack-circle___tQZvM_8-2-25","avatarStackCircle":"magritte-avatar-stack-circle___tQZvM_8-2-25","avatar-stack-rect":"magritte-avatar-stack-rect___Ip8L2_8-2-25","avatarStackRect":"magritte-avatar-stack-rect___Ip8L2_8-2-25","avatar-stack-size-24":"magritte-avatar-stack-size-24___oZNQA_8-2-25","avatarStackSize24":"magritte-avatar-stack-size-24___oZNQA_8-2-25","avatar-stack-size-40":"magritte-avatar-stack-size-40___oBfvX_8-2-25","avatarStackSize40":"magritte-avatar-stack-size-40___oBfvX_8-2-25","avatar-stack-size-48":"magritte-avatar-stack-size-48___KGUEt_8-2-25","avatarStackSize48":"magritte-avatar-stack-size-48___KGUEt_8-2-25","avatar-stack-size-80":"magritte-avatar-stack-size-80___JnGV-_8-2-25","avatarStackSize80":"magritte-avatar-stack-size-80___JnGV-_8-2-25","avatar-stack-size-96":"magritte-avatar-stack-size-96___1LxDK_8-2-25","avatarStackSize96":"magritte-avatar-stack-size-96___1LxDK_8-2-25"};
+var styles = {"avatar-stack":"magritte-avatar-stack___5qOCC_8-2-27","avatarStack":"magritte-avatar-stack___5qOCC_8-2-27","avatar-stack-inline":"magritte-avatar-stack-inline___aXUFe_8-2-27","avatarStackInline":"magritte-avatar-stack-inline___aXUFe_8-2-27","avatar-stack-item":"magritte-avatar-stack-item___hDdq8_8-2-27","avatarStackItem":"magritte-avatar-stack-item___hDdq8_8-2-27","avatar-stack-size-16":"magritte-avatar-stack-size-16___Yuwfu_8-2-27","avatarStackSize16":"magritte-avatar-stack-size-16___Yuwfu_8-2-27","avatar-stack-circle":"magritte-avatar-stack-circle___tQZvM_8-2-27","avatarStackCircle":"magritte-avatar-stack-circle___tQZvM_8-2-27","avatar-stack-rect":"magritte-avatar-stack-rect___Ip8L2_8-2-27","avatarStackRect":"magritte-avatar-stack-rect___Ip8L2_8-2-27","avatar-stack-size-24":"magritte-avatar-stack-size-24___oZNQA_8-2-27","avatarStackSize24":"magritte-avatar-stack-size-24___oZNQA_8-2-27","avatar-stack-size-40":"magritte-avatar-stack-size-40___oBfvX_8-2-27","avatarStackSize40":"magritte-avatar-stack-size-40___oBfvX_8-2-27","avatar-stack-size-48":"magritte-avatar-stack-size-48___KGUEt_8-2-27","avatarStackSize48":"magritte-avatar-stack-size-48___KGUEt_8-2-27","avatar-stack-size-80":"magritte-avatar-stack-size-80___JnGV-_8-2-27","avatarStackSize80":"magritte-avatar-stack-size-80___JnGV-_8-2-27","avatar-stack-size-96":"magritte-avatar-stack-size-96___1LxDK_8-2-27","avatarStackSize96":"magritte-avatar-stack-size-96___1LxDK_8-2-27"};
 
-const AvatarStack = forwardRef(({ size = 24, shape = 'rectangle', inline = false, 'data-qa': dataQa = 'avatar-stack', children }, ref) => {
-    return (jsx("ul", { ref: ref, className: classnames(styles.avatarStack, styles[`avatarStackSize${size}`], {
-            [styles.avatarStackInline]: inline,
-            [styles.avatarStackCircle]: shape === 'circle',
-            [styles.avatarStackRect]: shape === 'rectangle',
-        }), "data-qa": dataQa, children: Children.map(children, (child, index) => (jsx("li", { className: styles.avatarStackItem, children: cloneElement(child, { size, shapeCircle: shape === 'circle' }) }, index))) }));
-});
-AvatarStack.displayName = 'AvatarStack';
+const AvatarStack = forwardRef(
+  ({ size = 24, shape = "rectangle", inline = false, "data-qa": dataQa = "avatar-stack", children }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        className: classnames(styles.avatarStack, styles[`avatarStackSize${size}`], {
+          [styles.avatarStackInline]: inline,
+          [styles.avatarStackCircle]: shape === "circle",
+          [styles.avatarStackRect]: shape === "rectangle"
+        }),
+        "data-qa": dataQa,
+        children: Children.map(children, (child, index) => /* @__PURE__ */ jsx("li", { className: styles.avatarStackItem, children: cloneElement(child, { size, shapeCircle: shape === "circle" }) }, index))
+      }
+    );
+  }
+);
+AvatarStack.displayName = "AvatarStack";
 
 export { AvatarStack };
 //# sourceMappingURL=AvatarStack.js.map

package/AvatarStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStack.js","sources":["src/AvatarStack.tsx"],"sourcesContent":["import { forwardRef, Children, cloneElement, type LegacyRef } from 'react';\nimport classNames from 'classnames';\n\nimport type { AvatarStackProps } from '@hh.ru/magritte-ui-avatar/types';\n\nimport styles from './avatar-stack.less';\n\nexport const AvatarStack = forwardRef<HTMLElement, AvatarStackProps>(\n    ({ size = 24, shape = 'rectangle', inline = false, 'data-qa': dataQa = 'avatar-stack', children }, ref) => {\n        return (\n            <ul\n                ref={ref as LegacyRef<HTMLUListElement>}\n                className={classNames(styles.avatarStack, styles[`avatarStackSize${size}`], {\n                    [styles.avatarStackInline]: inline,\n                    [styles.avatarStackCircle]: shape === 'circle',\n                    [styles.avatarStackRect]: shape === 'rectangle',\n                })}\n                data-qa={dataQa}\n            >\n                {Children.map(children, (child, index) => (\n                    <li key={index} className={styles.avatarStackItem}>\n                        {cloneElement(child, { size, shapeCircle: shape === 'circle' })}\n                    </li>\n                ))}\n            </ul>\n        );\n    }\n);\n\nAvatarStack.displayName = 'AvatarStack';\n"],"names":["_jsx","classNames"],"mappings":";;;;;;AAOO,MAAM,WAAW,GAAG,UAAU,CACjC,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,WAAW,EAAE,MAAM,GAAG,KAAK,EAAE,SAAS,EAAE,MAAM,GAAG,cAAc,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAI;IACtG,QACIA,YACI,GAAG,EAAE,GAAkC,EACvC,SAAS,EAAEC,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,kBAAkB,IAAI,CAAA,CAAE,CAAC,EAAE;AACxE,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,MAAM;AAClC,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,KAAK,KAAK,QAAQ;AAC9C,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,KAAK,KAAK,WAAW;SAClD,CAAC,EAAA,SAAA,EACO,MAAM,EAEd,QAAA,EAAA,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,MACjCD,GAAgB,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,eAAe,EAC5C,QAAA,EAAA,YAAY,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,KAAK,QAAQ,EAAE,CAAC,EAD1D,EAAA,KAAK,CAET,CACR,CAAC,EACD,CAAA,EACP;AACN,CAAC,EACH;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"AvatarStack.js","sources":["src/AvatarStack.tsx"],"sourcesContent":["import { forwardRef, Children, cloneElement, type LegacyRef } from 'react';\nimport classNames from 'classnames';\n\nimport type { AvatarStackProps } from '@hh.ru/magritte-ui-avatar/types';\n\nimport styles from './avatar-stack.less';\n\nexport const AvatarStack = forwardRef<HTMLElement, AvatarStackProps>(\n    ({ size = 24, shape = 'rectangle', inline = false, 'data-qa': dataQa = 'avatar-stack', children }, ref) => {\n        return (\n            <ul\n                ref={ref as LegacyRef<HTMLUListElement>}\n                className={classNames(styles.avatarStack, styles[`avatarStackSize${size}`], {\n                    [styles.avatarStackInline]: inline,\n                    [styles.avatarStackCircle]: shape === 'circle',\n                    [styles.avatarStackRect]: shape === 'rectangle',\n                })}\n                data-qa={dataQa}\n            >\n                {Children.map(children, (child, index) => (\n                    <li key={index} className={styles.avatarStackItem}>\n                        {cloneElement(child, { size, shapeCircle: shape === 'circle' })}\n                    </li>\n                ))}\n            </ul>\n        );\n    }\n);\n\nAvatarStack.displayName = 'AvatarStack';\n"],"names":["classNames"],"mappings":";;;;;;AAOO,MAAM,WAAc,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,IAAO,GAAA,EAAA,EAAI,KAAQ,GAAA,WAAA,EAAa,MAAS,GAAA,KAAA,EAAO,SAAW,EAAA,MAAA,GAAS,cAAgB,EAAA,QAAA,IAAY,GAAQ,KAAA;AACvG,IACI,uBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACG,GAAA;AAAA,QACA,SAAA,EAAWA,WAAW,MAAO,CAAA,WAAA,EAAa,OAAO,CAAkB,eAAA,EAAA,IAAI,EAAE,CAAG,EAAA;AAAA,UACxE,CAAC,MAAO,CAAA,iBAAiB,GAAG,MAAA;AAAA,UAC5B,CAAC,MAAA,CAAO,iBAAiB,GAAG,KAAU,KAAA,QAAA;AAAA,UACtC,CAAC,MAAA,CAAO,eAAe,GAAG,KAAU,KAAA,WAAA;AAAA,SACvC,CAAA;AAAA,QACD,SAAS,EAAA,MAAA;AAAA,QAER,QAAA,EAAA,QAAA,CAAS,IAAI,QAAU,EAAA,CAAC,OAAO,KAC5B,qBAAA,GAAA,CAAC,QAAe,SAAW,EAAA,MAAA,CAAO,iBAC7B,QAAa,EAAA,YAAA,CAAA,KAAA,EAAO,EAAE,IAAM,EAAA,WAAA,EAAa,UAAU,QAAS,EAAC,CADzD,EAAA,EAAA,KAET,CACH,CAAA;AAAA,OAAA;AAAA,KACL,CAAA;AAAA,GAER;AACJ,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}