@bpmn-io/properties-panel 3.10.1 → 3.12.0

package/dist/index.js

@@ -139,6 +139,29 @@ FeelIcon$1.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
+var HelpIcon = function HelpIcon(props) {
+  return jsxRuntime.jsxs("svg", {
+    ...props,
+    children: [jsxRuntime.jsx("path", {
+      d: "M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z"
+    }), jsxRuntime.jsx("circle", {
+      cx: "16",
+      cy: "23.5",
+      r: "1.5"
+    }), jsxRuntime.jsx("path", {
+      d: "M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9Z"
+    }), jsxRuntime.jsx("path", {
+      style: {
+        fill: "none"
+      },
+      d: "M0 0h32v32H0z"
+    })]
+  });
+};
+HelpIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
 
 function Header(props) {
   const {
@@ -730,6 +753,7 @@ function Group(props) {
           edited: edited,
           hasErrors: hasErrors
         }), jsxRuntime.jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
@@ -912,6 +936,7 @@ const CodeEditor$1 = compat.forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsxRuntime.jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
@@ -1033,6 +1058,7 @@ const CodeEditor = compat.forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsxRuntime.jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen(),
@@ -1079,6 +1105,7 @@ function FeelIcon(props) {
     }
   };
   return jsxRuntime.jsx("button", {
+    type: "button",
     class: classnames__default["default"]('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
@@ -1528,6 +1555,12 @@ function FeelPopupComponent(props) {
       domNode: popupRef.current
     });
   }, []);
+  hooks.useEffect(() => {
+    // Set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [editorRef]);
   return jsxRuntime.jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
@@ -1545,10 +1578,21 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsxRuntime.jsx(Popup.Title, {
+    children: [jsxRuntime.jsxs(Popup.Title, {
       title: title,
       emit: emit,
-      draggable: true
+      draggable: true,
+      children: [type === 'feel' && jsxRuntime.jsxs("a", {
+        href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
+        target: "_blank",
+        class: "bio-properties-panel-feel-popup__title-link",
+        children: ["Learn FEEL expressions", jsxRuntime.jsx(HelpIcon, {})]
+      }), type === 'feelers' && jsxRuntime.jsxs("a", {
+        href: "https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/",
+        target: "_blank",
+        class: "bio-properties-panel-feel-popup__title-link",
+        children: ["Learn templating", jsxRuntime.jsx(HelpIcon, {})]
+      })]
     }), jsxRuntime.jsx(Popup.Body, {
       children: jsxRuntime.jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
@@ -1580,6 +1624,7 @@ function FeelPopupComponent(props) {
       })
     }), 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",
@@ -2893,6 +2938,7 @@ function MenuItem({
   }
   if (item.action) {
     return jsxRuntime.jsx("button", {
+      type: "button",
       class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
       onClick: event => onClick(event, item.action),
       children: item.entry
@@ -2937,6 +2983,7 @@ function HeaderButton(props) {
     ...otherProps
   } = props;
   return jsxRuntime.jsx("button", {
+    type: "button",
     ...otherProps,
     onClick: onClick,
     class: classnames__default["default"]('bio-properties-panel-group-header-button', classname),
@@ -2981,12 +3028,14 @@ function CollapsibleEntry(props) {
         class: classnames__default["default"]('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsxRuntime.jsx("button", {
+        type: "button",
         title: "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",
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
@@ -3190,6 +3239,7 @@ function ListGroup(props) {
       }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxRuntime.jsxs("button", {
+          type: "button",
           title: "Create new list item",
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
@@ -3202,6 +3252,7 @@ function ListGroup(props) {
           class: classnames__default["default"]('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",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
@@ -3584,6 +3635,7 @@ function List(props) {
       }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-list-entry-header-buttons",
         children: [jsxRuntime.jsxs("button", {
+          type: "button",
           title: "Create new list item",
           onClick: addItem,
           class: "bio-properties-panel-add-entry",
@@ -3596,6 +3648,7 @@ function List(props) {
           class: "bio-properties-panel-list-badge",
           children: items.length
         }), hasItems && jsxRuntime.jsx("button", {
+          type: "button",
           title: "Toggle list item",
           class: "bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
@@ -4307,6 +4360,7 @@ exports.FeelToggleSwitchEntry = FeelToggleSwitchEntry;
 exports.Group = Group;
 exports.Header = Header;
 exports.HeaderButton = HeaderButton;
+exports.HelpIcon = HelpIcon;
 exports.LayoutContext = LayoutContext;
 exports.ListEntry = List;
 exports.ListGroup = ListGroup;