@bpmn-io/properties-panel 3.6.0 → 3.7.1

package/dist/index.esm.js

@@ -1329,6 +1329,11 @@ const FEEL_POPUP_HEIGHT = 250;
 function FEELPopupRoot(props) {
   const {
     element,
+    eventBus = {
+      fire() {},
+      on() {},
+      off() {}
+    },
     popupContainer
   } = props;
   const prevElement = usePrevious(element);
@@ -1336,15 +1341,23 @@ function FEELPopupRoot(props) {
   const [open, setOpen] = useState(false);
   const [source, setSource] = useState(null);
   const [sourceElement, setSourceElement] = useState(null);
-  const handleOpen = (key, config, _sourceElement) => {
-    setSource(key);
+  const emit = (type, context) => {
+    eventBus.fire('feelPopup.' + type, context);
+  };
+  const isOpen = useCallback(() => {
+    return !!open;
+  }, [open]);
+  const handleOpen = (entryId, config, _sourceElement) => {
+    setSource(entryId);
     setPopupConfig(config);
     setOpen(true);
     setSourceElement(_sourceElement);
+    emit('opened');
   };
   const handleClose = () => {
     setOpen(false);
     setSource(null);
+    emit('closed');
   };
   const feelPopupContext = {
     open: handleOpen,
@@ -1354,10 +1367,33 @@ function FEELPopupRoot(props) {
 
   // close popup on element change, cf. https://github.com/bpmn-io/properties-panel/issues/270
   useEffect(() => {
-    if (element && element !== prevElement) {
+    if (element && prevElement && element !== prevElement) {
       handleClose();
     }
   }, [element]);
+
+  // allow close and open via events
+  useEffect(() => {
+    const handlePopupOpen = context => {
+      const {
+        entryId,
+        popupConfig,
+        sourceElement
+      } = context;
+      handleOpen(entryId, popupConfig, sourceElement);
+    };
+    const handleIsOpen = () => {
+      return isOpen();
+    };
+    eventBus.on('feelPopup._close', handleClose);
+    eventBus.on('feelPopup._open', handlePopupOpen);
+    eventBus.on('feelPopup._isOpen', handleIsOpen);
+    return () => {
+      eventBus.off('feelPopup._close', handleClose);
+      eventBus.off('feelPopup._open', handleOpen);
+      eventBus.off('feelPopup._isOpen', handleIsOpen);
+    };
+  }, [eventBus, isOpen]);
   return jsxs(FeelPopupContext.Provider, {
     value: feelPopupContext,
     children: [open && jsx(FeelPopupComponent, {
@@ -2425,7 +2461,7 @@ function calculatePopupPosition(element) {
 
 // todo(pinussilvestrus): make this configurable in the future
 function getPopupTitle(element, label) {
-  let popupTitle;
+  let popupTitle = '';
   if (element && element.type) {
     popupTitle = `${element.type} / `;
   }
@@ -2631,6 +2667,7 @@ function PropertiesPanel(props) {
               value: eventContext,
               children: jsx(FEELPopupRoot, {
                 element: element,
+                eventBus: eventBus,
                 popupContainer: feelPopupContainer,
                 children: jsxs("div", {
                   class: "bio-properties-panel",
@@ -4096,9 +4133,50 @@ function debounceInput(debounceDelay) {
 }
 debounceInput.$inject = ['config.debounceInput'];
 
-var index = {
+var index$1 = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, Popup, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, isEdited$5 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$7 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$8 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
+class FeelPopupModule {
+  constructor(eventBus) {
+    this._eventBus = eventBus;
+  }
+
+  /**
+   * Check if the FEEL popup is open.
+   * @return {Boolean}
+   */
+  isOpen() {
+    return this._eventBus.fire('feelPopup._isOpen');
+  }
+
+  /**
+   * Open the FEEL popup.
+   *
+   * @param {String} entryId
+   * @param {Object} popupConfig
+   * @param {HTMLElement} sourceElement
+   */
+  open(entryId, popupConfig, sourceElement) {
+    return this._eventBus.fire('feelPopup._open', {
+      entryId,
+      popupConfig,
+      sourceElement
+    });
+  }
+
+  /**
+   * Close the FEEL popup.
+   */
+  close() {
+    return this._eventBus.fire('feelPopup._close');
+  }
+}
+FeelPopupModule.$inject = ['eventBus'];
+
+var index = {
+  feelPopup: ['type', FeelPopupModule]
+};
+
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, Popup, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, isEdited$5 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$7 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$8 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
 //# sourceMappingURL=index.esm.js.map