@sustaina/shared-ui 1.6.4 → 1.7.1

package/dist/index.mjs

@@ -931,17 +931,24 @@ var DataTable = ({
                     return /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
                       const { classes, style } = getColumnPinningStyles(header.column);
                       const useColumnSizing = header.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
+                      const tableHeadCellProps = typeof components?.tableHeadCellProps === "function" ? components?.tableHeadCellProps({ header, table }) : components?.tableHeadCellProps;
                       return /* @__PURE__ */ jsxs(
                         TableHead,
                         {
                           colSpan: header.colSpan,
+                          ...tableHeadCellProps,
                           ...header.column.columnDef?.meta?.headerProps,
-                          className: cn(classes, header.column.columnDef?.meta?.headerProps?.className),
+                          className: cn(
+                            classes,
+                            tableHeadCellProps?.className,
+                            header.column.columnDef?.meta?.headerProps?.className
+                          ),
                           style: {
                             ...style,
                             width: useColumnSizing ? header.column.getSize() : void 0,
                             minWidth: useColumnSizing ? header.column.columnDef.minSize : void 0,
                             maxWidth: useColumnSizing ? header.column.columnDef.maxSize : void 0,
+                            ...tableHeadCellProps?.style,
                             ...header.column.columnDef?.meta?.headerProps?.style
                           },
                           children: [
@@ -956,14 +963,17 @@ var DataTable = ({
                   isSomeColumnsFilterable && /* @__PURE__ */ jsx(TableRow, { children: filterableColumns.map((column) => {
                     const { classes, style } = getColumnPinningStyles(column);
                     const useColumnSizing = column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
+                    const tableFilterCellProps = typeof components?.tableFilterCellProps === "function" ? components?.tableFilterCellProps({ column, table }) : components?.tableFilterCellProps;
                     return /* @__PURE__ */ jsx(
                       TableCell,
                       {
-                        ...column.columnDef?.meta?.cellProps,
+                        ...tableFilterCellProps,
+                        ...column.columnDef?.meta?.filterCellProps,
                         className: cn(
                           "bg-white border-b",
                           classes,
-                          column.columnDef?.meta?.cellProps?.className
+                          tableFilterCellProps?.className,
+                          column.columnDef?.meta?.filterCellProps?.className
                         ),
                         style: {
                           // TODO: should we separate styles for filter or use same columns styles
@@ -971,7 +981,8 @@ var DataTable = ({
                           width: useColumnSizing ? column.getSize() : void 0,
                           minWidth: useColumnSizing ? column.columnDef.minSize : void 0,
                           maxWidth: useColumnSizing ? column.columnDef.maxSize : void 0,
-                          ...column.columnDef?.meta?.cellProps?.style
+                          ...tableFilterCellProps?.style,
+                          ...column.columnDef?.meta?.filterCellProps?.style
                         },
                         children: column.getCanFilter() && column.columnDef.meta?.renderColumnFilter?.({
                           column,
@@ -1003,9 +1014,11 @@ var DataTable = ({
                 row.getVisibleCells().map((cell) => {
                   const { classes, style } = getColumnPinningStyles(cell.column);
                   const useColumnSizing = cell.column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
+                  const tableDataCellProps = typeof components?.tableDataCellProps === "function" ? components?.tableDataCellProps({ row, cell, table }) : components?.tableDataCellProps;
                   return /* @__PURE__ */ jsx(
                     TableCell,
                     {
+                      ...tableDataCellProps,
                       ...cell.column.columnDef?.meta?.cellProps,
                       className: cn(
                         {
@@ -1013,6 +1026,7 @@ var DataTable = ({
                           "bg-white group-hover:bg-[#eff5f1]": !row.getIsSelected()
                         },
                         classes,
+                        tableDataCellProps?.className,
                         cell.column.columnDef?.meta?.cellProps?.className
                       ),
                       style: {
@@ -1020,6 +1034,7 @@ var DataTable = ({
                         width: useColumnSizing ? cell.column.getSize() : void 0,
                         minWidth: useColumnSizing ? cell.column.columnDef.minSize : void 0,
                         maxWidth: useColumnSizing ? cell.column.columnDef.maxSize : void 0,
+                        ...tableDataCellProps?.style,
                         ...cell.column.columnDef?.meta?.cellProps?.style
                       },
                       children: flexRender(cell.column.columnDef.cell, cell.getContext())
@@ -1536,10 +1551,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(
@@ -1548,7 +1566,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(
@@ -1957,7 +1975,7 @@ var Navbar = ({
             isValidElement(title) ? title : /* @__PURE__ */ jsx("h1", { className: "text-white text-xl font-bold", children: title }),
             isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
           ] }),
-          tooltipTitle && /* @__PURE__ */ jsxs(Tooltip2, { delayDuration: 700, children: [
+          tooltipTitle && /* @__PURE__ */ jsxs(Tooltip2, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "text-white hover:opacity-80", children: /* @__PURE__ */ jsx(InfoIcon_default, { className: "w-4" }) }) }),
             /* @__PURE__ */ jsxs(
               TooltipContent2,
@@ -5215,7 +5233,8 @@ function DialogAlert({
   onCancel,
   showCancel = true,
   align = "center",
-  outlet
+  outlet,
+  persistent = false
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
   const handleCancel = useCallback(() => {
@@ -5225,7 +5244,8 @@ function DialogAlert({
   const handleConfirm = useCallback(() => {
     onConfirm?.();
   }, [onConfirm]);
-  return /* @__PURE__ */ jsx(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent2, { className: "max-w-md", children: [
+  return /* @__PURE__ */ jsx(Dialog2, { open, onOpenChange: persistent ? () => {
+  } : onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxs(DialogHeader2, { children: [
       title && /* @__PURE__ */ jsx(DialogTitle2, { className: variantClass(variant), children: title }),
       description && /* @__PURE__ */ jsx(DialogDescription2, { children: description })