@bpmn-io/properties-panel 3.44.0 → 3.45.0

package/dist/index.js

@@ -14,7 +14,7 @@ var autocomplete = require('@codemirror/autocomplete');
 var commands = require('@codemirror/commands');
 var langJson = require('@codemirror/lang-json');
 var lint = require('@codemirror/lint');
-var feelers = require('feelers');
+var feelersEditor = require('@bpmn-io/feelers-editor');
 var Editor = require('@bpmn-io/feel-editor');
 var focusTrap = require('focus-trap');
 
@@ -180,6 +180,28 @@ OpenPopupIcon.defaultProps = {
   viewBox: "0 0 16 16"
 };
 
+/**
+ * @typedef { {
+ *   [key: string]: string;
+ * } } TranslateReplacements
+ */
+
+/**
+ * A simple translation stub to be used for multi-language support.
+ * Can be easily replaced with a more sophisticated solution.
+ *
+ * @param {string} template to interpolate
+ * @param {TranslateReplacements} [replacements] a map with substitutes
+ *
+ * @return {string} the translated string
+ */
+function translateFallback(template, replacements) {
+  replacements = replacements || {};
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}';
+  });
+}
+
 /**
  * @typedef { {
  *  getElementLabel: (element: object) => string,
@@ -191,13 +213,15 @@ OpenPopupIcon.defaultProps = {
 
 /**
  * @param {Object} props
- * @param {Object} props.element,
+ * @param {Object} props.element
  * @param {HeaderProvider} props.headerProvider
+ * @param {Function} [props.translate]
  */
 function Header(props) {
   const {
     element,
-    headerProvider
+    headerProvider,
+    translate = translateFallback
   } = props;
   const {
     getElementIcon,
@@ -233,7 +257,7 @@ function Header(props) {
         rel: "noreferrer",
         class: "bio-properties-panel-header-link",
         href: documentationRef,
-        title: "Open documentation",
+        title: translate('Open documentation'),
         target: "_blank",
         children: jsxRuntime.jsx(ExternalLinkIcon, {})
       }) : null
@@ -863,7 +887,8 @@ function Group(props) {
     entries = [],
     id,
     label,
-    shouldOpen = false
+    shouldOpen = false,
+    translate = translateFallback
   } = props;
   const groupRef = hooks.useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
@@ -922,10 +947,11 @@ function Group(props) {
         class: "bio-properties-panel-group-header-buttons",
         children: [jsxRuntime.jsx(DataMarker, {
           edited: edited,
-          hasErrors: hasErrors
+          hasErrors: hasErrors,
+          translate: translate
         }), jsxRuntime.jsx("button", {
           type: "button",
-          title: "Toggle section",
+          title: translate('Toggle section'),
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
@@ -954,17 +980,18 @@ function Group(props) {
 function DataMarker(props) {
   const {
     edited,
-    hasErrors
+    hasErrors,
+    translate = translateFallback
   } = props;
   if (hasErrors) {
     return jsxRuntime.jsx("div", {
-      title: "Section contains an error",
+      title: translate('Section contains an error'),
       class: "bio-properties-panel-dot bio-properties-panel-dot--error"
     });
   }
   if (edited) {
     return jsxRuntime.jsx("div", {
-      title: "Section contains edits",
+      title: translate('Section contains edits'),
       class: "bio-properties-panel-dot"
     });
   }
@@ -1025,7 +1052,8 @@ const DEFAULT_TOOLTIP = {};
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
- *    shouldOpen?: Boolean
+ *    shouldOpen?: Boolean,
+ *    translate?: Function
  * } } ListGroupDefinition
  *
  * @typedef { {
@@ -1033,7 +1061,8 @@ const DEFAULT_TOOLTIP = {};
  *    entries: Array<EntryDefinition>,
  *    id: String,
  *    label: String,
- *    shouldOpen?: Boolean
+ *    shouldOpen?: Boolean,
+ *    translate?: Function
  * } } GroupDefinition
  *
  *  @typedef { {
@@ -1377,28 +1406,6 @@ function HeaderButton(props) {
   });
 }
 
-/**
- * @typedef { {
- *   [key: string]: string;
- * } } TranslateReplacements
- */
-
-/**
- * A simple translation stub to be used for multi-language support.
- * Can be easily replaced with a more sophisticated solution.
- *
- * @param {string} template to interpolate
- * @param {TranslateReplacements} [replacements] a map with substitutes
- *
- * @return {string} the translated string
- */
-function translateFallback(template, replacements) {
-  replacements = replacements || {};
-  return template.replace(/{([^}]+)}/g, function (_, key) {
-    return replacements[key] || '{' + key + '}';
-  });
-}
-
 function CollapsibleEntry(props) {
   const {
     element,
@@ -1966,6 +1973,7 @@ function JsonEditor(props) {
  * @param {string} [props.placeholder]
  * @param {string} [props.tooltip]
  * @param {Function} [props.validate]
+ * @param {Function} [props.translate]
  */
 function JsonEditorEntry(props) {
   const {
@@ -1979,24 +1987,25 @@ function JsonEditorEntry(props) {
     disabled,
     placeholder,
     tooltip,
-    validate
+    validate,
+    translate = translateFallback
   } = props;
   const globalError = useError(id);
   let value = getValue(element);
-  const [localError, setLocalError] = hooks.useState(() => computeError(validate, value));
+  const [localError, setLocalError] = hooks.useState(() => computeError(validate, value, translate));
   const [editorValue, setEditorValue] = hooks.useState(value);
   hooks.useEffect(() => {
     if (value === editorValue) {
       return;
     }
     setEditorValue(value);
-    setLocalError(computeError(validate, value));
+    setLocalError(computeError(validate, value, translate));
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     setEditorValue(newValue);
     const currentValue = getValue(element);
     if (newValue !== currentValue) {
-      const newValidationError = computeError(validate, newValue);
+      const newValidationError = computeError(validate, newValue, translate);
       setValue(newValue, newValidationError);
       setLocalError(newValidationError);
     }
@@ -2035,15 +2044,15 @@ function isEdited$8(node) {
 
 // helpers /////////////////
 
-function computeError(validate, value) {
-  return (minDash.isFunction(validate) ? validate(value) : null) || validateJson(value);
+function computeError(validate, value, translate) {
+  return (minDash.isFunction(validate) ? validate(value) : null) || validateJson(value, translate);
 }
-function validateJson(value) {
+function validateJson(value, translate = translateFallback) {
   if (!value || !value.trim()) return null;
   try {
-    return minDash.isObject(JSON.parse(value)) ? null : 'JSON contains errors';
+    return minDash.isObject(JSON.parse(value)) ? null : translate('JSON contains errors');
   } catch (e) {
-    return 'JSON contains errors';
+    return translate('JSON contains errors');
   }
 }
 
@@ -2053,13 +2062,14 @@ function validateJson(value) {
  * @param {Object} props
  * @param {Function} props.onClick - Callback to trigger when the button is clicked.
  * @param {string} [props.title] - Tooltip text for the button.
- * @param {boolean} [props.disabled] - Whether the button is disabled.
- * @param {string} [props.className] - Additional class names for the button.
+ * @param {Function} [props.translate] - Translation function for built-in strings.
  */
 function OpenPopupButton({
   onClick,
-  title = 'Open pop-up editor'
+  title,
+  translate = translateFallback
 }) {
+  title = title ?? translate('Open pop-up editor');
   return jsxRuntime.jsx("button", {
     type: "button",
     title: title,
@@ -2120,7 +2130,7 @@ const TemplatingEditor = compat.forwardRef((props, ref) => {
   });
   hooks.useEffect(() => {
     let editor;
-    editor = new feelers.FeelersEditor({
+    editor = new feelersEditor.FeelersEditor({
       container: inputRef.current,
       onChange: handleInput,
       value: localValue,
@@ -2211,7 +2221,8 @@ const FeelEditor = compat.forwardRef((props, ref) => {
     disabled,
     tooltipContainer,
     variables,
-    feelLanguageContext
+    feelLanguageContext,
+    translate = translateFallback
   } = props;
   const inputRef = hooks.useRef();
   const [editor, setEditor] = hooks.useState();
@@ -2303,14 +2314,15 @@ const FeelEditor = compat.forwardRef((props, ref) => {
     class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
     children: [popupOpen && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-feel-editor__open-popup-placeholder",
-      children: "Opened in editor"
+      children: translate('Opened in editor')
     }), jsxRuntime.jsx("div", {
       name: props.name,
       class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
       ref: inputRef,
       onClick: handleClick
     }), !disabled && jsxRuntime.jsx(OpenPopupButton, {
-      onClick: () => onOpenPopup('feel')
+      onClick: () => onOpenPopup('feel'),
+      translate: translate
     })]
   });
 });
@@ -2334,16 +2346,22 @@ const noop$3 = () => {};
  * @param {Object} props
  * @param {Object} props.label
  * @param {String} props.feel
+ * @param {boolean} props.active
+ * @param {boolean} props.disabled
+ * @param {Function} props.onClick
+ * @param {Function} props.translate
+ * @returns {import('preact').Component}
  */
 function FeelIcon(props) {
   const {
     feel = false,
     active,
     disabled = false,
-    onClick = noop$3
+    onClick = noop$3,
+    translate = translateFallback
   } = props;
-  const feelRequiredLabel = 'FEEL expression is mandatory';
-  const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
+  const feelRequiredLabel = translate('FEEL expression is mandatory');
+  const feelOptionalLabel = translate(`Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`);
   const handleClick = e => {
     onClick(e);
 
@@ -2685,6 +2703,7 @@ const noop$2 = () => {};
  * @param {Array} props.variables
  * @param {string} [props.placeholder]
  * @param {string | import('preact').Component} props.tooltip
+ * @param {Function} props.translate
  */
 function FeelTextfield(props) {
   const {
@@ -2704,7 +2723,8 @@ function FeelTextfield(props) {
     singleLine,
     tooltipContainer,
     OptionalComponent = OptionalFeelInput,
-    tooltip
+    tooltip,
+    translate
   } = props;
   const [localValue, setLocalValue] = hooks.useState(getInitialFeelLocalValue(feel, value));
   const editorRef = useShowEntryEvent(id);
@@ -2793,7 +2813,7 @@ function FeelTextfield(props) {
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
     if (syntaxError) {
-      onError('Unparsable FEEL expression.');
+      onError(translate('Unparsable FEEL expression.'));
     } else {
       onError(undefined);
     }
@@ -2864,9 +2884,14 @@ function FeelTextfield(props) {
         });
         return;
       }
-      const input = event.target;
-      const isFieldEmpty = !input.value;
-      const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+      const target = event.target;
+
+      // Skip for non-input/textArea elements (e.g. CodeMirror contenteditable)
+      if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) {
+        return;
+      }
+      const isFieldEmpty = !target.value;
+      const isAllSelected = target.selectionStart === 0 && target.selectionEnd === target.value.length;
       if (isFieldEmpty || isAllSelected) {
         const textData = event.clipboardData.getData('text');
         const trimmedValue = textData.trim();
@@ -2903,7 +2928,8 @@ function FeelTextfield(props) {
         label: label,
         feel: feel,
         onClick: handleFeelToggle,
-        active: feelActive
+        active: feelActive,
+        translate: translate
       })]
     }), jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-feel-container",
@@ -2934,7 +2960,8 @@ function FeelTextfield(props) {
         variables: variables,
         feelLanguageContext: feelLanguageContext,
         ref: editorRef,
-        tooltipContainer: tooltipContainer
+        tooltipContainer: tooltipContainer,
+        translate: translate
       }) : jsxRuntime.jsx(OptionalComponent, {
         ...props,
         popupOpen: isPopupOpen,
@@ -3203,7 +3230,8 @@ function FeelEntry(props) {
     onFocus,
     onBlur,
     placeholder,
-    tooltip
+    tooltip,
+    translate = translateFallback
   } = props;
   const [validationError, setValidationError] = hooks.useState(null);
   const [localError, setLocalError] = hooks.useState(null);
@@ -3252,6 +3280,7 @@ function FeelEntry(props) {
       hostLanguage: hostLanguage,
       singleLine: singleLine,
       show: show,
+      translate: translate,
       value: value,
       variables: variables,
       tooltipContainer: tooltipContainer,
@@ -3665,6 +3694,7 @@ function prefixIdLabel(id) {
  * @param {Item[]} [props.items]
  * @param {boolean} [props.open]
  * @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input
+ * @param {Function} [props.translate]
  * @returns
  */
 function List(props) {
@@ -3678,6 +3708,7 @@ function List(props) {
     onAdd,
     onRemove,
     autoFocusEntry,
+    translate = translateFallback,
     ...restProps
   } = props;
   const entryRef = hooks.useRef(null);
@@ -3720,20 +3751,22 @@ function List(props) {
         class: "bio-properties-panel-list-entry-header-buttons",
         children: [jsxRuntime.jsxs("button", {
           type: "button",
-          title: "Create new list item",
+          title: translate('Create new list item'),
           onClick: addItem,
           class: "bio-properties-panel-add-entry",
           children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
             class: "bio-properties-panel-add-entry-label",
-            children: "Create"
+            children: translate('Create')
           }) : null]
         }), hasItems && jsxRuntime.jsx("div", {
-          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+          title: translate(`List contains {numOfItems} item${items.length != 1 ? 's' : ''}`, {
+            numOfItems: items.length
+          }),
           class: "bio-properties-panel-list-badge",
           children: items.length
         }), hasItems && jsxRuntime.jsx("button", {
           type: "button",
-          title: "Toggle list item",
+          title: translate('Toggle list item'),
           class: "bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
@@ -3749,7 +3782,8 @@ function List(props) {
       items: items,
       newItems: newItems,
       onRemove: onRemove,
-      open: open
+      open: open,
+      translate: translate
     })]
   });
 }
@@ -3763,6 +3797,7 @@ function ItemsList(props) {
     newItems,
     onRemove,
     open,
+    translate,
     ...restProps
   } = props;
   const getKey = useKeyFactory();
@@ -3801,7 +3836,7 @@ function ItemsList(props) {
           open: item === newItem
         }), onRemove && jsxRuntime.jsx("button", {
           type: "button",
-          title: "Delete item",
+          title: translate('Delete item'),
           class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
           onClick: () => onRemove && onRemove(item),
           children: jsxRuntime.jsx(DeleteIcon, {})
@@ -4002,6 +4037,7 @@ function prefixId$4(id) {
  * @param {Function} [props.onBlur]
  * @param {Function} [props.onFocus]
  * @param {Function} props.setValue
+ * @param {Function} [props.translate]
  */
 function Simple(props) {
   const {
@@ -4012,7 +4048,8 @@ function Simple(props) {
     id,
     onBlur,
     onFocus,
-    setValue
+    setValue,
+    translate = translateFallback
   } = props;
   const value = getValue(element);
   const [localValue, setLocalValue] = hooks.useState(value);
@@ -4040,7 +4077,7 @@ function Simple(props) {
       disabled: disabled,
       class: "bio-properties-panel-input",
       onInput: handleInput,
-      "aria-label": localValue || '<empty>',
+      "aria-label": localValue || translate('<empty>'),
       onFocus: onFocus,
       onBlur: onBlur,
       value: localValue