@eztrak/shared 0.13.8 → 0.15.0

package/dist/{chunk-4SOWLOGR.mjs → chunk-KFBKDGZV.mjs}

@@ -4,10 +4,11 @@ import {
   confirmationAlert,
   getItemFromLocalStorage,
   removeItem,
+  resetPageParam,
   storeItemInLocalStorage,
   toDateInputValue,
   truncateText
-} from "./chunk-DSP67UYZ.mjs";
+} from "./chunk-EIX5CUQF.mjs";
 
 // src/components/tabs/EztrakTabs.tsx
 import {
@@ -624,6 +625,7 @@ function DropdownFilter({
   isDisabled = false,
   isLoading = false,
   saveToLocalStorage = false,
+  pageParam = "page",
   ...otherProps
 }) {
   const [searchParams, setSearchParams] = useSearchParams2();
@@ -636,10 +638,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
@@ -647,12 +649,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) {
@@ -773,6 +778,7 @@ function SearchInput({
   debounceDelay = 500,
   customIcon = null,
   defaultValue,
+  pageParam = "page",
   ...props
 }) {
   const [searchParams, setSearchParams] = useSearchParams4();
@@ -780,17 +786,18 @@ function SearchInput({
   const [inputValue, setInputValue] = useState2(queryParam);
   const debounceTimerRef = useRef3(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();
@@ -1515,7 +1522,8 @@ function PopupCellRenderer({
   params,
   onAction,
   placement = "bottom-end",
-  tippyProps
+  tippyProps,
+  ariaLabel = "Row actions"
 }) {
   const [visible, setVisible] = useState4(false);
   const show = () => setVisible(true);
@@ -1551,7 +1559,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__ */ jsx12(ActionIcon, { "aria-hidden": true })
@@ -1562,10 +1570,305 @@ function PopupCellRenderer({
   ) });
 }
 
+// src/components/row-actions/presets.ts
+import {
+  FaArchive,
+  FaCheckCircle,
+  FaDownload,
+  FaEdit,
+  FaEye,
+  FaFileAlt,
+  FaHistory,
+  FaTrashAlt
+} from "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: FaEdit },
+  delete: { label: "Delete", icon: FaTrashAlt, danger: true },
+  view: { label: "View", icon: FaEye },
+  notes: { label: "Notes", icon: FaFileAlt },
+  history: { label: "History", icon: FaHistory },
+  download: { label: "Download", icon: FaDownload },
+  archive: { label: "Archive", icon: FaArchive },
+  resolve: { label: "Resolve", icon: FaCheckCircle }
+};
+
+// src/components/row-actions/ActionMenuItem.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "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__ */ jsx13(
+    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__ */ jsxs10(
+        "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__ */ jsx13(
+              Icon,
+              {
+                className: cn("shrink-0", iconClassName),
+                "aria-hidden": true,
+                size: iconSize
+              }
+            ) : null,
+            showLabel ? /* @__PURE__ */ jsx13("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
+import { Fragment as Fragment3, jsx as jsx14 } from "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__ */ jsx14(
+        "div",
+        {
+          role: "separator",
+          className: cn("my-1 h-px bg-gray-100", action.className)
+        },
+        action.key
+      );
+    }
+    if (action.content) {
+      return /* @__PURE__ */ jsx14("div", { className: action.className, children: action.content }, action.key);
+    }
+    return /* @__PURE__ */ jsx14(
+      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__ */ jsx14("div", { children: renderItem(action, { data, hide: hide ?? (() => void 0), defaultItem }) }, action.key);
+  });
+  if (mode === "inline") {
+    const inlineItems = renderItems(void 0, false);
+    return /* @__PURE__ */ jsx14("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__ */ jsx14(
+      "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__ */ jsx14(Fragment3, { children: renderTrigger({
+      data,
+      actions: resolved,
+      hide: () => void 0,
+      defaultMenu: buildMenu(() => void 0)
+    }) });
+  }
+  return /* @__PURE__ */ jsx14(
+    ToolTip,
+    {
+      text: triggerTooltipText,
+      disabled: !triggerTooltipText,
+      placement: tooltipPlacement,
+      delayShow: tooltipDelayShow,
+      delayHide: tooltipDelayHide,
+      tooltipClassName,
+      tooltipStyle,
+      className: "flex h-full items-center justify-center",
+      children: /* @__PURE__ */ jsx14(
+        PopupCellRenderer,
+        {
+          params: { data },
+          actionIcon,
+          hideTitle: true,
+          className,
+          placement,
+          tippyProps,
+          ariaLabel: triggerAriaLabel,
+          dropDownContent: (handleAction) => buildMenu(() => handleAction("close"))
+        }
+      )
+    }
+  );
+}
+
 // src/components/table-error-boundary/TableErrorBoundary.tsx
 import { useMemo as useMemo2 } from "react";
 import { FaArrowsRotate, FaTriangleExclamation } from "react-icons/fa6";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var TableErrorBoundary = ({
   isError,
   isLoading = false,
@@ -1582,7 +1885,7 @@ var TableErrorBoundary = ({
     return "Unable to load table data. Please try again.";
   }, [error, errorMessage]);
   if (isLoading && !isError) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         className: cn(
@@ -1593,12 +1896,12 @@ var TableErrorBoundary = ({
         role: "status",
         "aria-live": "polite",
         "aria-busy": "true",
-        children: /* @__PURE__ */ jsx13(Loader, { size: "40px" })
+        children: /* @__PURE__ */ jsx15(Loader, { size: "40px" })
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
@@ -1609,7 +1912,7 @@ var TableErrorBoundary = ({
         role: "alert",
         "aria-live": "assertive",
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             FaTriangleExclamation,
             {
               className: "text-red-500",
@@ -1617,11 +1920,11 @@ var TableErrorBoundary = ({
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ jsxs10("div", { className: "max-w-md space-y-1", children: [
-            /* @__PURE__ */ jsx13("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
-            /* @__PURE__ */ jsx13("p", { className: "text-sm text-gray-600", children: message })
+          /* @__PURE__ */ jsxs11("div", { className: "max-w-md space-y-1", children: [
+            /* @__PURE__ */ jsx15("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
+            /* @__PURE__ */ jsx15("p", { className: "text-sm text-gray-600", children: message })
           ] }),
-          refetch && /* @__PURE__ */ jsxs10(
+          refetch && /* @__PURE__ */ jsxs11(
             "button",
             {
               type: "button",
@@ -1629,7 +1932,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__ */ jsx13(FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
+                /* @__PURE__ */ jsx15(FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
                 isLoading ? "Retrying..." : "Try again"
               ]
             }
@@ -1638,7 +1941,7 @@ var TableErrorBoundary = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx13(Fragment3, { children });
+  return /* @__PURE__ */ jsx15(Fragment4, { children });
 };
 
 export {
@@ -1657,6 +1960,13 @@ export {
   TooltipText,
   CustomCellEditor,
   PopupCellRenderer,
+  ROW_ACTION_ITEM_HOVER_CLASS,
+  ROW_ACTION_DEFAULT_ICON_SIZE,
+  ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE,
+  ROW_ACTION_PRESETS,
+  ActionMenuItem,
+  resolveActions,
+  RowActions,
   TableErrorBoundary
 };
-//# sourceMappingURL=chunk-4SOWLOGR.mjs.map
+//# sourceMappingURL=chunk-KFBKDGZV.mjs.map