@eztrak/shared 0.7.3 → 0.7.4

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, InputHTMLAttributes } from 'react';
+import react__default, { ReactNode, InputHTMLAttributes, CSSProperties } from 'react';
 
 type EztrakTab = {
     id: string;
@@ -169,24 +169,52 @@ 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>>;

package/dist/components/index.js

@@ -981,7 +981,6 @@ function Modal({
 // src/components/cell-editor/CustomCellEditor.tsx
 var import_react4 = require("react");
 var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
-var import_fa2 = require("react-icons/fa");
 
 // src/utils/helpers.ts
 var toDateInputValue = (date) => {
@@ -1010,8 +1009,8 @@ function ButtonSpinner() {
     "svg",
     {
       className: "animate-spin",
-      width: 8,
-      height: 8,
+      width: 12,
+      height: 12,
       viewBox: "0 0 24 24",
       fill: "none",
       "aria-hidden": true,
@@ -1059,47 +1058,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);
+    const normalizedOptions = (0, import_react4.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_react4.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();
-        }
+      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,26 +1159,30 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
       setValue(event.target.value);
     };
     const isSaveDisabled = isLoading || String(value) === String(normalizedInitial);
+    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_runtime7.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_runtime7.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))
+                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
               ]
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1178,35 +1193,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_runtime7.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_runtime7.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleCancel,
+              disabled: isLoading,
+              className: cancelButtonClassName ?? (cancelButtonStyle ? void 0 : defaultCancelBtnClass),
+              style: cancelButtonStyle,
+              title: "Cancel (Escape)",
+              children: cancelButtonContent ?? "Cancel"
+            }
+          )
         ]
       }
     );