@bpmn-io/properties-panel 3.44.0 → 3.45.0

package/dist/assets/properties-panel.css

@@ -44,6 +44,8 @@
   --description-code-border-color: var(--color-grey-225-10-85);
   --description-list-item-color: var(--color-grey-225-10-35);
 
+  --tooltip-underline-color: var(--color-grey-225-10-55);
+
   --placeholder-color: var(--color-grey-225-10-35);
   --placeholder-background-color: var(--color-grey-225-10-95);
 
@@ -1182,7 +1184,7 @@ textarea.bio-properties-panel-input {
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 2px;
-  text-decoration-color: var(--color-grey-225-10-55);
+  text-decoration-color: var(--tooltip-underline-color);
   font: inherit;
   display: flex;
   justify-content: center;
@@ -1196,7 +1198,6 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-tooltip {
-  --tooltip-underline-color: var(--color-blue-219-99-53);
   --tooltip-background-color: var(--color-grey-0-0-22);
   --tooltip-link: var(--color-blue-218-100-74);
   --tooltip-code-background-color: var(--color-grey-225-10-97);

package/dist/index.esm.js

@@ -12,7 +12,7 @@ import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
 import { jsonParseLinter, json } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
-import { FeelersEditor } from 'feelers';
+import { FeelersEditor } from '@bpmn-io/feelers-editor';
 import Editor from '@bpmn-io/feel-editor';
 import * as focusTrap from 'focus-trap';
 
@@ -159,6 +159,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,
@@ -170,13 +192,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,
@@ -212,7 +236,7 @@ function Header(props) {
         rel: "noreferrer",
         class: "bio-properties-panel-header-link",
         href: documentationRef,
-        title: "Open documentation",
+        title: translate('Open documentation'),
         target: "_blank",
         children: jsx(ExternalLinkIcon, {})
       }) : null
@@ -842,7 +866,8 @@ function Group(props) {
     entries = [],
     id,
     label,
-    shouldOpen = false
+    shouldOpen = false,
+    translate = translateFallback
   } = props;
   const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
@@ -901,10 +926,11 @@ function Group(props) {
         class: "bio-properties-panel-group-header-buttons",
         children: [jsx(DataMarker, {
           edited: edited,
-          hasErrors: hasErrors
+          hasErrors: hasErrors,
+          translate: translate
         }), jsx("button", {
           type: "button",
-          title: "Toggle section",
+          title: translate('Toggle section'),
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
@@ -933,17 +959,18 @@ function Group(props) {
 function DataMarker(props) {
   const {
     edited,
-    hasErrors
+    hasErrors,
+    translate = translateFallback
   } = props;
   if (hasErrors) {
     return 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 jsx("div", {
-      title: "Section contains edits",
+      title: translate('Section contains edits'),
       class: "bio-properties-panel-dot"
     });
   }
@@ -1004,7 +1031,8 @@ const DEFAULT_TOOLTIP = {};
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
- *    shouldOpen?: Boolean
+ *    shouldOpen?: Boolean,
+ *    translate?: Function
  * } } ListGroupDefinition
  *
  * @typedef { {
@@ -1012,7 +1040,8 @@ const DEFAULT_TOOLTIP = {};
  *    entries: Array<EntryDefinition>,
  *    id: String,
  *    label: String,
- *    shouldOpen?: Boolean
+ *    shouldOpen?: Boolean,
+ *    translate?: Function
  * } } GroupDefinition
  *
  *  @typedef { {
@@ -1356,28 +1385,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,
@@ -1945,6 +1952,7 @@ function JsonEditor(props) {
  * @param {string} [props.placeholder]
  * @param {string} [props.tooltip]
  * @param {Function} [props.validate]
+ * @param {Function} [props.translate]
  */
 function JsonEditorEntry(props) {
   const {
@@ -1958,24 +1966,25 @@ function JsonEditorEntry(props) {
     disabled,
     placeholder,
     tooltip,
-    validate
+    validate,
+    translate = translateFallback
   } = props;
   const globalError = useError(id);
   let value = getValue(element);
-  const [localError, setLocalError] = useState(() => computeError(validate, value));
+  const [localError, setLocalError] = useState(() => computeError(validate, value, translate));
   const [editorValue, setEditorValue] = useState(value);
   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);
     }
@@ -2014,15 +2023,15 @@ function isEdited$8(node) {
 
 // helpers /////////////////
 
-function computeError(validate, value) {
-  return (isFunction(validate) ? validate(value) : null) || validateJson(value);
+function computeError(validate, value, translate) {
+  return (isFunction(validate) ? validate(value) : null) || validateJson(value, translate);
 }
-function validateJson(value) {
+function validateJson(value, translate = translateFallback) {
   if (!value || !value.trim()) return null;
   try {
-    return isObject(JSON.parse(value)) ? null : 'JSON contains errors';
+    return isObject(JSON.parse(value)) ? null : translate('JSON contains errors');
   } catch (e) {
-    return 'JSON contains errors';
+    return translate('JSON contains errors');
   }
 }
 
@@ -2032,13 +2041,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 jsx("button", {
     type: "button",
     title: title,
@@ -2190,7 +2200,8 @@ const FeelEditor = forwardRef((props, ref) => {
     disabled,
     tooltipContainer,
     variables,
-    feelLanguageContext
+    feelLanguageContext,
+    translate = translateFallback
   } = props;
   const inputRef = useRef();
   const [editor, setEditor] = useState();
@@ -2282,14 +2293,15 @@ const FeelEditor = forwardRef((props, ref) => {
     class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
     children: [popupOpen && jsx("div", {
       class: "bio-properties-panel-feel-editor__open-popup-placeholder",
-      children: "Opened in editor"
+      children: translate('Opened in editor')
     }), jsx("div", {
       name: props.name,
       class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
       ref: inputRef,
       onClick: handleClick
     }), !disabled && jsx(OpenPopupButton, {
-      onClick: () => onOpenPopup('feel')
+      onClick: () => onOpenPopup('feel'),
+      translate: translate
     })]
   });
 });
@@ -2313,16 +2325,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);
 
@@ -2664,6 +2682,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 {
@@ -2683,7 +2702,8 @@ function FeelTextfield(props) {
     singleLine,
     tooltipContainer,
     OptionalComponent = OptionalFeelInput,
-    tooltip
+    tooltip,
+    translate
   } = props;
   const [localValue, setLocalValue] = useState(getInitialFeelLocalValue(feel, value));
   const editorRef = useShowEntryEvent(id);
@@ -2772,7 +2792,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);
     }
@@ -2843,9 +2863,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();
@@ -2882,7 +2907,8 @@ function FeelTextfield(props) {
         label: label,
         feel: feel,
         onClick: handleFeelToggle,
-        active: feelActive
+        active: feelActive,
+        translate: translate
       })]
     }), jsxs("div", {
       class: "bio-properties-panel-feel-container",
@@ -2913,7 +2939,8 @@ function FeelTextfield(props) {
         variables: variables,
         feelLanguageContext: feelLanguageContext,
         ref: editorRef,
-        tooltipContainer: tooltipContainer
+        tooltipContainer: tooltipContainer,
+        translate: translate
       }) : jsx(OptionalComponent, {
         ...props,
         popupOpen: isPopupOpen,
@@ -3182,7 +3209,8 @@ function FeelEntry(props) {
     onFocus,
     onBlur,
     placeholder,
-    tooltip
+    tooltip,
+    translate = translateFallback
   } = props;
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
@@ -3231,6 +3259,7 @@ function FeelEntry(props) {
       hostLanguage: hostLanguage,
       singleLine: singleLine,
       show: show,
+      translate: translate,
       value: value,
       variables: variables,
       tooltipContainer: tooltipContainer,
@@ -3644,6 +3673,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) {
@@ -3657,6 +3687,7 @@ function List(props) {
     onAdd,
     onRemove,
     autoFocusEntry,
+    translate = translateFallback,
     ...restProps
   } = props;
   const entryRef = useRef(null);
@@ -3699,20 +3730,22 @@ function List(props) {
         class: "bio-properties-panel-list-entry-header-buttons",
         children: [jsxs("button", {
           type: "button",
-          title: "Create new list item",
+          title: translate('Create new list item'),
           onClick: addItem,
           class: "bio-properties-panel-add-entry",
           children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
             class: "bio-properties-panel-add-entry-label",
-            children: "Create"
+            children: translate('Create')
           }) : null]
         }), hasItems && 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 && jsx("button", {
           type: "button",
-          title: "Toggle list item",
+          title: translate('Toggle list item'),
           class: "bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
@@ -3728,7 +3761,8 @@ function List(props) {
       items: items,
       newItems: newItems,
       onRemove: onRemove,
-      open: open
+      open: open,
+      translate: translate
     })]
   });
 }
@@ -3742,6 +3776,7 @@ function ItemsList(props) {
     newItems,
     onRemove,
     open,
+    translate,
     ...restProps
   } = props;
   const getKey = useKeyFactory();
@@ -3780,7 +3815,7 @@ function ItemsList(props) {
           open: item === newItem
         }), onRemove && 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: jsx(DeleteIcon, {})
@@ -3981,6 +4016,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 {
@@ -3991,7 +4027,8 @@ function Simple(props) {
     id,
     onBlur,
     onFocus,
-    setValue
+    setValue,
+    translate = translateFallback
   } = props;
   const value = getValue(element);
   const [localValue, setLocalValue] = useState(value);
@@ -4019,7 +4056,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