@sustaina/shared-ui 1.1.8 → 1.2.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React3 from 'react';
 import React3__default, { createContext, isValidElement, useState, useEffect, useId, useContext, useRef, useCallback, useMemo, createElement } from 'react';
-import { Controller, useFormContext, useForm, FormProvider, get, set, appendErrors, useFormState } from 'react-hook-form';
+import { Controller, useFormContext, useForm, useFieldArray, FormProvider, get, set, appendErrors, useFormState } from 'react-hook-form';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx3, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -11,7 +11,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as LabelPrimitive2 from '@radix-ui/react-label';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -1420,19 +1420,17 @@ function TooltipContent({
   ) });
 }
 function SortableRow({
-  itemId,
-  index,
-  control,
   availableColumns,
   currentColumns,
-  disableDrag = false,
-  disableEdit = false,
-  hideFormMessage,
-  removeColumn
+  control,
+  name,
+  value,
+  isDragging,
+  onRemove
 }) {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-    id: itemId,
-    disabled: disableDrag
+    id: value,
+    disabled: name == "columns.0.id"
   });
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -1447,35 +1445,33 @@ function SortableRow({
     FormField2,
     {
       control,
-      name: `columns.${index}.id`,
+      name,
       render: ({ field }) => /* @__PURE__ */ jsxs(FormItem2, { className: "flex-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(
             GripVertical,
             {
+              ...attributes,
+              ...listeners,
               className: cn(
                 "h-5 w-5 text-[#B9B9B9] focus:outline-none cursor-grab",
-                index == 0 && "opacity-0 pointer-events-none"
-              ),
-              ...attributes,
-              ...listeners
+                name == "columns.0.id" && "opacity-0 pointer-events-none"
+              )
             }
           ),
           /* @__PURE__ */ jsxs(
             Select,
             {
               value: field.value,
-              onValueChange: (val) => {
-                field.onChange(val);
-              },
-              disabled: disableEdit || index == 0,
+              onValueChange: field.onChange,
+              disabled: name == "columns.0.id",
               children: [
                 /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
                   SelectTrigger,
                   {
                     className: cn(
                       "w-full border-[#DDDDDD] data-[disabled]:opacity-100 aria-invalid:border-[#BB0B0E]",
-                      index == 0 ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : ""
+                      name == "columns.0.id" ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : ""
                     ),
                     children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose column..." })
                   }
@@ -1497,7 +1493,7 @@ function SortableRow({
               ]
             }
           ),
-          index == 0 ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          name == "columns.0.id" ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { className: "h-5 w-5", stroke: "white", fill: "#8B8B8B" }) }),
             /* @__PURE__ */ jsx(
               TooltipContent,
@@ -1512,14 +1508,14 @@ function SortableRow({
           ] }) }) : /* @__PURE__ */ jsx(
             CircleMinus,
             {
-              onClick: () => index > 0 && removeColumn(index),
+              onClick: onRemove,
               className: "h-5 w-5 cursor-pointer",
               stroke: "white",
               fill: "#C32A2C"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(FormMessage, { className: cn("pl-6 text-[#BB0B0E]", hideFormMessage && "hidden") })
+        !isDragging && /* @__PURE__ */ jsx(FormMessage, { className: cn("pl-6 text-[#BB0B0E]") })
       ] })
     }
   ) });
@@ -1594,18 +1590,31 @@ var GridSettingsModal = ({
   onClose,
   onSaveColumns
 }) => {
-  const [hideFormMessage, setHideFormMessage] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const form = useForm({
     resolver: t2(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
     mode: "onChange"
   });
+  const { control, trigger } = form;
+  const { fields, append, remove, move } = useFieldArray({
+    control,
+    name: "columns",
+    keyName: "fieldId"
+  });
   useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
   }, [isOpen, currentColumns, form]);
-  const columns = form.watch("columns");
+  const addColumn = async () => {
+    const isValid2 = await trigger("columns");
+    if (isValid2) {
+      append({ id: "" });
+    } else {
+      return;
+    }
+  };
   const onSubmit = (data) => {
     const ordering = data.columns.map((i2) => i2.id);
     const visibility = Object.fromEntries(
@@ -1616,28 +1625,16 @@ var GridSettingsModal = ({
       onSaveColumns({ ordering, visibility, pinning });
     }
   };
-  const addColumn = async () => {
-    const isValid2 = await form.trigger("columns");
-    if (!isValid2) {
-      return;
-    }
-    form.setValue("columns", [...columns, { id: "" }], { shouldValidate: false });
-  };
-  const removeColumn = (index) => {
-    const newCols = [...columns];
-    newCols.splice(index, 1);
-    form.setValue("columns", newCols);
-  };
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
-  const handleDragEnd = (event) => {
+  function handleDragEnd(event) {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
-    const oldIndex = columns.findIndex((c) => c.id === active.id);
-    const newIndex = columns.findIndex((c) => c.id === over.id);
-    if (newIndex === 0) return;
-    const reordered = arrayMove(columns, oldIndex, newIndex);
-    form.setValue("columns", reordered, { shouldValidate: true });
-  };
+    const oldIndex = fields.findIndex((f) => f.fieldId === active.id);
+    const newIndex = fields.findIndex((f) => f.fieldId === over.id);
+    if (oldIndex !== -1 && newIndex !== -1) {
+      move(oldIndex, newIndex);
+    }
+  }
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-xl p-0 border-0", showCloseButton: false, children: [
     /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       "button",
@@ -1669,43 +1666,42 @@ var GridSettingsModal = ({
         /* @__PURE__ */ jsx(
           SortableRow,
           {
-            itemId: columns[0]?.id,
-            index: 0,
-            control: form.control,
+            value: fields[0]?.fieldId,
+            control,
+            name: `columns.0.id`,
+            isDragging,
             availableColumns,
-            currentColumns: columns,
-            disableDrag: true,
-            disableEdit: true,
-            removeColumn
-          }
+            currentColumns: fields
+          },
+          fields[0]?.fieldId
         ),
         /* @__PURE__ */ jsx(
           DndContext,
           {
             sensors,
             collisionDetection: closestCenter,
-            onDragStart: () => setHideFormMessage(true),
+            onDragStart: () => setIsDragging(true),
             onDragEnd: (event) => {
-              setHideFormMessage(false);
+              setIsDragging(false);
               handleDragEnd(event);
             },
             children: /* @__PURE__ */ jsx(
               SortableContext,
               {
-                items: columns?.slice(1).map((c) => c.id),
+                items: fields?.slice(1).map((c) => c?.fieldId),
                 strategy: verticalListSortingStrategy,
-                children: columns?.slice(1).map((item, index) => /* @__PURE__ */ jsx(
+                children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsx(
                   SortableRow,
                   {
-                    itemId: item.id,
-                    index: index + 1,
-                    control: form.control,
+                    value: col?.fieldId,
+                    control,
+                    name: `columns.${index + 1}.id`,
+                    isDragging,
                     availableColumns,
-                    currentColumns: columns,
-                    hideFormMessage,
-                    removeColumn
+                    currentColumns: fields,
+                    onRemove: () => remove(index + 1)
                   },
-                  item.id + index
+                  col?.fieldId
                 ))
               }
             )
@@ -1717,7 +1713,7 @@ var GridSettingsModal = ({
             type: "button",
             className: cn("bg-[#41875C99] text-white w-full rounded-t-lg", addButtonClassname),
             onClick: addColumn,
-            disabled: columns.length >= limit,
+            disabled: fields.length >= limit,
             children: [
               /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
               " Add column"
@@ -4817,6 +4813,7 @@ var AdvanceSearch = ({
               onClick: () => {
                 clearAllRow();
                 Object.keys(getValues()).forEach((k) => resetField(k));
+                onSubmit();
               },
               children: "Clear Search"
             }
@@ -4836,7 +4833,176 @@ var AdvanceSearch = ({
   );
 };
 var AdvanceSearch_default = AdvanceSearch;
+function cn3(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Dialog2({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal2({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay2({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn3(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent2({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal2, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay2, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn3(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader2({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn3("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle2({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn3("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn3("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+var buttonVariants4 = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-sus-primary-1 text-primary-foreground shadow-xs hover:bg-sus-primary/90",
+        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground  dark:border-input dark:hover:bg-input/50",
+        outlineLeave: "border border-[#BB0B0E] bg-background shadow-xs hover:bg-accent hover:text-accent-foreground text-[#BB0B0E]"
+      },
+      size: {
+        default: "h-9 px-4  has-[>svg]:px-3",
+        option: "py-5 h-9 px-4  has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-5",
+        "icon-sm": "size-[22px]",
+        "icon-md": "size-7",
+        "icon-lg": "size-10"
+      },
+      active: {
+        true: "bg-sus-primary-1 text-white",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button4({
+  className,
+  variant,
+  size,
+  active,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn3(buttonVariants4({ variant, size, className, active })),
+      ...props
+    }
+  );
+}
+function ConfirmDialog({ dialogData, setDialog, onClose }) {
+  const handleClose = () => {
+    setDialog({ state: false });
+    onClose?.();
+  };
+  const titleColor = {
+    default: "text-[#000000]",
+    success: "text-[#3f9e33]",
+    error: "text-[#c63638]"
+  };
+  const showCloseBtn = dialogData.showCloseBtn ?? true;
+  return /* @__PURE__ */ jsx(Dialog2, { open: dialogData.state, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent2, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader2, { children: [
+      /* @__PURE__ */ jsx(DialogTitle2, { className: cn3(titleColor[dialogData.variant || "default"], "font-bold"), children: dialogData.title || "" }),
+      /* @__PURE__ */ jsx(DialogDescription2, { children: dialogData.description || "" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full flex justify-center py-5 gap-5", children: [
+      showCloseBtn && /* @__PURE__ */ jsx(Button4, { variant: "cancel", onClick: handleClose, children: "Close" }),
+      dialogData.btn && /* @__PURE__ */ jsx(
+        Button4,
+        {
+          variant: dialogData.variantBtn || "default",
+          disabled: dialogData.btnState === false,
+          onClick: dialogData.onClickBtn,
+          children: dialogData.btn
+        }
+      )
+    ] })
+  ] }) });
+}
 
-export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, useScreenSize_default as useScreenSize };
+export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, ConfirmDialog as Dialog, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, useScreenSize_default as useScreenSize };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map