@macive/ui 0.0.18 → 0.0.21

package/dist/src/components/ActionList/components/Section/Section.js

@@ -16,7 +16,9 @@ function Section({ section, hasMultipleSections, isFirst, actionRole, onActionAn
             }
         };
     };
-    const actionMarkup = section.items.map(({ content, helpText, onAction, ...item }, index) => {
+    //@ts-expect-error key prop
+    const actionMarkup = section.items.map(({ content, helpText, onAction, key, ...item }, index) => {
+        // Explicitly exclude `key` from being spread into Item
         return ((0, jsx_runtime_1.jsx)("li", { role: actionRole === 'menuitem' ? 'presentation' : undefined, children: (0, jsx_runtime_1.jsx)(Item_1.Item, { content: content, helpText: helpText, role: actionRole, onAction: handleAction(onAction), ...item }) }, `${content}-${index}`));
     });
     let titleMarkup = null;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = exports.fallbackImageSVG = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @next/next/no-img-element */
 const react_1 = require("react");
 exports.fallbackImageSVG = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#ccc">
@@ -47,16 +46,15 @@ const imageStyles = `
   .loader {
     width: 40px;
     height: 40px;
+    z-index: 1; /* Ensure loader is above background */
   }
 
   .image {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
     transition: opacity 0.3s ease-in-out;
+    z-index: 2; /* Ensure image is above loader */
   }
 
   .image-loading {
@@ -69,8 +67,10 @@ function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className
     const [isInView, setIsInView] = (0, react_1.useState)(!lazy);
     const imgRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        if (!lazy)
+        if (!lazy) {
+            setIsInView(true); // Ensure non-lazy images load immediately
             return;
+        }
         const currentImgRef = imgRef.current;
         if (!currentImgRef)
             return;
@@ -129,7 +129,10 @@ function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className
         ...(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' }), (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', onError: (e) => {
+    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();