@tecsinapse/cortex-react 1.15.0-beta.8 → 1.15.0

package/dist/esm/hooks/useFileUpload.js

@@ -1,22 +1,44 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { v4 } from 'uuid';
 import { FileStatus, AcceptSpecificMap } from '../components/Uploader/types.js';
+import 'react/jsx-runtime';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '../components/Popover/Context.js';
+import '@floating-ui/react';
+import 'currency.js';
+import '../provider/MenubarContext.js';
+import '../provider/SnackbarProvider.js';
+import '../provider/CalendarProvider.js';
+import { useManager } from '../provider/ManagerContext.js';
 
 const useFileUpload = ({
   accept = {},
   onAccept,
+  onOpenManager,
   onFileRejected,
   maxSize,
   allowMultiple = true,
   preventDuplicates = false,
   onDuplicate,
-  hasManager = true
+  hasManager = true,
+  isFolder = false,
+  noClick = false,
+  ignoreRejections = false,
+  uploadProgressText
 }) => {
-  const [files, setFiles] = useState([]);
+  const {
+    showManager,
+    files,
+    setFiles,
+    isOpen: isManagerOpen,
+    setIsOpen: setIsManagerOpen,
+    uploadFiles
+  } = useManager();
   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 handleRemoveFile = useCallback((index) => {
@@ -25,7 +47,10 @@ const useFileUpload = ({
   const handleClearFiles = useCallback(() => {
     setFiles([]);
   }, []);
-  const openManager = useCallback(() => setIsManagerOpen(true), []);
+  const openManager = useCallback(() => {
+    setIsManagerOpen(true);
+    onOpenManager?.();
+  }, []);
   const closeManager = useCallback(() => {
     handleClearFiles();
     setIsManagerOpen(false);
@@ -38,7 +63,8 @@ const useFileUpload = ({
     },
     []
   );
-  const onDrop = async (acceptedFiles) => {
+  const onDrop = async (acceptedFiles, fileRejections) => {
+    if (fileRejections.length > 0 && !ignoreRejections) return;
     if (hasManager) {
       openManager();
       onClose();
@@ -60,22 +86,20 @@ const useFileUpload = ({
     const newFiles = toProcess.map((file) => ({
       file,
       status: onAccept ? FileStatus.UPLOADING : FileStatus.SUCCESS,
-      uid: v4()
+      uid: v4(),
+      isFolder
     }));
-    try {
-      setFiles((prevFiles) => [...prevFiles, ...newFiles]);
-      if (onAccept) {
-        const updatedFiles = await onAccept(newFiles);
-        setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
-      }
-    } catch (e) {
-      const updatedFiles = newFiles.map((f) => ({
-        ...f,
-        status: FileStatus.ERROR
-      }));
-      setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
-    }
+    uploadFiles({ onAccept, newFiles, updateFiles });
   };
+  useEffect(() => {
+    if (hasManager) {
+      showManager?.({
+        onClose: closeManager,
+        onDelete: handleRemoveFile,
+        uploadProgressText
+      });
+    }
+  }, [handleRemoveFile, closeManager]);
   const addMimeTypes = (key, acc) => {
     AcceptSpecificMap[key].forEach((mimeType) => {
       acc[mimeType] = [];
@@ -97,7 +121,8 @@ const useFileUpload = ({
     accept: mappedAccept,
     multiple: allowMultiple,
     maxSize,
-    onDropRejected: onFileRejected
+    onDropRejected: onFileRejected,
+    noClick
   });
   const isFileLimitReached = !allowMultiple && files.length > 0;
   return {

package/dist/esm/hooks/useManagerHelpers.js

@@ -0,0 +1,32 @@
+import { useState, useMemo } from 'react';
+
+const useManagerHelpers = ({
+  files
+}) => {
+  const [min, setMin] = useState(false);
+  const [folders, setFolders] = useState();
+  const folderFiles = useMemo(
+    () => files?.filter((file) => file.isFolder) ?? [],
+    [files]
+  );
+  const regularFiles = useMemo(
+    () => files?.filter((file) => !file.isFolder) ?? [],
+    [files]
+  );
+  const totalLength = (regularFiles ?? []).length + (folders ?? []).length;
+  const isLoading = useMemo(
+    () => files?.some((file) => file.status === "uploading"),
+    [files]
+  );
+  return {
+    min,
+    setMin,
+    folderFiles,
+    regularFiles,
+    totalLength,
+    setFolders,
+    isLoading
+  };
+};
+
+export { useManagerHelpers };

package/dist/esm/index.js

@@ -65,6 +65,7 @@ export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
 export { MenubarContext } from './provider/MenubarContext.js';
 export { useMenubar } from './provider/useMenubar.js';
 export { CalendarProvider, useCalendarContext } from './provider/CalendarProvider.js';
+export { ManagerProvider, useManager } from './provider/ManagerContext.js';
 export { Context, useAccordionContext } from './components/Accordion/context.js';
 export { BRLMask, CurrencyIMask, ExpressionMasks, Masks, NumberIMask, PercentageIMask, PercentageMask } from './components/Input/masks.js';
 export { Root } from './components/Uploader/Root.js';

package/dist/esm/provider/ManagerContext.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useContext } from 'react';
+import { Manager } from '../components/Uploader/Manager.js';
+import 'clsx';
+import '../components/Accordion/context.js';
+import 'react-icons/lia';
+import '@internationalized/date';
+import '../components/Badge.js';
+import 'react-icons/md';
+import '../components/Card.js';
+import '../components/Button.js';
+import 'react-aria';
+import 'react-stately';
+import './MenubarContext.js';
+import './SnackbarProvider.js';
+import './CalendarProvider.js';
+import '../components/Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
+import { FileStatus } from '../components/Uploader/types.js';
+import '@floating-ui/react';
+import 'currency.js';
+import '../components/Calendar/CalendarCell.js';
+import '@tecsinapse/cortex-core';
+import 'react-icons/fa';
+import 'react-icons/io';
+import 'embla-carousel-react';
+import 'embla-carousel-autoplay';
+import '../components/Checkbox.js';
+import '../components/ColorPicker.js';
+import '../components/DatePicker/DateSegment.js';
+import '../components/DatePicker/DatePickerInputBase.js';
+import '../components/GroupButton.js';
+import '../components/Hint.js';
+import '../components/Input/Box.js';
+import '../components/Input/Face.js';
+import '../components/Input/Left.js';
+import '../components/Input/Mask.js';
+import '../components/Input/Right.js';
+import '../components/Input/Root.js';
+import '../components/Input/Search.js';
+import '../components/Menubar/Left.js';
+import '../styles/menubar.js';
+import '../components/Menubar/Right.js';
+import '../components/Menubar/Dropdown.js';
+import '../components/Menubar/MostUsed.js';
+import '../components/Menubar/MostUsedItem.js';
+import '../components/Menubar/Header.js';
+import '../components/Menubar/Item.js';
+import './CategoriesContext.js';
+import '../components/Menubar/SubItem.js';
+import '../components/Modal.js';
+import '../components/ProgressBar/Progress.js';
+import '../components/RadioButton.js';
+import '../components/Select/GroupedOptions.js';
+import '../components/Select/context.js';
+import '../components/Select/MultiGroupedOptions.js';
+import '../components/Select/MultiOptions.js';
+import '../components/Select/Options.js';
+import '../components/Select/Trigger.js';
+import '../components/Snackbar/BaseSnackbar.js';
+import '../styles/stepNodeVariants.js';
+import '../components/Tag.js';
+import '../components/TextArea/Box.js';
+import '../components/TextArea/Face.js';
+import '../components/TextArea/Left.js';
+import '../components/TextArea/Right.js';
+import '../components/TextArea/Root.js';
+import '../components/TimePicker/TimeFieldInput.js';
+import '../components/Toggle.js';
+import '../components/Tooltip.js';
+import 'react-icons/hi2';
+import 'react-icons/fa6';
+import 'react-dom';
+
+const ManagerContext = createContext(null);
+const ManagerProvider = ({ children }) => {
+  const [props, setProps] = useState({});
+  const [files, setFiles] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const uploadFiles = async ({
+    onAccept,
+    newFiles,
+    updateFiles
+  }) => {
+    try {
+      setFiles((prevFiles) => [...prevFiles, ...newFiles]);
+      if (onAccept) {
+        const updatedFiles = await onAccept(newFiles);
+        setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
+      }
+    } catch (e) {
+      const updatedFiles = newFiles.map((f) => ({
+        ...f,
+        status: FileStatus.ERROR
+      }));
+      setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
+    }
+  };
+  const showManager = (_props) => {
+    setProps(_props);
+  };
+  return /* @__PURE__ */ jsxs(
+    ManagerContext.Provider,
+    {
+      value: { showManager, files, setFiles, isOpen, setIsOpen, uploadFiles },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Manager, { files, open: isOpen, ...props })
+      ]
+    }
+  );
+};
+const useManager = () => {
+  const context = useContext(ManagerContext);
+  if (!context) {
+    throw new Error("useManager must be used within a ManagerProvider");
+  }
+  return context;
+};
+
+export { ManagerProvider, useManager };

package/dist/esm/provider/MenubarProvider.js

@@ -6,6 +6,7 @@ import 'react-stately';
 import { MenubarContext } from './MenubarContext.js';
 import './SnackbarProvider.js';
 import './CalendarProvider.js';
+import './ManagerContext.js';
 import '../components/Popover/Context.js';
 import 'react-dropzone';
 import 'uuid';

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

@@ -1,2 +1,2 @@
 import { DropzoneProps } from './types';
-export declare const Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, hasButton, }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { ManagerProps } from './types';
-export declare const Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, type, }: ManagerProps<T>) => any;
+export declare const Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, }: ManagerProps<T>) => any;

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, isManagerOpen, closeManager, }: RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Root: <T>({ open, onClose, dropzoneProps, selectFileText, dropText, buttonText, titleModal, onDelete, uploadProgressText, files, }: RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
 import { FileProps, FolderListProps, FolderProps } from './types';
 export declare const File: <T>({ file, index, onDelete, showDelete, }: FileProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Folder: ({ name, subItems }: FolderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const FolderList: <T>({ files }: FolderListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FolderList: <T>({ files, setFolders }: FolderListProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
 export * from './Root';
 export * from './types';
 export declare const Uploader: {
-    Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, }: import("./types").DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+    Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, hasButton, }: 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, isManagerOpen, closeManager, }: import("./types").RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
-    Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, type, }: import("./types").ManagerProps<T>) => any;
+    Root: <T>({ open, onClose, dropzoneProps, selectFileText, dropText, buttonText, titleModal, onDelete, uploadProgressText, files, }: import("./types").RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, }: import("./types").ManagerProps<T>) => any;
 };

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

@@ -12,7 +12,7 @@ export interface FileItem {
 export interface FileProps<T> {
     file: FileUpload<T>;
     index: number;
-    onDelete: (index: number) => void;
+    onDelete?: (index: number) => void;
     showDelete?: boolean;
 }
 export interface FolderProps {
@@ -24,6 +24,13 @@ export interface FolderProps {
 }
 export interface FolderListProps<T> {
     files: FileUpload<T>[];
+    setFolders: React.Dispatch<React.SetStateAction<[
+        string,
+        {
+            status: string;
+            path: string;
+        }[]
+    ][] | undefined>>;
 }
 export interface FilesProps<T> {
     files: FileUpload<T>[];
@@ -35,6 +42,7 @@ export interface UseDropzoneProps {
     getInputProps: <T extends DropzoneInputProps>(props?: T) => T;
     isDragActive: boolean;
     isFileLimitReached: boolean;
+    fileRejections: FileRejection[];
 }
 export interface DropzoneProps {
     dropzoneProps: UseDropzoneProps;
@@ -42,6 +50,7 @@ export interface DropzoneProps {
     dropText?: string;
     buttonText?: string;
     isFileLimitReached?: boolean;
+    hasButton?: boolean;
 }
 export interface ModalProps {
     open: boolean;
@@ -59,12 +68,11 @@ export type FileUpload<T> = {
     metadata?: T;
     uid: string;
     status: 'success' | 'error' | 'uploading';
+    isFolder?: boolean;
 };
 export interface RootUploaderProps<T> {
     open: boolean;
     onClose: () => void;
-    isManagerOpen: boolean;
-    closeManager: () => void;
     files: FileUpload<T>[];
     onDelete: (index: number) => void;
     dropzoneProps: UseDropzoneProps;
@@ -75,12 +83,11 @@ export interface RootUploaderProps<T> {
     titleModal?: string;
 }
 export interface ManagerProps<T> {
-    open: boolean;
-    files: FileUpload<T>[];
-    onDelete: (index: number) => void;
+    open?: boolean;
+    files?: FileUpload<T>[];
+    onDelete?: (index: number) => void;
     uploadProgressText?: string;
-    onClose: () => void;
-    type?: 'file' | 'folder';
+    onClose?: () => void;
 }
 export declare const AcceptSpecificMap: {
     readonly APPLICATION: readonly ["application/pdf", "application/zip", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/x-rar-compressed", "application/x-7z-compressed", "application/json", "application/xml", "application/rtf", "application/x-tar", "application/x-httpd-php", "application/octet-stream"];

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

@@ -1,6 +1,6 @@
 import { type DropEvent, type FileRejection } from 'react-dropzone';
 import { AcceptSpecificMap, UseDropzoneProps, type FileUpload } from '../components/Uploader/types';
-interface UseFileUploadOptions<T> {
+interface UseFileUploadOptions {
     accept?: {
         IMAGE?: (typeof AcceptSpecificMap.IMAGE)[number][];
         APPLICATION?: (typeof AcceptSpecificMap.APPLICATION)[number][];
@@ -8,15 +8,20 @@ interface UseFileUploadOptions<T> {
         VIDEO?: (typeof AcceptSpecificMap.VIDEO)[number][];
         TEXT?: (typeof AcceptSpecificMap.TEXT)[number][];
     };
-    onAccept?: (files: FileUpload<T>[]) => Promise<FileUpload<T>[]>;
+    onAccept?: (files: FileUpload<unknown>[]) => Promise<FileUpload<unknown>[]>;
+    onOpenManager?: () => void;
     onFileRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
     maxSize?: number;
     allowMultiple?: boolean;
     preventDuplicates?: boolean;
     onDuplicate?: (duplicates: File[]) => void;
     hasManager?: boolean;
+    isFolder?: boolean;
+    uploadProgressText?: string;
+    noClick?: boolean;
+    ignoreRejections?: boolean;
 }
-export declare const useFileUpload: <T>({ accept, onAccept, onFileRejected, maxSize, allowMultiple, preventDuplicates, onDuplicate, hasManager, }: UseFileUploadOptions<T>) => {
+export declare const useFileUpload: <T>({ accept, onAccept, onOpenManager, onFileRejected, maxSize, allowMultiple, preventDuplicates, onDuplicate, hasManager, isFolder, noClick, ignoreRejections, uploadProgressText, }: UseFileUploadOptions) => {
     onOpen: () => void;
     onClose: () => void;
     onDelete: (index: number) => void;
@@ -25,7 +30,7 @@ export declare const useFileUpload: <T>({ accept, onAccept, onFileRejected, maxS
     openManager: () => void;
     closeManager: () => void;
     isManagerOpen: boolean;
-    files: FileUpload<T>[];
+    files: FileUpload<unknown>[];
     duplicates: File[];
     onClearFiles: () => void;
 };

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

@@ -0,0 +1,15 @@
+import { FileUpload } from '../components';
+export declare const useManagerHelpers: <T>({ files, }: {
+    files?: FileUpload<T>[];
+}) => {
+    min: boolean;
+    setMin: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    folderFiles: FileUpload<T>[];
+    regularFiles: FileUpload<T>[];
+    totalLength: number;
+    setFolders: import("react").Dispatch<import("react").SetStateAction<[string, {
+        status: string;
+        path: string;
+    }[]][] | undefined>>;
+    isLoading: boolean | undefined;
+};

package/dist/types/provider/ManagerContext.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { FileUpload, ManagerProps } from '../components';
+interface UploadFilesProps<T> {
+    onAccept?: (files: FileUpload<T>[]) => Promise<FileUpload<T>[]>;
+    newFiles: FileUpload<T>[];
+    updateFiles: (prevFiles: FileUpload<unknown>[], newFiles: FileUpload<T>[]) => FileUpload<T>[];
+}
+interface ManagerContextProps<T> {
+    showManager: (props: ManagerProps<T>) => void;
+    files: FileUpload<T>[];
+    setFiles: React.Dispatch<React.SetStateAction<FileUpload<T>[]>>;
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    uploadFiles: (props: UploadFilesProps<T>) => void;
+}
+export declare const ManagerProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useManager: () => ManagerContextProps<unknown>;
+export {};

package/dist/types/provider/index.d.ts

@@ -3,3 +3,4 @@ export * from './SnackbarProvider';
 export * from './MenubarContext';
 export * from './useMenubar';
 export * from './CalendarProvider';
+export * from './ManagerContext';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.15.0-beta.8",
+  "version": "1.15.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "3.7.0",
-    "@tecsinapse/cortex-core": "1.2.0-beta.6",
+    "@tecsinapse/cortex-core": "1.2.0",
     "clsx": "2.1.1",
     "currency.js": "2.0.4",
     "embla-carousel-autoplay": "^8.0.0",
@@ -48,5 +48,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "e193bd148328ee510548708de7803cb1832abd6d"
+  "gitHead": "877a756e55265fa6fef624c881b496ece5b2366b"
 }