@bpmn-io/properties-panel 3.4.0 → 3.6.0

package/dist/index.js

@@ -1160,6 +1160,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]
@@ -1167,12 +1168,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,
@@ -1180,12 +1183,15 @@ function Popup(props) {
     onPostActivate = noop$3,
     onPostDeactivate = noop$3,
     returnFocus = true,
+    closeOnEscape = true,
     title
   } = props;
   const focusTrapRef = hooks.useRef(null);
   const popupRef = hooks.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();
     }
   };
@@ -1210,14 +1216,6 @@ function Popup(props) {
   if (height) {
     style.height = height + 'px';
   }
-  hooks.useEffect(() => {
-    if (popupRef.current) {
-      popupRef.current.addEventListener('keydown', handleKeyPress);
-    }
-    return () => {
-      popupRef.current.removeEventListener('keydown', handleKeyPress);
-    };
-  }, [popupRef]);
   hooks.useEffect(() => {
     if (popupRef.current) {
       popupRef.current.addEventListener('focusin', handleFocus);
@@ -1230,6 +1228,7 @@ function Popup(props) {
     if (popupRef.current) {
       focusTrapRef.current = focusTrap__namespace.createFocusTrap(popupRef.current, {
         clickOutsideDeactivates: true,
+        delayInitialFocus,
         fallbackFocus: popupRef.current,
         onPostActivate,
         onPostDeactivate,
@@ -1243,6 +1242,7 @@ function Popup(props) {
     "aria-label": title,
     tabIndex: -1,
     ref: popupRef,
+    onKeyDown: handleKeydown,
     role: "dialog",
     class: classnames__default["default"]('bio-properties-panel-popup', className),
     style: style,
@@ -1356,7 +1356,8 @@ const FEEL_POPUP_HEIGHT = 250;
  */
 function FEELPopupRoot(props) {
   const {
-    element
+    element,
+    popupContainer
   } = props;
   const prevElement = usePrevious(element);
   const [popupConfig, setPopupConfig] = hooks.useState({});
@@ -1389,6 +1390,7 @@ function FEELPopupRoot(props) {
     value: feelPopupContext,
     children: [open && jsxRuntime.jsx(FeelPopupComponent, {
       onClose: handleClose,
+      container: popupContainer,
       sourceElement: sourceElement,
       ...popupConfig
     }), props.children]
@@ -1396,6 +1398,7 @@ function FEELPopupRoot(props) {
 }
 function FeelPopupComponent(props) {
   const {
+    container,
     id,
     hostLanguage,
     onInput,
@@ -1410,16 +1413,30 @@ function FeelPopupComponent(props) {
     variables
   } = props;
   const editorRef = hooks.useRef();
+  const isAutoCompletionOpen = hooks.useRef(false);
   const handleSetReturnFocus = () => {
     sourceElement && sourceElement.focus();
   };
-  hooks.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 jsxRuntime.jsxs(Popup, {
+    container: container,
     className: "bio-properties-panel-feel-popup",
     position: position,
     title: title,
@@ -1428,6 +1445,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,
@@ -1436,6 +1455,8 @@ function FeelPopupComponent(props) {
       draggable: true
     }), jsxRuntime.jsx(Popup.Body, {
       children: jsxRuntime.jsxs("div", {
+        onKeyDownCapture: onKeyDownCapture,
+        onKeyDown: onKeyDown,
         class: "bio-properties-panel-feel-popup__body",
         children: [type === 'feel' && jsxRuntime.jsx(CodeEditor, {
           enableGutters: true,
@@ -1477,6 +1498,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 {
@@ -2226,7 +2250,7 @@ function FeelEntry(props) {
     setLocalError(err);
   }, []);
   const temporaryError = useError(id);
-  const error = localError || temporaryError || validationError;
+  const error = temporaryError || localError || validationError;
   return jsxRuntime.jsxs("div", {
     class: classnames__default["default"](props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -2517,6 +2541,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) {
@@ -2531,6 +2556,7 @@ function PropertiesPanel(props) {
     descriptionLoaded,
     tooltipConfig,
     tooltipLoaded,
+    feelPopupContainer,
     eventBus
   } = props;
 
@@ -2633,6 +2659,7 @@ function PropertiesPanel(props) {
               value: eventContext,
               children: jsxRuntime.jsx(FEELPopupRoot, {
                 element: element,
+                popupContainer: feelPopupContainer,
                 children: jsxRuntime.jsxs("div", {
                   class: "bio-properties-panel",
                   children: [jsxRuntime.jsx(Header, {