@majapisoftwares/ui 4.1.0 → 4.1.2

package/components/Accordion/Accordion.jsx

@@ -3,25 +3,25 @@ import { useId } from "react";
 import * as RAccordion from "@radix-ui/react-accordion";
 import clsx from "../../utils/clsx";
 export default function Accordion({ children, className, type = "multiple", }) {
-    return (<RAccordion.Root type={type} className={clsx("flex flex-col gap-2", className)} collapsible>
-      {children}
+    return (<RAccordion.Root type={type} className={clsx("flex flex-col gap-2", className)} collapsible={type === "single" || undefined}>
+      {children}
     </RAccordion.Root>);
 }
 Accordion.Item = AccordionItem;
 function AccordionItem({ children, title, value, className, triggerClassName, contentClassName, contentInnerClassName, }) {
     const id = useId();
     value = value || id;
-    return (<RAccordion.Item value={value} className={className}>
-      <RAccordion.Header>
-        <RAccordion.Trigger className={clsx("group focus-visible:ring-opacity-75 flex w-full justify-between rounded-lg bg-zinc-200 px-4 py-2 text-left text-sm font-medium transition hover:bg-zinc-300 focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 dark:bg-zinc-800 dark:hover:bg-zinc-700", triggerClassName)}>
-          {title}
-          <ChevronUpIcon className="h-5 w-5 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"/>
-        </RAccordion.Trigger>
-      </RAccordion.Header>
-      <RAccordion.Content className={clsx("data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down overflow-hidden", contentClassName)}>
-        <div className={clsx("px-4 pt-2 pb-2", contentInnerClassName)}>
-          {children}
-        </div>
-      </RAccordion.Content>
+    return (<RAccordion.Item value={value} className={className}>
+      <RAccordion.Header>
+        <RAccordion.Trigger className={clsx("group focus-visible:ring-opacity-75 flex w-full justify-between rounded-lg bg-zinc-200 px-4 py-2 text-left text-sm font-medium transition hover:bg-zinc-300 focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 dark:bg-zinc-800 dark:hover:bg-zinc-700", triggerClassName)}>
+          {title}
+          <ChevronUpIcon className="h-5 w-5 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"/>
+        </RAccordion.Trigger>
+      </RAccordion.Header>
+      <RAccordion.Content className={clsx("data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down overflow-hidden", contentClassName)}>
+        <div className={clsx("px-4 pt-2 pb-2", contentInnerClassName)}>
+          {children}
+        </div>
+      </RAccordion.Content>
     </RAccordion.Item>);
 }

package/components/FileInput/FileInput.jsx

@@ -112,33 +112,32 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [innerValue]);
     const handleDeleteClick = useCallback((clickedFile) => () => {
         setInnerValue((value) => [
             ...value.filter((file) => file !== clickedFile),
         ]);
     }, []);
-    return (<div data-input-name={name} data-error={error ? "" : undefined} data-loading={loading ? "" : undefined} className={clsx("relative data-loading:animate-pulse", className)} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
-      {label && (<label htmlFor={id} className={defaultLabelClassName}>
-          {label}
-          {required && (<>
-              {" "}
-              <span className="text-red-500">*</span>
-            </>)}
-        </label>)}
+    return (<div data-input-name={name} data-error={error ? "" : undefined} data-loading={loading ? "" : undefined} className={clsx("relative data-loading:animate-pulse", className)} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
+      {label && (<label htmlFor={id} className={defaultLabelClassName}>
+          {label}
+          {required && (<>
+              {" "}
+              <span className="text-red-500">*</span>
+            </>)}
+        </label>)}
       <div className={clsx("grid grid-cols-1 gap-4", {
             "md:grid-cols-2": !!innerValue.length,
             "min-h-[140px]": !!innerValue.length || !readOnly,
-        })}>
-        {paginatedValue.map((file, index) => (<PreviewFile key={index} file={file} readOnly={readOnly} handleDeleteClick={handleDeleteClick(file)} downloadText={downloadText} display={fileDisplay} openText={openText} additionalInfo={fileAdditionalInfo} index={index} className={previewFileClassName}/>))}
-        {innerValue.length > filesPerPage && (<Pagination className="col-span-2 mx-auto" currentPage={currentPage} totalItems={innerValue.length} onChangePage={setCurrentPage} itemsPerPage={filesPerPage}/>)}
-        {readOnly && !innerValue.length && (<Text variant="secondary">{emptyText}</Text>)}
-        {!readOnly && (!limit || innerValue.length < limit) && (<FileSelect {...props} className={fileSelectClassName} id={id} onAcceptFiles={handleAcceptFiles} limit={limit ? limit - innerValue.length : undefined} uploading={uploading} onRejectFiles={onRejectFiles} error={error}/>)}
-      </div>
-      {helpText && (<div className={clsx(defaultHelpTextClassName, "in-data-error:text-error-500")}>
-          {helpText}
-        </div>)}
+        })}>
+        {paginatedValue.map((file, index) => (<PreviewFile key={index} file={file} readOnly={readOnly} handleDeleteClick={handleDeleteClick(file)} downloadText={downloadText} display={fileDisplay} openText={openText} additionalInfo={fileAdditionalInfo} index={index} className={previewFileClassName} filesPerPage={filesPerPage} currentPage={currentPage}/>))}
+        {innerValue.length > filesPerPage && (<Pagination className="col-span-2 mx-auto" currentPage={currentPage} totalItems={innerValue.length} onChangePage={setCurrentPage} itemsPerPage={filesPerPage}/>)}
+        {readOnly && !innerValue.length && (<Text variant="secondary">{emptyText}</Text>)}
+        {!readOnly && (!limit || innerValue.length < limit) && (<FileSelect {...props} className={fileSelectClassName} id={id} onAcceptFiles={handleAcceptFiles} limit={limit ? limit - innerValue.length : undefined} uploading={uploading} onRejectFiles={onRejectFiles} error={error}/>)}
+      </div>
+      {helpText && (<div className={clsx(defaultHelpTextClassName, "in-data-error:text-error-500")}>
+          {helpText}
+        </div>)}
     </div>);
 }
 export default FileInput;

package/components/FileInput/PreviewFile.d.ts

@@ -1,6 +1,6 @@
 import { FileInputFile } from "./FileInput";
 import { ReactNode } from "react";
-export declare function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display, additionalInfo, index, className, }: {
+export declare function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display, additionalInfo, index, className, filesPerPage, currentPage, }: {
     file: FileInputFile;
     readOnly?: boolean;
     handleDeleteClick: () => void;
@@ -10,4 +10,6 @@ export declare function PreviewFile({ file, readOnly, handleDeleteClick, downloa
     additionalInfo?: (file: FileInputFile, index: number) => ReactNode;
     index: number;
     className?: string;
+    filesPerPage: number;
+    currentPage: number;
 }): import("react").JSX.Element;

package/components/FileInput/PreviewFile.jsx

@@ -8,7 +8,7 @@ import { ArrowTopRightOnSquareIcon, TrashIcon, } from "@heroicons/react/20/solid
 import clsx from "../../utils/clsx";
 const videoExtensions = [".mp4"];
 const imageExtensions = [".png", ".jpg", ".jpeg", ".webp"];
-export function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display = "info", additionalInfo, index, className, }) {
+export function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display = "info", additionalInfo, index, className, filesPerPage, currentPage, }) {
     const url = file.file
         ? URL.createObjectURL(file.file)
         : file.url;
@@ -45,7 +45,9 @@ export function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, o
                   </Button>
                 </Group>)}
             </Stack>
-            {additionalInfo && additionalInfo(file, index)}
+            {additionalInfo &&
+                additionalInfo(file, index + (currentPage - 1) * filesPerPage)}
+            {/*{additionalInfo && additionalInfo(file, index)}*/}
           </Stack>
         </Group>)}
       {!readOnly && (<Button icon variant="filled" color="default" className="absolute top-2 right-2 group-hover:opacity-100 sm:opacity-0" onClick={handleDeleteClick}>

package/package.json

@@ -4,6 +4,6 @@
     "type": "git",
     "url": "https://github.com/majapisoftwares/ui.git"
   },
-  "version": "4.1.0",
+  "version": "4.1.2",
   "type": "module"
 }