@macive/ui 0.0.24 → 0.0.26

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

@@ -23,17 +23,16 @@ const errorkSVG = `
 </svg>
 `;
 const fallbackImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(fallbackSVG)}`;
-function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, // Default to false
+function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, // Default to true
 style, ...rest }) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
-    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? '' : source); // Start with empty src if lazy
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? null : source); // Use null instead of '' for lazy loading
     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)
             return;
-        // Store the current ref value in a variable
         const currentImgRef = imgRef.current;
         if (!currentImgRef)
             return;
@@ -96,7 +95,7 @@ style, ...rest }) {
     };
     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) => {
+    (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc !== null && imgSrc !== void 0 ? imgSrc : undefined, 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();

package/dist/src/components/Upload/components/FileViewer/FileViewer.js

@@ -32,13 +32,44 @@ const FileViewer = (props) => {
 };
 exports.FileViewer = FileViewer;
 const FileTypeDisplayTitle = ({ file, children }) => {
-    const truncateString = (str = 'file') => {
-        if (str === null || str === undefined || typeof str !== 'string') {
+    // Extract file name from URL or use provided fileName
+    const getFileName = (file) => {
+        if (!file)
             return 'file';
+        // Use fileName if provided
+        if (file.fileName)
+            return file.fileName;
+        // Extract file name from src URL
+        if (file.src) {
+            try {
+                const url = new URL(file.src);
+                const pathSegments = url.pathname.split('/');
+                const extractedName = pathSegments[pathSegments.length - 1];
+                return extractedName || 'file';
+            }
+            catch {
+                return 'file';
+            }
         }
-        return str.length > 9 ? `${str.substring(0, 1)}...${str.substring(str.length - 10)}` : str;
+        return 'file';
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: FileViewer_classnames_1.default['file-type-title'], children: children !== null && children !== void 0 ? children : truncateString(file === null || file === void 0 ? void 0 : file.fileName) }));
+    const truncateString = (str) => {
+        // If string is empty or not a string, return 'file'
+        if (!str || typeof str !== 'string')
+            return 'file';
+        // Adjust truncation to show more meaningful part of the file name
+        const maxLength = 20; // Increased to show more characters
+        if (str.length <= maxLength)
+            return str;
+        const extension = str.includes('.') ? str.split('.').pop() : '';
+        const nameWithoutExt = str.replace(`.${extension}`, '');
+        const truncatePoint = maxLength - (extension ? extension.length + 1 : 0) - 3; // Account for '...' and extension
+        if (truncatePoint <= 0)
+            return str; // Avoid negative or zero truncation point
+        return `${nameWithoutExt.substring(0, truncatePoint)}...${extension ? `.${extension}` : ''}`;
+    };
+    const displayName = truncateString(getFileName(file));
+    return (0, jsx_runtime_1.jsx)("div", { className: FileViewer_classnames_1.default['file-type-title'], children: children !== null && children !== void 0 ? children : displayName });
 };
 const FileTypeDisplay = ({ disabled, file, children, className }) => {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(FileViewer_classnames_1.default['file-type-display'], disabled && FileViewer_classnames_1.default.disabled, className), children: children || `${file === null || file === void 0 ? void 0 : file.extension} File` }));

package/dist/src/components/Upload/components/Modal/UploadModalFileItem.js

@@ -36,7 +36,7 @@ const UploadModalFileItem = ({ selectedAttachments = [], file, onClick, allowedF
             setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaError }));
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '3', borderWidth: '1', borderBlockEndWidth: '5', borderColor: 'border', children: (0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default['upload-modal-file-item'], children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-item-container'], onClick: !disabled ? onClick : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default.fileActionsCard, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '2', padding: '1', children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-actions'], children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => handleCopyClick(file.url), icon: icon }), (0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => window.open(file.url, '_blank'), icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEyes }) })] }), (0, jsx_runtime_1.jsx)(FileCheckbox, { checked: isSelected, disabled: disabled })] }) }) }) }), (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: file, disabled: disabled, unAcceptedType: unAcceptedType }), (0, jsx_runtime_1.jsx)(CheckedOverlay, { checked: isSelected, checkedNumber: checkedNumber, maxAttachments: maxAttachments })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '3', borderWidth: '1', borderBlockEndWidth: '5', borderColor: 'border', children: (0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default['upload-modal-file-item'], style: { height: '100%' }, children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-item-container'], style: { height: '100%' }, onClick: !disabled ? onClick : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default.fileActionsCard, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '2', padding: '1', children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-actions'], children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => handleCopyClick(file.url), icon: icon }), (0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => window.open(file.url, '_blank'), icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEyes }) })] }), (0, jsx_runtime_1.jsx)(FileCheckbox, { checked: isSelected, disabled: disabled })] }) }) }) }), (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: file, disabled: disabled, unAcceptedType: unAcceptedType }), (0, jsx_runtime_1.jsx)(CheckedOverlay, { checked: isSelected, checkedNumber: checkedNumber, maxAttachments: maxAttachments })] }) }) }));
 };
 const ActionButton = ({ onClick, icon }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, size: 'slim', monochrome: true, icon: icon, onClick: onClick }));
 const FileCheckbox = ({ checked, disabled }) => ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: 'checkbox', labelHidden: true, checked: checked, readOnly: true, disabled: disabled }));