@eztrak/shared 0.12.1 → 0.13.1

package/dist/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   EztrakTabs: () => EztrakTabs,
   Loader: () => Loader,
   Modal: () => Modal,
+  PopupCellRenderer: () => PopupCellRenderer,
   ResetColumnsButton: () => ResetColumnsButton,
   ResetFiltersButton: () => ResetFiltersButton,
   SearchInput: () => SearchInput,
@@ -1065,6 +1066,7 @@ function CustomPagination({
 }
 
 // src/components/search-filters/DropdownFilter.tsx
+var import_react4 = require("react");
 var import_react_select = __toESM(require("react-select"));
 var import_react_router_dom2 = require("react-router-dom");
 
@@ -1149,22 +1151,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_react4.useRef)(false);
+  (0, import_react4.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,
@@ -1255,7 +1279,7 @@ function ResetFiltersButton({
 }
 
 // src/components/search-filters/SearchInput.tsx
-var import_react4 = require("react");
+var import_react5 = 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");
@@ -1277,8 +1301,8 @@ function SearchInput({
 }) {
   const [searchParams, setSearchParams] = (0, import_react_router_dom4.useSearchParams)();
   const queryParam = searchParams.get(defaultParam) || defaultValue || "";
-  const [inputValue, setInputValue] = (0, import_react4.useState)(queryParam);
-  const debounceTimerRef = (0, import_react4.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react5.useState)(queryParam);
+  const debounceTimerRef = (0, import_react5.useRef)(null);
   const updateSearchParams = (searchQuery) => {
     if (searchQuery?.trim()) {
       setSearchParams((prev) => {
@@ -1317,10 +1341,10 @@ function SearchInput({
       updateSearchParams("");
     }
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     setInputValue(queryParam);
   }, [queryParam]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     return () => {
       if (debounceTimerRef.current) {
         clearTimeout(debounceTimerRef.current);
@@ -1371,7 +1395,7 @@ function SearchInput({
 
 // src/components/modal/Modal.tsx
 var import_framer_motion = require("framer-motion");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 var import_fa = require("react-icons/fa");
 var import_io5 = require("react-icons/io5");
@@ -1416,13 +1440,13 @@ function Modal({
   customLoader = null,
   footerClassName
 }) {
-  const modalRef = (0, import_react5.useRef)(null);
+  const modalRef = (0, import_react6.useRef)(null);
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget && closeOnBackdropClick) {
       onClose();
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen && closeOnEscape) {
         onClose();
@@ -1666,7 +1690,7 @@ function CardSkeleton({
 }
 
 // src/components/tooltip/ToolTip.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_tooltip = require("react-tooltip");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var defaultTooltipStyle = {
@@ -1691,7 +1715,7 @@ function ToolTip({
   disabled = false,
   children
 }) {
-  const generatedId = (0, import_react6.useId)();
+  const generatedId = (0, import_react7.useId)();
   const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
   const tooltipText = String(text ?? "");
   if (disabled || !tooltipText) {
@@ -1762,7 +1786,7 @@ function TooltipText({
 }
 
 // src/components/cell-editor/CustomCellEditor.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function ButtonSpinner() {
@@ -1809,7 +1833,7 @@ function normalizeInitialValue(initialValue, inputType) {
   }
   return initialValue;
 }
-var CustomCellEditor = (0, import_react7.forwardRef)(
+var CustomCellEditor = (0, import_react8.forwardRef)(
   ({
     value: initialValue,
     name,
@@ -1834,11 +1858,11 @@ var CustomCellEditor = (0, import_react7.forwardRef)(
     cancelButtonClassName
   }, ref) => {
     const normalizedInitial = normalizeInitialValue(initialValue, inputType);
-    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)(() => {
+    const [value, setValue] = (0, import_react8.useState)(normalizedInitial);
+    const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
+    const inputRef = (0, import_react8.useRef)(null);
+    const selectRef = (0, import_react8.useRef)(null);
+    const normalizedOptions = (0, import_react8.useMemo)(() => {
       if (customOptions && customOptions.length > 0) {
         return customOptions.map((opt) => ({
           value: String(opt[valueKey] ?? ""),
@@ -1848,13 +1872,13 @@ var CustomCellEditor = (0, import_react7.forwardRef)(
       return dropdownOptions;
     }, [customOptions, dropdownOptions, valueKey, labelKey]);
     const isDropdown = inputType === "dropdown" || normalizedOptions.length > 0;
-    (0, import_react7.useImperativeHandle)(ref, () => ({
+    (0, import_react8.useImperativeHandle)(ref, () => ({
       getValue: () => value,
       isCancelBeforeStart: () => false,
       isCancelAfterEnd: () => false,
       isPopup: () => true
     }));
-    (0, import_react7.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       if (isDropdown) {
         selectRef.current?.focus();
         return;
@@ -1989,6 +2013,67 @@ var CustomCellEditor = (0, import_react7.forwardRef)(
   }
 );
 CustomCellEditor.displayName = "CustomCellEditor";
+
+// src/components/popup-cell-renderer/PopupCellRenderer.tsx
+var import_react9 = require("react");
+var import_react10 = __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_react9.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_react10.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,
@@ -1998,6 +2083,7 @@ CustomCellEditor.displayName = "CustomCellEditor";
   EztrakTabs,
   Loader,
   Modal,
+  PopupCellRenderer,
   ResetColumnsButton,
   ResetFiltersButton,
   SearchInput,