@bpmn-io/properties-panel 3.47.0 → 3.48.0

package/dist/index.js

@@ -4104,6 +4104,7 @@ function resizeToContents(element) {
 function TextArea(props) {
   const {
     id,
+    element,
     label,
     debounce,
     onInput: commitValue,
@@ -4116,10 +4117,21 @@ function TextArea(props) {
     autoResize = true,
     placeholder,
     rows = autoResize ? 1 : 2,
-    tooltip
+    tooltip,
+    translate = translateFallback
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
+  const containerRef = hooks.useRef();
+
+  // keep a live reference to the current value so callbacks captured by the
+  // popup (frozen at open time) can compare against the latest value
+  const localValueRef = hooks.useRef(localValue);
+  localValueRef.current = localValue;
+  const {
+    eventBus
+  } = hooks.useContext(EventContext);
+  const [isPopupOpen, setIsPopupOpen] = hooks.useState(false);
   const onInput = hooks.useCallback(newValue => {
     const newModelValue = newValue === '' ? undefined : newValue;
     commitValue(newModelValue);
@@ -4131,7 +4143,6 @@ function TextArea(props) {
    */
   const handleInput = useDebounce(onInput, debounce);
   const handleLocalInput = e => {
-    autoResize && resizeToContents(e.target);
     if (e.target.value === localValue) {
       return;
     }
@@ -4176,9 +4187,40 @@ function TextArea(props) {
       handleInput.flush?.();
     }
   };
+  const handlePopupInput = newValue => {
+    if (newValue === localValueRef.current) {
+      return;
+    }
+    setLocalValue(newValue);
+    handleInput(newValue);
+  };
+  const handleOpenPopup = () => {
+    const isOpen = eventBus.fire('propertiesPanel.openPopup', {
+      element,
+      entryId: id,
+      label,
+      onInput: handlePopupInput,
+      sourceElement: ref.current,
+      value: localValue
+    });
+    if (isOpen) {
+      eventBus.once('propertiesPanelPopup.close', () => {
+        handleInput.flush?.();
+        setIsPopupOpen(false);
+      });
+    }
+    setIsPopupOpen(isOpen === true);
+  };
+  hooks.useEffect(() => {
+    return () => {
+      eventBus && eventBus.fire('propertiesPanel.closePopup');
+    };
+  }, []);
+
+  // auto-resize on any value change (typing, popup edits, external updates)
   hooks.useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
-  }, []);
+  }, [localValue]);
   hooks.useLayoutEffect(() => {
     visible && autoResize && resizeToContents(ref.current);
   }, [visible]);
@@ -4196,25 +4238,35 @@ function TextArea(props) {
       children: jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
-        element: props.element,
+        element: element,
         children: label
       })
-    }), jsxRuntime.jsx("textarea", {
-      ref: ref,
-      id: prefixId$2(id),
-      name: id,
-      spellCheck: "false",
-      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
-      onInput: handleLocalInput,
-      onFocus: onFocus,
-      onKeyDown: handleOnKeyDown,
-      onBlur: handleOnBlur,
-      onPaste: handleOnPaste,
-      placeholder: placeholder,
-      rows: rows,
-      value: localValue,
-      disabled: disabled,
-      "data-gramm": "false"
+    }), jsxRuntime.jsxs("div", {
+      class: classnames('bio-properties-panel-textarea-container', isPopupOpen ? 'popupOpen' : null),
+      ref: containerRef,
+      children: [isPopupOpen && jsxRuntime.jsx("div", {
+        class: "bio-properties-panel-textarea__open-popup-placeholder",
+        children: translate('Opened in editor')
+      }), jsxRuntime.jsx("textarea", {
+        ref: ref,
+        id: prefixId$2(id),
+        name: id,
+        spellCheck: "false",
+        class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
+        onInput: handleLocalInput,
+        onFocus: onFocus,
+        onKeyDown: handleOnKeyDown,
+        onBlur: handleOnBlur,
+        onPaste: handleOnPaste,
+        placeholder: placeholder,
+        rows: rows,
+        value: localValue,
+        disabled: disabled,
+        "data-gramm": "false"
+      }), eventBus && !disabled && jsxRuntime.jsx(OpenPopupButton, {
+        onClick: handleOpenPopup,
+        translate: translate
+      })]
     })]
   });
 }
@@ -4235,6 +4287,7 @@ function TextArea(props) {
  * @param {boolean} props.monospace
  * @param {Function} [props.validate]
  * @param {boolean} [props.disabled]
+ * @param {Function} [props.translate]
  */
 function TextAreaEntry(props) {
   const {
@@ -4254,7 +4307,8 @@ function TextAreaEntry(props) {
     onPaste,
     placeholder,
     autoResize,
-    tooltip
+    tooltip,
+    translate
   } = props;
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
@@ -4295,6 +4349,7 @@ function TextAreaEntry(props) {
       placeholder: placeholder,
       autoResize: autoResize,
       tooltip: tooltip,
+      translate: translate,
       element: element
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
@@ -4636,6 +4691,9 @@ const noop = () => {};
  * @param {Function} [props.onPostDeactivate]
  * @param {boolean} [props.returnFocus]
  * @param {boolean} [props.closeOnEscape]
+ * @param {(event: KeyboardEvent) => boolean} [props.allowFocusMove] -
+ *   Whether a Tab keypress may move focus. Return false to leave the keypress
+ *   to the focused element, e.g. an editor navigating snippet placeholders.
  * @param {string} props.title
  * @param {Ref} [ref]
  */
@@ -4651,6 +4709,7 @@ function PopupComponent(props, globalRef) {
     onPostDeactivate = noop,
     returnFocus = true,
     closeOnEscape = true,
+    allowFocusMove = () => true,
     title
   } = props;
   const focusTrapRef = hooks.useRef(null);
@@ -4700,6 +4759,8 @@ function PopupComponent(props, globalRef) {
         clickOutsideDeactivates: true,
         delayInitialFocus,
         fallbackFocus: popupRef.current,
+        isKeyForward: event => isTab(event) && !event.shiftKey && allowFocusMove(event),
+        isKeyBackward: event => isTab(event) && event.shiftKey && allowFocusMove(event),
         onPostActivate,
         onPostDeactivate,
         returnFocusOnDeactivate: returnFocus
@@ -4719,10 +4780,10 @@ function PopupComponent(props, globalRef) {
     children: props.children
   });
 }
-const Popup = compat.forwardRef(PopupComponent);
-Popup.Title = Title;
-Popup.Body = Body;
-Popup.Footer = Footer;
+const Popup$1 = compat.forwardRef(PopupComponent);
+Popup$1.Title = Title;
+Popup$1.Body = Body;
+Popup$1.Footer = Footer;
 function Title(props) {
   const {
     children,
@@ -4833,6 +4894,9 @@ function Footer(props) {
 
 // helpers //////////////////////
 
+function isTab(event) {
+  return event.key === 'Tab';
+}
 function getPopupParent(node) {
   return node.closest('.bio-properties-panel-popup');
 }
@@ -4860,13 +4924,13 @@ function cancel(event) {
  */
 
 const FEEL_POPUP_WIDTH = 700;
-const FEEL_POPUP_HEIGHT = 250;
+const FEEL_POPUP_HEIGHT = 400;
 
 /**
  * FEEL expression editor popup component
  * @param {FeelPopupProps} props
  */
-function FeelPopup$1(props) {
+function FeelPopup(props) {
   const {
     entryId,
     onInput,
@@ -4911,18 +4975,19 @@ function FeelPopup$1(props) {
       editorRef.current.focus();
     }
   }, [editorRef]);
-  return jsxRuntime.jsxs(Popup, {
+  return jsxRuntime.jsxs(Popup$1, {
     className: "bio-properties-panel-feel-popup",
     position: position,
     title: title,
     returnFocus: false,
     closeOnEscape: false,
     delayInitialFocus: false,
+    allowFocusMove: event => !isSnippetNavigation(event),
     onPostDeactivate: handleSetReturnFocus,
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsxRuntime.jsx(Popup.Title, {
+    children: [jsxRuntime.jsx(Popup$1.Title, {
       title: title,
       eventBus: eventBus,
       showCloseButton: true,
@@ -4940,14 +5005,13 @@ function FeelPopup$1(props) {
           }, index);
         })
       })
-    }), jsxRuntime.jsx(Popup.Body, {
+    }), jsxRuntime.jsx(Popup$1.Body, {
       children: jsxRuntime.jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
         onKeyDown: onKeyDown,
         class: "bio-properties-panel-feel-popup__body",
         children: [type === 'feel' && jsxRuntime.jsx(FeelEditor, {
           enableGutters: true,
-          id: prefixId(entryId),
           name: entryId,
           onInput: onInput,
           value: value,
@@ -4956,7 +5020,6 @@ function FeelPopup$1(props) {
           ref: editorRef,
           tooltipContainer: tooltipContainer
         }), type === 'feelers' && jsxRuntime.jsx(TemplatingEditor, {
-          id: prefixId(entryId),
           contentAttributes: {
             'aria-label': title
           },
@@ -4973,14 +5036,17 @@ function FeelPopup$1(props) {
     })]
   });
 }
-function prefixId(id) {
-  return `bio-properties-panel-${id}`;
-}
 function autoCompletionOpen(element) {
   const editor = element.closest('.cm-editor');
   return editor ? editor.querySelector('.cm-tooltip-autocomplete') : null;
 }
 
+// while a snippet is active, Tab navigates its placeholders inside the editor
+function isSnippetNavigation(event) {
+  const editor = event.target.closest('.cm-editor');
+  return !!(editor && editor.querySelector('.cm-snippetField'));
+}
+
 function getPopupTitle({
   element,
   label
@@ -5001,7 +5067,102 @@ function getPopupPosition() {
 }
 
 /**
- * FEEL popup component, built as a singleton.
+ * @typedef {Object} TextPopupProps
+ * @property {string} entryId
+ * @property {Function} onInput
+ * @property {Function} onClose
+ * @property {string} title
+ * @property {string} value
+ * @property {Object} [position]
+ * @property {HTMLElement} [sourceElement]
+ * @property {Object} [eventBus]
+ */
+
+const TEXT_POPUP_WIDTH = 700;
+const TEXT_POPUP_HEIGHT = 400;
+
+/**
+ * Plain text editor popup component.
+ *
+ * Intentionally kept separate from the FEEL popup: the two are expected to
+ * diverge as we add FEEL-specific capabilities that do not apply to plain text.
+ *
+ * @param {TextPopupProps} props
+ */
+function TextPopup(props) {
+  const {
+    entryId,
+    onInput,
+    onClose,
+    title,
+    value,
+    position,
+    sourceElement,
+    eventBus
+  } = props;
+  const editorRef = hooks.useRef();
+  const popupRef = hooks.useRef();
+  const handleSetReturnFocus = () => {
+    sourceElement && sourceElement.focus();
+  };
+  hooks.useEffect(() => {
+    // set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [editorRef]);
+  return jsxRuntime.jsxs(Popup$1, {
+    className: "bio-properties-panel-text-popup",
+    position: position,
+    title: title,
+    returnFocus: false,
+    closeOnEscape: true,
+    delayInitialFocus: false,
+    onClose: onClose,
+    onPostDeactivate: handleSetReturnFocus,
+    height: TEXT_POPUP_HEIGHT,
+    width: TEXT_POPUP_WIDTH,
+    ref: popupRef,
+    children: [jsxRuntime.jsx(Popup$1.Title, {
+      title: title,
+      eventBus: eventBus,
+      showCloseButton: true,
+      closeButtonTooltip: "Save and close",
+      onClose: onClose,
+      draggable: true
+    }), jsxRuntime.jsx(Popup$1.Body, {
+      children: jsxRuntime.jsx("textarea", {
+        id: prefixId(entryId),
+        name: entryId,
+        class: "bio-properties-panel-input",
+        ref: editorRef,
+        onInput: e => onInput(e.target.value),
+        value: value || '',
+        spellCheck: "false",
+        autoComplete: "off",
+        "aria-label": title,
+        "data-gramm": "false"
+      })
+    })]
+  });
+}
+
+// The in-panel field stays mounted (hidden) while the popup is open, so we
+// scope the popup editor id to keep it unique in the DOM.
+function prefixId(id) {
+  return `bio-properties-panel-popup-${id}`;
+}
+
+const DEFAULT_POPUP_TYPE = 'text';
+
+// consumers registering via #registerProvider default to DEFAULT_PRIORITY,
+// so their providers take precedence over the LOW_PRIORITY built-ins.
+const DEFAULT_PRIORITY = 1000;
+const LOW_PRIORITY = 500;
+
+/**
+ * Popup manager, built as a singleton. Renders the registered provider for a
+ * given popup type; consumers may plug in their own via #registerProvider.
  *
  * In order to implement a custom replacement, handle the following events:
  * - `propertiesPanel.openPopup`
@@ -5014,16 +5175,19 @@ function getPopupPosition() {
  *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup as `domNode`
  *  - `feelPopup.closed` - fired after the popup is unmounted
  */
-class FeelPopup {
+class Popup {
   constructor(eventBus, config = {}) {
     this._eventBus = eventBus;
     this._config = config;
     this._isOpen = false;
-    eventBus.on('propertiesPanel.openPopup', (_, context) => {
-      this.open(context.entryId, context, context.sourceElement);
 
-      // return true to indicate that popup was opened
-      return true;
+    // built-in providers, registered at LOW_PRIORITY so consumers can
+    // override them via #registerProvider using the default priority
+    this.registerProvider('feel', LOW_PRIORITY, FeelPopup);
+    this.registerProvider('feelers', LOW_PRIORITY, FeelPopup);
+    this.registerProvider('text', LOW_PRIORITY, TextPopup);
+    eventBus.on('propertiesPanel.openPopup', (_, context) => {
+      return this.open(context.entryId, context, context.sourceElement);
     });
     eventBus.on(['propertiesPanel.closePopup', 'propertiesPanel.detach'], () => {
       this.close();
@@ -5031,7 +5195,43 @@ class FeelPopup {
   }
 
   /**
-   * Check if the FEEL popup is open.
+   * Register a popup provider (component) for a given type.
+   *
+   * A higher `priority` wins when multiple providers are registered for the
+   * same type; the built-in providers use a low priority so consumers override
+   * them by default.
+   *
+   * @param {string} type
+   * @param {number} [priority=DEFAULT_PRIORITY]
+   * @param {Function|import('preact').Component} provider
+   */
+  registerProvider(type, priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY;
+    }
+    this._eventBus.on('propertiesPanelPopup.getProviders.' + type, priority, function (event) {
+      event.providers.push(provider);
+    });
+  }
+
+  /**
+   * Get the popup providers registered for a type.
+   *
+   * @param {string} type
+   * @return {Array<Function|import('preact').Component>}
+   */
+  _getProviders(type) {
+    const event = this._eventBus.createEvent({
+      type: 'propertiesPanelPopup.getProviders.' + type,
+      providers: []
+    });
+    this._eventBus.fire(event);
+    return event.providers;
+  }
+
+  /**
+   * Check if the popup is open.
    * @return {Boolean}
    */
   isOpen() {
@@ -5039,7 +5239,7 @@ class FeelPopup {
   }
 
   /**
-   * Open the FEEL popup.
+   * Open the popup.
    *
    * @param {String} entryId
    * @param {Object} popupConfig
@@ -5048,7 +5248,7 @@ class FeelPopup {
   open(entryId, popupConfig, sourceElement) {
     // close before opening a new one
     this.close();
-    this._openPopup({
+    return this._openPopup({
       ...popupConfig,
       entryId,
       sourceElement
@@ -5056,7 +5256,7 @@ class FeelPopup {
   }
 
   /**
-   * Close the FEEL popup.
+   * Close the popup.
    */
   close() {
     this._closePopup();
@@ -5066,13 +5266,18 @@ class FeelPopup {
       element,
       label,
       sourceElement,
-      type
+      type = DEFAULT_POPUP_TYPE
     } = context;
+    const component = this._getProviders(type)[0];
+    if (!component) {
+      return false;
+    }
     this._isOpen = true;
     this._eventBus.fire('propertiesPanelPopup.open', {
       container: this._config.feelPopupContainer,
       config: {
         ...context,
+        component,
         links: this._config.getFeelPopupLinks?.(type) || [],
         onClose: () => {
           this._closePopup();
@@ -5089,6 +5294,7 @@ class FeelPopup {
         })
       }
     });
+    return true;
   }
   _closePopup() {
     if (this._isOpen) {
@@ -5097,9 +5303,9 @@ class FeelPopup {
     }
   }
 }
-FeelPopup.$inject = ['eventBus', 'config.propertiesPanel'];
+Popup.$inject = ['eventBus', 'config.propertiesPanel'];
 
-class FeelPopupRenderer {
+class PopupRenderer {
   constructor(eventBus) {
     this._eventBus = eventBus;
     this._container = null;
@@ -5125,7 +5331,8 @@ class FeelPopupRenderer {
     // a custom renderer would have to use that context provider as well to have
     // access to the event bus and other services
     this._emit('feelPopup.open');
-    preact.render(jsxRuntime.jsx(FeelPopup$1, {
+    const Component = config.component;
+    preact.render(jsxRuntime.jsx(Component, {
       ...config,
       eventBus: this._eventBus
     }), element);
@@ -5149,7 +5356,7 @@ class FeelPopupRenderer {
     this._eventBus.fire(event, context);
   }
 }
-FeelPopupRenderer.$inject = ['eventBus'];
+PopupRenderer.$inject = ['eventBus'];
 
 // helpers /////////////////
 
@@ -5167,8 +5374,8 @@ function getContainer(container) {
 
 var index = {
   __init__: ['feelPopup', 'feelPopupRenderer'],
-  feelPopup: ['type', FeelPopup],
-  feelPopupRenderer: ['type', FeelPopupRenderer]
+  feelPopup: ['type', Popup],
+  feelPopupRenderer: ['type', PopupRenderer]
 };
 
 exports.ArrowIcon = Arrow;