@macive/ui 0.0.13 → 0.0.14

package/dist/src/components/Stack/Stack-old.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const Stack_classnames_1 = __importDefault(require("./Stack.classnames"));
+const Stack = ({ direction = 'vertical', spacing = 'base', wrap = false, alignment = 'stretch', distribution = 'start', children, className = '', }) => {
+    const stackClasses = (0, classnames_1.default)(Stack_classnames_1.default.stack, Stack_classnames_1.default[`stack-${direction}`], Stack_classnames_1.default[`stack-spacing-${spacing}`], wrap && Stack_classnames_1.default['stack-wrap'], Stack_classnames_1.default[`stack-alignment-${alignment}`], Stack_classnames_1.default[`stack-distribution-${distribution}`], className);
+    return (0, jsx_runtime_1.jsx)("div", { className: stackClasses, children: children });
+};
+exports.Stack = Stack;
+Stack.displayName = 'Stack';
+// Stack.Item Component
+Stack.Item = ({ fill = false, className = '', children }) => {
+    const itemClasses = (0, classnames_1.default)(Stack_classnames_1.default.stackItem, fill && Stack_classnames_1.default.fill, className);
+    return (0, jsx_runtime_1.jsx)("div", { className: itemClasses, children: children });
+};
+Stack.Item.displayName = 'Stack';

package/dist/src/components/Stack/Stack.classnames.js

@@ -2,24 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const StackClassnames = {
     "stack": "Stack-stack",
-    "stack-horizontal": "Stack-horizontal",
-    "stack-vertical": "Stack-vertical",
-    "stack-wrap": "Stack-wrap",
-    "stack-spacing-extraTight": "Stack-spacing-extraTight",
-    "stack-spacing-tight": "Stack-spacing-tight",
-    "stack-spacing-base": "Stack-spacing-base",
-    "stack-spacing-loose": "Stack-spacing-loose",
-    "stack-spacing-extraLoose": "Stack-spacing-extraLoose",
-    "stack-alignment-start": "Stack-alignment-start",
-    "stack-alignment-center": "Stack-alignment-center",
-    "stack-alignment-end": "Stack-alignment-end",
-    "stack-alignment-baseline": "Stack-alignment-baseline",
-    "stack-alignment-stretch": "Stack-alignment-stretch",
-    "stack-distribution-start": "Stack-distribution-start",
-    "stack-distribution-center": "Stack-distribution-center",
-    "stack-distribution-end": "Stack-distribution-end",
-    "stack-distribution-spaceAround": "Stack-distribution-spaceAround",
-    "stack-distribution-spaceBetween": "Stack-distribution-spaceBetween",
+    "stack-horizontal": "Stack-stack-horizontal",
+    "stack-vertical": "Stack-stack-vertical",
+    "stack-wrap": "Stack-stack-wrap",
+    "stack-spacing-extraTight": "Stack-stack-spacing-extraTight",
+    "stack-spacing-tight": "Stack-stack-spacing-tight",
+    "stack-spacing-base": "Stack-stack-spacing-base",
+    "stack-spacing-loose": "Stack-stack-spacing-loose",
+    "stack-spacing-extraLoose": "Stack-stack-spacing-extraLoose",
+    "stack-alignment-start": "Stack-stack-alignment-start",
+    "stack-alignment-center": "Stack-stack-alignment-center",
+    "stack-alignment-end": "Stack-stack-alignment-end",
+    "stack-alignment-baseline": "Stack-stack-alignment-baseline",
+    "stack-alignment-stretch": "Stack-stack-alignment-stretch",
+    "stack-distribution-start": "Stack-stack-distribution-start",
+    "stack-distribution-center": "Stack-stack-distribution-center",
+    "stack-distribution-end": "Stack-stack-distribution-end",
+    "stack-distribution-spaceAround": "Stack-stack-distribution-spaceAround",
+    "stack-distribution-spaceBetween": "Stack-stack-distribution-spaceBetween",
     "stackItem": "Stack-stackItem",
     "fill": "Stack-fill"
 };

package/dist/src/components/Stack/Stack.js

@@ -1,21 +1,49 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const Stack_classnames_1 = __importDefault(require("./Stack.classnames"));
-const Stack = ({ direction = 'vertical', spacing = 'base', wrap = false, alignment = 'stretch', distribution = 'start', children, className = '', }) => {
-    const stackClasses = (0, classnames_1.default)(Stack_classnames_1.default.stack, Stack_classnames_1.default[`stack-${direction}`], Stack_classnames_1.default[`stack-spacing-${spacing}`], wrap && Stack_classnames_1.default['stack-wrap'], Stack_classnames_1.default[`stack-alignment-${alignment}`], Stack_classnames_1.default[`stack-distribution-${distribution}`], className);
-    return (0, jsx_runtime_1.jsx)("div", { className: stackClasses, children: children });
+const HorizontalStack_1 = require("../HorizontalStack");
+const VerticalStack_1 = require("../VerticalStack");
+/**
+ * A flexible layout component that arranges its children in a horizontal or vertical stack.
+ *
+ * @example
+ * ```tsx
+ * // Horizontal stack
+ * <Stack horizontal gap="2" align="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Stack>
+ *
+ * // Vertical stack
+ * <Stack vertical gap="3" align="start">
+ *   <div>Item A</div>
+ *   <div>Item B</div>
+ *   <div>Item C</div>
+ * </Stack>
+ * ```
+ */
+const Stack = ({ horizontal, vertical, children, align, blockAlign, inlineAlign, gap, wrap = true, width, height, as = 'div', id, reverseOrder = false, breakpoints, spacer, spacing, ...restProps }) => {
+    // Throw an error if both horizontal and vertical are specified
+    if (horizontal !== undefined && vertical !== undefined) {
+        throw new Error('You cannot specify both `horizontal` and `vertical` props. Use only one.');
+    }
+    // Determine the direction based on the props
+    const isHorizontal = horizontal !== null && horizontal !== void 0 ? horizontal : !vertical;
+    // Map spacing values to SpaceScale tokens
+    const spacingToGapMap = {
+        none: '0',
+        extraTight: '1',
+        tight: '2',
+        base: '3',
+        loose: '4',
+        extraLoose: '5', // Extra loose spacing
+    };
+    const resolvedGap = spacing ? spacingToGapMap[spacing] : gap;
+    if (isHorizontal) {
+        return ((0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { align: align, blockAlign: blockAlign, gap: resolvedGap, wrap: wrap, width: width, height: height, ...restProps, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { as: as, align: align, inlineAlign: inlineAlign, gap: resolvedGap, id: id, height: height, width: width, reverseOrder: reverseOrder, breakpoints: breakpoints, spacer: spacer, ...restProps, children: children }));
 };
 exports.Stack = Stack;
-Stack.displayName = 'Stack';
-// Stack.Item Component
-Stack.Item = ({ fill = false, className = '', children }) => {
-    const itemClasses = (0, classnames_1.default)(Stack_classnames_1.default.stackItem, fill && Stack_classnames_1.default.fill, className);
-    return (0, jsx_runtime_1.jsx)("div", { className: itemClasses, children: children });
-};
-Stack.Item.displayName = 'Stack';

package/dist/src/components/Switch/Switch.classnames.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const SwitchClassnames = {
-    "switch-checkbox": "Switch-checkbox",
-    "switch-label": "Switch-label",
-    "switch-button": "Switch-button",
-    "error-message": "Switch-message"
+    "switch-checkbox": "Switch-switch-checkbox",
+    "switch-label": "Switch-switch-label",
+    "switch-button": "Switch-switch-button",
+    "error-message": "Switch-error-message"
 };
 exports.default = SwitchClassnames;

package/dist/src/components/Tabs/Tabs.classnames.js

@@ -8,13 +8,13 @@ const TabsClassnames = {
     "Title": "Tabs-Title",
     "fillSpace": "Tabs-fillSpace",
     "Tab": "Tabs-Tab",
-    "Tab-selected": "Tabs-selected",
+    "Tab-selected": "Tabs-Tab-selected",
     "titleWithIcon": "Tabs-titleWithIcon",
     "Panel": "Tabs-Panel",
-    "Panel-hidden": "Tabs-hidden",
+    "Panel-hidden": "Tabs-Panel-hidden",
     "Item": "Tabs-Item",
     "DisclosureTab": "Tabs-DisclosureTab",
-    "DisclosureTab-visible": "Tabs-visible",
+    "DisclosureTab-visible": "Tabs-DisclosureTab-visible",
     "DisclosureActivator": "Tabs-DisclosureActivator",
     "TabMeasurer": "Tabs-TabMeasurer"
 };

package/dist/src/components/Tag/Tag.js

@@ -25,7 +25,7 @@ function Tag({ children, disabled = false, onClick, onRemove, accessibilityLabel
     const ariaLabel = i18n.translate('Macive.Tag.ariaLabel', {
         children: tagTitle || '',
     });
-    const removeButton = onRemove ? ((0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": ariaLabel, className: (0, css_1.classNames)(Tag_classnames_1.default.Button, segmented && Tag_classnames_1.default.segmented), onClick: onRemove, onMouseUp: focus_1.handleMouseUpByBlurring, disabled: disabled, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaClose }) })) : null;
+    const removeButton = onRemove ? ((0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": ariaLabel, className: (0, css_1.classNames)(Tag_classnames_1.default.Button, segmented && Tag_classnames_1.default.segmented), onClick: onRemove, onMouseUp: focus_1.handleMouseUpByBlurring, disabled: disabled, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'subdued', source: Icons_1.MaClose }) })) : null;
     const tagContent = url && !disabled ? ((0, jsx_runtime_1.jsx)("a", { className: (0, css_1.classNames)(Tag_classnames_1.default.Link, segmented && Tag_classnames_1.default.segmented), href: url, children: (0, jsx_runtime_1.jsx)("span", { title: tagTitle, className: Tag_classnames_1.default.LinkText, children: children }) })) : ((0, jsx_runtime_1.jsx)("span", { title: tagTitle, className: Tag_classnames_1.default.TagText, children: children }));
     return ((0, jsx_runtime_1.jsxs)("span", { className: className, children: [tagContent, removeButton] }));
 }

package/dist/src/components/Text/Text.classnames.js

@@ -18,7 +18,7 @@ const TextClassnames = {
     "accent": "Text-accent",
     "muted": "Text-muted",
     "subdued": "Text-subdued",
-    "text-inverse": "Text-inverse",
+    "text-inverse": "Text-text-inverse",
     "heading": "Text-heading",
     "bodyXs": "Text-bodyXs",
     "tiny": "Text-tiny",
@@ -44,9 +44,9 @@ const TextClassnames = {
     "disabled": "Text-disabled",
     "caution": "Text-caution",
     "magic": "Text-magic",
-    "magic-subdued": "Text-subdued",
-    "text-inverse-secondary": "Text-inverse-secondary",
-    "line-through": "Text-through",
-    "clamp-text": "Text-text"
+    "magic-subdued": "Text-magic-subdued",
+    "text-inverse-secondary": "Text-text-inverse-secondary",
+    "line-through": "Text-line-through",
+    "clamp-text": "Text-clamp-text"
 };
 exports.default = TextClassnames;

package/dist/src/components/TextField/TextField.classnames.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const TextFieldClassnames = {
-    "Backdrop-connectedLeft": "TextField-connectedLeft",
-    "Backdrop-connectedRight": "TextField-connectedRight",
+    "Backdrop-connectedLeft": "TextField-Backdrop-connectedLeft",
+    "Backdrop-connectedRight": "TextField-Backdrop-connectedRight",
     "TextField": "TextField-TextField",
     "ClearButton": "TextField-ClearButton",
     "multiline": "TextField-multiline",
@@ -17,11 +17,11 @@ const TextFieldClassnames = {
     "Prefix": "TextField-Prefix",
     "suggestion": "TextField-suggestion",
     "borderless": "TextField-borderless",
-    "Input-hasClearButton": "TextField-hasClearButton",
-    "Input-suffixed": "TextField-suffixed",
-    "Input-alignRight": "TextField-alignRight",
-    "Input-alignLeft": "TextField-alignLeft",
-    "Input-alignCenter": "TextField-alignCenter",
+    "Input-hasClearButton": "TextField-Input-hasClearButton",
+    "Input-suffixed": "TextField-Input-suffixed",
+    "Input-alignRight": "TextField-Input-alignRight",
+    "Input-alignLeft": "TextField-Input-alignLeft",
+    "Input-alignCenter": "TextField-Input-alignCenter",
     "Suffix": "TextField-Suffix",
     "CharacterCount": "TextField-CharacterCount",
     "AlignFieldBottom": "TextField-AlignFieldBottom",

package/dist/src/components/TextField/components/Spinner/Spinner.js

@@ -20,5 +20,5 @@ exports.Spinner = react_1.default.forwardRef(function Spinner({ onChange, onClic
             onMouseDown(onChange);
         };
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: TextField_classnames_1.default.Spinner, onClick: onClick, "aria-hidden": true, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(1), onMouseDown: handleMouseDown(handleStep(1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaMinus }) }) }), (0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(-1), onMouseDown: handleMouseDown(handleStep(-1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaRight }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: TextField_classnames_1.default.Spinner, onClick: onClick, "aria-hidden": true, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(1), onMouseDown: handleMouseDown(handleStep(1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, source: Icons_1.MaPlus }) }) }), (0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(-1), onMouseDown: handleMouseDown(handleStep(-1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, source: Icons_1.MaMinus }) }) })] }));
 });

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const FileViewerClassnames = {
+    "file-viewer-img": "FileViewer-file-viewer-img",
+    "unaccepted": "FileViewer-unaccepted",
+    "disabled": "FileViewer-disabled",
+    "file-container": "FileViewer-file-container",
+    "file-type-display": "FileViewer-file-type-display",
+    "file-type-title": "FileViewer-file-type-title"
+};
+exports.default = FileViewerClassnames;

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

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileViewer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,17 +9,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../../../utils");
 const Image_1 = require("../../../Image");
+const FileViewer_classnames_1 = __importDefault(require("./FileViewer.classnames"));
 const VideoPlayer_1 = require("./VideoPlayer");
 const FileViewer = (props) => {
     const [imageSource, setImageSource] = (0, react_1.useState)();
     const { file, disabled, previewable, legacyImage, unAcceptedType, className } = props;
     const { type: fileType } = file || {};
     if (fileType === 'image') {
-        const handleError = () => {
-            const fallbackImageSource = `data:image/svg+xml;base64,${btoa(Image_1.fallbackImageSVG)}`;
-            setImageSource(fallbackImageSource);
-        };
-        return ((0, jsx_runtime_1.jsx)("img", { onError: handleError, src: (file === null || file === void 0 ? void 0 : file.src) || imageSource || baseImage, alt: 'image', className: (0, utils_1.cn)('dabsolute h-full min-h-[150px] w-full  object-contain', unAcceptedType && 'opacity-10', disabled && 'opacity-95 ', className) }));
+        return ((0, jsx_runtime_1.jsx)(Image_1.Image, { source: (file === null || file === void 0 ? void 0 : file.src) || imageSource || baseImage, alt: 'image', rounded: true, className: (0, utils_1.cn)(FileViewer_classnames_1.default['file-viewer-img'], unAcceptedType && FileViewer_classnames_1.default.unaccepted, disabled && FileViewer_classnames_1.default.disabled, className) }));
     }
     if (fileType === 'video') {
         return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, { file: file, disabled: unAcceptedType });
@@ -30,17 +30,13 @@ const FileViewer = (props) => {
     return ((0, jsx_runtime_1.jsx)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: "media" }));
 };
 exports.FileViewer = FileViewer;
-const FileContainer = ({ children }) => {
-    const rootClassName = '';
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full w-full', rootClassName), children: children });
-};
 const FileTypeDisplayTitle = ({ file, children }) => {
     function truncateString(str = 'file') {
         return str.length > 9 ? str.substring(0, 1) + '...' + str.substring(str.length - 10) : str;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'line-clamp-1 absolute bottom-0', children: [' ', children ? children : `${truncateString(file === null || file === void 0 ? void 0 : file.fileName)} `, ' '] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: FileViewer_classnames_1.default['file-type-title'], children: children || truncateString(file === null || file === void 0 ? void 0 : file.fileName) }));
 };
 const FileTypeDisplay = ({ disabled, file, children, className }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('relative flex h-full w-full items-center justify-center rounded bg-gray-800 text-white', disabled && '!text-red-400 opacity-40', className), children: children ? children : `${file === null || file === void 0 ? void 0 : file.extension} File` }));
+    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` }));
 };
 const baseImage = 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZWFlNmU2IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3Ryb2tlPSIjZWFlNmU2Ij4KICA8cGF0aCBkPSJNMzAgMy40MTQxTDI4LjU4NTkgMiAyIDI4LjU4NTkgMy40MTQxIDMwbDItMkgyNmEyLjAwMjcgMi4wMDI3IDAgMCAwIDItMlY1LjQxNDFaTTI2IDI2SDcuNDE0MWw3Ljc5MjktNy43OTMgMi4zNzg4IDIuMzc4N2EyIDIgMCAwIDAgMi44Mjg0IDBMMjIgMTlsNCAzLjk5NzNaTTI2IDIwLjE2ODJsLTIuNTg1OC0yLjU4NTlhMiAyIDAgMCAwLTIuODI4NCAwTDE5IDE5LjE2ODJsLTIuMzc3LTIuMzc3MUwyNiA3LjQxNDFaIi8+CiAgPHBhdGggZD0iTTYgMjJWMTlsNS00Ljk5NjYgMS4zNzMzIDEuMzczMyAxLjQxNTktMS40MTYtMS4zNzUtMS4zNzVhMiAyIDAgMCAwLTIuODI4NCAwTDYgMTYuMTcxNlY2SDIyVjRINkEyLjAwMiAyLjAwMiAwIDAgMCA0IDZWMjJaIi8+Cjwvc3ZnPgo=';

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

@@ -17,6 +17,7 @@ const TextField_1 = require("../../../TextField");
 const VerticalStack_1 = require("../../../VerticalStack");
 const UploadProvider_1 = require("../UploadProvider");
 const AddFromUrlButton_1 = __importDefault(require("./AddFromUrlButton"));
+const UploadModalContainer_classnames_1 = __importDefault(require("./UploadModalContainer.classnames"));
 function UploadFilterSection({ refetch, openSelectedPanel }) {
     var _a, _b, _c, _d;
     const { uploaderProps, selectedAttachments, setSelectedAttachments } = (0, UploadProvider_1.useUpload)();
@@ -83,19 +84,19 @@ function UploadFilterSection({ refetch, openSelectedPanel }) {
             sortBy: 'NEWEST',
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: sortModalActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => toggleSortModalActive(), icon: Icons_1.MasortArrow }), autofocusTarget: 'first-node', onClose: toggleSortModalActive, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { actionRole: 'menuitem', items: sortOptions.map(({ label, value }) => ({
-                        content: label,
-                        onAction() {
-                            refetch({
-                                sortBy: value,
-                            });
-                        },
-                    })) }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: formatModalActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleSetFormatModalActive, icon: Icons_1.MaSettingConfig }), autofocusTarget: 'first-node', onClose: toggleSetFormatModalActive, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: '2', children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: "Format" }), (0, jsx_runtime_1.jsx)("select", { onChange: handleUploadFormat, children: formatOptions.map(({ label, value }) => ((0, jsx_runtime_1.jsx)("option", { value: value, children: label }, value))) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: "Extension" }), (0, jsx_runtime_1.jsx)("select", { onChange: handleUploadType, children: Object.keys(exports.UploadExtensionIndexed).map((key) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: exports.UploadExtensionIndexed[key] }, key))) })] }) }) }), (0, jsx_runtime_1.jsx)(AddFromUrlButton_1.default, { title: 'Upload from Url', nextAction: refetchNewUploads }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: true, labelHidden: true, clearButton: !!searchTerm, onClearButtonClick: handleClearSearch, onChange: (keyword) => handleSearch(keyword), value: searchTerm, autoComplete: 'off' }), (0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '2', children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'none',
-                                visibility: 'hidden',
-                            }, children: ((_a = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsxs)(Button_1.Button, { size: 'slim', destructive: true, onClick: () => {
-                                    setSelectedAttachments({ [uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]: [] });
-                                }, children: ["clear (", String((_b = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _b === void 0 ? void 0 : _b.length), ")"] })) : ('') }), (0, jsx_runtime_1.jsx)("div", { onClick: openSelectedPanel, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: Icons_1.MaHourGlassFull, children: String((_d = (_c = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) }) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: UploadModalContainer_classnames_1.default['upload-filter-section'], children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '2', wrap: false, children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: sortModalActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => toggleSortModalActive(), icon: Icons_1.MasortArrow }), autofocusTarget: 'first-node', onClose: toggleSortModalActive, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { actionRole: 'menuitem', items: sortOptions.map(({ label, value }) => ({
+                                    content: label,
+                                    onAction() {
+                                        refetch({
+                                            sortBy: value,
+                                        });
+                                    },
+                                })) }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: formatModalActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleSetFormatModalActive, icon: Icons_1.MaSettingConfig }), autofocusTarget: 'first-node', onClose: toggleSetFormatModalActive, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: '2', children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: "Format" }), (0, jsx_runtime_1.jsx)("select", { onChange: handleUploadFormat, children: formatOptions.map(({ label, value }) => ((0, jsx_runtime_1.jsx)("option", { value: value, children: label }, value))) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: "Extension" }), (0, jsx_runtime_1.jsx)("select", { onChange: handleUploadType, children: Object.keys(exports.UploadExtensionIndexed).map((key) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: exports.UploadExtensionIndexed[key] }, key))) })] }) }) }), (0, jsx_runtime_1.jsx)(AddFromUrlButton_1.default, { title: 'Upload from Url', nextAction: refetchNewUploads })] }) }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: true, labelHidden: true, clearButton: !!searchTerm, onClearButtonClick: handleClearSearch, onChange: (keyword) => handleSearch(keyword), value: searchTerm, autoComplete: 'off', placeholder: 'Search files ...' }), (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '2', children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'none',
+                            visibility: 'hidden',
+                        }, children: ((_a = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsxs)(Button_1.Button, { size: 'slim', destructive: true, onClick: () => {
+                                setSelectedAttachments({ [uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]: [] });
+                            }, children: ["clear (", String((_b = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _b === void 0 ? void 0 : _b.length), ")"] })) : ('') }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: Icons_1.MaHourGlassFull, onClick: openSelectedPanel, plain: true, children: String((_d = (_c = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) })] })] }));
 }
 exports.default = UploadFilterSection;
 var UploadExtension;

package/dist/src/components/Upload/components/Modal/UploadModalContainer.classnames.js

@@ -1,7 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const UploadModalContainerClassnames = {
-    "animate-loading": "UploadModalContainer-loading",
-    "animate-bounce": "UploadModalContainer-bounce"
+    "modal-container": "UploadModalContainer-modal-container",
+    "hidable-parent": "UploadModalContainer-hidable-parent",
+    "hidable-parent-display": "UploadModalContainer-hidable-parent-display",
+    "upload-filter-section": "UploadModalContainer-upload-filter-section",
+    "scroll-to-view": "UploadModalContainer-scroll-to-view",
+    "modal-section": "UploadModalContainer-modal-section",
+    "modal-section-header": "UploadModalContainer-modal-section-header",
+    "file-upload-list": "UploadModalContainer-file-upload-list",
+    "file-upload-grid": "UploadModalContainer-file-upload-grid",
+    "selected-panel-file-upload-list": "UploadModalContainer-selected-panel-file-upload-list",
+    "selected-panel-file-upload-grid": "UploadModalContainer-selected-panel-file-upload-grid",
+    "loading-indicator": "UploadModalContainer-loading-indicator",
+    "loading-indicator-text": "UploadModalContainer-loading-indicator-text",
+    "loading-indicator-bar": "UploadModalContainer-loading-indicator-bar",
+    "spinner-container": "UploadModalContainer-spinner-container",
+    "no-files-found": "UploadModalContainer-no-files-found",
+    "pagination-container": "UploadModalContainer-pagination-container",
+    "selected-files-section": "UploadModalContainer-selected-files-section",
+    "selected-files-card": "UploadModalContainer-selected-files-card",
+    "selected-files-text": "UploadModalContainer-selected-files-text",
+    "selected-files-button": "UploadModalContainer-selected-files-button",
+    "animate-loading": "UploadModalContainer-animate-loading",
+    "animate-bounce": "UploadModalContainer-animate-bounce"
 };
 exports.default = UploadModalContainerClassnames;

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

@@ -7,9 +7,9 @@ exports.NetworkStatus = exports.UploadModalContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const device_type_1 = require("../../../../utilities/device-type");
-const utils_1 = require("../../../../utils");
 const Box_1 = require("../../../Box");
 const Button_1 = require("../../../Button");
+const Grid_1 = require("../../../Grid");
 const LegacyCard_1 = require("../../../LegacyCard");
 const Modal_1 = require("../../../Modal");
 const V1_1 = require("../../../Pagination/V1");
@@ -21,13 +21,16 @@ const FileUploadInput_1 = __importDefault(require("../UploaderInput/FileUploadIn
 const UploadProvider_1 = require("../UploadProvider");
 const UploadServiceProvider_1 = require("../UploadServiceProvider");
 const UploadFilterSection_1 = __importDefault(require("./UploadFilterSection"));
+const UploadModalContainer_classnames_1 = __importDefault(require("./UploadModalContainer.classnames"));
 const UploadModalFileItem_1 = __importDefault(require("./UploadModalFileItem"));
 const UploadModalContainer = ({ open, close, audience = 'MERCHANT', title, arrangeType = 'grid', }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b;
     const { setFilesState, uploaderProps, selectedAttachments, updateSelectedAttachments } = (0, UploadProvider_1.useUpload)();
     const modelUploadType = constants_1.UPLOAD_TYPE[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.uploadType];
     const { uploadConfig } = (0, UploadServiceProvider_1.useUploadService)();
     const { isMobile } = (0, device_type_1.useDeviceType)();
+    const chatWindowRef = (0, react_1.useRef)(null);
+    const [showSelectedPanel, setShowSelectedPanel] = (0, react_1.useState)(false);
     const { data, loading, refetch, error, fetchMore, variables, networkStatus } = uploadConfig.getUploads({
         variables: {
             sortBy: 'NEWEST',
@@ -38,95 +41,78 @@ const UploadModalContainer = ({ open, close, audience = 'MERCHANT', title, arran
         fetchPolicy: 'cache-and-network',
         notifyOnNetworkStatusChange: true,
     });
-    const updateUploadsList = async (_newAttachments) => {
-        refetch({ sortBy: 'NEWEST' });
+    const errorMessage = error ? error.message : null;
+    // const uploadsData = data?.uploads?.data || []
+    const paginatorInfo = (_a = data === null || data === void 0 ? void 0 : data.uploads) === null || _a === void 0 ? void 0 : _a.paginatorInfo;
+    const selectedFiles = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey] || [];
+    // Use useMemo to initialize `uploadsData` and ensure uniqueness by `id`
+    const uniqueUploadsData = (0, react_1.useMemo)(() => {
+        var _a;
+        const uploadsData = ((_a = data === null || data === void 0 ? void 0 : data.uploads) === null || _a === void 0 ? void 0 : _a.data) || [];
+        return [...new Map(uploadsData.map((item) => [item.id, item])).values()];
+    }, [(_b = data === null || data === void 0 ? void 0 : data.uploads) === null || _b === void 0 ? void 0 : _b.data]);
+    const updateUploadsList = (0, react_1.useCallback)(async () => {
+        await refetch({ sortBy: 'NEWEST' });
         setFilesState([]);
-    };
-    const chatWindowRef = (0, react_1.useRef)();
-    /**Scroll to the bottom of the chat window when messages change */
-    function scrollToView() {
-        //@ts-expect-error scrollIntoView
-        (chatWindowRef === null || chatWindowRef === void 0 ? void 0 : chatWindowRef.current) && chatWindowRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-    const [showSelectedPanel, setShowSelectedPanel] = (0, react_1.useState)(false);
-    const errorMessage = error ? error === null || error === void 0 ? void 0 : error.message : null;
-    const handleLoadMore = async () => {
-        var _a, _b, _c, _d;
-        if (!((_b = (_a = data === null || data === void 0 ? void 0 : data.uploads) === null || _a === void 0 ? void 0 : _a.paginatorInfo) === null || _b === void 0 ? void 0 : _b.hasMorePages)) {
+    }, [refetch, setFilesState]);
+    const handleLoadMore = (0, react_1.useCallback)(async () => {
+        if (!(paginatorInfo === null || paginatorInfo === void 0 ? void 0 : paginatorInfo.hasMorePages))
             return;
-        }
-        // Get the current page number from the response data
-        const currentPage = (_d = (_c = data === null || data === void 0 ? void 0 : data.uploads) === null || _c === void 0 ? void 0 : _c.paginatorInfo) === null || _d === void 0 ? void 0 : _d.currentPage;
-        // Fetch the next page
-        const nextPage = currentPage + 1;
-        // Fetch the new data for the next page using fetchMore
+        const nextPage = paginatorInfo.currentPage + 1;
         await fetchMore({
             variables: {
                 ...variables,
                 page: nextPage,
             },
-            //@ts-expect-error any
+            //@ts-expect-error error
             updateQuery: (prev, { fetchMoreResult }) => {
                 var _a, _b, _c;
                 if (!fetchMoreResult)
                     return prev;
-                //@ts-expect-error GetCollectionsQuery
-                const updatedData = {
+                return {
                     uploads: {
                         data: [...(((_a = prev === null || prev === void 0 ? void 0 : prev.uploads) === null || _a === void 0 ? void 0 : _a.data) || []), ...(((_b = fetchMoreResult === null || fetchMoreResult === void 0 ? void 0 : fetchMoreResult.uploads) === null || _b === void 0 ? void 0 : _b.data) || [])],
                         paginatorInfo: (_c = fetchMoreResult === null || fetchMoreResult === void 0 ? void 0 : fetchMoreResult.uploads) === null || _c === void 0 ? void 0 : _c.paginatorInfo,
                     },
                 };
-                return updatedData;
             },
         });
+    }, [fetchMore, paginatorInfo, variables]);
+    const scrollToView = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = chatWindowRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, []);
+    const handleFileClick = (0, react_1.useCallback)((file) => {
+        updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
+    }, [updateSelectedAttachments, uploaderProps]);
+    const renderFileItems = (files, isSelectedPanel = false) => {
+        return files.map((file, idx) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: isSelectedPanel ? 'grid' : arrangeType, maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedFiles, file: file, onClick: () => handleFileClick(file) })) }, idx)));
+    };
+    const renderContent = () => {
+        if (showSelectedPanel) {
+            return selectedFiles.length ? ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { columns: { xs: 2, sm: 2, md: 4, lg: 5, xl: 5 }, children: renderFileItems(selectedFiles, true) })) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(LegacyCard_1.LegacyCard.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', gap: { xs: '8' }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "You haven't selected any files." }), (0, jsx_runtime_1.jsx)(Button_1.Button, { primary: true, onClick: () => setShowSelectedPanel(false), children: "Select" })] }) }) }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Grid_1.Grid, { columns: !uniqueUploadsData.length
+                    ? { xs: 3, sm: 3, md: 4, lg: 4, xl: 4 }
+                    : { xs: 3, sm: 3, md: 4, lg: 4, xl: 4 }, children: [(0, jsx_runtime_1.jsx)(FileUploadInput_1.default, { refetch: updateUploadsList, updateUploadsList: updateUploadsList, acceptFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, headerOptions: { uploadType: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.uploadType, modelUploadKey: undefined } }), !!uniqueUploadsData.length && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderFileItems(uniqueUploadsData) })] }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { large: true, fullScreen: true, onScrolledToBottom: () => { var _a, _b; return ((_b = (_a = data === null || data === void 0 ? void 0 : data.uploads) === null || _a === void 0 ? void 0 : _a.paginatorInfo) === null || _b === void 0 ? void 0 : _b.hasMorePages) ? handleLoadMore() : undefined; }, title: title, open: open, onClose: close, secondaryActions: [
+    return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { large: true, fullScreen: true, onScrolledToBottom: (paginatorInfo === null || paginatorInfo === void 0 ? void 0 : paginatorInfo.hasMorePages) ? handleLoadMore : undefined, title: title, open: open, onClose: close, secondaryActions: [
             {
-                content: 'cancel',
+                content: 'Cancel',
                 onAction: close,
             },
         ], primaryAction: {
-            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Done", ((_a = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["(", (_b = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _b === void 0 ? void 0 : _b.length, ")"] })) : null] })),
+            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Done", selectedFiles.length ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["(", selectedFiles.length, ")"] }) : null] })),
             onAction: () => {
                 var _a;
                 (_a = uploaderProps.onSubmit) === null || _a === void 0 ? void 0 : _a.call(uploaderProps);
                 close();
             },
-            disabled: !((_c = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _c === void 0 ? void 0 : _c.length) && !uploaderProps.onSubmit,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                // display: 'flex',
-                height: isMobile ? '80vh' : '70vh',
-                // position: 'relative',
-            }, children: (0, jsx_runtime_1.jsx)(Modal_1.Modal.Section, { children: (0, jsx_runtime_1.jsxs)("div", { className: 'hidable-parent hidable-parent-display  relative w-full  overflow-x-hidden  ', children: [(0, jsx_runtime_1.jsx)("div", { className: '  flex w-full flex-col', children: (0, jsx_runtime_1.jsx)("div", { className: 'z-[999] flex w-full items-center  justify-between space-x-4', children: (0, jsx_runtime_1.jsx)(UploadFilterSection_1.default, { refetch: refetch, openSelectedPanel: showSelectedPanel
-                                        ? () => setShowSelectedPanel(false)
-                                        : () => setShowSelectedPanel(true) }) }) }), (0, jsx_runtime_1.jsx)("div", { id: 'scrollHere', ref: chatWindowRef }), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsxs)("div", { className: 'relative my-1 h-10 bg-blue-400', children: [(0, jsx_runtime_1.jsx)("div", { className: 'absolute top-2 left-1/2  font-semibold', children: "Getting your files ready" }), (0, jsx_runtime_1.jsx)("div", { className: 'animate-loading absolute h-full w-full bg-gradient-to-r from-transparent via-white to-transparent' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 left-0 h-full w-4 animate-bounce bg-white opacity-75' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 right-0 h-full w-4 animate-bounce bg-white opacity-75' })] })), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {})), !showSelectedPanel ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(arrangeType == 'list'
-                                ? 'flex flex-col'
-                                : 'mt-4  grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5'), children: [(0, jsx_runtime_1.jsx)(FileUploadInput_1.default, { refetch: () => refetch({
-                                        sortBy: 'NEWEST',
-                                    }), updateUploadsList: updateUploadsList, acceptFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, headerOptions: {
-                                        uploadType: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.uploadType,
-                                        modelUploadKey: undefined,
-                                    } }), ((_e = (_d = data === null || data === void 0 ? void 0 : data.uploads) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.length) ? ((_g = (_f = data === null || data === void 0 ? void 0 : data.uploads) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.map((file, idx) => {
-                                    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: arrangeType, maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey], file: file, onClick: () => {
-                                                updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
-                                            } })) }, idx));
-                                })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(loading ? 'hidden' : 'flex', 'dtext-2xl items-center justify-center py-6  font-semibold'), children: errorMessage ? errorMessage : ' No files found' }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_h = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _h === void 0 ? void 0 : _h.length) ? ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(arrangeType == 'list'
-                                        ? 'flex flex-col'
-                                        : 'mt-4 grid grid-cols-4 gap-2 md:grid-cols-4'), children: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey].map((file, idx) => {
-                                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: 'grid', maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey], file: file, onClick: () => {
-                                                    updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
-                                                } })) }, idx));
-                                    }) })) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(LegacyCard_1.LegacyCard.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', gap: {
-                                                    xs: '8',
-                                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "You haven't selected any files. " }), (0, jsx_runtime_1.jsx)(Button_1.Button, { primary: true, onClick: () => setShowSelectedPanel(false), children: "Select" })] }) }) }) })), ' '] })), loading && networkStatus === NetworkStatus.fetchMore && ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) }) })), !showSelectedPanel &&
-                            ((_j = data === null || data === void 0 ? void 0 : data.uploads) === null || _j === void 0 ? void 0 : _j.paginatorInfo) &&
-                            (!loading || networkStatus === NetworkStatus.fetchMore) ? ((0, jsx_runtime_1.jsx)(V1_1.PaginationV1, { onChange: (page) => {
-                                refetch({
-                                    page: page,
-                                });
-                                scrollToView();
-                            }, activePage: (_k = data === null || data === void 0 ? void 0 : data.uploads) === null || _k === void 0 ? void 0 : _k.paginatorInfo.currentPage, itemsCountPerPage: (_l = data === null || data === void 0 ? void 0 : data.uploads) === null || _l === void 0 ? void 0 : _l.paginatorInfo.perPage, totalItemsCount: (_m = data === null || data === void 0 ? void 0 : data.uploads) === null || _m === void 0 ? void 0 : _m.paginatorInfo.total, hideNavigation: true, pageRangeDisplayed: 4, hideTotalPages: false })) : ((0, jsx_runtime_1.jsx)("div", {}))] }) }) }) }));
+            disabled: !selectedFiles.length && !uploaderProps.onSubmit,
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: UploadModalContainer_classnames_1.default['modal-container'], children: (0, jsx_runtime_1.jsx)(Modal_1.Modal.Section, { children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalContainer_classnames_1.default['hidable-parent'], children: [(0, jsx_runtime_1.jsx)(UploadFilterSection_1.default, { refetch: refetch, openSelectedPanel: () => setShowSelectedPanel(!showSelectedPanel) }), (0, jsx_runtime_1.jsx)("div", { id: 'scrollHere', ref: chatWindowRef }), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsxs)("div", { className: UploadModalContainer_classnames_1.default['loading-indicator'], children: [(0, jsx_runtime_1.jsx)("div", { className: UploadModalContainer_classnames_1.default['loading-indicator-text'], children: "Getting your files ready" }), (0, jsx_runtime_1.jsx)("div", { className: UploadModalContainer_classnames_1.default['loading-indicator-bar'] })] })), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {})), (0, jsx_runtime_1.jsxs)(Box_1.Box, { paddingBlockStart: '4', children: [renderContent(), loading && networkStatus === NetworkStatus.fetchMore && ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) }) })), !showSelectedPanel && paginatorInfo && !loading && ((0, jsx_runtime_1.jsx)(V1_1.PaginationV1, { onChange: (page) => {
+                                        refetch({ page });
+                                        scrollToView();
+                                    }, activePage: paginatorInfo.currentPage, itemsCountPerPage: paginatorInfo.perPage, totalItemsCount: paginatorInfo.total, hideNavigation: true, pageRangeDisplayed: 4, hideTotalPages: false }))] })] }) }) }) }));
 };
 exports.UploadModalContainer = UploadModalContainer;
 var NetworkStatus;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const UploadModalFileItemClassnames = {
+    "upload-modal-file-item": "UploadModalFileItem-upload-modal-file-item",
+    "file-item-container": "UploadModalFileItem-file-item-container",
+    "fileActionsCard": "UploadModalFileItem-fileActionsCard",
+    "file-actions": "UploadModalFileItem-file-actions",
+    "action-button": "UploadModalFileItem-action-button",
+    "file-checkbox": "UploadModalFileItem-file-checkbox",
+    "checkbox": "UploadModalFileItem-checkbox",
+    "disabled": "UploadModalFileItem-disabled",
+    "checked-overlay": "UploadModalFileItem-checked-overlay",
+    "visible": "UploadModalFileItem-visible"
+};
+exports.default = UploadModalFileItemClassnames;