@appquality/unguess-design-system 3.1.84-beta-attachments → 3.1.85-beta-attachments

package/build/index.js

@@ -2316,6 +2316,7 @@ const ChatContext = React.createContext(null);
 const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, children, }) => {
     const [editor, setEditor] = React.useState();
     const [thumbnails, setThumbnails] = React.useState([]);
+    //const [isMediaUploading, setIsMediaUploading] = useState<boolean>(false);
     const getMentions = (editor) => {
         const result = [];
         editor.state.doc.descendants((node) => {
@@ -2335,9 +2336,22 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
         editor,
         setEditor,
         thumbnails,
-        addThumbnails: ({ files }) => {
+        setMediaStatus: (files, index) => {
+            files[index].isLoadingMedia = false;
+        },
+        //isMediaUploading, // Incluso nel valore del contesto
+        //setIsMediaUploading, // Incluso nel valore del contesto
+        addThumbnails: ({ files, }) => {
             onFileUpload && onFileUpload(files);
+            /* const media = files.map((file) => ({
+                ...file,
+                isLoadingMedia: false,
+              }));
+              media[0].isLoadingMedia = false;*/
+            //setIsMediaUploading(true);
+            files.forEach((file) => (file.isLoadingMedia = true));
             setThumbnails((prev) => [...prev, ...files]);
+            //setIsMediaUploading(false);
         },
         removeThumbnail: (index) => setThumbnails(thumbnails.filter((_, i) => i !== index)),
         triggerSave: () => {
@@ -2356,7 +2370,10 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
         thumbnails,
         setThumbnails,
         onFileUpload,
+        //setIsMediaUploading,
+        //isMediaUploading,
     ]);
+    console.log("thumbnails: ", thumbnails);
     return (jsxRuntime.jsx(ChatContext.Provider, Object.assign({ value: chatContextValue }, { children: children })));
 };
 const useChatContext = () => {
@@ -2981,7 +2998,9 @@ const CommentBar = ({ editor, i18n, }) => {
                 fileInput.onchange = () => {
                     const files = fileInput.files;
                     if (files) {
-                        const mediaFiles = Array.from(files);
+                        const mediaFiles = Array.from(files).map((file) => {
+                            return Object.assign(file, { isLoadingMedia: false });
+                        });
                         if (mediaFiles.length === 0)
                             return;
                         addThumbnails({ files: mediaFiles });
@@ -3261,6 +3280,19 @@ const DeleteThumbnailX = ({ content, deleteThumbnail }) => {
     return (jsxRuntime.jsx(StyledDeleteThumbnailX, Object.assign({ className: "deleteThumbnail", onClick: (e) => deleteThumbnail(e) }, { children: jsxRuntime.jsx("span", { children: content }) })));
 };
 
+var _path$n;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+const SvgPlayFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M6 15.79c-.13 0-.26-.03-.38-.08a.977.977 0 01-.62-.92V1.21a1 1 0 01.62-.93C6 .12 6.42.21 6.71.5l6.44 6.44c.58.58.58 1.54 0 2.12L6.71 15.5c-.19.19-.45.29-.71.29z"
+})));
+
 const StyledThumbnail = styled__default["default"].div `
   border-radius: 4%;
   height: 90px;
@@ -3284,13 +3316,29 @@ const StyledThumbnail = styled__default["default"].div `
     font-weight: 100;
   }
 `;
-const Thumbnail = ({ clickThumbnail, src, label, index = 0, removeThumbnail, showX = true, showLabel = false, mediaType, }) => {
+const Thumbnail = ({ clickThumbnail, src, label, index = 0, removeThumbnail, showX = true, showLabel = false, mediaType, isLoadingMedia = false, }) => {
+    //const { isMediaUploading, setIsMediaUploading } = useChatContext();
     const handleCancel = (e) => {
         e.stopPropagation();
         if (removeThumbnail)
             removeThumbnail(index);
     };
-    return (jsxRuntime.jsxs(StyledThumbnail, Object.assign({ className: "singleThumbnail", onClick: clickThumbnail }, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { content: "╳", deleteThumbnail: (e) => handleCancel(e) })), mediaType.includes("image") && jsxRuntime.jsx("img", { src: src, alt: label }), mediaType.includes("video") && (jsxRuntime.jsx("video", Object.assign({ width: "80", height: "89" }, { children: jsxRuntime.jsx("source", { src: src, type: "video/mp4" }) }))), showLabel && jsxRuntime.jsx("span", Object.assign({ className: "thumbnailLabel" }, { children: label }))] })));
+    return (jsxRuntime.jsxs(StyledThumbnail, Object.assign({ className: "singleThumbnail", onClick: clickThumbnail }, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { content: "╳", deleteThumbnail: (e) => handleCancel(e) })), isLoadingMedia && (jsxRuntime.jsx(reactLoaders.Spinner, { style: { position: "absolute", top: "39%", left: "37%" }, size: "large" })), !isLoadingMedia && mediaType.includes("image") && (jsxRuntime.jsx("img", { src: src, alt: label })), !isLoadingMedia && mediaType.includes("video") && (jsxRuntime.jsxs("span", Object.assign({ style: {
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "gray",
+                    zIndex: "-1",
+                    opacity: "0.5",
+                    color: "black",
+                } }, { children: [jsxRuntime.jsx(SvgPlayFill, { style: {
+                            position: "absolute",
+                            top: "35%",
+                            left: "35%",
+                            width: "30px",
+                            height: "30px",
+                            backgroundColor: "white",
+                            borderRadius: "50%",
+                        } }), jsxRuntime.jsx("video", Object.assign({ width: "80", height: "89" }, { children: jsxRuntime.jsx("source", { src: src, type: "video/mp4" }) }))] }))), showLabel && jsxRuntime.jsx("span", Object.assign({ className: "thumbnailLabel" }, { children: label }))] })));
 };
 
 const StyledThumbnailContainer$1 = styled.styled.div `
@@ -3313,8 +3361,27 @@ const ThumbnailContainer = ({ openLightbox }) => {
     if (!thumbnails || thumbnails.length === 0) {
         return null;
     }
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledThumbnailContainer$1, Object.assign({ className: "thumbnailContainer" }, { children: thumbnails.map((file, index) => (jsxRuntime.jsx(Thumbnail, { src: URL.createObjectURL(file), label: file.name, index: index, showX: true, showLabel: false, mediaType: file.type, removeThumbnail: () => removeThumbnail(index), clickThumbnail: () => {
-                    openLightbox(file, index);
+    /* const mediaFiles: File[] = thumbnails.map((file) => {
+      // Crea un nuovo oggetto File senza la proprietà isLoadingMedia
+      const blob = new Blob([file], { type: file.type });
+  
+      // Creiamo un nuovo File utilizzando il Blob e mantenendo il nome del file originale
+      const nf = new File([blob], file.name, { type: file.type });
+  
+      return nf;
+    });*/
+    const mediaFiles = [];
+    thumbnails.forEach((file) => {
+        mediaFiles.push({
+            fileName: file.name,
+            fileType: file.type,
+            status: file.isLoadingMedia ? "uploading" : "success",
+            previewUrl: URL.createObjectURL(file),
+        });
+    });
+    console.log("mediafiles", mediaFiles);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledThumbnailContainer$1, Object.assign({ className: "thumbnailContainer" }, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, label: file.fileName, index: index, showX: true, showLabel: false, mediaType: file.fileType, isLoadingMedia: file.status === "uploading", removeThumbnail: () => removeThumbnail(index), clickThumbnail: () => {
+                    openLightbox(thumbnails[index], index);
                 } }, index))) })) }));
 };
 
@@ -3384,28 +3451,28 @@ Lightbox.Body = ModalBody; // Includes Main and Details
 Lightbox.Footer = Footer$3;
 Lightbox.Close = reactModals.Close;
 
-var _path$n;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
-const SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+var _path$m;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+const SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
 })));
 
-var _path$m;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
-const SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+var _path$l;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+const SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
 })));
@@ -3663,19 +3730,6 @@ const PlayerTooltip = (_a) => {
     return (jsxRuntime.jsx(Wrapper$1, Object.assign({}, props, { children: jsxRuntime.jsx(Content$1, { children: children }) })));
 };
 
-var _path$l;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
-const SvgPlayFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 16,
-  height: 16,
-  focusable: "false",
-  viewBox: "0 0 16 16"
-}, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M6 15.79c-.13 0-.26-.03-.38-.08a.977.977 0 01-.62-.92V1.21a1 1 0 01.62-.93C6 .12 6.42.21 6.71.5l6.44 6.44c.58.58.58 1.54 0 2.12L6.71 15.5c-.19.19-.45.29-.71.29z"
-})));
-
 var _g$1;
 function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 const SvgPauseFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
@@ -4271,7 +4325,9 @@ const ChatBoxContainer = styled__default["default"].div `
 const CommentBox = (_a) => {
     var { placeholderOptions } = _a, props = __rest(_a, ["placeholderOptions"]);
     const { children, hasFloatingMenu, hasButtonsMenu, bubbleOptions, i18n } = props;
-    const { editor, setEditor, mentionableUsers, triggerSave, thumbnails, addThumbnails, removeThumbnail, } = useChatContext();
+    const { editor, setEditor, mentionableUsers, triggerSave, thumbnails, addThumbnails, removeThumbnail, setMediaStatus,
+    //setIsMediaUploading,
+     } = useChatContext();
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedImage, setSelectedImage] = React.useState({});
     const [selectedImageIndex, setSelectedImageIndex] = React.useState(0);
@@ -4306,7 +4362,25 @@ const CommentBox = (_a) => {
                 if (!event.dataTransfer || !event.dataTransfer.files)
                     return false;
                 event.preventDefault();
-                const files = Array.from(event.dataTransfer.files);
+                const files = Array.from(event.dataTransfer.files).map((file) => {
+                    return Object.assign(file, { isLoadingMedia: false });
+                });
+                /*for (const f of files) {
+                  if (!/^(image|video)\//.test(f.type)) {
+                    addToast(
+                      ({ close }) => (
+                        <Notification
+                          onClose={close}
+                          type="error"
+                          message={"File type not supported"}
+                          closeText={"Close"}
+                          isPrimary
+                        />
+                      ),
+                      { placement: "top" }
+                    );
+                  }
+                }*/
                 const mediaFiles = files.filter((file) => /^(image|video)\//.test(file.type));
                 if (mediaFiles.length === 0)
                     return false;
@@ -4359,9 +4433,12 @@ const CommentBox = (_a) => {
         return null;
     ed.on("create", ({ editor }) => setEditor(editor));
     ed.on("update", ({ editor }) => setEditor(editor));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: selectedImage.name }), jsxRuntime.jsx(Lightbox.Body, { children: jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: thumbnails.map((item) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: URL.createObjectURL(item), alt: `media ${item.name}` })), item.type.includes("video") && (jsxRuntime.jsx(Player, { ref: (ref) => {
+    const mediaFiles = thumbnails.map((file) => {
+        return Object.assign(file, { isLoadingMedia: file.isLoadingMedia });
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: selectedImage.name }), jsxRuntime.jsx(Lightbox.Body, { children: jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: mediaFiles.map((item, index) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: URL.createObjectURL(thumbnails[index]), alt: `media ${item.name}` })), item.type.includes("video") && (jsxRuntime.jsx(Player, { ref: (ref) => {
                                                 videoRefs.current.push(ref);
-                                            }, url: URL.createObjectURL(item) }))] }))) })) })) }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] }))), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsxs(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0, paddingBottom: 12 } }, { children: [hasFloatingMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(ThumbnailContainer, { openLightbox: handleOpenLightbox })] })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
+                                            }, url: URL.createObjectURL(thumbnails[index]) }))] }))) })) })) }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] }))), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsxs(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0, paddingBottom: 12 } }, { children: [hasFloatingMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(ThumbnailContainer, { openLightbox: handleOpenLightbox })] })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
 };
 
 var _path$c;
@@ -4426,7 +4503,7 @@ const StyledThumbnailContainer = styled.styled.div `
   gap: 9px;
   background-color: inherit;
   margin-top: 10px;
-  height: 120px;
+  height: auto;
 `;
 const Comment = ({ author, message, children, date, media = [], header, }) => {
     var _a, _b;
@@ -4463,7 +4540,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     ed.setOptions({
         editable: false,
     });
-    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(StyledThumbnailContainer, { children: media.map((item, index) => (jsxRuntime.jsx(Thumbnail, { src: item.url, label: "", showLabel: false, showX: false, mediaType: item.type, clickThumbnail: () => {
+    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(StyledThumbnailContainer, { children: media.map((item, index) => (jsxRuntime.jsx(Thumbnail, { isLoadingMedia: false, src: item.url, label: "", showLabel: false, showX: false, mediaType: item.type, clickThumbnail: () => {
                         handleClickThumbnail(item, index);
                     } }))) }), isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })) }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 2 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: media.map((item, index) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type === "image" && (jsxRuntime.jsx("img", { src: item.url, alt: `{{${item.url}}}` })), item.type === "video" && (jsxRuntime.jsx(Player, { ref: (ref) => {
                                                     videoRefs.current.push(ref);

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "center" | "start" | "end" | "between" | "around" | undefined;
+    alignItems?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXs?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfSm?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfMd?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfLg?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXl?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    textAlign?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignXs?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignSm?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignMd?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignLg?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignXl?: "center" | "start" | "end" | "justify" | undefined;
+    alignSelf?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    textAlign?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignXl?: "start" | "center" | "end" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;

package/build/stories/chat/_types.d.ts

@@ -10,6 +10,7 @@ export type SuggestedUser = {
 export interface ChatEditorArgs extends Partial<EditorOptions> {
     placeholderOptions?: Partial<PlaceholderOptions>;
     hasFloatingMenu?: boolean;
+    isNewMedia: boolean;
     hasButtonsMenu?: boolean;
     bubbleOptions?: any;
     author: Author;

package/build/stories/chat/context/chatContext.d.ts

@@ -6,18 +6,27 @@ export type ChatContextType = {
     editor?: Editor;
     setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
     addThumbnails: (props: {
-        files: File[];
+        files: (File & {
+            isLoadingMedia: boolean;
+        })[];
     }) => void;
     removeThumbnail: (index: number) => void;
-    thumbnails: File[];
+    thumbnails: (File & {
+        isLoadingMedia: boolean;
+    })[];
     mentionableUsers: (props: {
         query: string;
     }) => SuggestedUser[];
+    setMediaStatus: (files: (File & {
+        isLoadingMedia: boolean;
+    })[], index: number) => void;
 };
 export declare const ChatContext: React.Context<ChatContextType | null>;
 export declare const ChatContextProvider: ({ onSave, onFileUpload, setMentionableUsers, children, }: {
     onSave?: ((editor: Editor, mentions: SuggestedUser[]) => void) | undefined;
-    onFileUpload?: ((files: File[]) => Promise<void>) | undefined;
+    onFileUpload?: ((files: (File & {
+        isLoadingMedia: boolean;
+    })[]) => Promise<void>) | undefined;
     children: React.ReactNode;
     setMentionableUsers: (props: {
         query: string;

package/build/stories/chat/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { Editor as TipTapEditor } from "@tiptap/react";
 import { ChatEditorArgs, SuggestedUser } from "./_types";

package/build/stories/chat/parts/ThumbnailContainer/Thumbnail.d.ts

@@ -7,6 +7,7 @@ interface Props {
     showX?: boolean;
     showLabel?: boolean;
     mediaType: string;
+    isLoadingMedia: boolean;
 }
-declare const Thumbnail: ({ clickThumbnail, src, label, index, removeThumbnail, showX, showLabel, mediaType, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Thumbnail: ({ clickThumbnail, src, label, index, removeThumbnail, showX, showLabel, mediaType, isLoadingMedia, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Thumbnail;

package/build/stories/chat/parts/ThumbnailContainer/index.d.ts

@@ -1,3 +1,10 @@
+export interface FileElement {
+    fileName: string;
+    fileType: string;
+    status: "success" | "failed" | "uploading";
+    errorCode?: "FILE_TOO_BIG" | "INVALID_FILE_EXTENSION" | "GENERIC_ERROR";
+    previewUrl: string;
+}
 interface Props {
     openLightbox: (file: File, index: number) => void;
 }

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

package/build/stories/editor/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.84-beta-attachments",
+  "version": "3.1.85-beta-attachments",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",