@eztrak/shared 0.12.1 → 0.13.1

package/dist/components/index.d.mts

@@ -2,6 +2,8 @@ import * as react from 'react';
 import react__default, { ReactNode, InputHTMLAttributes, HTMLAttributes, CSSProperties } from 'react';
 import { Props, StylesConfig } from 'react-select';
 import { PlacesType } from 'react-tooltip';
+import { IconType } from 'react-icons';
+import { TippyProps } from '@tippyjs/react';
 
 type EztrakTab = {
     id: string;
@@ -137,9 +139,11 @@ interface DropdownFilterProps<Option extends Record<string, unknown>> extends Om
     /** Partial theme overrides merged with the default Eztrak palette. */
     /** Border radius applied to the control, menu, and options. Defaults to "5px". */
     borderRadius?: string;
+    /** When true, persists the selected value in localStorage under `name`. */
+    saveToLocalStorage?: boolean;
 }
 
-declare function DropdownFilter<Option extends Record<string, unknown>>({ name, valueKey, options, placeholder, borderRadius, className, isClearable, isSearchable, isDisabled, isLoading, ...otherProps }: DropdownFilterProps<Option>): react.JSX.Element;
+declare function DropdownFilter<Option extends Record<string, unknown>>({ name, valueKey, options, placeholder, borderRadius, className, isClearable, isSearchable, isDisabled, isLoading, saveToLocalStorage, ...otherProps }: DropdownFilterProps<Option>): react.JSX.Element;
 
 declare function ResetFiltersButton({ label, showLabel, icon, variant, className, onReset, disabled, }: ResetFiltersButtonProps): react.JSX.Element;
 
@@ -285,4 +289,32 @@ interface CustomCellEditorProps {
 
 declare const CustomCellEditor: react.ForwardRefExoticComponent<CustomCellEditorProps & react.RefAttributes<CustomCellEditorRef>>;
 
-export { CardSkeleton, type CardSkeletonProps, type CardSkeletonVariant, type CellEditPayload, type CellEditorInputType, CustomCellEditor, type CustomCellEditorProps, type CustomCellEditorRef, CustomPagination, type CustomPaginationClassNames, type CustomPaginationProps, DropdownFilter, type DropdownFilterProps, type DropdownOption, type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps, type LayoutStatus, Loader, type LoaderProps, Modal, type ModalProps, type PaginationData, ResetColumnsButton, type ResetColumnsButtonProps, ResetFiltersButton, type ResetFiltersButtonProps, type ResetFiltersButtonVariant, SearchInput, type SearchInputProps, TableLayoutToolbarControls, type TableLayoutToolbarControlsProps, ToolTip, type ToolTipProps, TooltipText, type TooltipTextProps, dropdownStyles };
+type PopupActionHandler<TRow = unknown> = (actionType: string, rowData?: TRow) => void;
+type PopupDropDownContent<TRow = unknown> = ReactNode | ((handleAction: PopupActionHandler<TRow>) => ReactNode);
+interface PopupCellRendererParams<TRow = unknown> {
+    data?: TRow;
+    [key: string]: unknown;
+}
+interface PopupCellRendererProps<TRow = unknown> {
+    dropDownContent: PopupDropDownContent<TRow>;
+    actionIcon?: IconType;
+    title?: string;
+    className?: string;
+    hideTitle?: boolean;
+    /** AG Grid cell renderer params; row data is read from `params.data`. */
+    params?: PopupCellRendererParams<TRow>;
+    onAction?: (actionType: string, rowData: TRow | undefined, hide: () => void) => void;
+    placement?: TippyProps["placement"];
+    tippyProps?: Omit<Partial<TippyProps>, "children" | "content" | "visible" | "placement">;
+}
+
+/**
+ * Interactive popup trigger for table row actions (e.g. AG Grid cell renderer).
+ *
+ * Import Tippy styles in your app once:
+ * `import "tippy.js/dist/tippy.css"`
+ * `import "tippy.js/themes/light.css"`
+ */
+declare function PopupCellRenderer<TRow = unknown>({ dropDownContent, actionIcon: ActionIcon, title, className, hideTitle, params, onAction, placement, tippyProps, }: PopupCellRendererProps<TRow>): react.JSX.Element;
+
+export { CardSkeleton, type CardSkeletonProps, type CardSkeletonVariant, type CellEditPayload, type CellEditorInputType, CustomCellEditor, type CustomCellEditorProps, type CustomCellEditorRef, CustomPagination, type CustomPaginationClassNames, type CustomPaginationProps, DropdownFilter, type DropdownFilterProps, type DropdownOption, type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps, type LayoutStatus, Loader, type LoaderProps, Modal, type ModalProps, type PaginationData, type PopupActionHandler, PopupCellRenderer, type PopupCellRendererParams, type PopupCellRendererProps, type PopupDropDownContent, ResetColumnsButton, type ResetColumnsButtonProps, ResetFiltersButton, type ResetFiltersButtonProps, type ResetFiltersButtonVariant, SearchInput, type SearchInputProps, TableLayoutToolbarControls, type TableLayoutToolbarControlsProps, ToolTip, type ToolTipProps, TooltipText, type TooltipTextProps, dropdownStyles };

package/dist/components/index.d.ts

@@ -2,6 +2,8 @@ import * as react from 'react';
 import react__default, { ReactNode, InputHTMLAttributes, HTMLAttributes, CSSProperties } from 'react';
 import { Props, StylesConfig } from 'react-select';
 import { PlacesType } from 'react-tooltip';
+import { IconType } from 'react-icons';
+import { TippyProps } from '@tippyjs/react';
 
 type EztrakTab = {
     id: string;
@@ -137,9 +139,11 @@ interface DropdownFilterProps<Option extends Record<string, unknown>> extends Om
     /** Partial theme overrides merged with the default Eztrak palette. */
     /** Border radius applied to the control, menu, and options. Defaults to "5px". */
     borderRadius?: string;
+    /** When true, persists the selected value in localStorage under `name`. */
+    saveToLocalStorage?: boolean;
 }
 
-declare function DropdownFilter<Option extends Record<string, unknown>>({ name, valueKey, options, placeholder, borderRadius, className, isClearable, isSearchable, isDisabled, isLoading, ...otherProps }: DropdownFilterProps<Option>): react.JSX.Element;
+declare function DropdownFilter<Option extends Record<string, unknown>>({ name, valueKey, options, placeholder, borderRadius, className, isClearable, isSearchable, isDisabled, isLoading, saveToLocalStorage, ...otherProps }: DropdownFilterProps<Option>): react.JSX.Element;
 
 declare function ResetFiltersButton({ label, showLabel, icon, variant, className, onReset, disabled, }: ResetFiltersButtonProps): react.JSX.Element;
 
@@ -285,4 +289,32 @@ interface CustomCellEditorProps {
 
 declare const CustomCellEditor: react.ForwardRefExoticComponent<CustomCellEditorProps & react.RefAttributes<CustomCellEditorRef>>;
 
-export { CardSkeleton, type CardSkeletonProps, type CardSkeletonVariant, type CellEditPayload, type CellEditorInputType, CustomCellEditor, type CustomCellEditorProps, type CustomCellEditorRef, CustomPagination, type CustomPaginationClassNames, type CustomPaginationProps, DropdownFilter, type DropdownFilterProps, type DropdownOption, type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps, type LayoutStatus, Loader, type LoaderProps, Modal, type ModalProps, type PaginationData, ResetColumnsButton, type ResetColumnsButtonProps, ResetFiltersButton, type ResetFiltersButtonProps, type ResetFiltersButtonVariant, SearchInput, type SearchInputProps, TableLayoutToolbarControls, type TableLayoutToolbarControlsProps, ToolTip, type ToolTipProps, TooltipText, type TooltipTextProps, dropdownStyles };
+type PopupActionHandler<TRow = unknown> = (actionType: string, rowData?: TRow) => void;
+type PopupDropDownContent<TRow = unknown> = ReactNode | ((handleAction: PopupActionHandler<TRow>) => ReactNode);
+interface PopupCellRendererParams<TRow = unknown> {
+    data?: TRow;
+    [key: string]: unknown;
+}
+interface PopupCellRendererProps<TRow = unknown> {
+    dropDownContent: PopupDropDownContent<TRow>;
+    actionIcon?: IconType;
+    title?: string;
+    className?: string;
+    hideTitle?: boolean;
+    /** AG Grid cell renderer params; row data is read from `params.data`. */
+    params?: PopupCellRendererParams<TRow>;
+    onAction?: (actionType: string, rowData: TRow | undefined, hide: () => void) => void;
+    placement?: TippyProps["placement"];
+    tippyProps?: Omit<Partial<TippyProps>, "children" | "content" | "visible" | "placement">;
+}
+
+/**
+ * Interactive popup trigger for table row actions (e.g. AG Grid cell renderer).
+ *
+ * Import Tippy styles in your app once:
+ * `import "tippy.js/dist/tippy.css"`
+ * `import "tippy.js/themes/light.css"`
+ */
+declare function PopupCellRenderer<TRow = unknown>({ dropDownContent, actionIcon: ActionIcon, title, className, hideTitle, params, onAction, placement, tippyProps, }: PopupCellRendererProps<TRow>): react.JSX.Element;
+
+export { CardSkeleton, type CardSkeletonProps, type CardSkeletonVariant, type CellEditPayload, type CellEditorInputType, CustomCellEditor, type CustomCellEditorProps, type CustomCellEditorRef, CustomPagination, type CustomPaginationClassNames, type CustomPaginationProps, DropdownFilter, type DropdownFilterProps, type DropdownOption, type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps, type LayoutStatus, Loader, type LoaderProps, Modal, type ModalProps, type PaginationData, type PopupActionHandler, PopupCellRenderer, type PopupCellRendererParams, type PopupCellRendererProps, type PopupDropDownContent, ResetColumnsButton, type ResetColumnsButtonProps, ResetFiltersButton, type ResetFiltersButtonProps, type ResetFiltersButtonVariant, SearchInput, type SearchInputProps, TableLayoutToolbarControls, type TableLayoutToolbarControlsProps, ToolTip, type ToolTipProps, TooltipText, type TooltipTextProps, dropdownStyles };

package/dist/components/index.js

@@ -37,6 +37,7 @@ __export(components_exports, {
   EztrakTabs: () => EztrakTabs,
   Loader: () => Loader,
   Modal: () => Modal,
+  PopupCellRenderer: () => PopupCellRenderer,
   ResetColumnsButton: () => ResetColumnsButton,
   ResetFiltersButton: () => ResetFiltersButton,
   SearchInput: () => SearchInput,
@@ -674,6 +675,7 @@ function CustomPagination({
 }
 
 // src/components/search-filters/DropdownFilter.tsx
+var import_react2 = require("react");
 var import_react_select = __toESM(require("react-select"));
 var import_react_router_dom2 = require("react-router-dom");
 
@@ -745,6 +747,37 @@ var dropdownStyles = (_borderRadius = "5px") => ({
   })
 });
 
+// src/utils/localStorage.ts
+function getStorage() {
+  if (typeof window === "undefined") return null;
+  return window.localStorage;
+}
+function getItem(key, fallback = null) {
+  try {
+    const raw = getStorage()?.getItem(key);
+    if (raw === null || raw === void 0) {
+      return fallback;
+    }
+    return JSON.parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+function setItem(key, value) {
+  try {
+    getStorage()?.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function removeItem(key) {
+  try {
+    getStorage()?.removeItem(key);
+  } catch {
+  }
+}
+var getItemFromLocalStorage = getItem;
+var storeItemInLocalStorage = setItem;
+
 // src/components/search-filters/DropdownFilter.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function DropdownFilter({
@@ -758,22 +791,44 @@ function DropdownFilter({
   isSearchable = true,
   isDisabled = false,
   isLoading = false,
+  saveToLocalStorage = false,
   ...otherProps
 }) {
   const [searchParams, setSearchParams] = (0, import_react_router_dom2.useSearchParams)();
+  const hasRestoredFromStorage = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!saveToLocalStorage || hasRestoredFromStorage.current) return;
+    hasRestoredFromStorage.current = true;
+    if (searchParams.get(name)) return;
+    const stored = getItemFromLocalStorage(name);
+    if (stored != null && stored !== "") {
+      setSearchParams((prev) => {
+        prev.set(name, String(stored));
+        return prev;
+      });
+    }
+  }, [saveToLocalStorage, name, searchParams, setSearchParams]);
   const currentValue = searchParams.get(name);
   const selectedOption = currentValue ? options?.find(
     (option) => option[valueKey]?.toString() === currentValue
   ) ?? null : null;
   const handleChange = (selected) => {
+    const selectedValue = selected && selected[valueKey] !== "" ? String(selected[valueKey]) : null;
     setSearchParams((prev) => {
-      if (!selected || selected[valueKey] === "") {
+      if (!selectedValue) {
         prev.delete(name);
       } else {
-        prev.set(name, String(selected[valueKey]));
+        prev.set(name, selectedValue);
       }
       return prev;
     });
+    if (saveToLocalStorage) {
+      if (selectedValue) {
+        storeItemInLocalStorage(name, selectedValue);
+      } else {
+        removeItem(name);
+      }
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_react_select.default,
@@ -864,7 +919,7 @@ function ResetFiltersButton({
 }
 
 // src/components/search-filters/SearchInput.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_fi = require("react-icons/fi");
 var import_react_router_dom4 = require("react-router-dom");
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -886,8 +941,8 @@ function SearchInput({
 }) {
   const [searchParams, setSearchParams] = (0, import_react_router_dom4.useSearchParams)();
   const queryParam = searchParams.get(defaultParam) || defaultValue || "";
-  const [inputValue, setInputValue] = (0, import_react2.useState)(queryParam);
-  const debounceTimerRef = (0, import_react2.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react3.useState)(queryParam);
+  const debounceTimerRef = (0, import_react3.useRef)(null);
   const updateSearchParams = (searchQuery) => {
     if (searchQuery?.trim()) {
       setSearchParams((prev) => {
@@ -926,10 +981,10 @@ function SearchInput({
       updateSearchParams("");
     }
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     setInputValue(queryParam);
   }, [queryParam]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     return () => {
       if (debounceTimerRef.current) {
         clearTimeout(debounceTimerRef.current);
@@ -980,7 +1035,7 @@ function SearchInput({
 
 // src/components/modal/Modal.tsx
 var import_framer_motion = require("framer-motion");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_dom = require("react-dom");
 var import_fa = require("react-icons/fa");
 var import_io5 = require("react-icons/io5");
@@ -1025,13 +1080,13 @@ function Modal({
   customLoader = null,
   footerClassName
 }) {
-  const modalRef = (0, import_react3.useRef)(null);
+  const modalRef = (0, import_react4.useRef)(null);
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget && closeOnBackdropClick) {
       onClose();
     }
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen && closeOnEscape) {
         onClose();
@@ -1275,7 +1330,7 @@ function CardSkeleton({
 }
 
 // src/components/tooltip/ToolTip.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_tooltip = require("react-tooltip");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var defaultTooltipStyle = {
@@ -1300,7 +1355,7 @@ function ToolTip({
   disabled = false,
   children
 }) {
-  const generatedId = (0, import_react4.useId)();
+  const generatedId = (0, import_react5.useId)();
   const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
   const tooltipText = String(text ?? "");
   if (disabled || !tooltipText) {
@@ -1399,7 +1454,7 @@ function TooltipText({
 }
 
 // src/components/cell-editor/CustomCellEditor.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function ButtonSpinner() {
@@ -1446,7 +1501,7 @@ function normalizeInitialValue(initialValue, inputType) {
   }
   return initialValue;
 }
-var CustomCellEditor = (0, import_react5.forwardRef)(
+var CustomCellEditor = (0, import_react6.forwardRef)(
   ({
     value: initialValue,
     name,
@@ -1471,11 +1526,11 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
     cancelButtonClassName
   }, ref) => {
     const normalizedInitial = normalizeInitialValue(initialValue, inputType);
-    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)(() => {
+    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] ?? ""),
@@ -1485,13 +1540,13 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
       return dropdownOptions;
     }, [customOptions, dropdownOptions, valueKey, labelKey]);
     const isDropdown = inputType === "dropdown" || normalizedOptions.length > 0;
-    (0, import_react5.useImperativeHandle)(ref, () => ({
+    (0, import_react6.useImperativeHandle)(ref, () => ({
       getValue: () => value,
       isCancelBeforeStart: () => false,
       isCancelAfterEnd: () => false,
       isPopup: () => true
     }));
-    (0, import_react5.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (isDropdown) {
         selectRef.current?.focus();
         return;
@@ -1626,6 +1681,67 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
   }
 );
 CustomCellEditor.displayName = "CustomCellEditor";
+
+// src/components/popup-cell-renderer/PopupCellRenderer.tsx
+var import_react7 = require("react");
+var import_react8 = __toESM(require("@tippyjs/react"));
+var import_bi = require("react-icons/bi");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function PopupCellRenderer({
+  dropDownContent,
+  actionIcon: ActionIcon = import_bi.BiDotsVerticalRounded,
+  title = "Actions",
+  className,
+  hideTitle = false,
+  params,
+  onAction,
+  placement = "bottom-end",
+  tippyProps
+}) {
+  const [visible, setVisible] = (0, import_react7.useState)(false);
+  const show = () => setVisible(true);
+  const hide = () => setVisible(false);
+  const rowData = params?.data;
+  const handleAction = (actionType, actionRowData) => {
+    onAction?.(actionType, actionRowData ?? rowData, hide);
+    hide();
+  };
+  const content = typeof dropDownContent === "function" ? dropDownContent(handleAction) : dropDownContent;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex h-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react8.default,
+    {
+      content,
+      visible,
+      onClickOutside: hide,
+      allowHTML: true,
+      arrow: false,
+      appendTo: () => document.body,
+      interactive: true,
+      placement,
+      animation: "shift-away",
+      theme: "light",
+      maxWidth: "none",
+      offset: [0, 5],
+      ...tippyProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: visible ? hide : show,
+          className: cn(
+            "flex items-center justify-center gap-2 rounded-full text-gray-500 hover:text-gray-800",
+            className
+          ),
+          "aria-label": "Row actions",
+          children: [
+            !hideTitle && title,
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionIcon, { "aria-hidden": true })
+          ]
+        }
+      )
+    }
+  ) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CardSkeleton,
@@ -1635,6 +1751,7 @@ CustomCellEditor.displayName = "CustomCellEditor";
   EztrakTabs,
   Loader,
   Modal,
+  PopupCellRenderer,
   ResetColumnsButton,
   ResetFiltersButton,
   SearchInput,