@eztrak/shared 0.15.1 → 0.15.3

package/dist/components/index.d.ts

@@ -319,6 +319,11 @@ interface PopupCellRendererProps<TRow = unknown> {
     placement?: TippyProps["placement"];
     /** Default `"Row actions"`. */
     ariaLabel?: string;
+    /**
+     * When true, the menu opens on hover and closes on leave.
+     * Default `false` (click to open).
+     */
+    openOnHover?: boolean;
     tippyProps?: Omit<Partial<TippyProps>, "children" | "content" | "visible" | "placement">;
 }
 
@@ -329,7 +334,7 @@ interface PopupCellRendererProps<TRow = unknown> {
  * `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, ariaLabel, }: PopupCellRendererProps<TRow>): react.JSX.Element;
+declare function PopupCellRenderer<TRow = unknown>({ dropDownContent, actionIcon: ActionIcon, title, className, hideTitle, params, onAction, placement, tippyProps, ariaLabel, openOnHover, }: PopupCellRendererProps<TRow>): react.JSX.Element;
 
 type RowActionPresetName = "edit" | "delete" | "view" | "notes" | "history" | "download" | "archive" | "resolve";
 type RowActionsMode = "menu" | "inline";
@@ -405,6 +410,11 @@ interface RowActionsProps<TRow = unknown> {
     triggerAriaLabel?: string;
     hasPermission?: (permission: string) => boolean;
     placement?: TippyProps["placement"];
+    /**
+     * When true, the menu opens on hover and closes on leave.
+     * Default `false` (click to open).
+     */
+    openOnHover?: boolean;
     tippyProps?: PopupCellRendererProps<TRow>["tippyProps"];
     /** Override default `Fa*` preset icons/labels for this instance. */
     presets?: Partial<Record<RowActionPresetName, Partial<RowActionPreset>>>;
@@ -469,7 +479,7 @@ interface RowActionPreset {
     iconClassName?: string;
 }
 
-declare function RowActions<TRow = unknown>({ actions, data, mode, actionIcon, className, menuClassName, itemClassName, itemIconClassName, itemLabelClassName, iconSize, triggerTooltip, triggerAriaLabel, hasPermission, placement, tippyProps, presets, confirmFn, tooltipPlacement, tooltipDelayShow, tooltipDelayHide, tooltipClassName, tooltipStyle, renderItem, renderMenu, renderTrigger, }: RowActionsProps<TRow>): react.JSX.Element | null;
+declare function RowActions<TRow = unknown>({ actions, data, mode, actionIcon, className, menuClassName, itemClassName, itemIconClassName, itemLabelClassName, iconSize, triggerTooltip, triggerAriaLabel, hasPermission, placement, openOnHover, tippyProps, presets, confirmFn, tooltipPlacement, tooltipDelayShow, tooltipDelayHide, tooltipClassName, tooltipStyle, renderItem, renderMenu, renderTrigger, }: RowActionsProps<TRow>): react.JSX.Element | null;
 
 declare function ActionMenuItem({ label, icon: Icon, iconSize, iconClassName, labelClassName, tooltip, tooltipPlacement, tooltipDelayShow, tooltipDelayHide, tooltipClassName, tooltipStyle, disabled, danger, highlight, showLabel, className, onClick, }: ActionMenuItemProps): react.JSX.Element;
 

package/dist/components/index.js

@@ -1758,23 +1758,34 @@ function PopupCellRenderer({
   onAction,
   placement = "bottom-end",
   tippyProps,
-  ariaLabel = "Row actions"
+  ariaLabel = "Row actions",
+  openOnHover = false
 }) {
   const [visible, setVisible] = (0, import_react7.useState)(false);
+  const instanceRef = (0, import_react7.useRef)(null);
   const show = () => setVisible(true);
-  const hide = () => setVisible(false);
+  const hide = () => {
+    setVisible(false);
+    instanceRef.current?.hide();
+  };
   const rowData = params?.data;
   const handleAction = (actionType, actionRowData) => {
     onAction?.(actionType, actionRowData ?? rowData, hide);
     hide();
   };
   const content = typeof dropDownContent === "function" ? dropDownContent(handleAction) : dropDownContent;
+  const hoverOrClickProps = openOnHover ? {
+    trigger: "mouseenter",
+    delay: [0, 150],
+    hideOnClick: false
+  } : {
+    visible,
+    onClickOutside: hide
+  };
   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,
@@ -1784,12 +1795,16 @@ function PopupCellRenderer({
       theme: "light",
       maxWidth: "none",
       offset: [0, 5],
+      onCreate: (instance) => {
+        instanceRef.current = instance;
+      },
+      ...hoverOrClickProps,
       ...tippyProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "button",
         {
           type: "button",
-          onClick: visible ? hide : show,
+          onClick: openOnHover ? void 0 : visible ? hide : show,
           className: cn(
             "flex items-center justify-center gap-2 rounded-full text-gray-500 hover:text-gray-800",
             className
@@ -1974,6 +1989,7 @@ function RowActions({
   triggerAriaLabel = "Row actions",
   hasPermission,
   placement = "bottom-end",
+  openOnHover = false,
   tippyProps,
   presets,
   confirmFn = confirmationAlert,
@@ -2088,6 +2104,7 @@ function RowActions({
           hideTitle: true,
           className,
           placement,
+          openOnHover,
           tippyProps,
           ariaLabel: triggerAriaLabel,
           dropDownContent: (handleAction) => buildMenu(() => handleAction("close"))