@macive/ui 0.0.22 → 0.0.23

package/dist/src/components/Icon/Icon.js

@@ -5,10 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-console */
+/* eslint-disable @next/next/no-img-element */
+const react_1 = require("react");
 const css_1 = require("../../utilities/css");
 const Text_1 = require("../Text");
 const Icon_classnames_1 = __importDefault(require("./Icon.classnames"));
-const react_1 = require("react");
 const COLORS_WITH_BACKDROPS = ['base', 'critical', 'highlight', 'success', 'warning'];
 function Icon({ source, color, backdrop, accessibilityLabel, size = 20, theme }) {
     var _a, _b;
@@ -85,9 +87,9 @@ function Icon({ source, color, backdrop, accessibilityLabel, size = 20, theme })
         (0, react_1.isValidElement)(source) ? (source) : ((0, jsx_runtime_1.jsx)("span", { className: Icon_classnames_1.default.Svg, dangerouslySetInnerHTML: {
                 __html: 
                 //@ts-expect-error index
-                typeof source.svg === 'string'
+                typeof (source === null || source === void 0 ? void 0 : source.svg) === 'string'
                     ? //@ts-expect-error index
-                        source.svg
+                        source === null || source === void 0 ? void 0 : source.svg
                     : (_b = JSON.stringify(source)) === null || _b === void 0 ? void 0 : _b.replace(/"/g, "'"),
             }, "aria-hidden": 'true' })),
         placeholder: (0, jsx_runtime_1.jsx)("div", { className: Icon_classnames_1.default.Placeholder }),

package/dist/src/components/Image/Image.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = exports.fallbackImageSVG = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+// Fallback SVG as a data URL
 exports.fallbackImageSVG = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#ccc">
     <rect width="100" height="100" />
@@ -12,65 +13,27 @@ exports.fallbackImageSVG = `
 const fallbackSVG = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="#eae6e6" width="32" height="32" viewBox="0 0 32 32" stroke="#eae6e6">
   <path d="M30 3.4141L28.5859 2 2 28.5859 3.4141 30l2-2H26a2.0027 2.0027 0 0 0 2-2V5.4141ZM26 26H7.4141l7.7929-7.793 2.3788 2.3787a2 2 0 0 0 2.8284 0L22 19l4 3.9973ZM26 20.1682l-2.5858-2.5859a2 2 0 0 0-2.8284 0L19 19.1682l-2.377-2.3771L26 7.4141Z"/>
-  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.0027 0 0 0 4 6V22Z"/>
+  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.002 0 0 0 4 6V22Z"/>
 </svg>
 `;
 const errorkSVG = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="#dfc3c3" width="32" height="32" viewBox="0 0 32 32" stroke="#dfc3c3">
   <path d="M30 3.4141L28.5859 2 2 28.5859 3.4141 30l2-2H26a2.0027 2.0027 0 0 0 2-2V5.4141ZM26 26H7.4141l7.7929-7.793 2.3788 2.3787a2 2 0 0 0 2.8284 0L22 19l4 3.9973ZM26 20.1682l-2.5858-2.5859a2 2 0 0 0-2.8284 0L19 19.1682l-2.377-2.3771L26 7.4141Z"/>
-  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.0027 0 0 0 4 6V22Z"/>
+  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.002 0 0 0 4 6V22Z"/>
 </svg>
 `;
 const fallbackImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(fallbackSVG)}`;
-// SVG loader (spinning circle)
-const loaderSVG = `
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50">
-  <circle cx="25" cy="25" r="20" stroke="#ccc" stroke-width="5" fill="none" stroke-dasharray="31.415, 31.415">
-    <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
-  </circle>
-</svg>
-`;
-const loaderImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(loaderSVG)}`;
-// Inline CSS for loader and image wrapper
-const imageStyles = `
-  .image-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #f0f0f0; /* Light background for loader */
-  }
-
-  .loader {
-    width: 40px;
-    height: 40px;
-    z-index: 1; /* Ensure loader is above background */
-  }
-
-  .image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: opacity 0.3s ease-in-out;
-    z-index: 2; /* Ensure image is above loader */
-  }
-
-  .image-loading {
-    opacity: 0;
-  }
-`;
-function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, style, ...rest }) {
+function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, // Default to false
+style, ...rest }) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
-    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? null : source);
-    const [isInView, setIsInView] = (0, react_1.useState)(!lazy);
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? '' : source); // Start with empty src if lazy
+    const [isInView, setIsInView] = (0, react_1.useState)(!lazy); // Assume visible if not lazy
     const imgRef = (0, react_1.useRef)(null);
+    // Intersection Observer for lazy loading
     (0, react_1.useEffect)(() => {
-        if (!lazy) {
-            setIsInView(true); // Ensure non-lazy images load immediately
+        if (!lazy)
             return;
-        }
+        // Store the current ref value in a variable
         const currentImgRef = imgRef.current;
         if (!currentImgRef)
             return;
@@ -78,12 +41,12 @@ function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     setIsInView(true);
-                    observer.unobserve(entry.target);
+                    observer.unobserve(entry.target); // Stop observing once the image is in view
                 }
             });
         }, {
             rootMargin: '0px',
-            threshold: 0.1,
+            threshold: 0.1, // Trigger when 10% of the image is visible
         });
         observer.observe(currentImgRef);
         return () => {
@@ -92,6 +55,7 @@ function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className
             }
         };
     }, [lazy]);
+    // Load image when in view
     (0, react_1.useEffect)(() => {
         if (!isInView)
             return;
@@ -112,30 +76,30 @@ function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
                 };
                 img.onerror = () => {
-                    setImgSrc(fallbackImageURL);
+                    setImgSrc(fallbackImageURL); // Set fallback SVG on error
                     setIsLoading(false);
                     onError === null || onError === void 0 ? void 0 : onError();
                 };
             }
             catch (error) {
-                setImgSrc(fallbackImageURL);
+                setImgSrc(fallbackImageURL); // Set fallback SVG on error
                 setIsLoading(false);
                 onError === null || onError === void 0 ? void 0 : onError();
             }
         };
         loadImage();
     }, [source, sourceSet, crossOrigin, onLoad, onError, isInView]);
+    // Combine styles for rounded corners
     const combinedStyle = {
         ...(rounded ? { borderRadius: 'var(--p-border-radius-3)' } : {}),
         ...style,
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: imageStyles }), (0, jsx_runtime_1.jsxs)("div", { style: combinedStyle, className: `image-wrapper ${className || ''}`, children: [isLoading && ((0, jsx_runtime_1.jsx)("img", { src: loaderImageURL, alt: 'Loading', className: 'loader', "aria-hidden": 'true' })), (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc !== null && imgSrc !== void 0 ? imgSrc : undefined, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: `image ${isLoading ? 'image-loading' : ''}`, loading: lazy ? 'lazy' : 'eager', onLoad: () => {
-                            setIsLoading(false); // Ensure isLoading is false on direct load
-                            onLoad === null || onLoad === void 0 ? void 0 : onLoad();
-                        }, onError: (e) => {
-                            e.currentTarget.src = fallbackImageURL;
-                            setIsLoading(false);
-                            onError === null || onError === void 0 ? void 0 : onError();
-                        } })] })] }));
+    return (
+    // eslint-disable-next-line @next/next/no-img-element
+    (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc, style: combinedStyle, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: className, loading: lazy ? 'lazy' : 'eager', onError: (e) => {
+            e.currentTarget.src = fallbackImageURL; // Set fallback SVG on error
+            setIsLoading(false);
+            onError === null || onError === void 0 ? void 0 : onError();
+        } }));
 }
 exports.Image = Image;