@eztrak/shared 0.7.3 → 0.8.0

package/dist/components/index.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import react__default, { ReactNode, InputHTMLAttributes } from 'react';
+import react__default, { ReactNode, InputHTMLAttributes, CSSProperties } from 'react';
+import { PlacesType } from 'react-tooltip';
 
 type EztrakTab = {
     id: string;
@@ -161,6 +162,37 @@ interface LoaderProps {
 
 declare const Loader: react__default.FC<LoaderProps>;
 
+interface ToolTipProps {
+    text?: string | number | null;
+    placement?: PlacesType;
+    delayShow?: number;
+    delayHide?: number;
+    className?: string;
+    tooltipClassName?: string;
+    tooltipStyle?: CSSProperties;
+    wrapperTabIndex?: number;
+    disabled?: boolean;
+    children: ReactNode;
+}
+interface TooltipTextProps {
+    text?: string | number | null;
+    maxLength?: number;
+    fallback?: string;
+    placement?: PlacesType;
+    delayShow?: number;
+    delayHide?: number;
+    className?: string;
+    textClassName?: string;
+    tooltipClassName?: string;
+    tooltipStyle?: CSSProperties;
+    showTooltip?: boolean;
+    tooltipWhenTruncatedOnly?: boolean;
+}
+
+declare function ToolTip({ text, placement, delayShow, delayHide, className, tooltipClassName, tooltipStyle, wrapperTabIndex, disabled, children, }: ToolTipProps): react.JSX.Element;
+
+declare function TooltipText({ text, maxLength, fallback, placement, delayShow, delayHide, className, textClassName, tooltipClassName, tooltipStyle, showTooltip, tooltipWhenTruncatedOnly, }: TooltipTextProps): react.JSX.Element;
+
 type CellEditorInputType = "text" | "number" | "date" | "dropdown";
 interface DropdownOption {
     value: string;
@@ -169,26 +201,54 @@ interface DropdownOption {
 interface CellEditPayload {
     propertyName: string;
     propertyValue: string | number | null;
-    entityId: string | number;
-    entityName: string;
+    entityId?: string | number;
+    entityName?: string;
 }
 interface CustomCellEditorRef {
     getValue: () => string | number | null | undefined;
     isCancelBeforeStart: () => boolean;
     isCancelAfterEnd: () => boolean;
+    /** Tells AG Grid to render this editor as a floating popup, free of column width */
+    isPopup: () => boolean;
 }
 interface CustomCellEditorProps {
     value: string | number | null | undefined;
     name: string;
     inputType?: CellEditorInputType;
     stopEditing: (cancel?: boolean) => void;
-    entityId: string | number;
+    entityId?: string | number;
     entityName?: string;
     onSave: (payload: CellEditPayload) => Promise<void>;
+    /** Standard {value, label} dropdown options */
     dropdownOptions?: DropdownOption[];
+    /** Raw options array with custom key shapes (use with valueKey/labelKey) */
+    customOptions?: Record<string, unknown>[];
+    /** Key to read as option value from customOptions items (default: "value") */
+    valueKey?: string;
+    /** Key to read as option label from customOptions items (default: "label") */
+    labelKey?: string;
+    /** Extra inline styles applied to the wrapper div (merged with default layout) */
+    containerStyle?: CSSProperties;
+    /** Tailwind/CSS class(es) for the wrapper div */
     className?: string;
+    /** Tailwind/CSS class(es) applied directly to the <input> or <select> */
+    inputClassName?: string;
+    /** Replaces the built-in ButtonSpinner when isLoading is true */
+    loadingIndicator?: ReactNode;
+    /** Replaces the default FaCheck icon in the save button */
+    saveButtonContent?: ReactNode;
+    /** Replaces the default FaTimes icon in the cancel button */
+    cancelButtonContent?: ReactNode;
+    /** Inline styles for the save button */
+    saveButtonStyle?: CSSProperties;
+    /** Inline styles for the cancel button */
+    cancelButtonStyle?: CSSProperties;
+    /** Extra class(es) for the save button */
+    saveButtonClassName?: string;
+    /** Extra class(es) for the cancel button */
+    cancelButtonClassName?: string;
 }
 
 declare const CustomCellEditor: react.ForwardRefExoticComponent<CustomCellEditorProps & react.RefAttributes<CustomCellEditorRef>>;
 
-export { type CellEditPayload, type CellEditorInputType, CustomCellEditor, type CustomCellEditorProps, type CustomCellEditorRef, CustomPagination, type CustomPaginationClassNames, type CustomPaginationProps, type DropdownOption, type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps, type LayoutStatus, Loader, type LoaderProps, Modal, type ModalProps, type PaginationData, ResetColumnsButton, type ResetColumnsButtonProps, ResetFiltersButton, type ResetFiltersButtonProps, type ResetFiltersButtonVariant, SearchInput, type SearchInputProps, TableLayoutToolbarControls, type TableLayoutToolbarControlsProps };
+export { type CellEditPayload, type CellEditorInputType, CustomCellEditor, type CustomCellEditorProps, type CustomCellEditorRef, CustomPagination, type CustomPaginationClassNames, type CustomPaginationProps, type DropdownOption, type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps, type LayoutStatus, Loader, type LoaderProps, Modal, type ModalProps, type PaginationData, ResetColumnsButton, type ResetColumnsButtonProps, ResetFiltersButton, type ResetFiltersButtonProps, type ResetFiltersButtonVariant, SearchInput, type SearchInputProps, TableLayoutToolbarControls, type TableLayoutToolbarControlsProps, ToolTip, type ToolTipProps, TooltipText, type TooltipTextProps };

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import react__default, { ReactNode, InputHTMLAttributes } from 'react';
+import react__default, { ReactNode, InputHTMLAttributes, CSSProperties } from 'react';
+import { PlacesType } from 'react-tooltip';
 
 type EztrakTab = {
     id: string;
@@ -161,6 +162,37 @@ interface LoaderProps {
 
 declare const Loader: react__default.FC<LoaderProps>;
 
+interface ToolTipProps {
+    text?: string | number | null;
+    placement?: PlacesType;
+    delayShow?: number;
+    delayHide?: number;
+    className?: string;
+    tooltipClassName?: string;
+    tooltipStyle?: CSSProperties;
+    wrapperTabIndex?: number;
+    disabled?: boolean;
+    children: ReactNode;
+}
+interface TooltipTextProps {
+    text?: string | number | null;
+    maxLength?: number;
+    fallback?: string;
+    placement?: PlacesType;
+    delayShow?: number;
+    delayHide?: number;
+    className?: string;
+    textClassName?: string;
+    tooltipClassName?: string;
+    tooltipStyle?: CSSProperties;
+    showTooltip?: boolean;
+    tooltipWhenTruncatedOnly?: boolean;
+}
+
+declare function ToolTip({ text, placement, delayShow, delayHide, className, tooltipClassName, tooltipStyle, wrapperTabIndex, disabled, children, }: ToolTipProps): react.JSX.Element;
+
+declare function TooltipText({ text, maxLength, fallback, placement, delayShow, delayHide, className, textClassName, tooltipClassName, tooltipStyle, showTooltip, tooltipWhenTruncatedOnly, }: TooltipTextProps): react.JSX.Element;
+
 type CellEditorInputType = "text" | "number" | "date" | "dropdown";
 interface DropdownOption {
     value: string;
@@ -169,26 +201,54 @@ interface DropdownOption {
 interface CellEditPayload {
     propertyName: string;
     propertyValue: string | number | null;
-    entityId: string | number;
-    entityName: string;
+    entityId?: string | number;
+    entityName?: string;
 }
 interface CustomCellEditorRef {
     getValue: () => string | number | null | undefined;
     isCancelBeforeStart: () => boolean;
     isCancelAfterEnd: () => boolean;
+    /** Tells AG Grid to render this editor as a floating popup, free of column width */
+    isPopup: () => boolean;
 }
 interface CustomCellEditorProps {
     value: string | number | null | undefined;
     name: string;
     inputType?: CellEditorInputType;
     stopEditing: (cancel?: boolean) => void;
-    entityId: string | number;
+    entityId?: string | number;
     entityName?: string;
     onSave: (payload: CellEditPayload) => Promise<void>;
+    /** Standard {value, label} dropdown options */
     dropdownOptions?: DropdownOption[];
+    /** Raw options array with custom key shapes (use with valueKey/labelKey) */
+    customOptions?: Record<string, unknown>[];
+    /** Key to read as option value from customOptions items (default: "value") */
+    valueKey?: string;
+    /** Key to read as option label from customOptions items (default: "label") */
+    labelKey?: string;
+    /** Extra inline styles applied to the wrapper div (merged with default layout) */
+    containerStyle?: CSSProperties;
+    /** Tailwind/CSS class(es) for the wrapper div */
     className?: string;
+    /** Tailwind/CSS class(es) applied directly to the <input> or <select> */
+    inputClassName?: string;
+    /** Replaces the built-in ButtonSpinner when isLoading is true */
+    loadingIndicator?: ReactNode;
+    /** Replaces the default FaCheck icon in the save button */
+    saveButtonContent?: ReactNode;
+    /** Replaces the default FaTimes icon in the cancel button */
+    cancelButtonContent?: ReactNode;
+    /** Inline styles for the save button */
+    saveButtonStyle?: CSSProperties;
+    /** Inline styles for the cancel button */
+    cancelButtonStyle?: CSSProperties;
+    /** Extra class(es) for the save button */
+    saveButtonClassName?: string;
+    /** Extra class(es) for the cancel button */
+    cancelButtonClassName?: string;
 }
 
 declare const CustomCellEditor: react.ForwardRefExoticComponent<CustomCellEditorProps & react.RefAttributes<CustomCellEditorRef>>;
 
-export { type CellEditPayload, type CellEditorInputType, CustomCellEditor, type CustomCellEditorProps, type CustomCellEditorRef, CustomPagination, type CustomPaginationClassNames, type CustomPaginationProps, type DropdownOption, type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps, type LayoutStatus, Loader, type LoaderProps, Modal, type ModalProps, type PaginationData, ResetColumnsButton, type ResetColumnsButtonProps, ResetFiltersButton, type ResetFiltersButtonProps, type ResetFiltersButtonVariant, SearchInput, type SearchInputProps, TableLayoutToolbarControls, type TableLayoutToolbarControlsProps };
+export { type CellEditPayload, type CellEditorInputType, CustomCellEditor, type CustomCellEditorProps, type CustomCellEditorRef, CustomPagination, type CustomPaginationClassNames, type CustomPaginationProps, type DropdownOption, type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps, type LayoutStatus, Loader, type LoaderProps, Modal, type ModalProps, type PaginationData, ResetColumnsButton, type ResetColumnsButtonProps, ResetFiltersButton, type ResetFiltersButtonProps, type ResetFiltersButtonVariant, SearchInput, type SearchInputProps, TableLayoutToolbarControls, type TableLayoutToolbarControlsProps, ToolTip, type ToolTipProps, TooltipText, type TooltipTextProps };

package/dist/components/index.js

@@ -38,7 +38,9 @@ __export(components_exports, {
   ResetColumnsButton: () => ResetColumnsButton,
   ResetFiltersButton: () => ResetFiltersButton,
   SearchInput: () => SearchInput,
-  TableLayoutToolbarControls: () => TableLayoutToolbarControls
+  TableLayoutToolbarControls: () => TableLayoutToolbarControls,
+  ToolTip: () => ToolTip,
+  TooltipText: () => TooltipText
 });
 module.exports = __toCommonJS(components_exports);
 
@@ -978,12 +980,72 @@ function Modal({
   return (0, import_react_dom.createPortal)(modalContent, modalRoot);
 }
 
-// src/components/cell-editor/CustomCellEditor.tsx
+// src/components/tooltip/ToolTip.tsx
 var import_react4 = require("react");
-var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
-var import_fa2 = require("react-icons/fa");
+var import_react_tooltip = require("react-tooltip");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var defaultTooltipStyle = {
+  color: "#fff",
+  borderRadius: "5px",
+  zIndex: 999,
+  textAlign: "justify",
+  maxWidth: "300px",
+  whiteSpace: "pre-wrap",
+  wordWrap: "break-word",
+  overflowWrap: "break-word"
+};
+function ToolTip({
+  text = "tool tip",
+  placement = "top",
+  delayShow,
+  delayHide,
+  className,
+  tooltipClassName,
+  tooltipStyle,
+  wrapperTabIndex,
+  disabled = false,
+  children
+}) {
+  const generatedId = (0, import_react4.useId)();
+  const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
+  const tooltipText = String(text ?? "");
+  if (disabled || !tooltipText) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        className,
+        "data-tooltip-id": tooltipId,
+        "data-tooltip-content": tooltipText,
+        tabIndex: wrapperTabIndex,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_tooltip.Tooltip,
+      {
+        id: tooltipId,
+        place: placement,
+        delayShow,
+        delayHide,
+        className: tooltipClassName,
+        style: { ...defaultTooltipStyle, ...tooltipStyle }
+      }
+    )
+  ] });
+}
 
 // src/utils/helpers.ts
+var truncateText = (text, maxLength = 20) => {
+  if (text === null || text === void 0) return "";
+  const value = String(text);
+  if (value.length <= maxLength) {
+    return value;
+  }
+  return value.slice(0, maxLength - 3) + "...";
+};
 var toDateInputValue = (date) => {
   if (!date) return "";
   let d;
@@ -1003,20 +1065,60 @@ var toDateInputValue = (date) => {
   return `${year}-${month}-${day}`;
 };
 
+// src/components/tooltip/TooltipText.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function TooltipText({
+  text = "",
+  maxLength = 20,
+  fallback = "-",
+  placement = "top",
+  delayShow,
+  delayHide,
+  className,
+  textClassName,
+  tooltipClassName,
+  tooltipStyle,
+  showTooltip = true,
+  tooltipWhenTruncatedOnly = false
+}) {
+  const hasValue = text !== null && text !== void 0 && text !== "";
+  const fullText = hasValue ? String(text) : fallback;
+  const displayText = truncateText(fullText, maxLength);
+  const isTruncated = displayText !== fullText;
+  const tooltipDisabled = !showTooltip || !hasValue || tooltipWhenTruncatedOnly && !isTruncated;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ToolTip,
+    {
+      text: fullText,
+      placement,
+      delayShow,
+      delayHide,
+      className: cn("inline-block max-w-full", className),
+      tooltipClassName,
+      tooltipStyle,
+      wrapperTabIndex: tooltipDisabled ? void 0 : 0,
+      disabled: tooltipDisabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
+    }
+  );
+}
+
 // src/components/cell-editor/CustomCellEditor.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ButtonSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
       className: "animate-spin",
-      width: 8,
-      height: 8,
+      width: 12,
+      height: 12,
       viewBox: "0 0 24 24",
       fill: "none",
       "aria-hidden": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "circle",
           {
             cx: "12",
@@ -1027,7 +1129,7 @@ function ButtonSpinner() {
             strokeOpacity: "0.25"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "path",
           {
             d: "M12 2a10 10 0 0 1 10 10",
@@ -1049,7 +1151,7 @@ function normalizeInitialValue(initialValue, inputType) {
   }
   return initialValue;
 }
-var CustomCellEditor = (0, import_react4.forwardRef)(
+var CustomCellEditor = (0, import_react5.forwardRef)(
   ({
     value: initialValue,
     name,
@@ -1059,47 +1161,59 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
     entityName = "Record",
     onSave,
     dropdownOptions = [],
-    className
+    customOptions,
+    valueKey = "value",
+    labelKey = "label",
+    containerStyle,
+    className,
+    inputClassName,
+    loadingIndicator,
+    saveButtonContent,
+    cancelButtonContent,
+    saveButtonStyle,
+    cancelButtonStyle,
+    saveButtonClassName,
+    cancelButtonClassName
   }, ref) => {
     const normalizedInitial = normalizeInitialValue(initialValue, inputType);
-    const [value, setValue] = (0, import_react4.useState)(normalizedInitial);
-    const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
-    const inputRef = (0, import_react4.useRef)(null);
-    const selectRef = (0, import_react4.useRef)(null);
-    (0, import_react4.useImperativeHandle)(ref, () => ({
+    const [value, setValue] = (0, import_react5.useState)(normalizedInitial);
+    const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+    const inputRef = (0, import_react5.useRef)(null);
+    const selectRef = (0, import_react5.useRef)(null);
+    const normalizedOptions = (0, import_react5.useMemo)(() => {
+      if (customOptions && customOptions.length > 0) {
+        return customOptions.map((opt) => ({
+          value: String(opt[valueKey] ?? ""),
+          label: String(opt[labelKey] ?? "")
+        }));
+      }
+      return dropdownOptions;
+    }, [customOptions, dropdownOptions, valueKey, labelKey]);
+    const isDropdown = inputType === "dropdown" || normalizedOptions.length > 0;
+    (0, import_react5.useImperativeHandle)(ref, () => ({
       getValue: () => value,
       isCancelBeforeStart: () => false,
-      isCancelAfterEnd: () => false
+      isCancelAfterEnd: () => false,
+      isPopup: () => true
     }));
-    (0, import_react4.useEffect)(() => {
-      if (inputType === "dropdown") {
-        const el2 = selectRef.current;
-        if (el2) {
-          el2.focus();
-        }
+    (0, import_react5.useEffect)(() => {
+      if (isDropdown) {
+        selectRef.current?.focus();
         return;
       }
       const el = inputRef.current;
-      if (!el) {
-        return;
-      }
+      if (!el) return;
       el.focus();
       if (inputType !== "date") {
         el.select();
       }
-    }, [inputType]);
+    }, [isDropdown, inputType]);
     const handleSave = async () => {
-      if (isLoading) {
-        return;
-      }
+      if (isLoading) return;
       if (String(value) === String(normalizedInitial)) {
         stopEditing();
         return;
       }
-      if (!entityId) {
-        import_react_hot_toast2.default.error("Entity ID is required");
-        return;
-      }
       if (!name) {
         import_react_hot_toast2.default.error("Property name is required");
         return;
@@ -1148,29 +1262,33 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
       setValue(event.target.value);
     };
     const isSaveDisabled = isLoading || String(value) === String(normalizedInitial);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    const defaultInputClass = "w-48 px-2 py-1 text-sm border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-400";
+    const defaultSaveBtnClass = "px-3 py-1 text-sm font-medium text-white bg-green-500 rounded-md hover:bg-green-600 disabled:opacity-50 whitespace-nowrap shrink-0";
+    const defaultCancelBtnClass = "px-3 py-1 text-sm font-medium text-white bg-red-500 rounded-md hover:bg-red-600 disabled:opacity-50 whitespace-nowrap shrink-0";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         className: cn(
-          "flex items-center w-full h-full min-h-0 overflow-hidden gap-0.5 min-w-[80px]",
+          "flex items-center gap-2 px-2 py-1 min-w-[320px] bg-white border border-gray-200 rounded-md shadow-md",
           className
         ),
+        style: containerStyle,
         children: [
-          inputType === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "select",
             {
               ref: selectRef,
               value: String(value),
               onChange: handleDropdownChange,
               onKeyDown: handleKeyDown,
-              className: "flex-1 h-full p-0 text-[10px] border border-gray-300 rounded-sm focus:outline-none focus:ring-1 focus:ring-blue-400 min-w-0 truncate",
+              className: inputClassName ?? defaultInputClass,
               disabled: isLoading,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
-                dropdownOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
+                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "input",
             {
               ref: inputRef,
@@ -1178,35 +1296,35 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
               value: String(value),
               onChange: handleInputChange,
               onKeyDown: handleKeyDown,
-              className: "flex-1 h-full p-0 text-[10px] border border-gray-300 rounded-sm focus:outline-none focus:ring-1 focus:ring-blue-400 min-w-0 truncate",
+              className: inputClassName ?? defaultInputClass,
               placeholder: "...",
               disabled: isLoading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center shrink-0 gap-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: handleSave,
-                disabled: isSaveDisabled,
-                className: "flex items-center justify-center w-4 h-4 text-white bg-green-500 rounded-sm hover:bg-green-600 disabled:opacity-50",
-                title: "Save (Enter)",
-                children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonSpinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa2.FaCheck, { size: 7, "aria-hidden": true })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: handleCancel,
-                disabled: isLoading,
-                className: "flex items-center justify-center w-4 h-4 text-white bg-red-500 rounded-sm hover:bg-red-600 disabled:opacity-50",
-                title: "Cancel (Escape)",
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa2.FaTimes, { size: 7, "aria-hidden": true })
-              }
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleSave,
+              disabled: isSaveDisabled,
+              className: saveButtonClassName ?? (saveButtonStyle ? void 0 : defaultSaveBtnClass),
+              style: saveButtonStyle,
+              title: "Save (Enter)",
+              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleCancel,
+              disabled: isLoading,
+              className: cancelButtonClassName ?? (cancelButtonStyle ? void 0 : defaultCancelBtnClass),
+              style: cancelButtonStyle,
+              title: "Cancel (Escape)",
+              children: cancelButtonContent ?? "Cancel"
+            }
+          )
         ]
       }
     );
@@ -1223,6 +1341,8 @@ CustomCellEditor.displayName = "CustomCellEditor";
   ResetColumnsButton,
   ResetFiltersButton,
   SearchInput,
-  TableLayoutToolbarControls
+  TableLayoutToolbarControls,
+  ToolTip,
+  TooltipText
 });
 //# sourceMappingURL=index.js.map