@eightshift/ui-components 5.4.0 → 5.5.0

package/dist/components/smart-image/smart-image.js

@@ -0,0 +1,117 @@
+import { jsx } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { useState, cloneElement } from "react";
+import { analyzeImage } from "../../utilities/general.js";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-VUl-CuCv.js";
+import { DecorativeTooltip } from "../tooltip/tooltip.js";
+/**
+ * @typedef {Object} CustomImageProps
+ * @property {JSX.Element} [props.renderError] - Component to render if image analysis fails. `(error) => JSX:Element`.
+ * @property {string} [props.errorClassName] - Classes to pass to the default error view.
+ * @property {string} [props.processingClassName] - Classes to apply while the image is loading / being processed.
+ * @property {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @property {import('../../utilities/general').ImageAnalysisSettings} [imageAnalysisSettings] - Settings to pass to the image analysis function.
+ *
+ * @preserve
+ */
+/**
+ * @typedef {Omit<JSX.IntrinsicElements['img'], 'crossOrigin'>} BaseImageProps
+ *
+ * @preserve
+ */
+/**
+ * @typedef {CustomImageProps & BaseImageProps} ImageProps
+ *
+ * @preserve
+ */
+/**
+ * Image that analyzes its contents and can apply different classes based on image transparency.
+ * It also provides a CSS variable with the image's dominant color, and optionally custom child rendering with all the data exposed.
+ *
+ * @component
+ * @param {ImageProps} props - Component props.
+ *
+ * @returns {JSX.Element} The SmartImage component.
+ *
+ * @example
+ * <SmartImage src='https://picsum.photos/600/400' />
+ *
+ * @example
+ * <SmartImage src='https://picsum.photos/600/400'>
+ *     {({ image, dominantColors, isDark }) => (
+ *         <div style={{ backgroundColor: dominantColors[0].color }}>
+ *             {image}
+ *             <p style={{ color: isDark ? '#000000' : '#FFFFFF' }}>Lorem ipsum</p>
+ *         </div>
+ *     )}
+ * </SmartImage>
+ *
+ * @preserve
+ */
+const SmartImage = (props) => {
+  const { imageAnalysisSettings, errorClassName, processingClassName = "es:opacity-0 es:fixed", hidden, renderError, children, ...imageProps } = props;
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasAnalysed, setHasAnalysed] = useState(false);
+  const [isTransparent, setIsTransparent] = useState(null);
+  const [transparencyInfo, setTransparencyInfo] = useState(null);
+  const [dominantColors, setDominantColors] = useState([]);
+  const [isDark, setIsDark] = useState(false);
+  const [error, setError] = useState(null);
+  if (hidden) {
+    return null;
+  }
+  const classFetchProps = { isLoaded, hasAnalysed, isTransparent, dominantColors, isDark, transparencyInfo };
+  const imageElement = /* @__PURE__ */ jsx(
+    "img",
+    {
+      decoding: "async",
+      ...imageProps,
+      crossOrigin: "anonymous",
+      style: {
+        ...imageProps.style || {},
+        "--es-img-dominant-color": dominantColors?.[0]?.color ?? ""
+      },
+      className: clsx(
+        "es:transition-opacity",
+        !hasAnalysed && processingClassName,
+        typeof imageProps.className === "function" ? imageProps.className(classFetchProps) : imageProps.className
+      ),
+      onLoad: async (e) => {
+        setIsLoaded(true);
+        if (props.onLoad) {
+          props.onLoad(e);
+        }
+        if (!imageProps.src) {
+          setHasAnalysed(true);
+          return;
+        }
+        const result = analyzeImage(e.target, imageAnalysisSettings);
+        if (result) {
+          const { isDark: dark, dominantColors: colors, isTransparent: transparent, transparencyInfo: transparencyInfo2 } = result;
+          setIsDark(dark);
+          setDominantColors(colors);
+          setIsTransparent(transparent);
+          setTransparencyInfo(transparencyInfo2);
+        }
+        setHasAnalysed(true);
+      },
+      onError: () => setError(new Error("Image failed to load")),
+      "data-is-transparent": isTransparent,
+      "data-is-dark": isDark
+    }
+  );
+  if (error && renderError) {
+    return renderError(error);
+  } else if (error) {
+    return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-2 es:items-center-safe es:justify-center-safe es:p-2 es:motion-preset-fade", errorClassName), children: /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Error loading image", "eightshift-ui-components"), children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" }) }) });
+  }
+  if (!children) {
+    return imageElement;
+  }
+  return typeof children === "function" ? children({ image: imageElement, dominantColors, isDark, hasAnalysed, isTransparent, transparencyInfo }) : imageElement;
+};
+export {
+  SmartImage
+};

package/dist/icons/icons.js

@@ -3376,6 +3376,16 @@ const icons = {
     /* @__PURE__ */ jsx("path", { d: "m9.5.5 5 5H10a.5.5 0 0 1-.5-.5V.5Z", fill: "currentColor", fillOpacity: "0.3" }),
     /* @__PURE__ */ jsx("path", { d: "m14.5 5.5-5-5m5 5H10a.5.5 0 0 1-.5-.5V.5m5 5v2m-5-7H2A1.5 1.5 0 0 0 .5 2v16A1.5 1.5 0 0 0 2 19.5h11a1.5 1.5 0 0 0 1.5-1.5v-.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
     /* @__PURE__ */ jsx("path", { d: "M11.236 15.5H9.499v-6h1.737s2.316 0 2.316 2.842v.316c0 2.842-2.316 2.842-2.316 2.842Zm4.263 0v-3m3.184-3H15.5v3m0 0h3.04m-15.04 3v-3m0 0v-3h1.882c.434 0 2.119 0 2.118 1.5-.001 1.5-1.566 1.5-2 1.5h-2Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })
+  ] }),
+  fileError: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "m16.5 5.5-5-5m5 5H12a.5.5 0 0 1-.5-.5V.5m5 5V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18V2A1.5 1.5 0 0 1 5 .5h6.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "m7 9.5 3 3m3 3-3-3m0 0-3 3m3-3 3-3", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  imageError: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M15.5 11.5V2A1.5 1.5 0 0 0 14 .5H2A1.5 1.5 0 0 0 .5 2v12A1.5 1.5 0 0 0 2 15.5h9.5", stroke: "currentColor", fill: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5.25", cy: "5.25", r: "1.75", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 11a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h5Zm-.12 2.12a.537.537 0 0 0-.76 0l-1.62 1.62-1.62-1.62a.537.537 0 1 0-.76.76l1.62 1.62-1.62 1.62a.537.537 0 1 0 .76.76l1.62-1.62 1.62 1.62a.537.537 0 1 0 .76-.76l-1.62-1.62 1.62-1.62c.21-.21.21-.55 0-.76Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.475 10.705 1 12.79V15h10.5l1.5-2.5 1.241-.863-2.436-2.518a1.5 1.5 0 0 0-2.16.004l-1.78 1.854a1.5 1.5 0 0 1-2.114.05l-.278-.263a1.5 1.5 0 0 0-1.998-.059Z", fill: "currentColor", fillOpacity: "0.5" })
   ] })
 };
 const blockIcons = {

package/dist/index.js

@@ -50,6 +50,7 @@ import { OptionSelect } from "./components/option-select/option-select.js";
 import { OptionsPanel, OptionsPanelHeader, OptionsPanelIntro, OptionsPanelSection } from "./components/options-panel/options-panel.js";
 import { Select } from "./components/select/single-select.js";
 import { Slider } from "./components/slider/slider.js";
+import { SmartImage } from "./components/smart-image/smart-image.js";
 import { SolidColorPicker } from "./components/color-pickers/solid-color-picker.js";
 import { Spacer } from "./components/spacer/spacer.js";
 import { Tab, TabList, TabPanel, Tabs } from "./components/tabs/tabs.js";
@@ -129,6 +130,7 @@ export {
   Select,
   SelectNext,
   Slider,
+  SmartImage,
   SolidColorPicker,
   Spacer,
   SubMenuItem,