@sustaina/shared-ui 1.6.3 → 1.7.0

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())
@@ -1925,10 +1940,10 @@ var Navbar = ({
   subTitle,
   headImageURL = "",
   headImageURLClassName,
-  tooltipContentClassName = "md:w-[350px] lg:w-[420px]",
+  tooltipContentClassName = "w-[450px] lg:!w-[630px]",
   tooltipTitle,
   tooltipIcon,
-  tooltipdescription = [],
+  tooltipdescription,
   tooltipDescriptionWrapperClassName,
   mainButtonText,
   mainButtonClassName,
@@ -1957,19 +1972,18 @@ 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,
               {
                 forceMount: true,
                 side: isDesktop ? "right" : "bottom",
-                sideOffset: 8,
                 align: "start",
                 avoidCollisions: false,
                 className: cn(
-                  "bg-background text-foreground border border-black",
-                  "transition-all duration-150 ease-out origin-top",
+                  "bg-white border border-black p-6",
+                  "transition-all duration-150 ease-out origin-top top-1 left-4",
                   "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
                   "data-[state=closed]:scale-95 data-[state=open]:scale-100",
                   { "mt-5": isDesktop },
@@ -1982,7 +1996,7 @@ var Navbar = ({
                       role: "tooltip",
                       "aria-label": tooltipTitle,
                       className: cn(
-                        "flex flex-col gap-4 max-w-sm text-sm text-gray-700",
+                        "flex flex-col gap-4 text-sm text-black text-pretty",
                         tooltipDescriptionWrapperClassName
                       ),
                       children: [
@@ -1990,7 +2004,7 @@ var Navbar = ({
                           isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsx(Icon3, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        isValidElement(tooltipdescription) ? tooltipdescription : ""
+                        isValidElement(tooltipdescription) && tooltipdescription
                       ]
                     }
                   ),
@@ -5216,7 +5230,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(() => {
@@ -5226,7 +5241,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 })