@eztrak/shared 0.13.8 → 0.15.0

package/dist/components/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/index.ts
 var components_exports = {};
 __export(components_exports, {
+  ActionMenuItem: () => ActionMenuItem,
   CardSkeleton: () => CardSkeleton,
   CustomCellEditor: () => CustomCellEditor,
   CustomPagination: () => CustomPagination,
@@ -38,14 +39,20 @@ __export(components_exports, {
   Loader: () => Loader,
   Modal: () => Modal,
   PopupCellRenderer: () => PopupCellRenderer,
+  ROW_ACTION_DEFAULT_ICON_SIZE: () => ROW_ACTION_DEFAULT_ICON_SIZE,
+  ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE: () => ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE,
+  ROW_ACTION_ITEM_HOVER_CLASS: () => ROW_ACTION_ITEM_HOVER_CLASS,
+  ROW_ACTION_PRESETS: () => ROW_ACTION_PRESETS,
   ResetColumnsButton: () => ResetColumnsButton,
   ResetFiltersButton: () => ResetFiltersButton,
+  RowActions: () => RowActions,
   SearchInput: () => SearchInput,
   TableErrorBoundary: () => TableErrorBoundary,
   TableLayoutToolbarControls: () => TableLayoutToolbarControls,
   ToolTip: () => ToolTip,
   TooltipText: () => TooltipText,
-  dropdownStyles: () => dropdownStyles
+  dropdownStyles: () => dropdownStyles,
+  resolveActions: () => resolveActions
 });
 module.exports = __toCommonJS(components_exports);
 
@@ -782,6 +789,14 @@ var dropdownStyles = (_borderRadius) => ({
   })
 });
 
+// src/utils/resetPageParam.ts
+function resetPageParam(params, pageKey = "page", defaultPage = "1") {
+  if (params.has(pageKey)) {
+    params.set(pageKey, defaultPage);
+  }
+  return params;
+}
+
 // src/utils/localStorage.ts
 function getStorage() {
   if (typeof window === "undefined") return null;
@@ -827,6 +842,7 @@ function DropdownFilter({
   isDisabled = false,
   isLoading = false,
   saveToLocalStorage = false,
+  pageParam = "page",
   ...otherProps
 }) {
   const [searchParams, setSearchParams] = (0, import_react_router_dom2.useSearchParams)();
@@ -839,10 +855,10 @@ function DropdownFilter({
     if (stored != null && stored !== "") {
       setSearchParams((prev) => {
         prev.set(name, String(stored));
-        return prev;
+        return resetPageParam(prev, pageParam);
       });
     }
-  }, [saveToLocalStorage, name, searchParams, setSearchParams]);
+  }, [saveToLocalStorage, name, pageParam, searchParams, setSearchParams]);
   const currentValue = searchParams.get(name);
   const selectedOption = currentValue ? options?.find(
     (option) => option[valueKey]?.toString() === currentValue
@@ -850,12 +866,15 @@ function DropdownFilter({
   const handleChange = (selected) => {
     const selectedValue = selected && selected[valueKey] !== "" ? String(selected[valueKey]) : null;
     setSearchParams((prev) => {
+      if ((prev.get(name) ?? "") === (selectedValue ?? "")) {
+        return prev;
+      }
       if (!selectedValue) {
         prev.delete(name);
       } else {
         prev.set(name, selectedValue);
       }
-      return prev;
+      return resetPageParam(prev, pageParam);
     });
     if (saveToLocalStorage) {
       if (selectedValue) {
@@ -972,6 +991,7 @@ function SearchInput({
   debounceDelay = 500,
   customIcon = null,
   defaultValue,
+  pageParam = "page",
   ...props
 }) {
   const [searchParams, setSearchParams] = (0, import_react_router_dom4.useSearchParams)();
@@ -979,17 +999,18 @@ function SearchInput({
   const [inputValue, setInputValue] = (0, import_react3.useState)(queryParam);
   const debounceTimerRef = (0, import_react3.useRef)(null);
   const updateSearchParams = (searchQuery) => {
-    if (searchQuery?.trim()) {
-      setSearchParams((prev) => {
-        prev.set(defaultParam, searchQuery.trim());
+    const nextValue = searchQuery?.trim() ?? "";
+    setSearchParams((prev) => {
+      if ((prev.get(defaultParam) ?? "") === nextValue) {
         return prev;
-      });
-    } else {
-      setSearchParams((prev) => {
+      }
+      if (nextValue) {
+        prev.set(defaultParam, nextValue);
+      } else {
         prev.delete(defaultParam);
-        return prev;
-      });
-    }
+      }
+      return resetPageParam(prev, pageParam);
+    });
   };
   const handleSearch = (e) => {
     e.preventDefault();
@@ -1735,7 +1756,8 @@ function PopupCellRenderer({
   params,
   onAction,
   placement = "bottom-end",
-  tippyProps
+  tippyProps,
+  ariaLabel = "Row actions"
 }) {
   const [visible, setVisible] = (0, import_react7.useState)(false);
   const show = () => setVisible(true);
@@ -1771,7 +1793,7 @@ function PopupCellRenderer({
             "flex items-center justify-center gap-2 rounded-full text-gray-500 hover:text-gray-800",
             className
           ),
-          "aria-label": "Row actions",
+          "aria-label": ariaLabel,
           children: [
             !hideTitle && title,
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionIcon, { "aria-hidden": true })
@@ -1782,10 +1804,296 @@ function PopupCellRenderer({
   ) });
 }
 
+// src/components/row-actions/presets.ts
+var import_fa2 = require("react-icons/fa");
+var ROW_ACTION_ITEM_HOVER_CLASS = "hover:bg-primary-50 hover:text-primary-150";
+var ROW_ACTION_DEFAULT_ICON_SIZE = 16;
+var ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE = {
+  zIndex: 1e4
+};
+var ROW_ACTION_PRESETS = {
+  edit: { label: "Edit", icon: import_fa2.FaEdit },
+  delete: { label: "Delete", icon: import_fa2.FaTrashAlt, danger: true },
+  view: { label: "View", icon: import_fa2.FaEye },
+  notes: { label: "Notes", icon: import_fa2.FaFileAlt },
+  history: { label: "History", icon: import_fa2.FaHistory },
+  download: { label: "Download", icon: import_fa2.FaDownload },
+  archive: { label: "Archive", icon: import_fa2.FaArchive },
+  resolve: { label: "Resolve", icon: import_fa2.FaCheckCircle }
+};
+
+// src/components/row-actions/ActionMenuItem.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ActionMenuItem({
+  label,
+  icon: Icon,
+  iconSize = ROW_ACTION_DEFAULT_ICON_SIZE,
+  iconClassName,
+  tooltip,
+  tooltipPlacement = "top",
+  tooltipDelayShow,
+  tooltipDelayHide,
+  tooltipClassName,
+  tooltipStyle,
+  disabled = false,
+  danger = false,
+  highlight = false,
+  showLabel = true,
+  className,
+  onClick
+}) {
+  const tooltipText = tooltip ?? label;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    ToolTip,
+    {
+      text: tooltipText,
+      disabled: !tooltipText,
+      placement: tooltipPlacement,
+      delayShow: tooltipDelayShow,
+      delayHide: tooltipDelayHide,
+      tooltipClassName,
+      tooltipStyle: { ...ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE, ...tooltipStyle },
+      className: showLabel ? "block w-full" : "inline-flex",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "button",
+        {
+          type: "button",
+          disabled,
+          "aria-label": label,
+          onClick: (event) => {
+            event.stopPropagation();
+            if (disabled) return;
+            onClick();
+          },
+          className: cn(
+            "flex items-center gap-2 text-sm transition-colors duration-150",
+            showLabel ? "w-full rounded-xl px-3 py-2 text-left" : "justify-center rounded-md p-1",
+            disabled ? "cursor-not-allowed opacity-50" : ROW_ACTION_ITEM_HOVER_CLASS,
+            danger && "text-red-500",
+            highlight && !danger && "text-primary-150",
+            className
+          ),
+          children: [
+            Icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              Icon,
+              {
+                className: cn("shrink-0", iconClassName),
+                "aria-hidden": true,
+                size: iconSize
+              }
+            ) : null,
+            showLabel ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: label }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/row-actions/resolveActions.ts
+function evalFlag(flag, data) {
+  if (typeof flag === "function") return Boolean(flag(data));
+  return Boolean(flag);
+}
+function mergePreset(name, overrides) {
+  if (!name) return void 0;
+  const base = ROW_ACTION_PRESETS[name];
+  const extra = overrides?.[name];
+  if (!extra) return base;
+  return { ...base, ...extra };
+}
+function resolveActions(actions, data, hasPermission, presets) {
+  const list = typeof actions === "function" ? actions(data) : actions;
+  return list.flatMap((action, index) => {
+    const type = action.type ?? "item";
+    const preset = mergePreset(action.preset, presets);
+    const key = action.key ?? action.preset ?? `action-${index}`;
+    const label = action.label ?? preset?.label ?? key;
+    if (action.permission && hasPermission && !hasPermission(action.permission)) {
+      return [];
+    }
+    if (evalFlag(action.hidden, data)) {
+      return [];
+    }
+    const tooltip = action.tooltip === false ? void 0 : action.tooltip ?? (type === "divider" ? void 0 : label);
+    const resolved = {
+      key,
+      type,
+      label,
+      icon: action.icon ?? preset?.icon,
+      iconSize: action.iconSize,
+      content: action.content,
+      onClick: action.onClick,
+      disabled: evalFlag(action.disabled, data),
+      danger: action.danger ?? preset?.danger ?? false,
+      highlight: evalFlag(action.highlight, data),
+      tooltip,
+      tooltipPlacement: action.tooltipPlacement,
+      confirm: action.confirm,
+      closeOnClick: action.closeOnClick !== false,
+      className: action.className
+    };
+    return [resolved];
+  });
+}
+
+// src/components/row-actions/RowActions.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function runAction(action, data, hide, confirmFn = confirmationAlert) {
+  if (!action.onClick) {
+    if (action.closeOnClick) hide?.();
+    return;
+  }
+  const execute = () => action.onClick?.(data);
+  if (action.confirm) {
+    confirmFn?.(execute, action.confirm);
+  } else {
+    execute();
+  }
+  if (action.closeOnClick) {
+    hide?.();
+  }
+}
+function RowActions({
+  actions,
+  data,
+  mode = "menu",
+  actionIcon,
+  className,
+  menuClassName,
+  itemClassName,
+  itemIconClassName,
+  iconSize = ROW_ACTION_DEFAULT_ICON_SIZE,
+  triggerTooltip = "Actions",
+  triggerAriaLabel = "Row actions",
+  hasPermission,
+  placement = "bottom-end",
+  tippyProps,
+  presets,
+  confirmFn = confirmationAlert,
+  tooltipPlacement = "top",
+  tooltipDelayShow,
+  tooltipDelayHide,
+  tooltipClassName,
+  tooltipStyle,
+  renderItem,
+  renderMenu,
+  renderTrigger
+}) {
+  const resolved = resolveActions(actions, data, hasPermission, presets);
+  if (resolved.length === 0) {
+    return null;
+  }
+  const mergedTooltipStyle = {
+    ...ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE,
+    ...tooltipStyle
+  };
+  const renderDefaultItem = (action, hide, showLabel = true) => {
+    if (action.type === "divider") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          role: "separator",
+          className: cn("my-1 h-px bg-gray-100", action.className)
+        },
+        action.key
+      );
+    }
+    if (action.content) {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: action.className, children: action.content }, action.key);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      ActionMenuItem,
+      {
+        label: action.label,
+        icon: action.icon,
+        iconSize: action.iconSize ?? iconSize,
+        iconClassName: itemIconClassName,
+        tooltip: action.tooltip,
+        tooltipPlacement: action.tooltipPlacement ?? tooltipPlacement,
+        tooltipDelayShow,
+        tooltipDelayHide,
+        tooltipClassName,
+        tooltipStyle: mergedTooltipStyle,
+        disabled: action.disabled,
+        danger: action.danger,
+        highlight: action.highlight,
+        showLabel,
+        className: cn(itemClassName, action.className),
+        onClick: () => runAction(action, data, hide, confirmFn)
+      },
+      action.key
+    );
+  };
+  const renderItems = (hide, showLabel = true) => resolved.map((action) => {
+    const defaultItem = renderDefaultItem(action, hide, showLabel);
+    if (!renderItem) return defaultItem;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: renderItem(action, { data, hide: hide ?? (() => void 0), defaultItem }) }, action.key);
+  });
+  if (mode === "inline") {
+    const inlineItems = renderItems(void 0, false);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("flex h-full items-center justify-center gap-1", className), children: inlineItems });
+  }
+  const triggerTooltipText = triggerTooltip === false ? void 0 : triggerTooltip;
+  const buildMenu = (hide) => {
+    const defaultMenu = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex min-w-[180px] flex-col rounded-lg border border-gray-100 bg-white p-2 shadow-lg",
+          menuClassName
+        ),
+        children: renderItems(hide, true)
+      }
+    );
+    if (!renderMenu) return defaultMenu;
+    return renderMenu({
+      data,
+      actions: resolved,
+      hide,
+      defaultMenu
+    });
+  };
+  if (renderTrigger) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: renderTrigger({
+      data,
+      actions: resolved,
+      hide: () => void 0,
+      defaultMenu: buildMenu(() => void 0)
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    ToolTip,
+    {
+      text: triggerTooltipText,
+      disabled: !triggerTooltipText,
+      placement: tooltipPlacement,
+      delayShow: tooltipDelayShow,
+      delayHide: tooltipDelayHide,
+      tooltipClassName,
+      tooltipStyle,
+      className: "flex h-full items-center justify-center",
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        PopupCellRenderer,
+        {
+          params: { data },
+          actionIcon,
+          hideTitle: true,
+          className,
+          placement,
+          tippyProps,
+          ariaLabel: triggerAriaLabel,
+          dropDownContent: (handleAction) => buildMenu(() => handleAction("close"))
+        }
+      )
+    }
+  );
+}
+
 // src/components/table-error-boundary/TableErrorBoundary.tsx
 var import_react9 = require("react");
 var import_fa6 = require("react-icons/fa6");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var TableErrorBoundary = ({
   isError,
   isLoading = false,
@@ -1802,7 +2110,7 @@ var TableErrorBoundary = ({
     return "Unable to load table data. Please try again.";
   }, [error, errorMessage]);
   if (isLoading && !isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         className: cn(
@@ -1813,12 +2121,12 @@ var TableErrorBoundary = ({
         role: "status",
         "aria-live": "polite",
         "aria-busy": "true",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Loader, { size: "40px" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loader, { size: "40px" })
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: cn(
@@ -1829,7 +2137,7 @@ var TableErrorBoundary = ({
         role: "alert",
         "aria-live": "assertive",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             import_fa6.FaTriangleExclamation,
             {
               className: "text-red-500",
@@ -1837,11 +2145,11 @@ var TableErrorBoundary = ({
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "max-w-md space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-gray-600", children: message })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "max-w-md space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-gray-600", children: message })
           ] }),
-          refetch && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          refetch && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "button",
             {
               type: "button",
@@ -1849,7 +2157,7 @@ var TableErrorBoundary = ({
               disabled: isLoading,
               className: "inline-flex items-center gap-2 rounded-lg bg-primary-150 px-4 py-2 text-sm font-medium text-white transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa6.FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa6.FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
                 isLoading ? "Retrying..." : "Try again"
               ]
             }
@@ -1858,10 +2166,11 @@ var TableErrorBoundary = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionMenuItem,
   CardSkeleton,
   CustomCellEditor,
   CustomPagination,
@@ -1870,13 +2179,19 @@ var TableErrorBoundary = ({
   Loader,
   Modal,
   PopupCellRenderer,
+  ROW_ACTION_DEFAULT_ICON_SIZE,
+  ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE,
+  ROW_ACTION_ITEM_HOVER_CLASS,
+  ROW_ACTION_PRESETS,
   ResetColumnsButton,
   ResetFiltersButton,
+  RowActions,
   SearchInput,
   TableErrorBoundary,
   TableLayoutToolbarControls,
   ToolTip,
   TooltipText,
-  dropdownStyles
+  dropdownStyles,
+  resolveActions
 });
 //# sourceMappingURL=index.js.map