@majapisoftwares/ui 4.3.10 → 4.3.12

package/components/Accordion/Accordion.d.ts

@@ -1,9 +1,6 @@
-import { type ReactNode } from "react";
-declare function Accordion({ children, className, type, }: {
-    children?: ReactNode;
-    className?: string;
-    type?: "single" | "multiple";
-}): import("react").JSX.Element;
+import { type ComponentProps, type ReactNode } from "react";
+import * as RAccordion from "@radix-ui/react-accordion";
+declare function Accordion({ children, className, ...props }: ComponentProps<typeof RAccordion.Root>): import("react").JSX.Element;
 declare namespace Accordion {
     var Item: typeof AccordionItem;
 }

package/components/Accordion/Accordion.jsx

@@ -2,8 +2,8 @@ import { ChevronUpIcon } from "@heroicons/react/20/solid";
 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={type === "single" || undefined}>
+export default function Accordion({ children, className, ...props }) {
+    return (<RAccordion.Root {...props} className={clsx("flex flex-col gap-2", className)} {...(props.type === "single" ? { collapsible: true } : {})}>
       {children}
     </RAccordion.Root>);
 }

package/components/PictureCropInput/PictureCropInput.d.ts

@@ -4,9 +4,9 @@ export type PictureCropInputRef = {
     handleCrop: () => Promise<void>;
     completedCrop: PixelCrop | undefined;
 };
-export default function PictureCropInput({ value, onChange, loading, className, previewSizeClassNames, previewContainerClassName, cropButtonClassName, aspect, ref, }: {
-    value: string;
-    onChange: (value: string) => void;
+export default function PictureCropInput({ value, onChange, loading, className, previewSizeClassNames, previewContainerClassName, cropButtonClassName, aspect, ref, label, }: {
+    value?: string;
+    onChange: (value?: string) => void;
     loading?: boolean;
     className?: string;
     previewSizeClassNames?: string;
@@ -14,4 +14,5 @@ export default function PictureCropInput({ value, onChange, loading, className,
     cropButtonClassName?: string;
     aspect?: number;
     ref?: RefObject<PictureCropInputRef | null>;
+    label?: string;
 }): import("react").JSX.Element;

package/components/PictureCropInput/PictureCropInput.jsx

@@ -9,12 +9,14 @@ import clsx from "clsx";
 import { CheckIcon, TrashIcon } from "@heroicons/react/20/solid";
 import Tooltip from "../Tooltip";
 import { useLatest } from "react-use";
-export default function PictureCropInput({ value, onChange, loading, className, previewSizeClassNames = "h-52 w-52", previewContainerClassName, cropButtonClassName, aspect = 1, ref, }) {
+import { defaultLabelClassName } from "../Input";
+export default function PictureCropInput({ value, onChange, loading, className, previewSizeClassNames = "h-52 w-52", previewContainerClassName, cropButtonClassName, aspect = 1, ref, label, }) {
     const id = useId();
     const [src, setSrc] = useState();
     const [crop, setCrop] = useState();
     const cropRef = useLatest(crop);
     const [completedCrop, setCompletedCrop] = useState();
+    const completedCropRef = useLatest(completedCrop);
     const previewCanvasRef = useRef(null);
     const imgRef = useRef(null);
     const parentRef = useRef(null);
@@ -87,9 +89,22 @@ export default function PictureCropInput({ value, onChange, loading, className,
         });
         return URL.createObjectURL(blob);
     }, [completedCrop]);
+    const handleClear = useCallback(() => {
+        setCrop(undefined);
+        setSrc(undefined);
+        setCompletedCrop(undefined);
+        onChange(undefined);
+    }, [onChange]);
     const handleCrop = useCallback(async () => {
-        onChange(await cropToBlobUrl());
+        try {
+            onChange(await cropToBlobUrl());
+        }
+        catch (e) {
+            console.error(e);
+        }
+        setCrop(undefined);
         setSrc(undefined);
+        setCompletedCrop(undefined);
     }, [cropToBlobUrl, onChange]);
     useEffect(() => {
         if (ref) {
@@ -98,56 +113,62 @@ export default function PictureCropInput({ value, onChange, loading, className,
                 completedCrop,
             };
         }
-    }, [completedCrop, handleCrop, ref]);
-    const handleClear = useCallback(() => {
-        setCrop(undefined);
-        setSrc(undefined);
-    }, []);
-    return (<div ref={parentRef} className={clsx("flex gap-2", className)}>
-      {loading && <Skeleton className={previewSizeClassNames}/>}
-      {src && (<>
-          <ReactCrop crop={crop} onChange={(c) => setCrop(c)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect} minWidth={50 * aspect} minHeight={50 * aspect} className="max-h-96 max-w-96" keepSelection>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img alt="Picture" src={src} 
+    }, [completedCrop, completedCropRef, handleCrop, ref]);
+    return (<div ref={parentRef} className={className}>
+      {label && (<label htmlFor={id} className={defaultLabelClassName}>
+          {label}
+        </label>)}
+      <div className="flex gap-2">
+        {loading && <Skeleton className={previewSizeClassNames}/>}
+        {src && (<>
+            <ReactCrop crop={crop} onChange={(c) => setCrop(c)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect} minWidth={50 * aspect} minHeight={50 * aspect} className="max-h-96 max-w-96" keepSelection>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img alt="Picture" src={src} 
         // className="h-96 w-96 object-contain"
         ref={imgRef}/>
-          </ReactCrop>
-          {completedCrop && (<div className={clsx("flex flex-col gap-2", previewContainerClassName)}>
-              <canvas ref={previewCanvasRef} className={previewSizeClassNames} style={{
+            </ReactCrop>
+            {completedCrop && (<div className={clsx("flex flex-col gap-2", previewContainerClassName)}>
+                <canvas ref={previewCanvasRef} className={previewSizeClassNames} style={{
                     objectFit: "cover",
                 }}/>
-              <div className="flex gap-2">
-                <Button onClick={handleCrop} className={clsx("w-full", cropButtonClassName)} leading={<CheckIcon />}>
-                  Crop
-                </Button>
-                <Tooltip content="Clear">
-                  <Button onClick={handleClear} variant="text" icon>
-                    <TrashIcon />
+                <div className="flex gap-2">
+                  <Button onClick={handleCrop} className={clsx("w-full", cropButtonClassName)} leading={<CheckIcon />}>
+                    Crop
                   </Button>
-                </Tooltip>
-              </div>
-            </div>)}
-        </>)}
-      {!src && (<>
-          {value && (<div className={clsx("flex shrink-0 rounded-sm", previewSizeClassNames)} style={{
+                  <Tooltip content="Clear">
+                    <Button onClick={handleClear} variant="text" icon>
+                      <TrashIcon />
+                    </Button>
+                  </Tooltip>
+                </div>
+              </div>)}
+          </>)}
+        {!src && (<>
+            {value && (<div className={clsx("flex shrink-0 rounded-sm", previewSizeClassNames)} style={{
                     background: value
                         ? `center / cover url(${value})`
                         : undefined,
                 }}/>)}
-          <input type="file" id={id} className="hidden" onChange={onFileSelect} accept=".jpg,.jpeg,.png"/>
-          <Button variant="outlined" className="mb-auto flex items-center gap-3 p-2" onClick={() => document.getElementById(id)?.click()}>
-            <div className="flex h-12 w-12 items-center justify-center rounded-sm border border-zinc-800 p-3">
-              <PhotoIcon />
-            </div>
-            <div className="flex flex-col items-start gap-1.5">
-              <div className="text-gray-10 text-sm font-medium">
-                {value ? "Change" : "Select"} picture
+            <input type="file" id={id} className="hidden" onChange={onFileSelect} accept=".jpg,.jpeg,.png"/>
+            <Button variant="outlined" className="mb-auto flex items-center gap-3 p-2" onClick={() => document.getElementById(id)?.click()}>
+              <div className="flex h-12 w-12 items-center justify-center rounded-sm border border-zinc-800 p-3">
+                <PhotoIcon />
               </div>
-              <div className="text-xs text-zinc-500">
-                JPG, PNG - Max size 10MB
+              <div className="flex flex-col items-start gap-1.5">
+                <div className="text-gray-10 text-sm font-medium">
+                  {value ? "Change" : "Select"} picture
+                </div>
+                <div className="text-xs text-zinc-500">
+                  JPG, PNG - Max size 10MB
+                </div>
               </div>
-            </div>
-          </Button>
-        </>)}
+            </Button>
+            {value && (<Tooltip content="Clear">
+                <Button onClick={handleClear} variant="text" icon className="mb-auto">
+                  <TrashIcon />
+                </Button>
+              </Tooltip>)}
+          </>)}
+      </div>
     </div>);
 }

package/package.json

@@ -4,5 +4,5 @@
     "type": "git",
     "url": "https://github.com/majapisoftwares/ui.git"
   },
-  "version": "4.3.10"
+  "version": "4.3.12"
 }