@eztrak/shared 0.7.4 → 0.8.0

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,11 +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_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;
@@ -1002,10 +1065,50 @@ 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",
@@ -1015,7 +1118,7 @@ function ButtonSpinner() {
       fill: "none",
       "aria-hidden": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "circle",
           {
             cx: "12",
@@ -1026,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",
@@ -1048,7 +1151,7 @@ function normalizeInitialValue(initialValue, inputType) {
   }
   return initialValue;
 }
-var CustomCellEditor = (0, import_react4.forwardRef)(
+var CustomCellEditor = (0, import_react5.forwardRef)(
   ({
     value: initialValue,
     name,
@@ -1073,11 +1176,11 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
     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)(() => {
+    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] ?? ""),
@@ -1087,13 +1190,13 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
       return dropdownOptions;
     }, [customOptions, dropdownOptions, valueKey, labelKey]);
     const isDropdown = inputType === "dropdown" || normalizedOptions.length > 0;
-    (0, import_react4.useImperativeHandle)(ref, () => ({
+    (0, import_react5.useImperativeHandle)(ref, () => ({
       getValue: () => value,
       isCancelBeforeStart: () => false,
       isCancelAfterEnd: () => false,
       isPopup: () => true
     }));
-    (0, import_react4.useEffect)(() => {
+    (0, import_react5.useEffect)(() => {
       if (isDropdown) {
         selectRef.current?.focus();
         return;
@@ -1162,7 +1265,7 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
     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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         className: cn(
@@ -1171,7 +1274,7 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
         ),
         style: containerStyle,
         children: [
-          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "select",
             {
               ref: selectRef,
@@ -1181,11 +1284,11 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
               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_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,
@@ -1198,7 +1301,7 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
               disabled: isLoading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "button",
             {
               type: "button",
@@ -1207,10 +1310,10 @@ var CustomCellEditor = (0, import_react4.forwardRef)(
               className: saveButtonClassName ?? (saveButtonStyle ? void 0 : defaultSaveBtnClass),
               style: saveButtonStyle,
               title: "Save (Enter)",
-              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
+              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "button",
             {
               type: "button",
@@ -1238,6 +1341,8 @@ CustomCellEditor.displayName = "CustomCellEditor";
   ResetColumnsButton,
   ResetFiltersButton,
   SearchInput,
-  TableLayoutToolbarControls
+  TableLayoutToolbarControls,
+  ToolTip,
+  TooltipText
 });
 //# sourceMappingURL=index.js.map