@eztrak/shared 0.7.3 → 0.8.0

package/dist/index.js

@@ -39,6 +39,8 @@ __export(src_exports, {
   ResetFiltersButton: () => ResetFiltersButton,
   SearchInput: () => SearchInput,
   TableLayoutToolbarControls: () => TableLayoutToolbarControls,
+  ToolTip: () => ToolTip,
+  TooltipText: () => TooltipText,
   capitalizeText: () => capitalizeText,
   checkIfExistsInArray: () => checkIfExistsInArray,
   cn: () => cn,
@@ -1316,23 +1318,117 @@ function Modal({
   return (0, import_react_dom.createPortal)(modalContent, modalRoot);
 }
 
-// src/components/cell-editor/CustomCellEditor.tsx
+// src/components/tooltip/ToolTip.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_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_react6.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/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_react7 = 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",
@@ -1343,7 +1439,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",
@@ -1365,7 +1461,7 @@ function normalizeInitialValue(initialValue, inputType) {
   }
   return initialValue;
 }
-var CustomCellEditor = (0, import_react6.forwardRef)(
+var CustomCellEditor = (0, import_react7.forwardRef)(
   ({
     value: initialValue,
     name,
@@ -1375,47 +1471,59 @@ var CustomCellEditor = (0, import_react6.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_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);
-    (0, import_react6.useImperativeHandle)(ref, () => ({
+    const [value, setValue] = (0, import_react7.useState)(normalizedInitial);
+    const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+    const inputRef = (0, import_react7.useRef)(null);
+    const selectRef = (0, import_react7.useRef)(null);
+    const normalizedOptions = (0, import_react7.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_react7.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();
-        }
+    (0, import_react7.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;
@@ -1464,29 +1572,33 @@ var CustomCellEditor = (0, import_react6.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,
@@ -1494,35 +1606,35 @@ var CustomCellEditor = (0, import_react6.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"
+            }
+          )
         ]
       }
     );
@@ -1540,6 +1652,8 @@ CustomCellEditor.displayName = "CustomCellEditor";
   ResetFiltersButton,
   SearchInput,
   TableLayoutToolbarControls,
+  ToolTip,
+  TooltipText,
   capitalizeText,
   checkIfExistsInArray,
   cn,