@sustaina/shared-ui 1.6.4 → 1.7.1

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;
   }
@@ -298,6 +314,7 @@ declare function Button({ className, variant, size, active, asChild, ...props }:
 
 type Column = {
     id: string;
+    label?: string;
 };
 type GridPayload<TColumn extends {
     id: string;
@@ -398,8 +415,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;
   }
@@ -298,6 +314,7 @@ declare function Button({ className, variant, size, active, asChild, ...props }:
 
 type Column = {
     id: string;
+    label?: string;
 };
 type GridPayload<TColumn extends {
     id: string;
@@ -398,8 +415,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())
@@ -1565,10 +1580,13 @@ function SortableRow({
     id: value,
     disabled: name == "columns.0.id"
   });
-  const style = {
-    transform: utilities.CSS.Transform.toString(transform),
-    transition
-  };
+  const style = React4__namespace.useMemo(
+    () => ({
+      transform: utilities.CSS.Transform.toString(transform),
+      transition
+    }),
+    [transform, transition]
+  );
   const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
   const currentFormColumns = reactHookForm.useWatch({ control, name: "columns" });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, className: "flex items-center rounded-md bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1577,7 +1595,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__ */ jsxRuntime.jsxs(FormItem2, { className: "flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1986,7 +2004,7 @@ 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,
@@ -5244,7 +5262,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(() => {
@@ -5254,7 +5273,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 })