@sustaina/shared-ui 1.7.0 → 1.7.2

package/dist/index.mjs

@@ -4,11 +4,10 @@ import { Controller, useFormContext, useForm, useFieldArray, FormProvider, useWa
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx3, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { create } from 'zustand';
 import { reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
 import { CircleHelp, Triangle, X, Plus, Search, Bug, XIcon, GripVertical, Info, CircleMinus, CalendarIcon, Minus, ChevronDownIcon, CheckIcon, ChevronLeft, ChevronRight, Tag, ChevronUpIcon } from 'lucide-react';
+import { create } from 'zustand';
 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, useSortable } from '@dnd-kit/sortable';
@@ -17,6 +16,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { cva } from 'class-variance-authority';
 import { z } from 'zod';
 import { createPortal } from 'react-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -152,38 +152,6 @@ function stripNullishObject(value) {
     return {};
   }
 }
-
-// src/utils/getColumnIdFromTable.ts
-function getColumnIdFromTable(table) {
-  const allColumns = table.getAllColumns();
-  const availableColumns = allColumns.map((col) => ({ id: col.id }));
-  const currentColumns = allColumns.filter((col) => col.getIsVisible()).map((col) => ({ id: col.id }));
-  return { availableColumns, currentColumns };
-}
-var useGridSettingsStore = create(
-  (set) => ({
-    availableColumns: [],
-    currentColumns: [],
-    payload: {
-      ordering: [],
-      visibility: {},
-      pinning: { left: [] }
-    },
-    setAvailableColumns: (cols) => set({ availableColumns: cols }),
-    setCurrentColumns: (cols) => set({ currentColumns: cols }),
-    setPayload: (payload) => set({ payload }),
-    reset: () => set({
-      availableColumns: [],
-      currentColumns: [],
-      payload: { ordering: [], visibility: {}, pinning: { left: [] } }
-    }),
-    extractColumns: (table) => {
-      const availableColumns = table.getAllColumns().map((col) => ({ id: col.id }));
-      const currentColumns = table.getVisibleLeafColumns().map((col) => ({ id: col.id }));
-      return { availableColumns, currentColumns };
-    }
-  })
-);
 function TextInput({ className, ...props }) {
   return /* @__PURE__ */ jsx("input", { type: "text", className: cn("input", className), ...props });
 }
@@ -1098,61 +1066,6 @@ var usePreventPageLeave = ({ isPrevening }) => {
   }, [isPrevening, setPreventing]);
 };
 var usePreventPageLeave_default = usePreventPageLeave;
-var buttonVariants = 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",
-        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        defaultSelect: "bg-primary text-primary-foreground shadow-xs hover:bg-sus-primary/90 py-2",
-        defaultOutline: "border bg-background py-2 shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
-      },
-      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 Button({
-  className,
-  variant,
-  size,
-  active,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className, active })),
-      ...props
-    }
-  );
-}
 var s = (e2, s2, o3) => {
   if (e2 && "reportValidity" in e2) {
     const r2 = get(o3, s2);
@@ -1551,10 +1464,13 @@ function SortableRow({
     id: value,
     disabled: name == "columns.0.id"
   });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition
-  };
+  const style = React4.useMemo(
+    () => ({
+      transform: CSS.Transform.toString(transform),
+      transition
+    }),
+    [transform, transition]
+  );
   const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
   const currentFormColumns = useWatch({ control, name: "columns" });
   return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, className: "flex items-center rounded-md bg-white", children: /* @__PURE__ */ jsx(
@@ -1563,7 +1479,7 @@ function SortableRow({
       control,
       name,
       render: ({ field }) => {
-        const options = availableColumns.filter((col) => col.id === field.value || !currentFormColumns?.some((c) => c.id === col.id)).map((col) => ({ id: col.id, label: capitalize(col.id) }));
+        const options = availableColumns.filter((col) => col.id === field.value || !currentFormColumns?.some((c) => c.id === col.id)).map((col) => ({ id: col.id, label: col?.label ? col.label : capitalize(col.id) }));
         return /* @__PURE__ */ jsxs(FormItem2, { className: "flex-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
@@ -1640,7 +1556,7 @@ function SortableRow({
     }
   ) });
 }
-var buttonVariants2 = cva(
+var buttonVariants = 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: {
@@ -1674,7 +1590,7 @@ var buttonVariants2 = cva(
     }
   }
 );
-function Button2({
+function Button({
   className,
   variant,
   size,
@@ -1687,13 +1603,14 @@ function Button2({
     Comp,
     {
       "data-slot": "button",
-      className: cn(buttonVariants2({ variant, size, className, active })),
+      className: cn(buttonVariants({ variant, size, className, active })),
       ...props
     }
   );
 }
 var ColumnSchema = z.object({
-  id: z.string().nonempty("This field is required")
+  id: z.string().nonempty("This field is required"),
+  label: z.string().optional()
 });
 var GridSettingsSchema = z.object({
   columns: z.array(ColumnSchema).min(1, "At least one column is required")
@@ -1742,7 +1659,7 @@ var GridSettingsModal = ({
     );
     const pinning = { left: [data.columns[0].id] };
     if (onSaveColumns) {
-      onSaveColumns({ ordering, visibility, pinning });
+      onSaveColumns({ ordering, visibility, pinning }, data.columns);
     }
   };
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
@@ -1827,7 +1744,7 @@ var GridSettingsModal = ({
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: "px-6", children: /* @__PURE__ */ jsxs(
-          Button2,
+          Button,
           {
             type: "button",
             className: cn("bg-[#41875C99] text-white w-full rounded-t-lg", addButtonClassname),
@@ -1842,7 +1759,7 @@ var GridSettingsModal = ({
       ] }) }),
       /* @__PURE__ */ jsx(DialogFooter, { className: "w-full px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between w-full py-4 border-t-1 border-[#B9B9B9]", children: [
         /* @__PURE__ */ jsx(
-          Button2,
+          Button,
           {
             type: "button",
             variant: "outline",
@@ -1852,7 +1769,7 @@ var GridSettingsModal = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          Button2,
+          Button,
           {
             type: "submit",
             className: cn("w-18 bg-[#379A2A] text-white", saveButtonClassname),
@@ -1864,6 +1781,99 @@ var GridSettingsModal = ({
   ] }) }) });
 };
 var GridSettingsModal_default = GridSettingsModal;
+var useGridSettingsStore = create(
+  (set, get) => ({
+    availableColumns: [],
+    currentColumns: [],
+    payload: {
+      ordering: [],
+      visibility: {},
+      pinning: { left: [] }
+    },
+    setAvailableColumns: (cols) => set({ availableColumns: cols }),
+    setCurrentColumns: (cols) => set({ currentColumns: cols }),
+    setPayload: (payload) => set({ payload }),
+    reset: () => set({
+      availableColumns: [],
+      currentColumns: [],
+      payload: { ordering: [], visibility: {}, pinning: { left: [] } }
+    }),
+    extractColumns: (table) => {
+      const availableColumns = table.getAllColumns().map((col) => ({ id: col.id }));
+      const currentColumns = table.getVisibleLeafColumns().map((col) => ({ id: col.id }));
+      return { availableColumns, currentColumns };
+    },
+    syncColumnsState: (table, options) => {
+      const { availableColumns, currentColumns } = get().extractColumns(table);
+      const { excludeColumns = [], labelMap = {} } = options || {};
+      const filteredExcludeColumnFn = (column) => !excludeColumns.includes(column.id);
+      const mapLabel = (col) => ({
+        id: col.id,
+        label: labelMap?.[col.id] ?? col.label ?? col.id
+      });
+      set({
+        availableColumns: availableColumns.filter(filteredExcludeColumnFn).map(mapLabel),
+        currentColumns: currentColumns.filter(filteredExcludeColumnFn).map(mapLabel)
+      });
+    }
+  })
+);
+var useGridSettingsStore_default = useGridSettingsStore;
+var buttonVariants2 = 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",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        defaultSelect: "bg-primary text-primary-foreground shadow-xs hover:bg-sus-primary/90 py-2",
+        defaultOutline: "border bg-background py-2 shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
+      },
+      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 Button2({
+  className,
+  variant,
+  size,
+  active,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants2({ variant, size, className, active })),
+      ...props
+    }
+  );
+}
 var InfoIcon = (props) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -2038,7 +2048,7 @@ var Navbar = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           mainButtonText && /* @__PURE__ */ jsx(
-            Button,
+            Button2,
             {
               disabled: mainButtonDisable,
               className: cn("bg-sus-secondary-1 hover:bg-sus-secondary-hover", mainButtonClassName),
@@ -2048,7 +2058,7 @@ var Navbar = ({
             }
           ),
           subButtonText && /* @__PURE__ */ jsx(
-            Button,
+            Button2,
             {
               disabled: subButtonDisable,
               className: cn("bg-sus-primary-2 hover:bg-sus-primary-2-hover", subButtonClassName),
@@ -5267,6 +5277,6 @@ function variantClass(variant) {
   }
 }
 
-export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, DialogAlert, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, PreventPageLeave_default as PreventPageLeave, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, getColumnIdFromTable, isDefined, isEmptyObject, renderContentSlot, selectValueToBoolean, stripNullishObject, useFormField, 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, useTruncated_default as useTruncated };
+export { AdvanceSearch_default as AdvanceSearch, Button2 as Button, DataTable_default as DataTable, DialogAlert, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, PreventPageLeave_default as PreventPageLeave, TextInput, booleanToSelectValue, buttonVariants2 as buttonVariants, cn, compareAlphanumeric, debounce, isDefined, isEmptyObject, renderContentSlot, selectValueToBoolean, stripNullishObject, 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, useTruncated_default as useTruncated };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map