@eztrak/shared 0.7.2 → 0.7.4

package/dist/index.js

@@ -1319,15 +1319,14 @@ function Modal({
 // src/components/cell-editor/CustomCellEditor.tsx
 var import_react6 = require("react");
 var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
-var import_fa2 = require("react-icons/fa");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function ButtonSpinner() {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "svg",
     {
       className: "animate-spin",
-      width: 8,
-      height: 8,
+      width: 12,
+      height: 12,
       viewBox: "0 0 24 24",
       fill: "none",
       "aria-hidden": true,
@@ -1374,47 +1373,60 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
     entityId,
     entityName = "Record",
     onSave,
-    dropdownOptions = []
+    dropdownOptions = [],
+    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_react6.useState)(normalizedInitial);
     const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
     const inputRef = (0, import_react6.useRef)(null);
     const selectRef = (0, import_react6.useRef)(null);
+    const normalizedOptions = (0, import_react6.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_react6.useImperativeHandle)(ref, () => ({
       getValue: () => value,
       isCancelBeforeStart: () => false,
-      isCancelAfterEnd: () => false
+      isCancelAfterEnd: () => false,
+      isPopup: () => true
     }));
     (0, import_react6.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;
@@ -1463,59 +1475,72 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
       setValue(event.target.value);
     };
     const isSaveDisabled = isLoading || String(value) === String(normalizedInitial);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center w-full h-full min-h-0 overflow-hidden gap-0.5 min-w-[80px]", children: [
-      inputType === "dropdown" ? /* @__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",
-          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_runtime7.jsx)(
-        "input",
-        {
-          ref: inputRef,
-          type: inputType,
-          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",
-          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 })
-          }
+    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 gap-2 px-2 py-1 min-w-[320px] bg-white border border-gray-200 rounded-md shadow-md",
+          className
         ),
-        /* @__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 })
-          }
-        )
-      ] })
-    ] });
+        style: containerStyle,
+        children: [
+          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "select",
+            {
+              ref: selectRef,
+              value: String(value),
+              onChange: handleDropdownChange,
+              onKeyDown: handleKeyDown,
+              className: inputClassName ?? defaultInputClass,
+              disabled: isLoading,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
+                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: inputType,
+              value: String(value),
+              onChange: handleInputChange,
+              onKeyDown: handleKeyDown,
+              className: inputClassName ?? defaultInputClass,
+              placeholder: "...",
+              disabled: isLoading
+            }
+          ),
+          /* @__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"
+            }
+          )
+        ]
+      }
+    );
   }
 );
 CustomCellEditor.displayName = "CustomCellEditor";