@bpmn-io/properties-panel 3.5.0 → 3.7.0

package/dist/index.esm.js

@@ -1132,6 +1132,7 @@ const noop$3 = () => {};
  * @param {Object} props
  * @param {HTMLElement} [props.container]
  * @param {string} [props.className]
+ * @param {boolean} [props.delayInitialFocus]
  * @param {{x: number, y: number}} [props.position]
  * @param {number} [props.width]
  * @param {number} [props.height]
@@ -1139,12 +1140,14 @@ const noop$3 = () => {};
  * @param {Function} [props.onPostActivate]
  * @param {Function} [props.onPostDeactivate]
  * @param {boolean} [props.returnFocus]
+ * @param {boolean} [props.closeOnEscape]
  * @param {string} props.title
  */
 function Popup(props) {
   const {
     container,
     className,
+    delayInitialFocus,
     position,
     width,
     height,
@@ -1152,12 +1155,15 @@ function Popup(props) {
     onPostActivate = noop$3,
     onPostDeactivate = noop$3,
     returnFocus = true,
+    closeOnEscape = true,
     title
   } = props;
   const focusTrapRef = useRef(null);
   const popupRef = useRef(null);
-  const handleKeyPress = event => {
-    if (event.key === 'Escape') {
+  const handleKeydown = event => {
+    // do not allow keyboard events to bubble
+    event.stopPropagation();
+    if (closeOnEscape && event.key === 'Escape') {
       onClose();
     }
   };
@@ -1182,14 +1188,6 @@ function Popup(props) {
   if (height) {
     style.height = height + 'px';
   }
-  useEffect(() => {
-    if (popupRef.current) {
-      popupRef.current.addEventListener('keydown', handleKeyPress);
-    }
-    return () => {
-      popupRef.current.removeEventListener('keydown', handleKeyPress);
-    };
-  }, [popupRef]);
   useEffect(() => {
     if (popupRef.current) {
       popupRef.current.addEventListener('focusin', handleFocus);
@@ -1202,6 +1200,7 @@ function Popup(props) {
     if (popupRef.current) {
       focusTrapRef.current = focusTrap.createFocusTrap(popupRef.current, {
         clickOutsideDeactivates: true,
+        delayInitialFocus,
         fallbackFocus: popupRef.current,
         onPostActivate,
         onPostDeactivate,
@@ -1215,6 +1214,7 @@ function Popup(props) {
     "aria-label": title,
     tabIndex: -1,
     ref: popupRef,
+    onKeyDown: handleKeydown,
     role: "dialog",
     class: classnames('bio-properties-panel-popup', className),
     style: style,
@@ -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, {
@@ -1385,15 +1421,28 @@ function FeelPopupComponent(props) {
     variables
   } = props;
   const editorRef = useRef();
+  const isAutoCompletionOpen = useRef(false);
   const handleSetReturnFocus = () => {
     sourceElement && sourceElement.focus();
   };
-  useEffect(() => {
-    const editor = editorRef.current;
-    if (editor) {
-      editor.focus();
+  const onKeyDownCapture = event => {
+    // we use capture here to make sure we handle the event before the editor does
+    if (event.key === 'Escape') {
+      isAutoCompletionOpen.current = autoCompletionOpen(event.target);
+    }
+  };
+  const onKeyDown = event => {
+    if (event.key === 'Escape') {
+      // close popup only if auto completion is not open
+      // we need to do check this because the editor is not
+      // stop propagating the keydown event
+      // cf. https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322/5
+      if (!isAutoCompletionOpen.current) {
+        onClose();
+        isAutoCompletionOpen.current = false;
+      }
     }
-  }, [editorRef, id]);
+  };
   return jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
@@ -1404,6 +1453,8 @@ function FeelPopupComponent(props) {
     // handle focus manually on deactivate
     ,
     returnFocus: false,
+    closeOnEscape: false,
+    delayInitialFocus: false,
     onPostDeactivate: handleSetReturnFocus,
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
@@ -1412,6 +1463,8 @@ function FeelPopupComponent(props) {
       draggable: true
     }), jsx(Popup.Body, {
       children: jsxs("div", {
+        onKeyDownCapture: onKeyDownCapture,
+        onKeyDown: onKeyDown,
         class: "bio-properties-panel-feel-popup__body",
         children: [type === 'feel' && jsx(CodeEditor, {
           enableGutters: true,
@@ -1453,6 +1506,9 @@ function FeelPopupComponent(props) {
 function prefixId$8(id) {
   return `bio-properties-panel-${id}`;
 }
+function autoCompletionOpen(element) {
+  return element.closest('.cm-editor').querySelector('.cm-tooltip-autocomplete');
+}
 
 function ToggleSwitch(props) {
   const {
@@ -2202,7 +2258,7 @@ function FeelEntry(props) {
     setLocalError(err);
   }, []);
   const temporaryError = useError(id);
-  const error = localError || temporaryError || validationError;
+  const error = temporaryError || localError || validationError;
   return jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -2611,6 +2667,7 @@ function PropertiesPanel(props) {
               value: eventContext,
               children: jsx(FEELPopupRoot, {
                 element: element,
+                eventBus: eventBus,
                 popupContainer: feelPopupContainer,
                 children: jsxs("div", {
                   class: "bio-properties-panel",
@@ -4076,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