@bpmn-io/properties-panel 3.5.0 → 3.6.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,
@@ -1385,15 +1385,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 +1417,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 +1427,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 +1470,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 +2222,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,