@homecode/ui 5.20.21 → 5.20.22

package/dist/esm/index.js

@@ -30,6 +30,7 @@ export { Gallery, normalizeGalleryItem } from './src/components/Gallery/Gallery.
 export { GridLayout } from './src/components/GridLayout/GridLayout.js';
 export { Heading } from './src/components/Heading/Heading.js';
 export { Icon } from './src/components/Icon/Icon.js';
+export { Img } from './src/components/Img/Img.js';
 export { Input } from './src/components/Input/Input.js';
 export { InputFile } from './src/components/InputFile/InputFile.js';
 export { Label } from './src/components/Label/Label.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -64,6 +64,7 @@ import '../VideoPlayer/VideoPlayer.styl.js';
 import '../Gallery/Gallery.styl.js';
 import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
+import '../Img/Img.styl.js';
 import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
 import '@tiptap/core';

package/dist/esm/src/components/Img/Img.js

@@ -0,0 +1,26 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState } from 'react';
+import { Icon } from '../Icon/Icon.js';
+import S from './Img.styl.js';
+
+/**
+ * `<img>` that never shows the browser's broken-image glyph or its alt text:
+ * when loading fails it renders `fallback` (a broken-image icon by default).
+ */
+function Img({ src, alt = '', fallback, fallbackClassName, className, onError, ...rest }) {
+    const [failedSrc, setFailedSrc] = useState(null);
+    // Keyed by src, so a new src gets a fresh attempt.
+    const isFailed = !src || failedSrc === src;
+    if (isFailed) {
+        if (fallback !== undefined)
+            return jsx(Fragment, { children: fallback });
+        return (jsx("span", { className: cn(S.fallback, className, fallbackClassName), role: "img", "aria-label": alt || undefined, children: jsx(Icon, { type: "brokenImage", className: S.fallbackIcon }) }));
+    }
+    return (jsx("img", { ...rest, src: src, alt: alt, className: className, onError: event => {
+            setFailedSrc(src);
+            onError?.(event);
+        } }));
+}
+
+export { Img };

package/dist/esm/src/components/Img/Img.styl.js

@@ -0,0 +1,20 @@
+var css_248z = ".Img_fallback__crzoQ{align-items:center;color:currentColor;display:inline-flex;justify-content:center}.Img_fallbackIcon__oyxkV{height:50%;max-height:48px;max-width:48px;opacity:.4;width:50%}";
+var S = {"fallback":"Img_fallback__crzoQ","fallbackIcon":"Img_fallbackIcon__oyxkV"};
+            if (typeof document !== 'undefined') {
+              var __uilibHead = document.head || document.getElementsByTagName('head')[0];
+              if (__uilibHead) {
+                var __uilibStyle = document.createElement('style');
+                __uilibStyle.setAttribute('data-uilib-css', '');
+                __uilibStyle.appendChild(document.createTextNode(css_248z));
+                var __uilibLink = __uilibHead.querySelector('link[rel="stylesheet"]');
+                var __uilibInline = __uilibHead.querySelector('style:not([data-uilib-css])');
+                var __uilibAnchor = __uilibLink || __uilibInline;
+                if (__uilibLink && __uilibInline && (__uilibLink.compareDocumentPosition(__uilibInline) & 4) === 0) {
+                  __uilibAnchor = __uilibInline;
+                }
+                if (__uilibAnchor) __uilibHead.insertBefore(__uilibStyle, __uilibAnchor);
+                else __uilibHead.appendChild(__uilibStyle);
+              }
+            }
+
+export { S as default };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -66,6 +66,7 @@ import '../VideoPlayer/VideoPlayer.styl.js';
 import '../Gallery/Gallery.styl.js';
 import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
+import '../Img/Img.styl.js';
 import '../LightBox/LightBox.styl.js';
 import '../NestedMenu/NestedMenu.js';
 import '../Notifications/store.js';

package/dist/esm/types/src/components/Img/Img.d.ts

@@ -0,0 +1,7 @@
+import * as T from './Img.types';
+export type ImgProps = T.Props;
+/**
+ * `<img>` that never shows the browser's broken-image glyph or its alt text:
+ * when loading fails it renders `fallback` (a broken-image icon by default).
+ */
+export declare function Img({ src, alt, fallback, fallbackClassName, className, onError, ...rest }: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Img/Img.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/components/Img/Img.types.d.ts

@@ -0,0 +1,10 @@
+import type { ImgHTMLAttributes, ReactNode } from 'react';
+export type Props = ImgHTMLAttributes<HTMLImageElement> & {
+    /**
+     * Rendered instead of the image when it fails to load. Defaults to a
+     * broken-image icon. Pass `null` to render nothing.
+     */
+    fallback?: ReactNode;
+    /** Class for the default fallback wrapper. */
+    fallbackClassName?: string;
+};

package/dist/esm/types/src/components/index.d.ts

@@ -24,6 +24,7 @@ export * from './Gallery/Gallery';
 export * from './GridLayout/GridLayout';
 export * from './Heading/Heading';
 export * from './Icon/Icon';
+export * from './Img/Img';
 export * from './Input/Input';
 export * from './InputFile/InputFile';
 export * from './Label/Label';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.20.21",
+  "version": "5.20.22",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",