@bpmn-io/properties-panel 3.20.0 → 3.21.0

package/dist/index.js

@@ -173,6 +173,21 @@ PopupIcon.defaultProps = {
   height: "16",
   viewBox: "0 0 32 32"
 };
+var CloseIcon = function CloseIcon(props) {
+  return jsxRuntime.jsx("svg", {
+    ...props,
+    children: jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+      fill: "currentColor"
+    })
+  });
+};
+CloseIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16"
+};
 
 function Header(props) {
   const {
@@ -917,7 +932,8 @@ const CodeEditor$1 = compat.forwardRef((props, ref) => {
       tooltipContainer,
       enableGutters,
       hostLanguage,
-      singleLine
+      singleLine,
+      lineWrap: true
     });
     setEditor(editor);
     return () => {
@@ -954,7 +970,7 @@ const CodeEditor$1 = compat.forwardRef((props, ref) => {
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
-      children: jsxRuntime.jsx(ExternalLinkIcon, {})
+      children: jsxRuntime.jsx(PopupIcon, {})
     })]
   });
 });
@@ -1324,6 +1340,9 @@ function Title(props) {
     draggable,
     emit = () => {},
     title,
+    showCloseButton = false,
+    closeButtonTooltip = 'Close popup',
+    onClose,
     ...rest
   } = props;
 
@@ -1394,7 +1413,12 @@ function Title(props) {
     }), jsxRuntime.jsx("div", {
       class: "bio-properties-panel-popup__title",
       children: title
-    }), children]
+    }), children, showCloseButton && jsxRuntime.jsx("button", {
+      title: closeButtonTooltip,
+      class: "bio-properties-panel-popup__close",
+      onClick: onClose,
+      children: jsxRuntime.jsx(CloseIcon, {})
+    })]
   });
 }
 function Body(props) {
@@ -1612,6 +1636,9 @@ function FeelPopupComponent(props) {
     children: [jsxRuntime.jsxs(Popup.Title, {
       title: title,
       emit: emit,
+      showCloseButton: true,
+      closeButtonTooltip: "Save and close",
+      onClose: onClose,
       draggable: true,
       children: [type === 'feel' && jsxRuntime.jsxs("a", {
         href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
@@ -1653,14 +1680,6 @@ function FeelPopupComponent(props) {
           tooltipContainer: tooltipContainer
         })]
       })
-    }), jsxRuntime.jsx(Popup.Footer, {
-      children: jsxRuntime.jsx("button", {
-        type: "button",
-        onClick: () => onClose(),
-        title: "Close pop-up editor",
-        class: "bio-properties-panel-feel-popup__close-btn",
-        children: "Close"
-      })
     })]
   });
 }
@@ -3050,6 +3069,28 @@ 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,
@@ -3057,7 +3098,8 @@ function CollapsibleEntry(props) {
     id,
     label,
     open: shouldOpen,
-    remove
+    remove,
+    translate = translateFallback
   } = props;
   const [open, setOpen] = hooks.useState(shouldOpen);
   const toggleOpen = () => setOpen(!open);
@@ -3073,9 +3115,7 @@ function CollapsibleEntry(props) {
       }
     }, [onShow, setOpen])
   };
-
-  // todo(pinussilvestrus): translate once we have a translate mechanism for the core
-  const placeholderLabel = '<empty>';
+  const placeholderLabel = translate('<empty>');
   return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
     class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
@@ -3088,14 +3128,14 @@ function CollapsibleEntry(props) {
         children: label || placeholderLabel
       }), jsxRuntime.jsx("button", {
         type: "button",
-        title: "Toggle list item",
+        title: translate('Toggle list item'),
         class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
         children: jsxRuntime.jsx(ArrowIcon, {
           class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
         })
       }), remove ? jsxRuntime.jsx("button", {
         type: "button",
-        title: "Delete item",
+        title: translate('Delete item'),
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
         children: jsxRuntime.jsx(DeleteIcon, {})
@@ -3123,7 +3163,8 @@ function CollapsibleEntry(props) {
 function ListItem(props) {
   const {
     autoFocusEntry,
-    autoOpen
+    autoOpen,
+    translate = translateFallback
   } = props;
 
   // focus specified entry on auto open
@@ -3145,7 +3186,8 @@ function ListItem(props) {
     class: "bio-properties-panel-list-item",
     children: jsxRuntime.jsx(CollapsibleEntry, {
       ...props,
-      open: autoOpen
+      open: autoOpen,
+      translate: translate
     })
   });
 }
@@ -3162,7 +3204,8 @@ function ListGroup(props) {
     id,
     items,
     label,
-    shouldOpen = true
+    shouldOpen = true,
+    translate = translateFallback
   } = props;
   hooks.useEffect(() => {
     if (props.shouldSort != undefined) {
@@ -3264,20 +3307,22 @@ function ListGroup(props) {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxRuntime.jsxs("button", {
           type: "button",
-          title: "Create new list item",
+          title: translate('Create new list item'),
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
           children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
             class: "bio-properties-panel-add-entry-label",
-            children: "Create"
+            children: translate('Create')
           }) : null]
         }) : 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: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? 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'
@@ -3304,7 +3349,8 @@ function ListGroup(props) {
             autoOpen: autoOpen,
             element: element,
             index: index,
-            key: id
+            key: id,
+            translate: translate
           });
         })
       })
@@ -4309,6 +4355,7 @@ var index = {
 
 exports.ArrowIcon = ArrowIcon;
 exports.CheckboxEntry = CheckboxEntry;
+exports.CloseIcon = CloseIcon;
 exports.CollapsibleEntry = CollapsibleEntry;
 exports.CreateIcon = CreateIcon;
 exports.DebounceInputModule = index$1;