@tecsinapse/cortex-react 1.14.0-beta.2 → 1.15.0-beta.0

package/dist/cjs/components/Uploader/Manager.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindVariants = require('tailwind-variants');
+var reactDom = require('react-dom');
+var Upload = require('./Upload.js');
+var Button = require('../Button.js');
+var io = require('react-icons/io');
+
+const foldermodal = tailwindVariants.tv({
+  base: "fixed rounded-micro p-kilo bg-white shadow-xl flex transition z-modal",
+  variants: {
+    open: {
+      true: "scale-100 visible",
+      false: "invisible"
+    }
+  }
+});
+const Manager = ({
+  open,
+  files,
+  onDelete,
+  uploadProgressText = "Upload(s) in progress",
+  onClose
+}) => {
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: foldermodal({
+          className: "h-[350px] w-[400px] bg-white bottom-deca right-deca overflow-hidden",
+          open
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full h-full gap-mili items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ml-mega", "data-testid": "upload-progress", children: uploadProgressText }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                variants: { variant: "outline", size: "circle" },
+                onClick: onClose,
+                children: /* @__PURE__ */ jsxRuntime.jsx(io.IoMdClose, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full overflow-scroll", children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            Upload.File,
+            {
+              file,
+              index,
+              onDelete
+            },
+            file.uid
+          )) })
+        ] })
+      }
+    ),
+    document.body
+  );
+};
+
+exports.Manager = Manager;

package/dist/cjs/components/Uploader/Root.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var Modal = require('./Modal.js');
 var Dropzone = require('./Dropzone.js');
-var Files = require('./Files.js');
+var Manager = require('./Manager.js');
 
 const Root = ({
   open,
@@ -15,10 +15,12 @@ const Root = ({
   dropText,
   buttonText,
   uploadProgressText,
-  titleModal
+  titleModal,
+  isManagerOpen,
+  closeManager
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Modal.Modal, { onClose, open, title: titleModal, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Modal.Modal, { onClose, open, title: titleModal, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row", children: /* @__PURE__ */ jsxRuntime.jsx(
       Dropzone.Dropzone,
       {
         dropzoneProps,
@@ -26,16 +28,18 @@ const Root = ({
         dropText,
         buttonText
       }
-    ),
+    ) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Files.Files,
+      Manager.Manager,
       {
+        open: isManagerOpen,
         files,
         onDelete,
-        uploadProgressText
+        uploadProgressText,
+        onClose: closeManager
       }
     )
-  ] }) });
+  ] });
 };
 
 exports.Root = Root;

package/dist/cjs/components/Uploader/Upload.js

@@ -45,7 +45,7 @@ const File = ({ file, index, onDelete }) => {
             className: " bg-inherit border-2 border-primary-light text-primary-light",
             size: "small"
           }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(md.MdClose, { size: 20 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(md.MdClose, { size: 15 })
         }
       )
     ] }),

package/dist/cjs/hooks/useFileUpload.js

@@ -17,8 +17,11 @@ const useFileUpload = ({
   const [files, setFiles] = React.useState([]);
   const [duplicates, setDuplicates] = React.useState([]);
   const [isOpen, setIsOpen] = React.useState(false);
+  const [isManagerOpen, setIsManagerOpen] = React.useState(false);
   const onOpen = React.useCallback(() => setIsOpen(true), []);
   const onClose = React.useCallback(() => setIsOpen(false), []);
+  const openManager = React.useCallback(() => setIsManagerOpen(true), []);
+  const closeManager = React.useCallback(() => setIsManagerOpen(false), []);
   const updateFiles = React.useCallback(
     (prevFiles, newFiles) => {
       const current = /* @__PURE__ */ new Map();
@@ -28,6 +31,8 @@ const useFileUpload = ({
     []
   );
   const onDrop = async (acceptedFiles) => {
+    openManager();
+    onClose();
     let toProcess = acceptedFiles;
     if (preventDuplicates) {
       const found = (acceptedFiles ?? []).filter(
@@ -102,6 +107,8 @@ const useFileUpload = ({
       isFileLimitReached
     },
     open: isOpen,
+    closeManager,
+    isManagerOpen,
     files,
     duplicates,
     onClearFiles: handleClearFiles

package/dist/esm/components/Uploader/Manager.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { tv } from 'tailwind-variants';
+import { createPortal } from 'react-dom';
+import { File } from './Upload.js';
+import { Button } from '../Button.js';
+import { IoMdClose } from 'react-icons/io';
+
+const foldermodal = tv({
+  base: "fixed rounded-micro p-kilo bg-white shadow-xl flex transition z-modal",
+  variants: {
+    open: {
+      true: "scale-100 visible",
+      false: "invisible"
+    }
+  }
+});
+const Manager = ({
+  open,
+  files,
+  onDelete,
+  uploadProgressText = "Upload(s) in progress",
+  onClose
+}) => {
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: foldermodal({
+          className: "h-[350px] w-[400px] bg-white bottom-deca right-deca overflow-hidden",
+          open
+        }),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full h-full gap-mili items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+            /* @__PURE__ */ jsx("div", {}),
+            /* @__PURE__ */ jsx("h3", { className: "ml-mega", "data-testid": "upload-progress", children: uploadProgressText }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variants: { variant: "outline", size: "circle" },
+                onClick: onClose,
+                children: /* @__PURE__ */ jsx(IoMdClose, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col w-full overflow-scroll", children: files.map((file, index) => /* @__PURE__ */ jsx(
+            File,
+            {
+              file,
+              index,
+              onDelete
+            },
+            file.uid
+          )) })
+        ] })
+      }
+    ),
+    document.body
+  );
+};
+
+export { Manager };

package/dist/esm/components/Uploader/Root.js

@@ -1,7 +1,7 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Modal } from './Modal.js';
 import { Dropzone } from './Dropzone.js';
-import { Files } from './Files.js';
+import { Manager } from './Manager.js';
 
 const Root = ({
   open,
@@ -13,10 +13,12 @@ const Root = ({
   dropText,
   buttonText,
   uploadProgressText,
-  titleModal
+  titleModal,
+  isManagerOpen,
+  closeManager
 }) => {
-  return /* @__PURE__ */ jsx(Modal, { onClose, open, title: titleModal, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row", children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Modal, { onClose, open, title: titleModal, children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row", children: /* @__PURE__ */ jsx(
       Dropzone,
       {
         dropzoneProps,
@@ -24,16 +26,18 @@ const Root = ({
         dropText,
         buttonText
       }
-    ),
+    ) }) }),
     /* @__PURE__ */ jsx(
-      Files,
+      Manager,
       {
+        open: isManagerOpen,
         files,
         onDelete,
-        uploadProgressText
+        uploadProgressText,
+        onClose: closeManager
       }
     )
-  ] }) });
+  ] });
 };
 
 export { Root };

package/dist/esm/components/Uploader/Upload.js

@@ -43,7 +43,7 @@ const File = ({ file, index, onDelete }) => {
             className: " bg-inherit border-2 border-primary-light text-primary-light",
             size: "small"
           }),
-          children: /* @__PURE__ */ jsx(MdClose, { size: 20 })
+          children: /* @__PURE__ */ jsx(MdClose, { size: 15 })
         }
       )
     ] }),

package/dist/esm/hooks/useFileUpload.js

@@ -15,8 +15,11 @@ const useFileUpload = ({
   const [files, setFiles] = useState([]);
   const [duplicates, setDuplicates] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
+  const [isManagerOpen, setIsManagerOpen] = useState(false);
   const onOpen = useCallback(() => setIsOpen(true), []);
   const onClose = useCallback(() => setIsOpen(false), []);
+  const openManager = useCallback(() => setIsManagerOpen(true), []);
+  const closeManager = useCallback(() => setIsManagerOpen(false), []);
   const updateFiles = useCallback(
     (prevFiles, newFiles) => {
       const current = /* @__PURE__ */ new Map();
@@ -26,6 +29,8 @@ const useFileUpload = ({
     []
   );
   const onDrop = async (acceptedFiles) => {
+    openManager();
+    onClose();
     let toProcess = acceptedFiles;
     if (preventDuplicates) {
       const found = (acceptedFiles ?? []).filter(
@@ -100,6 +105,8 @@ const useFileUpload = ({
       isFileLimitReached
     },
     open: isOpen,
+    closeManager,
+    isManagerOpen,
     files,
     duplicates,
     onClearFiles: handleClearFiles

package/dist/types/components/Uploader/Manager.d.ts

@@ -0,0 +1,10 @@
+import { FileUpload } from './types';
+interface ManagerProps<T> {
+    open: boolean;
+    files: FileUpload<T>[];
+    onDelete: (index: number) => void;
+    uploadProgressText?: string;
+    onClose: () => void;
+}
+export declare const Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, }: ManagerProps<T>) => any;
+export {};

package/dist/types/components/Uploader/Root.d.ts

@@ -1,2 +1,2 @@
 import { RootUploaderProps } from './types';
-export declare const Root: <T>({ open, onClose, files, onDelete, dropzoneProps, selectFileText, dropText, buttonText, uploadProgressText, titleModal, }: RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Root: <T>({ open, onClose, files, onDelete, dropzoneProps, selectFileText, dropText, buttonText, uploadProgressText, titleModal, isManagerOpen, closeManager, }: RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Uploader/index.d.ts

@@ -4,5 +4,5 @@ export declare const Uploader: {
     Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, }: import("./types").DropzoneProps) => import("react/jsx-runtime").JSX.Element;
     Files: <T>({ files, onDelete, uploadProgressText, }: import("./types").FilesProps<T>) => import("react/jsx-runtime").JSX.Element;
     Modal: ({ open, onClose, children, title, }: import("./types").ModalProps) => any;
-    Root: <T>({ open, onClose, files, onDelete, dropzoneProps, selectFileText, dropText, buttonText, uploadProgressText, titleModal, }: import("./types").RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Root: <T>({ open, onClose, files, onDelete, dropzoneProps, selectFileText, dropText, buttonText, uploadProgressText, titleModal, isManagerOpen, closeManager, }: import("./types").RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/types/components/Uploader/types.d.ts

@@ -46,6 +46,8 @@ export type FileUpload<T> = {
 export interface RootUploaderProps<T> {
     open: boolean;
     onClose: () => void;
+    isManagerOpen: boolean;
+    closeManager: () => void;
     files: FileUpload<T>[];
     onDelete: (index: number) => void;
     dropzoneProps: UseDropzoneProps;

package/dist/types/hooks/useFileUpload.d.ts

@@ -21,6 +21,8 @@ export declare const useFileUpload: <T>({ accept, onAccept, onFileRejected, maxS
     onDelete: (index: number) => void;
     dropzoneProps: UseDropzoneProps;
     open: boolean;
+    closeManager: () => void;
+    isManagerOpen: boolean;
     files: FileUpload<T>[];
     duplicates: File[];
     onClearFiles: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.14.0-beta.2",
+  "version": "1.15.0-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "09a0296670858e486b1626094f4fd22dbcf9ff13"
+  "gitHead": "6d45cc9f4731040772e88399eee523d38457cd62"
 }