@apia/dashboard-controller 3.0.9 → 3.0.11

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+import * as _apia_util from '@apia/util';
 import { TId, EventEmitter } from '@apia/util';
 import * as react from 'react';
-import { FC, ReactNode, KeyboardEvent, MouseEvent, ComponentType, ReactPortal } from 'react';
+import { FC, ReactNode, KeyboardEvent, MouseEvent as MouseEvent$1, ComponentType, ReactPortal } from 'react';
 import { TSpacingLayout } from '@apia/theme';
 import { TApiaApiResult, IApiaApiRequestConfig } from '@apia/api';
 import * as _reduxjs_toolkit_dist_configureStore from '@reduxjs/toolkit/dist/configureStore';
@@ -70,16 +71,42 @@ interface TPanelIdentifierProps {
 }
 declare const PanelIdentifier: ({ children, name, id, title, type, }: TPanelIdentifierProps) => react.JSX.Element;
 
-type TActionBehavior = 'DO_NOTHING' | 'NAVIGATE_URL' | 'CALL_AJAX_URL' | 'RUN_ACTION' | 'OPEN_TAB';
+declare const eventsController: {
+    callbacks: TPanelEventRegister<any>[];
+    broadcast(eventType: string, payload: any): void;
+    fireEvent(origin: TPanelIdentifier, eventType: string, payload: any): void;
+    onEvent<PayloadEvent>(distinction: Partial<TPanelEventIdentifier>, callback: TPanelEventCallback<PayloadEvent>): () => void;
+};
+
+/**
+ * Este hook devuelve un método que puede ser llamado para emitir un evento en
+ * el panel desde el cual es llamado. Los eventos de panel son emitidos con id
+ * de panel, tipo de panel, nombre de panel y tipo de evento y las suscripciones
+ * pueden ser realizadas a un conjunto arbitrario de estos identificadores.
+ *
+ * El segundo parámetro del método fireEvent devuelto es el payload, que puede
+ * ser de cualquier tipo.
+ */
+declare function usePanelFireEvent(): (eventType: string, payload: any) => void;
+
+/**
+ * Este hook permite realizar suscripciones a eventos de paneles. Deberá ser
+ * llamado una vez por cada suscripción que desee hacerse dentro de un panel y
+ * no se deberán ejecutar acciones para romper las suscripciones hechas, ya que
+ * este hook maneja esa lógica de forma automática.
+ */
+declare function usePanelOnEvent<PayloadEvent>(distinction: Partial<TPanelEventIdentifier>, callback: TPanelEventCallback<PayloadEvent>): void;
+
+type TActionBehavior = 'DO_NOTHING' | 'NAVIGATE_URL' | 'CALL_AJAX_URL' | 'RUN_ACTION' | 'OPEN_TAB' | 'FIRE_EVENT' | 'DOWNLOAD';
 type TActionSource = 'CLICK' | 'DOUBLE_CLICK';
 type TBasicAction = {
     action: string;
     actionBehavior: TActionBehavior;
     actionSource: TActionSource;
-    actionNewTabTitle: string;
+    additionalData: string;
     text: string;
 };
-declare function handleAction(panelId: string, event: KeyboardEvent | MouseEvent, action: TBasicAction): void;
+declare function handleAction(panelIdentifier: TPanelIdentifier, event: KeyboardEvent | MouseEvent$1, action: TBasicAction): void;
 
 type TOnSucceed = (hasSucceed: boolean, data: TActionResult) => unknown;
 
@@ -150,6 +177,12 @@ declare function usePanelIsLoading(): boolean;
  */
 declare const usePanelNetworkState: () => boolean;
 
+declare const useActionEventHandlers: () => {
+    onClick: (ev: React.MouseEvent<HTMLElement, MouseEvent>) => (action: TBasicAction) => void;
+    onDoubleClick: (ev: React.MouseEvent<HTMLElement, MouseEvent>) => (action: TBasicAction) => void;
+    onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => (action: TBasicAction) => void;
+};
+
 type TPanelLayout = TSpacingLayout;
 
 /**
@@ -219,9 +252,27 @@ type TPanelContext = {
     setRef: (el: HTMLElement | null) => void;
 };
 declare function usePanelContext(): TPanelContext;
+declare const PanelContextProvider: ({ children, value, }: {
+    children: ReactNode;
+    value: TPanelContext;
+}) => react.JSX.Element;
+declare function useMakePanelContext(panelProps: Omit<TPanelProps$1, 'children'>): {
+    footerContent: ReactNode;
+    title: string;
+    footer: TBasicAction | null;
+    handleFooterClick: (ev: react.MouseEvent<Element, MouseEvent> | react.KeyboardEvent<Element>) => void;
+    contextValue: TPanelContext;
+    ref: (el: HTMLDivElement) => void;
+};
 
 declare const EmptyPanelWrapper: PanelContainer;
 
+type TUsePanelFooter = {
+    footerContent?: ReactNode;
+    footer: TFooter | null;
+    handleFooterClick: (ev: MouseEvent$1 | KeyboardEvent) => void;
+};
+
 /**
  * Permite acceder a la identidad del panel actual.
  */
@@ -373,33 +424,7 @@ declare function useDashboardContext(): Dashboard;
 
 declare function useDashboardPanel(): DashboardPanel;
 
-declare const eventsController: {
-    callbacks: TPanelEventRegister<any>[];
-    broadcast(eventType: string, payload: any): void;
-    fireEvent(origin: TPanelIdentifier, eventType: string, payload: any): void;
-    onEvent<PayloadEvent>(distinction: Partial<TPanelEventIdentifier>, callback: TPanelEventCallback<PayloadEvent>): () => void;
-};
-
-/**
- * Este hook devuelve un método que puede ser llamado para emitir un evento en
- * el panel desde el cual es llamado. Los eventos de panel son emitidos con id
- * de panel, tipo de panel, nombre de panel y tipo de evento y las suscripciones
- * pueden ser realizadas a un conjunto arbitrario de estos identificadores.
- *
- * El segundo parámetro del método fireEvent devuelto es el payload, que puede
- * ser de cualquier tipo.
- */
-declare function usePanelFireEvent(): (eventType: string, payload: any) => void;
-
-/**
- * Este hook permite realizar suscripciones a eventos de paneles. Deberá ser
- * llamado una vez por cada suscripción que desee hacerse dentro de un panel y
- * no se deberán ejecutar acciones para romper las suscripciones hechas, ya que
- * este hook maneja esa lógica de forma automática.
- */
-declare function usePanelOnEvent<PayloadEvent>(distinction: Partial<TPanelEventIdentifier>, callback: TPanelEventCallback<PayloadEvent>): void;
-
-declare function changePanelTitle(panelId: string, newTitle: string): void;
+declare function changePanelTitle(identifier: TPanelIdentifier, newTitle: string): void;
 declare function usePanelChangeTitle(): (newTitle: string) => void;
 
 declare type ActionCreatorForCaseReducer<CR> = CR extends (state: any, action: infer Action) => any ? Action extends {
@@ -413,5 +438,20 @@ declare function createPanelStore<PanelState = any, Reducers extends SliceCaseRe
     <Selected>(panelName: TPanelName, selector: (state: PanelState) => Selected, comparator?: (a: Selected, b: Selected) => boolean) => Selected
 ];
 
-export { Dashboard, EmptyPanelWrapper, LandingPagePanelWrapper, type PanelContainer, PanelIdentifier, PanelIdentifierContext, type TActionBehavior, type TActionDispatcher, type TActionResult, type TActionSource, type TBasicAction, type TFooter, type TPanelContext, type TPanelEvent, type TPanelEventCallback, type TPanelEventIdentifier, type TPanelEventRegister, type TPanelIdentifier, type TParamsStore, changePanelTitle, createPanelStore, eventsController, externalFirePanelAction, handleAction, store as parametersStore, saveParameters, useDashboardContext, useDashboardPanel, usePanelActions, usePanelChangeTitle, usePanelContext, usePanelFireEvent, usePanelIdentity, usePanelIsLoading, usePanelNetworkState, usePanelOnEvent, usePanelParametersSelector, usePanelPosition, useYieldPanelIsReady };
+declare function usePanelImage(): string;
+declare function usePanelTitleDescription(): string;
+
+declare const PanelButtons: react.FC<Omit<TPanelProps$1, "children" | "initialData"> & {
+    id: _apia_util.TId;
+}>;
+
+declare const PanelFooter: ({ footerContent, isRefreshable, footer, handleFooterClick, }: TUsePanelFooter & {
+    isRefreshable: boolean;
+}) => react.JSX.Element;
+
+declare const NetworkState: ({ title }: {
+    title: string;
+}) => react.JSX.Element;
+
+export { Dashboard, EmptyPanelWrapper, LandingPagePanelWrapper, NetworkState, PanelButtons, type PanelContainer, PanelContextProvider, PanelFooter, PanelIdentifier, PanelIdentifierContext, type TActionBehavior, type TActionDispatcher, type TActionResult, type TActionSource, type TBasicAction, type TFooter, type TPanelContext, type TPanelEvent, type TPanelEventCallback, type TPanelEventIdentifier, type TPanelEventRegister, type TPanelIdentifier, type TParamsStore, type TUsePanelFooter, changePanelTitle, createPanelStore, eventsController, externalFirePanelAction, handleAction, store as parametersStore, saveParameters, useActionEventHandlers, useDashboardContext, useDashboardPanel, useMakePanelContext, usePanelActions, usePanelChangeTitle, usePanelContext, usePanelFireEvent, usePanelIdentity, usePanelImage, usePanelIsLoading, usePanelNetworkState, usePanelOnEvent, usePanelParametersSelector, usePanelPosition, usePanelTitleDescription, useYieldPanelIsReady };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,9 +1,9 @@
 import { ApiaApi, makeApiaUrl } from '@apia/api';
-import { EventEmitter, useMount, useImperativeComponentEvents, getLabel, makeImperativeComponent, parseXmlAsync, toBoolean, isChild, getSpecificParent, ucfirst, useLatest } from '@apia/util';
+import { EventEmitter, useMount, useImperativeComponentEvents, getLabel, makeImperativeComponent, parseXmlAsync, toBoolean, isChild, getSpecificParent, ucfirst, downloadUrl, useLatest } from '@apia/util';
 import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef, useDeferredValue, Suspense, lazy, Component, startTransition } from 'react';
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
 import { Icon } from '@apia/icons';
-import { spacing, responsive, getSpacingLayouts, spacingLayouts, Box, makeStyledComponent, Heading, Paragraph } from '@apia/theme';
+import { spacingLayouts, Box, getVariant, Heading, makeStyledComponent, Paragraph } from '@apia/theme';
 import { shallowEqual } from 'react-redux';
 import { createSlice, injectReducers, shallowEqual as shallowEqual$1 } from '@apia/store';
 import { IconButton, AutoEllipsis, SimpleButton } from '@apia/components';
@@ -214,18 +214,14 @@ function usePanelOnEvent(distinction, callback) {
   });
 }
 
-function changePanelTitle(panelId, newTitle) {
-  eventsController.fireEvent(
-    { panelId },
-    "changeTitle",
-    newTitle
-  );
+function changePanelTitle(identifier, newTitle) {
+  eventsController.fireEvent(identifier, "__changePanelTitle__", newTitle);
 }
 function usePanelChangeTitle() {
   const fireEvent = usePanelFireEvent();
   return useCallback(
     (newTitle) => {
-      fireEvent("changeTitle", newTitle);
+      fireEvent("__changePanelTitle__", newTitle);
     },
     [fireEvent]
   );
@@ -238,20 +234,22 @@ function changePanelFooter(panelId, footer) {
     footer
   );
 }
-function usePanelFooter(panelId, { initialData }) {
+function usePanelFooter({
+  initialData
+}) {
+  const identifier = usePanelIdentity();
   const [footer, setFooter] = useState(
     initialData?.footer?.footer?.text ? initialData?.footer?.footer : null
   );
   const handleFooterClick = useCallback(
     (ev) => {
-      console.log(ev.type);
       if (footer)
-        handleAction(panelId, ev, footer);
+        handleAction(identifier, ev, footer);
     },
-    [footer, panelId]
+    [footer, identifier]
   );
   usePanelOnEvent(
-    { eventType: "changeFooter", panelId },
+    { eventType: "changeFooter", panelId: identifier.panelId },
     (ev) => {
       if (!ev.payload.text)
         setFooter(null);
@@ -301,113 +299,6 @@ function useDashboardContext() {
   return context;
 }
 
-const defaultPanelWrapperStyles = {
-  pb: spacing(6),
-  "&:last-child": {
-    pb: 0
-  },
-  ".panel__container": {
-    background: "palette.background.paper",
-    border: "1px solid",
-    borderColor: "palette.gray.800",
-    display: "flex",
-    flexDirection: "column",
-    borderRadius: "panel",
-    boxShadow: "panel"
-  },
-  ".panel__icon": {
-    height: "24px",
-    width: "24px",
-    borderRadius: "100%",
-    transform: "scale(1.25)",
-    marginRight: "6px"
-  },
-  ".panel__header": {
-    alignItems: "center",
-    cursor: "grab",
-    display: "flex",
-    flexWrap: "nowrap",
-    fontWeight: "bold",
-    justifyContent: "space-between",
-    maxWidth: "100%",
-    overflow: "visible",
-    backgroundColor: "palette.secondary.light",
-    borderBottomRightRadius: "0px !important",
-    borderBottomLeftRadius: "0px !important",
-    pl: 4,
-    py: 4,
-    borderRadius: "panel",
-    ".panel__header__left": {
-      alignItems: "center",
-      display: "flex",
-      gap: 2,
-      overflow: "visible",
-      svg: {
-        color: "palette.error.dark"
-      }
-    },
-    "& > *": {
-      flexShrink: 0
-    },
-    ".panel__header__buttons": {
-      alignSelf: "end",
-      display: "flex",
-      flexGrow: 1,
-      fontWeight: "normal",
-      gap: 2,
-      justifyContent: "end",
-      right: 0,
-      background: "transparent",
-      pr: 3,
-      opacity: responsive({ 0: 1, 3: 0 }),
-      alignItems: "center",
-      pl: 3,
-      height: "24px",
-      button: {
-        width: "30px",
-        height: "30px"
-      }
-    }
-  },
-  ".panel__content": {
-    ...getSpacingLayouts()
-  },
-  ".panel__container:hover, .panel__container:focus, .panel__container:focus-within, .panel__container.isLoading": {
-    ".panel__header__buttons, .lastUpdate__wrapper": {
-      opacity: responsive({ 0: 1 })
-    }
-  },
-  ".panel__footer": {
-    display: "flex",
-    justifyContent: "space-between",
-    gap: spacing(3),
-    background: "palette.secondary.light",
-    px: 4,
-    py: 3,
-    color: "palette.text.primary",
-    borderRadius: "panel",
-    borderTopRightRadius: "0px",
-    borderTopLeftRadius: "0px",
-    overflow: "hidden",
-    alignItems: "center"
-  },
-  ".panel__iconButton, .lastUpdate__wrapper": {
-    transition: "opacity 300ms"
-  },
-  ".lastUpdate__wrapper": {
-    fontSize: 14,
-    opacity: 0,
-    flexShrink: 0
-  },
-  ".panel__footer__text": {
-    overflow: "hidden",
-    flexShrink: 1
-  },
-  "span.panel__title": {
-    flexShrink: "1 !important"
-  }
-};
-
 const RefreshButton = (props) => {
   const [isDisabled, setIsDisabled] = useState(false);
   const isLoading = usePanelIsLoading();
@@ -546,25 +437,23 @@ const PanelContextProvider = ({
 }) => {
   return /* @__PURE__ */ jsx(PanelContext.Provider, { value, children });
 };
-function useMakePanelContext(panelId, panelProps) {
+function useMakePanelContext(panelProps) {
+  const identifier = usePanelIdentity();
   const setTitle = useCallback(
     (newTitle) => {
-      changePanelTitle(panelId, newTitle);
+      changePanelTitle(identifier, newTitle);
     },
-    [panelId]
+    [identifier]
   );
   const { ref, setLayout } = usePanelContextLayout();
   const [title, setTitleState] = useState(panelProps.title);
   usePanelOnEvent(
-    { eventType: "changeTitle", panelId },
+    { eventType: "changeTitle", panelId: identifier.panelId },
     (ev) => {
       setTitleState(ev.payload);
     }
   );
-  const { footer, handleFooterClick } = usePanelFooter(
-    panelId,
-    panelProps.initialData
-  );
+  const { footer, handleFooterClick } = usePanelFooter(panelProps.initialData);
   const [footerContent, setFooterContent] = useState(null);
   const dispatch = usePanelActions();
   const hasRefreshedOnStartup = useRef(false);
@@ -575,14 +464,19 @@ function useMakePanelContext(panelId, panelProps) {
         hasRefreshedOnStartup.current = true;
         if (panelProps.refreshOnStart) {
           void dispatch({ action: "refresh" }).then(() => {
-            dashboard.bootstrapper.setPanelHasLoaded(panelId);
+            dashboard.bootstrapper.setPanelHasLoaded(identifier.panelId);
           });
         } else {
-          dashboard.bootstrapper.setPanelHasLoaded(panelId);
+          dashboard.bootstrapper.setPanelHasLoaded(identifier.panelId);
         }
       }
     },
-    [dashboard.bootstrapper, dispatch, panelId, panelProps.refreshOnStart]
+    [
+      dashboard.bootstrapper,
+      dispatch,
+      identifier.panelId,
+      panelProps.refreshOnStart
+    ]
   );
   const contextValue = useMemo(
     () => ({ setFooterContent, setTitle, setLayout, panelProps, setRef }),
@@ -654,64 +548,56 @@ const PanelFooter = ({
   ] }) });
 };
 
-const DefaultPanelWrapper = makeStyledComponent(
-  "DefaultPanelWrapper",
-  "layout.common.dashboards.panel",
-  defaultPanelWrapperStyles,
-  ({ children, ...props }) => {
-    const { panelId, panelName, panelType } = usePanelIdentity();
-    const { contextValue, title, ref, ...footerProps } = useMakePanelContext(
-      panelId,
-      props
-    );
-    const panelTitleDescription = usePanelTitleDescription();
-    const panelImage = usePanelImage() ?? props.image;
-    const showHeader = props.showTitle || props.isConfigurable || props.isRefreshable || panelImage;
-    const isLoading = usePanelIsLoading();
-    return /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: `panel__container ${isLoading ? "isLoading" : ""}`,
-        "data-panelname": panelName,
-        "data-paneltype": panelType,
-        "data-panelid": panelId,
-        children: [
-          showHeader && /* @__PURE__ */ jsxs("div", { draggable: props.canMove, className: `panel__header`, children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "panel__header__left",
-                sx: {
-                  maxWidth: "80%",
-                  overflow: "hidden",
-                  whiteSpace: "nowrap"
-                },
-                children: [
-                  panelImage && !panelImage.match("(^.+null$)") && /* @__PURE__ */ jsx("img", { src: panelImage, className: "panel__icon" }),
-                  /* @__PURE__ */ jsxs(AutoEllipsis, { children: [
-                    props.showTitle && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "panel__title",
-                        title: panelTitleDescription ?? title,
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(NetworkState, { title })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: `panel__header__buttons`, children: /* @__PURE__ */ jsx(PanelButtons, { ...props, id: panelId }) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "panel__content", children }),
-          /* @__PURE__ */ jsx(PanelFooter, { isRefreshable: props.isRefreshable, ...footerProps })
-        ]
-      }
-    ) });
-  }
-);
+const DefaultPanelWrapper = ({ children, ...props }) => {
+  const { panelId, panelName, panelType } = usePanelIdentity();
+  const { contextValue, title, ref, ...footerProps } = useMakePanelContext(props);
+  const panelTitleDescription = usePanelTitleDescription();
+  const panelImage = usePanelImage() ?? props.image;
+  const showHeader = props.showTitle || props.isConfigurable || props.isRefreshable || panelImage;
+  const isLoading = usePanelIsLoading();
+  return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.dashboards.panel"), children: /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `panel__container ${isLoading ? "isLoading" : ""}`,
+      "data-panelname": panelName,
+      "data-paneltype": panelType,
+      "data-panelid": panelId,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { draggable: props.canMove, className: `panel__header`, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "panel__header__left",
+              sx: {
+                maxWidth: "80%",
+                overflow: "hidden",
+                whiteSpace: "nowrap"
+              },
+              children: [
+                panelImage && !panelImage.match("(^.+null$)") && /* @__PURE__ */ jsx("img", { src: panelImage, className: "panel__icon" }),
+                /* @__PURE__ */ jsxs(AutoEllipsis, { children: [
+                  props.showTitle && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "panel__title",
+                      title: panelTitleDescription ?? title,
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(NetworkState, { title })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `panel__header__buttons`, children: /* @__PURE__ */ jsx(PanelButtons, { ...props, id: panelId }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "panel__content", children }),
+        /* @__PURE__ */ jsx(PanelFooter, { isRefreshable: props.isRefreshable, ...footerProps })
+      ]
+    }
+  ) }) });
+};
 
 var __defProp$5 = Object.defineProperty;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -852,6 +738,14 @@ const PanelNotFound = () => {
   ] }) });
 };
 
+const ContainerNotFound = () => {
+  const props = usePanelIdentity();
+  return /* @__PURE__ */ jsxs(Heading, { children: [
+    "Container not found for panel: ",
+    props.panelName
+  ] });
+};
+
 const importedContainers = {};
 const importedPanels = {};
 function importContainer(path) {
@@ -867,7 +761,7 @@ function importContainer(path) {
           resolve(result.default);
         }).catch(() => {
           resolve({
-            default: PanelNotFound
+            default: ContainerNotFound
           });
         });
       });
@@ -1835,14 +1729,12 @@ class Dashboard extends EventEmitter {
         {
           route: new RegExp(`(?:/spa)?/(\\w+)`),
           callback: (result) => {
-            console.log("Dashboard", { scene: result[1] });
             this.loadScene(result[1]);
           }
         },
         {
           route: new RegExp(`/`),
           callback: () => {
-            console.log("Dashboard", { noScene: "/" });
             this.loadScene("/");
           }
         }
@@ -1976,7 +1868,7 @@ function firePanelAction(panelId, action, parameters, options) {
         startTransition(() => {
           if (result?.data?.title) {
             changePanelTitle(
-              panelId,
+              { panelId },
               result?.data?.title
             );
           }
@@ -2014,7 +1906,7 @@ function firePanelAction(panelId, action, parameters, options) {
   });
 }
 
-function handleAction(panelId, event, action) {
+function handleAction(panelIdentifier, event, action) {
   if (event.type === "dblclick" && action.actionSource === "DOUBLE_CLICK" || (event.type === "click" || event.type === "mousedown") && action.actionSource === "CLICK" || event.type === "keydown" && event.code === "Enter") {
     if (action?.action) {
       switch (action.actionBehavior) {
@@ -2028,20 +1920,28 @@ function handleAction(panelId, event, action) {
           break;
         case "OPEN_TAB":
           window.top?.tabsController.openTabByUrl(
-            action.actionNewTabTitle || action.text,
+            action.additionalData || action.text,
             action.action
           );
           break;
         case "RUN_ACTION":
           firePanelAction(
-            panelId,
+            panelIdentifier.panelId,
             action.action,
             {},
-            { requestConfig: {
-              handleLoad: true
-            } }
+            { requestConfig: { handleLoad: true } }
           );
           break;
+        case "FIRE_EVENT":
+          eventsController.fireEvent(
+            panelIdentifier,
+            action.action,
+            JSON.parse(action.additionalData)
+          );
+          break;
+        case "DOWNLOAD":
+          downloadUrl(action.action);
+          break;
         default:
           console.error("Unknown action behavior: ", action);
       }
@@ -2066,6 +1966,41 @@ function usePanelIsLoading() {
   return isLoading;
 }
 
+const useActionEventHandlers = () => {
+  const identifier = usePanelIdentity();
+  const onClick = useCallback(
+    (ev) => {
+      return (action) => {
+        if (action.actionSource !== "CLICK")
+          return;
+        handleAction(identifier, ev, action);
+      };
+    },
+    [identifier]
+  );
+  const onDoubleClick = useCallback(
+    (ev) => {
+      return (action) => {
+        if (action.actionSource !== "DOUBLE_CLICK")
+          return;
+        handleAction(identifier, ev, action);
+      };
+    },
+    [identifier]
+  );
+  const onKeyDown = useCallback(
+    (ev) => {
+      return (action) => {
+        if (ev.code !== "Enter")
+          return;
+        handleAction(identifier, ev, action);
+      };
+    },
+    [identifier]
+  );
+  return { onClick, onDoubleClick, onKeyDown };
+};
+
 const NetworkState = ({ title }) => {
   const isConnected = usePanelNetworkState();
   return /* @__PURE__ */ jsx(Fragment, { children: !isConnected && /* @__PURE__ */ jsx(
@@ -2092,10 +2027,7 @@ const LandingPagePanelWrapper = ({
   ...props
 }) => {
   const { panelId, panelName, panelType } = usePanelIdentity();
-  const { contextValue, title, ref, ...footerProps } = useMakePanelContext(
-    panelId,
-    props
-  );
+  const { contextValue, title, ref, ...footerProps } = useMakePanelContext(props);
   const panelTitleAction = usePanelTitleAction();
   const panelTitleDescription = usePanelTitleDescription();
   const dashboard = useDashboardContext();
@@ -2130,8 +2062,7 @@ const LandingPagePanelWrapper = ({
 };
 
 const EmptyPanelWrapper = (props) => {
-  const { panelId } = usePanelIdentity();
-  const { contextValue } = useMakePanelContext(panelId, props);
+  const { contextValue } = useMakePanelContext(props);
   return /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: props.children });
 };
 
@@ -2263,5 +2194,5 @@ function createPanelStore(panelType, initialState, reducers) {
   return [usePanelDispatcher, useSelector];
 }
 
-export { Dashboard, EmptyPanelWrapper, LandingPagePanelWrapper, PanelIdentifier, PanelIdentifierContext, changePanelTitle, createPanelStore, eventsController, externalFirePanelAction, handleAction, store as parametersStore, saveParameters, useDashboardContext, useDashboardPanel, usePanelActions, usePanelChangeTitle, usePanelContext, usePanelFireEvent, usePanelIdentity, usePanelIsLoading, usePanelNetworkState, usePanelOnEvent, usePanelParametersSelector, usePanelPosition, useYieldPanelIsReady };
+export { Dashboard, EmptyPanelWrapper, LandingPagePanelWrapper, NetworkState, PanelButtons, PanelContextProvider, PanelFooter, PanelIdentifier, PanelIdentifierContext, changePanelTitle, createPanelStore, eventsController, externalFirePanelAction, handleAction, store as parametersStore, saveParameters, useActionEventHandlers, useDashboardContext, useDashboardPanel, useMakePanelContext, usePanelActions, usePanelChangeTitle, usePanelContext, usePanelFireEvent, usePanelIdentity, usePanelImage, usePanelIsLoading, usePanelNetworkState, usePanelOnEvent, usePanelParametersSelector, usePanelPosition, usePanelTitleDescription, useYieldPanelIsReady };
 //# sourceMappingURL=index.js.map