@bpmn-io/properties-panel 3.10.1 → 3.12.0

package/dist/assets/properties-panel.css

@@ -1271,6 +1271,8 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-popup .bio-properties-panel-popup__footer {
   padding: 12px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
@@ -1278,11 +1280,12 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
+  --popup-header-line-height: 16px;
   background-color: var(--popup-header-background-color);
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 16px;
+  line-height: var(--popup-header-line-height);
   text-align: left;
   color: var(--popup-title-color);
 }
@@ -1310,7 +1313,7 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
-.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+.bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }
 
@@ -1341,6 +1344,18 @@ textarea.bio-properties-panel-input {
   width: 100%;
 }
 
+.bio-properties-panel-feel-popup__title-link {
+  margin-left: auto; 
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup__title-link svg {
+  width: var(--popup-header-line-height);
+  height: var(--popup-header-line-height);
+  fill: currentColor;
+  margin: 0 0.5em;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
   display: flex;
   min-width: 100%;

package/dist/index.esm.js

@@ -111,6 +111,29 @@ FeelIcon$1.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
+var HelpIcon = function HelpIcon(props) {
+  return jsxs("svg", {
+    ...props,
+    children: [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"
+    }), jsx("circle", {
+      cx: "16",
+      cy: "23.5",
+      r: "1.5"
+    }), 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"
+    }), 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 {
@@ -702,6 +725,7 @@ function Group(props) {
           edited: edited,
           hasErrors: hasErrors
         }), jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
@@ -884,6 +908,7 @@ const CodeEditor$1 = forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
@@ -1005,6 +1030,7 @@ const CodeEditor = forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen(),
@@ -1051,6 +1077,7 @@ function FeelIcon(props) {
     }
   };
   return jsx("button", {
+    type: "button",
     class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
@@ -1500,6 +1527,12 @@ function FeelPopupComponent(props) {
       domNode: popupRef.current
     });
   }, []);
+  useEffect(() => {
+    // Set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [editorRef]);
   return jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
@@ -1517,10 +1550,21 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsx(Popup.Title, {
+    children: [jsxs(Popup.Title, {
       title: title,
       emit: emit,
-      draggable: true
+      draggable: true,
+      children: [type === 'feel' && 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", jsx(HelpIcon, {})]
+      }), type === 'feelers' && 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", jsx(HelpIcon, {})]
+      })]
     }), jsx(Popup.Body, {
       children: jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
@@ -1552,6 +1596,7 @@ function FeelPopupComponent(props) {
       })
     }), jsx(Popup.Footer, {
       children: jsx("button", {
+        type: "button",
         onClick: onClose,
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
@@ -2865,6 +2910,7 @@ function MenuItem({
   }
   if (item.action) {
     return 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
@@ -2909,6 +2955,7 @@ function HeaderButton(props) {
     ...otherProps
   } = props;
   return jsx("button", {
+    type: "button",
     ...otherProps,
     onClick: onClick,
     class: classnames('bio-properties-panel-group-header-button', classname),
@@ -2953,12 +3000,14 @@ function CollapsibleEntry(props) {
         class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsx("button", {
+        type: "button",
         title: "Toggle list item",
         class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
         children: jsx(ArrowIcon, {
           class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
         })
       }), remove ? jsx("button", {
+        type: "button",
         title: "Delete item",
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
@@ -3162,6 +3211,7 @@ function ListGroup(props) {
       }), jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxs("button", {
+          type: "button",
           title: "Create new list item",
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
@@ -3174,6 +3224,7 @@ function ListGroup(props) {
           class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
@@ -3556,6 +3607,7 @@ function List(props) {
       }), jsxs("div", {
         class: "bio-properties-panel-list-entry-header-buttons",
         children: [jsxs("button", {
+          type: "button",
           title: "Create new list item",
           onClick: addItem,
           class: "bio-properties-panel-add-entry",
@@ -3568,6 +3620,7 @@ function List(props) {
           class: "bio-properties-panel-list-badge",
           children: items.length
         }), hasItems && jsx("button", {
+          type: "button",
           title: "Toggle list item",
           class: "bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
@@ -4255,5 +4308,5 @@ var index = {
   feelPopup: ['type', FeelPopupModule]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, Popup, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, isEdited$5 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$7 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$8 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, HelpIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, Popup, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, isEdited$5 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$7 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$8 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
 //# sourceMappingURL=index.esm.js.map