@sustaina/shared-ui 1.10.0 → 1.11.0

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React5 from 'react';
 import React5__default, { forwardRef, useRef, useMemo, useCallback, isValidElement, useState, useEffect, createElement } from 'react';
 import { format, isValid, parseISO, isAfter, compareAsc, parse } from 'date-fns';
-import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image, AlignLeft, AlignCenter, AlignRight, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Plus, ChevronLeft, CircleUserRound, PanelLeftIcon, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
+import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image as Image$1, AlignLeft, AlignCenter, AlignRight, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Plus, ChevronLeft, CircleUserRound, PanelLeftIcon, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useForm, FormProvider, Controller, useFormContext, useFormState, useFieldArray, useWatch } from 'react-hook-form';
@@ -48,6 +48,7 @@ import { mergeRegister } from '@lexical/utils';
 import { $setBlocksType } from '@lexical/selection';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
+import Cropper from 'react-easy-crop';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -5027,7 +5028,7 @@ var GridSettingsModal = ({
       move(oldIndex, newIndex);
     }
   }
-  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-xl border-0 p-0 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-[500px] rounded-lg overflow-hidden", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-xl border-0 p-0 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-[550px] rounded-lg overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
       /* @__PURE__ */ jsxs(
         "div",
@@ -6478,7 +6479,7 @@ function ToolbarPlugin({
         ToolbarButton,
         {
           label: "Insert image",
-          icon: Image,
+          icon: Image$1,
           onClick: handleInsertImage,
           disabled: disabled || !canInsertImage
         }
@@ -7642,6 +7643,173 @@ function SidebarLayout({
   ] }) });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated };
+// src/components/cropperModal/helper.ts
+var createImage = (url) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener("load", () => resolve(image));
+  image.addEventListener("error", (error) => reject(error));
+  image.setAttribute("crossOrigin", "anonymous");
+  image.src = url;
+});
+async function getCroppedImg(imageSrc, pixelCrop, desiredDimension) {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("can not create canvas");
+  }
+  canvas.width = image.width;
+  canvas.height = image.height;
+  ctx.drawImage(image, 0, 0);
+  const croppedCanvas = document.createElement("canvas");
+  const croppedCtx = croppedCanvas.getContext("2d");
+  if (!croppedCtx) {
+    throw new Error("can not create canvas");
+  }
+  croppedCanvas.width = desiredDimension?.width ?? pixelCrop.width;
+  croppedCanvas.height = desiredDimension?.height ?? pixelCrop.height;
+  croppedCtx.drawImage(
+    canvas,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    desiredDimension?.width ?? pixelCrop.width,
+    desiredDimension?.height ?? pixelCrop.height
+  );
+  return new Promise((resolve, reject) => {
+    croppedCanvas.toBlob((file) => {
+      if (file) {
+        resolve(URL.createObjectURL(file));
+      } else {
+        reject("croppedCanvas gave null object");
+      }
+    }, "image/png");
+  });
+}
+var CropperModal = ({
+  open,
+  onOpenChange,
+  imageSrc,
+  onConfirm,
+  onCancel,
+  onError,
+  cropSize,
+  outputExactCropSize,
+  generateBlobUrlOutput,
+  title,
+  props
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState();
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const handleCancel = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+    handleClose();
+  }, [handleClose, onCancel]);
+  const handleCropComplete = useCallback((_, croppedAreaPixels2) => {
+    setCroppedAreaPixels(croppedAreaPixels2);
+  }, []);
+  const handleConfirm = async () => {
+    if (!imageSrc || !onConfirm) {
+      handleClose();
+      return;
+    }
+    if (!generateBlobUrlOutput) {
+      onConfirm({ crop, croppedAreaPixels });
+      return;
+    }
+    if (!croppedAreaPixels) {
+      onConfirm({ crop, croppedAreaPixels, croppedImageBlobUrl: imageSrc });
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const desiredDimension = outputExactCropSize ? cropSize : void 0;
+      const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels, desiredDimension);
+      onConfirm({ crop, croppedAreaPixels, croppedImageBlobUrl: croppedImage });
+    } catch (e) {
+      if (onError) {
+        onError(e);
+      }
+    } finally {
+      setIsLoading(false);
+      handleClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          handleClose();
+        } else {
+          onOpenChange(true);
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          className: "flex flex-col w-fit !max-w-6xl p-0 overflow-clip gap-0 border-0",
+          ...props?.dialogContent,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex w-full bg-[#82B495] text-white justify-between items-center p-4",
+                ...props?.dialogTitleContainer,
+                children: [
+                  /* @__PURE__ */ jsx(DialogTitle, { className: "text-2xl font-semibold", ...props?.dialogTitle, children: title ?? "Crop Image" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-white hover:text-gray-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+                      onClick: handleCancel,
+                      disabled: isLoading,
+                      children: /* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-120 md:w-[50vw] h-[70vh] mx-auto", ...props?.cropperContainer, children: /* @__PURE__ */ jsx(
+              Cropper,
+              {
+                image: imageSrc ?? void 0,
+                crop,
+                onCropChange: setCrop,
+                zoom,
+                onZoomChange: setZoom,
+                style: { containerStyle: { position: "relative", width: "100%", height: "100%" } },
+                onCropComplete: handleCropComplete,
+                aspect: cropSize ? cropSize.width / cropSize.height : void 0,
+                zoomWithScroll: true,
+                showGrid: true,
+                restrictPosition: true,
+                ...props?.cropper
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "w-full py-4 px-8", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between", children: [
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "cancel", onClick: handleCancel, disabled: isLoading, children: "Cancel" }),
+              /* @__PURE__ */ jsx("div", { className: "ml-auto flex gap-x-2", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "default", onClick: handleConfirm, disabled: isLoading, children: "Confirm" }) })
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CropperModal, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map