@itcase/ui 1.9.48 → 1.9.50

package/dist/{Avatar_cjs_B_hjRkuy.js → Avatar_cjs_CZ0XJ6d2.js}

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var Icon = require('./Icon_cjs_CuqEv1jm.js');
-var Image = require('./Image_cjs_BxZFowhi.js');
+var Image = require('./Image_cjs_C_FMjUjx.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
 
 const avatarAppearanceDefault = {

package/dist/{Avatar_es_BgYYfuzU.js → Avatar_es_CVr38U27.js}

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { I as Icon, B as Badge } from './Icon_es_DoAtUvPe.js';
-import { I as Image } from './Image_es_Bx7l_UwQ.js';
+import { I as Image } from './Image_es_Ca7UQOkj.js';
 import { T as Text } from './Text_es_B85LGfjW.js';
 
 const avatarAppearanceDefault = {

package/dist/{Image_cjs_BxZFowhi.js → Image_cjs_C_FMjUjx.js}

@@ -12,22 +12,26 @@ const Image = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Im
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { fillClass, fillHoverClass, borderColorClass, borderColorImageClass, borderTypeClass, borderWidthClass, cursorClass, heightClass, horizontalAlignClass, imageHeightClass, imageWidthClass, resizeModeClass, shapeClass, verticalAlignClass, widthClass, } = propsGenerator;
     const { image: imageStyles, styles, wrapper: wrapperStyles, } = useStyles.useStyles(props);
-    const onErrorImage = React.useCallback((event) => {
+    const [imageSrc, setImageSrc] = React.useState(null);
+    // Handles image load errors: calls onError callback or falls back to placeholderUrl
+    const handleImageError = React.useCallback((event) => {
         const img = event.target;
         if (onError) {
             onError(event);
+            return;
         }
-        else if (placeholderUrl && !img.src.endsWith(placeholderUrl)) {
+        if (placeholderUrl && !img.src.endsWith(placeholderUrl)) {
             img.src = placeholderUrl;
         }
     }, [onError, placeholderUrl]);
-    // If src and placeholderUrl are both not provided, use UNKNOWN_IMAGE_SRC to trigger onError
-    const imageSrc = src || placeholderUrl || UNKNOWN_IMAGE_SRC;
+    // Syncs imageSrc state with src and placeholderUrl props
+    React.useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setImageSrc(src || placeholderUrl || null);
+    }, [src, placeholderUrl]);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass && `cursor_${cursorClass}`, horizontalAlignClass &&
             `image_horizontal-align_${horizontalAlignClass}`, verticalAlignClass && `image_vertical-align_${verticalAlignClass}`, shapeClass && `image_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, resizeModeClass && `image_resize-mode_${resizeModeClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, isSkeleton && 'image_skeleton'), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && `width_${imageWidthClass}`, imageHeightClass && `height_${imageHeightClass}`, imageClassName, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderColorImageClass &&
-                            `border-color-image_${borderColorImageClass}`), src: imageSrc, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
+                            `border-color-image_${borderColorImageClass}`), src: imageSrc, title: title || alt, alt: alt || title, "data-original-src": src, style: imageStyles, onError: handleImageError }), overlay, caption, children] }), after] }));
 }));
-// Make it random to not accidentally match a real image URL
-const UNKNOWN_IMAGE_SRC = `unknown-image-${Math.random()}`;
 
 exports.Image = Image;

package/dist/{Image_es_Bx7l_UwQ.js → Image_es_Ca7UQOkj.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, useState, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
@@ -10,22 +10,26 @@ const Image = urlWithAssetPrefix(forwardRef(function Image(props, ref) {
     const propsGenerator = useDevicePropsGenerator(props);
     const { fillClass, fillHoverClass, borderColorClass, borderColorImageClass, borderTypeClass, borderWidthClass, cursorClass, heightClass, horizontalAlignClass, imageHeightClass, imageWidthClass, resizeModeClass, shapeClass, verticalAlignClass, widthClass, } = propsGenerator;
     const { image: imageStyles, styles, wrapper: wrapperStyles, } = useStyles(props);
-    const onErrorImage = useCallback((event) => {
+    const [imageSrc, setImageSrc] = useState(null);
+    // Handles image load errors: calls onError callback or falls back to placeholderUrl
+    const handleImageError = useCallback((event) => {
         const img = event.target;
         if (onError) {
             onError(event);
+            return;
         }
-        else if (placeholderUrl && !img.src.endsWith(placeholderUrl)) {
+        if (placeholderUrl && !img.src.endsWith(placeholderUrl)) {
             img.src = placeholderUrl;
         }
     }, [onError, placeholderUrl]);
-    // If src and placeholderUrl are both not provided, use UNKNOWN_IMAGE_SRC to trigger onError
-    const imageSrc = src || placeholderUrl || UNKNOWN_IMAGE_SRC;
+    // Syncs imageSrc state with src and placeholderUrl props
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setImageSrc(src || placeholderUrl || null);
+    }, [src, placeholderUrl]);
     return (jsxs("div", { className: clsx(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass && `cursor_${cursorClass}`, horizontalAlignClass &&
             `image_horizontal-align_${horizontalAlignClass}`, verticalAlignClass && `image_vertical-align_${verticalAlignClass}`, shapeClass && `image_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, resizeModeClass && `image_resize-mode_${resizeModeClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, isSkeleton && 'image_skeleton'), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && `width_${imageWidthClass}`, imageHeightClass && `height_${imageHeightClass}`, imageClassName, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderColorImageClass &&
-                            `border-color-image_${borderColorImageClass}`), src: imageSrc, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
+                            `border-color-image_${borderColorImageClass}`), src: imageSrc, title: title || alt, alt: alt || title, "data-original-src": src, style: imageStyles, onError: handleImageError }), overlay, caption, children] }), after] }));
 }));
-// Make it random to not accidentally match a real image URL
-const UNKNOWN_IMAGE_SRC = `unknown-image-${Math.random()}`;
 
 export { Image as I };

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_B_hjRkuy.js');
+var Avatar = require('../../Avatar_cjs_CZ0XJ6d2.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -26,7 +26,7 @@ require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../../Link_cjs_Dn7UhCYe.js');
 require('../../Text_cjs_erTy2pUN.js');
-require('../../Image_cjs_BxZFowhi.js');
+require('../../Image_cjs_C_FMjUjx.js');
 
 
 

package/dist/cjs/components/AvatarStack.js

@@ -6,7 +6,7 @@ var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Avatar = require('../../Avatar_cjs_B_hjRkuy.js');
+var Avatar = require('../../Avatar_cjs_CZ0XJ6d2.js');
 var Group = require('../../Group_cjs_xCUYKUcc.js');
 var Text = require('../../Text_cjs_erTy2pUN.js');
 require('react');
@@ -28,7 +28,7 @@ require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_Dn7UhCYe.js');
-require('../../Image_cjs_BxZFowhi.js');
+require('../../Image_cjs_C_FMjUjx.js');
 
 const avatarStackAppearanceSize = {
     size16: {

package/dist/cjs/components/Image.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Image = require('../../Image_cjs_BxZFowhi.js');
+var Image = require('../../Image_cjs_C_FMjUjx.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/components/Avatar.js

@@ -1,4 +1,4 @@
-export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_BgYYfuzU.js';
+export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_CVr38U27.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -24,4 +24,4 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Link_es_DPZHTF38.js';
 import '../Text_es_B85LGfjW.js';
-import '../Image_es_Bx7l_UwQ.js';
+import '../Image_es_Ca7UQOkj.js';

package/dist/components/AvatarStack.js

@@ -4,7 +4,7 @@ import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { A as Avatar } from '../Avatar_es_BgYYfuzU.js';
+import { A as Avatar } from '../Avatar_es_CVr38U27.js';
 import { G as Group } from '../Group_es_BVpRj4LR.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import 'react';
@@ -26,7 +26,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../Link_es_DPZHTF38.js';
-import '../Image_es_Bx7l_UwQ.js';
+import '../Image_es_Ca7UQOkj.js';
 
 const avatarStackAppearanceSize = {
     size16: {

package/dist/components/Image.js

@@ -1,4 +1,4 @@
-export { I as Image } from '../Image_es_Bx7l_UwQ.js';
+export { I as Image } from '../Image_es_Ca7UQOkj.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.9.48",
+  "version": "1.9.50",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",