@sustaina/shared-ui 1.6.3 → 1.7.0

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { CSSProperties, ReactNode } from 'react';
 import { FieldValues, FieldPath, ControllerProps, UseFormGetFieldState } from 'react-hook-form';
-import { Header, RowData as RowData$1, Column as Column$1, Table as Table$1, ColumnDef, ColumnFiltersState, OnChangeFn, FilterFnOption, SortingState, ColumnOrderState, VisibilityState, ColumnPinningState, GroupingState, GroupingOptions, ColumnResizeMode, RowSelectionState, Row, ExpandedState, HeaderGroup, Cell, HeaderContext } from '@tanstack/react-table';
+import { Header, RowData as RowData$1, Column as Column$1, Table as Table$1, ColumnDef, ColumnFiltersState, OnChangeFn, FilterFnOption, SortingState, ColumnOrderState, VisibilityState, ColumnPinningState, GroupingState, GroupingOptions, ColumnResizeMode, RowSelectionState, Row, ExpandedState, Cell, HeaderGroup, HeaderContext } from '@tanstack/react-table';
 import * as zustand from 'zustand';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import { VariantProps } from 'class-variance-authority';
@@ -56,6 +56,8 @@ declare function Table({ className, ...props }: React$1.ComponentProps<"table">)
 declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): react_jsx_runtime.JSX.Element;
 declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): react_jsx_runtime.JSX.Element;
 declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): react_jsx_runtime.JSX.Element;
 
 type ColumnResizerProps = {
     header: Header<any, any>;
@@ -185,11 +187,24 @@ type DataTableComponentProps<TData> = {
     containerProps?: React.ComponentProps<typeof TableContainer>;
     tableProps?: React.ComponentProps<typeof Table>;
     tableHeaderProps?: React.ComponentProps<typeof TableHeader>;
+    tableHeadCellProps?: React.ComponentProps<typeof TableHead> | ((info: {
+        header: Header<TData, unknown>;
+        table: Table$1<TData>;
+    }) => React.ComponentProps<typeof TableHead>);
     tableBodyProps?: React.ComponentProps<typeof TableBody>;
     tableDataRowProps?: React.ComponentProps<typeof TableRow> | ((info: {
         row: Row<TData>;
         table: Table$1<TData>;
     }) => React.ComponentProps<typeof TableRow>);
+    tableDataCellProps?: React.ComponentProps<typeof TableCell> | ((info: {
+        row: Row<TData>;
+        cell: Cell<TData, unknown>;
+        table: Table$1<TData>;
+    }) => React.ComponentProps<typeof TableCell>);
+    tableFilterCellProps?: React.ComponentProps<typeof TableCell> | ((info: {
+        column: Column$1<TData>;
+        table: Table$1<TData>;
+    }) => React.ComponentProps<typeof TableCell>);
     columnResizerProps?: Omit<ColumnResizerProps, "header">;
 };
 type ContentSlot = {
@@ -248,6 +263,7 @@ declare module "@tanstack/react-table" {
   interface ColumnMeta<TData extends RowData> {
     headerProps?: React.ComponentProps<"th">;
     cellProps?: React.ComponentProps<"td">;
+    filterCellProps?: React.ComponentProps<"td">;
     useColumnSizing?: boolean;
     renderColumnFilter?: (props: DataTableColumnFilterProps<TData>) => ReactNode;
   }
@@ -348,7 +364,7 @@ type NavbarBaseProps = {
     searchButton?: React__default.ReactNode;
     separatorDisable?: boolean;
 };
-type NavbarProps = RequireAtLeastOne<NavbarBaseProps, "title" | "headImageURL">;
+type NavbarProps = RequireAtLeastOne<NavbarBaseProps, "title">;
 declare const _default: React__default.MemoExoticComponent<({ className, title, subTitle, headImageURL, headImageURLClassName, tooltipContentClassName, tooltipTitle, tooltipIcon, tooltipdescription, tooltipDescriptionWrapperClassName, mainButtonText, mainButtonClassName, mainButtonDisable, subButtonText, subButtonClassName, subButtonDisable, onMainButtonClick, onSubButtonClick, separatorDisable, searchButton }: NavbarProps) => react_jsx_runtime.JSX.Element>;
 
 type FieldType = "text" | "number" | "date" | "datetime" | "checkbox" | "dropdown" | "lookup" | "uuid";
@@ -398,8 +414,9 @@ interface DialogAlertProps {
     showCancel?: boolean;
     align?: "start" | "center" | "end";
     outlet?: React__default.ReactNode | null;
+    persistent?: boolean;
 }
-declare function DialogAlert({ open, onOpenChange, title, description, variant, confirmText, cancelText, onConfirm, onCancel, showCancel, align, outlet }: DialogAlertProps): react_jsx_runtime.JSX.Element;
+declare function DialogAlert({ open, onOpenChange, title, description, variant, confirmText, cancelText, onConfirm, onCancel, showCancel, align, outlet, persistent }: DialogAlertProps): react_jsx_runtime.JSX.Element;
 
 declare function isDefined(value: any): boolean;
 declare function isEmptyObject(value: any): boolean;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { CSSProperties, ReactNode } from 'react';
 import { FieldValues, FieldPath, ControllerProps, UseFormGetFieldState } from 'react-hook-form';
-import { Header, RowData as RowData$1, Column as Column$1, Table as Table$1, ColumnDef, ColumnFiltersState, OnChangeFn, FilterFnOption, SortingState, ColumnOrderState, VisibilityState, ColumnPinningState, GroupingState, GroupingOptions, ColumnResizeMode, RowSelectionState, Row, ExpandedState, HeaderGroup, Cell, HeaderContext } from '@tanstack/react-table';
+import { Header, RowData as RowData$1, Column as Column$1, Table as Table$1, ColumnDef, ColumnFiltersState, OnChangeFn, FilterFnOption, SortingState, ColumnOrderState, VisibilityState, ColumnPinningState, GroupingState, GroupingOptions, ColumnResizeMode, RowSelectionState, Row, ExpandedState, Cell, HeaderGroup, HeaderContext } from '@tanstack/react-table';
 import * as zustand from 'zustand';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import { VariantProps } from 'class-variance-authority';
@@ -56,6 +56,8 @@ declare function Table({ className, ...props }: React$1.ComponentProps<"table">)
 declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): react_jsx_runtime.JSX.Element;
 declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): react_jsx_runtime.JSX.Element;
 declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): react_jsx_runtime.JSX.Element;
 
 type ColumnResizerProps = {
     header: Header<any, any>;
@@ -185,11 +187,24 @@ type DataTableComponentProps<TData> = {
     containerProps?: React.ComponentProps<typeof TableContainer>;
     tableProps?: React.ComponentProps<typeof Table>;
     tableHeaderProps?: React.ComponentProps<typeof TableHeader>;
+    tableHeadCellProps?: React.ComponentProps<typeof TableHead> | ((info: {
+        header: Header<TData, unknown>;
+        table: Table$1<TData>;
+    }) => React.ComponentProps<typeof TableHead>);
     tableBodyProps?: React.ComponentProps<typeof TableBody>;
     tableDataRowProps?: React.ComponentProps<typeof TableRow> | ((info: {
         row: Row<TData>;
         table: Table$1<TData>;
     }) => React.ComponentProps<typeof TableRow>);
+    tableDataCellProps?: React.ComponentProps<typeof TableCell> | ((info: {
+        row: Row<TData>;
+        cell: Cell<TData, unknown>;
+        table: Table$1<TData>;
+    }) => React.ComponentProps<typeof TableCell>);
+    tableFilterCellProps?: React.ComponentProps<typeof TableCell> | ((info: {
+        column: Column$1<TData>;
+        table: Table$1<TData>;
+    }) => React.ComponentProps<typeof TableCell>);
     columnResizerProps?: Omit<ColumnResizerProps, "header">;
 };
 type ContentSlot = {
@@ -248,6 +263,7 @@ declare module "@tanstack/react-table" {
   interface ColumnMeta<TData extends RowData> {
     headerProps?: React.ComponentProps<"th">;
     cellProps?: React.ComponentProps<"td">;
+    filterCellProps?: React.ComponentProps<"td">;
     useColumnSizing?: boolean;
     renderColumnFilter?: (props: DataTableColumnFilterProps<TData>) => ReactNode;
   }
@@ -348,7 +364,7 @@ type NavbarBaseProps = {
     searchButton?: React__default.ReactNode;
     separatorDisable?: boolean;
 };
-type NavbarProps = RequireAtLeastOne<NavbarBaseProps, "title" | "headImageURL">;
+type NavbarProps = RequireAtLeastOne<NavbarBaseProps, "title">;
 declare const _default: React__default.MemoExoticComponent<({ className, title, subTitle, headImageURL, headImageURLClassName, tooltipContentClassName, tooltipTitle, tooltipIcon, tooltipdescription, tooltipDescriptionWrapperClassName, mainButtonText, mainButtonClassName, mainButtonDisable, subButtonText, subButtonClassName, subButtonDisable, onMainButtonClick, onSubButtonClick, separatorDisable, searchButton }: NavbarProps) => react_jsx_runtime.JSX.Element>;
 
 type FieldType = "text" | "number" | "date" | "datetime" | "checkbox" | "dropdown" | "lookup" | "uuid";
@@ -398,8 +414,9 @@ interface DialogAlertProps {
     showCancel?: boolean;
     align?: "start" | "center" | "end";
     outlet?: React__default.ReactNode | null;
+    persistent?: boolean;
 }
-declare function DialogAlert({ open, onOpenChange, title, description, variant, confirmText, cancelText, onConfirm, onCancel, showCancel, align, outlet }: DialogAlertProps): react_jsx_runtime.JSX.Element;
+declare function DialogAlert({ open, onOpenChange, title, description, variant, confirmText, cancelText, onConfirm, onCancel, showCancel, align, outlet, persistent }: DialogAlertProps): react_jsx_runtime.JSX.Element;
 
 declare function isDefined(value: any): boolean;
 declare function isEmptyObject(value: any): boolean;

package/dist/index.js

@@ -960,17 +960,24 @@ var DataTable = ({
                     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: [
@@ -985,14 +992,17 @@ var DataTable = ({
                   isSomeColumnsFilterable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -1000,7 +1010,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,
@@ -1032,9 +1043,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__ */ jsxRuntime.jsx(
                     TableCell,
                     {
+                      ...tableDataCellProps,
                       ...cell.column.columnDef?.meta?.cellProps,
                       className: cn(
                         {
@@ -1042,6 +1055,7 @@ var DataTable = ({
                           "bg-white group-hover:bg-[#eff5f1]": !row.getIsSelected()
                         },
                         classes,
+                        tableDataCellProps?.className,
                         cell.column.columnDef?.meta?.cellProps?.className
                       ),
                       style: {
@@ -1049,6 +1063,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: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
@@ -1954,10 +1969,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,
@@ -1986,19 +2001,18 @@ var Navbar = ({
             React4.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
             React4.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
           ] }),
-          tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { delayDuration: 700, children: [
+          tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-white hover:opacity-80", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon_default, { className: "w-4" }) }) }),
             /* @__PURE__ */ jsxRuntime.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 },
@@ -2011,7 +2025,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: [
@@ -2019,7 +2033,7 @@ var Navbar = ({
                           React4.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon3, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        React4.isValidElement(tooltipdescription) ? tooltipdescription : ""
+                        React4.isValidElement(tooltipdescription) && tooltipdescription
                       ]
                     }
                   ),
@@ -5245,7 +5259,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 = React4.useCallback(() => {
@@ -5255,7 +5270,8 @@ function DialogAlert({
   const handleConfirm = React4.useCallback(() => {
     onConfirm?.();
   }, [onConfirm]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent2, { className: "max-w-md", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
+  } : onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader2, { children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle2, { className: variantClass(variant), children: title }),
       description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription2, { children: description })