@bpmn-io/properties-panel 3.4.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,
@@ -1328,7 +1328,8 @@ const FEEL_POPUP_HEIGHT = 250;
  */
 function FEELPopupRoot(props) {
   const {
-    element
+    element,
+    popupContainer
   } = props;
   const prevElement = usePrevious(element);
   const [popupConfig, setPopupConfig] = useState({});
@@ -1361,6 +1362,7 @@ function FEELPopupRoot(props) {
     value: feelPopupContext,
     children: [open && jsx(FeelPopupComponent, {
       onClose: handleClose,
+      container: popupContainer,
       sourceElement: sourceElement,
       ...popupConfig
     }), props.children]
@@ -1368,6 +1370,7 @@ function FEELPopupRoot(props) {
 }
 function FeelPopupComponent(props) {
   const {
+    container,
     id,
     hostLanguage,
     onInput,
@@ -1382,16 +1385,30 @@ 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",
     position: position,
     title: title,
@@ -1400,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,
@@ -1408,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,
@@ -1449,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 {
@@ -2198,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,
@@ -2489,6 +2513,7 @@ const DEFAULT_TOOLTIP = {};
  * @param {Function} [props.descriptionLoaded]
  * @param {TooltipConfig} [props.tooltipConfig]
  * @param {Function} [props.tooltipLoaded]
+ * @param {HTMLElement} [props.feelPopupContainer]
  * @param {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
@@ -2503,6 +2528,7 @@ function PropertiesPanel(props) {
     descriptionLoaded,
     tooltipConfig,
     tooltipLoaded,
+    feelPopupContainer,
     eventBus
   } = props;
 
@@ -2605,6 +2631,7 @@ function PropertiesPanel(props) {
               value: eventContext,
               children: jsx(FEELPopupRoot, {
                 element: element,
+                popupContainer: feelPopupContainer,
                 children: jsxs("div", {
                   class: "bio-properties-panel",
                   children: [jsx(Header, {