@luscii-healthtech/web-ui 28.10.0 → 28.11.0

package/dist/components/Image/Image.d.ts

@@ -1,10 +1,8 @@
-import React, { MouseEventHandler } from "react";
-interface ImageProps {
-    src: string;
-    className: string;
-    children?: React.ReactNode;
-    onClick?: MouseEventHandler<HTMLSpanElement>;
-    showIconOnFailure?: boolean;
-}
-declare const Image: React.VFC<ImageProps>;
-export default Image;
+import React from "react";
+/**
+ * When you have many elements to lazy load in the same page, you might get poor performance because each one is
+ * listening to the scroll/resize events. In that case, it's better to wrap the deepest common parent of those
+ * components with a HOC to track those events (trackWindowScroll).
+ */
+declare const _default: React.ComponentType<Omit<import("react-lazy-load-image-component").LazyComponentProps, "scrollPosition">>;
+export default _default;

package/dist/index.development.js

@@ -5146,12 +5146,13 @@ const Image$1 = (_a) => {
       return null;
     }
   }
-  return React__namespace.default.createElement(reactLazyLoadImageComponent.LazyLoadImage, Object.assign({ className: classNames__default.default(className), effect: "blur", placeholder: React__namespace.default.createElement(
+  return React__namespace.default.createElement(reactLazyLoadImageComponent.LazyLoadImage, Object.assign({ className: classNames__default.default(className), effect: "blur", useIntersectionObserver: true, placeholder: React__namespace.default.createElement(
     "div",
     { className: "ui-flex ui-h-full ui-w-full ui-flex-row ui-items-center ui-justify-center ui-rounded" },
     React__namespace.default.createElement("img", { src: img, alt: "image-icon" })
   ), src, onClick, onError: () => setIsError(true), wrapperClassName: "ui-w-full ui-h-full" }, otherProps));
 };
+var Image$2 = reactLazyLoadImageComponent.trackWindowScroll(Image$1);
 
 const ImageCategory = (props) => {
   return React__namespace.default.createElement(
@@ -5167,7 +5168,7 @@ const ImageCategory = (props) => {
           "ui-h-11 ui-w-11": props.isTypeCompact,
           "ui-h-22 ui-w-36": !props.isTypeCompact
         }) },
-        React__namespace.default.createElement(Image$1, { className: "ui-h-full ui-w-full ui-rounded", onClick: props.handleImageClick, src: option, "data-index": index })
+        React__namespace.default.createElement(Image$2, { className: "ui-h-full ui-w-full ui-rounded", onClick: props.handleImageClick, src: option, "data-index": index })
       );
     }))
   );
@@ -5290,7 +5291,7 @@ const ImagePickerInner = ({
           "ui-h-44 ui-w-full": !isTypeCompact
         }) },
         isUploading && React__namespace.default.createElement(LoadingIndicator, { className: "ui-my-16" }),
-        !isUploading && selectedMediaType === "image" && React__namespace.default.createElement(Image$1, { className: classNames__default.default("ui-h-full", {
+        !isUploading && selectedMediaType === "image" && React__namespace.default.createElement(Image$2, { className: classNames__default.default("ui-h-full", {
           "ui-w-full ui-rounded ui-bg-secondary ui-object-contain ui-p-3": !isTypeCompact,
           "ui-w-full": isTypeCompact
         }), src: selectedMedia }),
@@ -6523,7 +6524,7 @@ exports.HeartMinusIcon = HeartMinusIcon;
 exports.HomeIcon = HomeIcon;
 exports.HoverIndicatorControl = HoverIndicatorControl;
 exports.Icon = Icon;
-exports.Image = Image$1;
+exports.Image = Image$2;
 exports.ImageIcon = ImageIcon;
 exports.InfoField = InfoField;
 exports.InfoIcon = InfoIcon;