@bpmn-io/form-js-editor 1.8.7 → 1.9.0

package/dist/index.cjs

@@ -5393,6 +5393,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 {
     element,
@@ -6093,7 +6108,8 @@ const CodeEditor$1 = React.forwardRef((props, ref) => {
       tooltipContainer,
       enableGutters,
       hostLanguage,
-      singleLine
+      singleLine,
+      lineWrap: true
     });
     setEditor(editor);
     return () => {
@@ -6130,7 +6146,7 @@ const CodeEditor$1 = React.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, {})
     })]
   });
 });
@@ -6170,6 +6186,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
     onFeelToggle = noop$5,
     onLint = noop$5,
     onPopupOpen = noop$5,
+    placeholder,
     popupOpen,
     disabled,
     tooltipContainer,
@@ -6206,6 +6223,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
       onChange: handleInput,
       onKeyDown: onKeyDown,
       onLint: onLint,
+      placeholder: placeholder,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
@@ -6235,6 +6253,12 @@ const CodeEditor = React.forwardRef((props, ref) => {
     }
     editor.setVariables(variables);
   }, [variables]);
+  hooks.useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setPlaceholder(placeholder);
+  }, [placeholder]);
   const handleClick = () => {
     ref.current.focus();
   };
@@ -6487,6 +6511,9 @@ function Title(props) {
     draggable,
     emit = () => {},
     title,
+    showCloseButton = false,
+    closeButtonTooltip = 'Close popup',
+    onClose,
     ...rest
   } = props;
 
@@ -6557,7 +6584,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) {
@@ -6775,6 +6807,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/",
@@ -6816,14 +6851,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"
-      })
     })]
   });
 }
@@ -7133,6 +7160,7 @@ function FeelTextfieldComponent(props) {
     hostLanguage,
     onInput,
     onError,
+    placeholder,
     feel,
     value = '',
     disabled = false,
@@ -7307,6 +7335,7 @@ function FeelTextfieldComponent(props) {
         },
         onLint: handleLint,
         onPopupOpen: handlePopupOpen,
+        placeholder: placeholder,
         value: feelOnlyValue,
         variables: variables,
         ref: editorRef,
@@ -7335,7 +7364,8 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
   const inputRef = hooks.useRef();
 
@@ -7368,6 +7398,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
+    placeholder: placeholder,
     value: value || ''
   });
 });
@@ -7425,7 +7456,8 @@ React.forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
   const inputRef = hooks.useRef();
 
@@ -7453,6 +7485,7 @@ React.forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
+    placeholder: placeholder,
     value: value || '',
     "data-gramm": "false"
   });
@@ -7548,6 +7581,7 @@ React.forwardRef((props, ref) => {
  * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string} [props.placeholder]
  * @param {string|import('preact').Component} props.tooltip
  */
 function FeelEntry(props) {
@@ -7570,6 +7604,7 @@ function FeelEntry(props) {
     variables,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
   const [validationError, setValidationError] = hooks.useState(null);
@@ -7613,6 +7648,7 @@ function FeelEntry(props) {
       onError: onError,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       example: example,
       hostLanguage: hostLanguage,
       singleLine: singleLine,
@@ -7800,7 +7836,6 @@ const DEFAULT_TOOLTIP = {};
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
- *    shouldSort?: Boolean,
  *    shouldOpen?: Boolean
  * } } ListGroupDefinition
  *
@@ -8128,6 +8163,7 @@ function ListItem(props) {
         } else if (minDash.isFunction(focusableInput.focus)) {
           focusableInput.focus();
         }
+        focusableInput.scrollIntoView();
       }
     }
   }, [autoOpen, autoFocusEntry]);
@@ -8151,97 +8187,61 @@ function ListGroup(props) {
     id,
     items,
     label,
-    shouldOpen = true,
-    shouldSort = true
+    shouldOpen = true
   } = props;
+  hooks.useEffect(() => {
+    if (props.shouldSort != undefined) {
+      console.warn('the property \'shouldSort\' is no longer supported');
+    }
+  }, [props.shouldSort]);
   const groupRef = hooks.useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
   const [sticky, setSticky] = hooks.useState(false);
   const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = hooks.useState([]);
-  const [newItemAdded, setNewItemAdded] = hooks.useState(false);
+  const [localItems, setLocalItems] = hooks.useState([]);
+  const [newlyAddedItemIds, setNewlyAddedItemIds] = hooks.useState([]);
 
   // Flag to mark that add button was clicked in the last render cycle
   const [addTriggered, setAddTriggered] = hooks.useState(false);
-  const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
   const elementChanged = element !== prevElement;
-  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen);
-
-  // reset initial ordering when element changes (before first render)
-  if (elementChanged) {
-    setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
-  }
-
-  // keep ordering in sync to items - and open changes
-
-  // (0) set initial ordering from given items
+  const shouldHandleEffects = !elementChanged && shouldOpen;
+
+  // (0) delay setting items
+  //
+  // We need to this to align the render cycles of items
+  // with the detection of newly added items.
+  // This is important, because the autoOpen property can
+  // only set per list item on its very first render.
   hooks.useEffect(() => {
-    if (!prevItems || !shouldSort) {
-      setOrdering(createOrdering(items));
-    }
-  }, [items, element]);
+    setLocalItems(items);
+  }, [items]);
 
-  // (1) items were added
+  // (1) handle auto opening when items were added
   hooks.useEffect(() => {
     // reset addTriggered flag
     setAddTriggered(false);
-    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
-      let add = [];
-      items.forEach(item => {
-        if (!ordering.includes(item.id)) {
-          add.push(item.id);
+    if (shouldHandleEffects && localItems) {
+      if (addTriggered) {
+        const previousItemIds = localItems.map(item => item.id);
+        const currentItemsIds = items.map(item => item.id);
+        const newItemIds = currentItemsIds.filter(itemId => !previousItemIds.includes(itemId));
+
+        // open if not open, configured and triggered by add button
+        //
+        // TODO(marstamm): remove once we refactor layout handling for listGroups.
+        // Ideally, opening should be handled as part of the `add` callback and
+        // not be a concern for the ListGroup component.
+        if (!open && shouldOpen && newItemIds.length > 0) {
+          toggleOpen();
         }
-      });
-      let newOrdering = ordering;
-
-      // open if not open, configured and triggered by add button
-      //
-      // TODO(marstamm): remove once we refactor layout handling for listGroups.
-      // Ideally, opening should be handled as part of the `add` callback and
-      // not be a concern for the ListGroup component.
-      if (addTriggered && !open && shouldOpen) {
-        toggleOpen();
-      }
-
-      // filter when not open and configured
-      if (!open && shouldSort) {
-        newOrdering = createOrdering(sortItems(items));
-      }
-
-      // add new items on top or bottom depending on sorting behavior
-      newOrdering = newOrdering.filter(item => !add.includes(item));
-      if (shouldSort) {
-        newOrdering.unshift(...add);
+        setNewlyAddedItemIds(newItemIds);
       } else {
-        newOrdering.push(...add);
+        // ignore newly added items that do not result from a triggered add
+        setNewlyAddedItemIds([]);
       }
-      setOrdering(newOrdering);
-      setNewItemAdded(addTriggered);
-    } else {
-      setNewItemAdded(false);
-    }
-  }, [items, open, shouldHandleEffects, addTriggered]);
-
-  // (2) sort items on open if shouldSort is set
-  hooks.useEffect(() => {
-    if (shouldSort && open && !newItemAdded) {
-      setOrdering(createOrdering(sortItems(items)));
-    }
-  }, [open, shouldSort]);
-
-  // (3) items were deleted
-  hooks.useEffect(() => {
-    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
-      let keep = [];
-      ordering.forEach(o => {
-        if (getItem(items, o)) {
-          keep.push(o);
-        }
-      });
-      setOrdering(keep);
     }
-  }, [items, shouldHandleEffects]);
+  }, [items, open, shouldHandleEffects, addTriggered, localItems]);
 
   // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
@@ -8313,8 +8313,7 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
-        children: ordering.map((o, index) => {
-          const item = getItem(items, o);
+        children: localItems.map((item, index) => {
           if (!item) {
             return;
           }
@@ -8324,7 +8323,7 @@ function ListGroup(props) {
 
           // if item was added, open it
           // Existing items will not be affected as autoOpen is only applied on first render
-          const autoOpen = newItemAdded;
+          const autoOpen = newlyAddedItemIds.includes(item.id);
           return preact.createElement(ListItem, {
             ...item,
             autoOpen: autoOpen,
@@ -8337,21 +8336,6 @@ function ListGroup(props) {
     })]
   });
 }
-
-// helpers ////////////////////
-
-/**
- * Sorts given items alphanumeric by label
- */
-function sortItems(items) {
-  return minDash.sortBy(items, i => i.label.toLowerCase());
-}
-function getItem(items, id) {
-  return minDash.find(items, i => i.id === id);
-}
-function createOrdering(items) {
-  return items.map(i => i.id);
-}
 function Checkbox(props) {
   const {
     id,
@@ -8638,6 +8622,7 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
+    placeholder,
     rows = autoResize ? 1 : 2,
     tooltip
   } = props;
@@ -8680,6 +8665,7 @@ function TextArea(props) {
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       rows: rows,
       value: localValue,
       disabled: disabled,
@@ -8719,6 +8705,7 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     autoResize,
     tooltip
   } = props;
@@ -8754,6 +8741,7 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled,
+      placeholder: placeholder,
       autoResize: autoResize,
       tooltip: tooltip,
       element: element
@@ -8785,6 +8773,7 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
+    placeholder,
     value = '',
     tooltip
   } = props;
@@ -8826,6 +8815,7 @@ function Textfield(props) {
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: localValue
     })]
   });
@@ -8859,6 +8849,7 @@ function TextfieldEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
   const globalError = useError(id);
@@ -8890,6 +8881,7 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value,
       tooltip: tooltip,
       element: element
@@ -9038,83 +9030,64 @@ function hasIntegerPathSegment(path) {
   return path.split('.').some(segment => /^\d+$/.test(segment));
 }
 
-function useService(type, strict) {
+const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
+function getPropertiesPanelHeaderProvider(options = {}) {
   const {
-    getService
-  } = hooks.useContext(FormPropertiesPanelContext);
-  return getService(type, strict);
-}
-
-/**
- * Retrieve list of variables from the form schema.
- *
- * @returns { string[] } list of variables used in form schema
- */
-function useVariables() {
-  const form = useService('formEditor');
-  const schema = form.getSchema();
-  return formJsViewer.getSchemaVariables(schema);
+    getDocumentationRef,
+    formFields
+  } = options;
+  return {
+    getElementLabel: field => {
+      const {
+        type
+      } = field;
+      if (headerlessTypes.includes(type)) {
+        return '';
+      }
+      if (type === 'text') {
+        return textToLabel(field.text);
+      }
+      if (type === 'image') {
+        return field.alt;
+      }
+      if (type === 'default') {
+        return field.id;
+      }
+      return field.label;
+    },
+    getElementIcon: field => {
+      const {
+        type
+      } = field;
+      const fieldDefinition = formFields.get(type).config;
+      const Icon = fieldDefinition.icon || formJsViewer.iconsByType(type);
+      if (Icon) {
+        return () => jsxRuntime.jsx(Icon, {
+          width: "36",
+          height: "36",
+          viewBox: "0 0 54 54"
+        });
+      } else if (fieldDefinition.iconUrl) {
+        return getPaletteIcon({
+          iconUrl: fieldDefinition.iconUrl,
+          label: fieldDefinition.label
+        });
+      }
+    },
+    getTypeLabel: field => {
+      const {
+        type
+      } = field;
+      if (type === 'default') {
+        return 'Form';
+      }
+      const fieldDefinition = formFields.get(type).config;
+      return fieldDefinition.label || type;
+    },
+    getDocumentationRef
+  };
 }
 
-const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
-const PropertiesPanelHeaderProvider = {
-  getElementLabel: field => {
-    const {
-      type
-    } = field;
-    if (headerlessTypes.includes(type)) {
-      return '';
-    }
-    if (type === 'text') {
-      return textToLabel(field.text);
-    }
-    if (type === 'image') {
-      return field.alt;
-    }
-    if (type === 'default') {
-      return field.id;
-    }
-    return field.label;
-  },
-  getElementIcon: field => {
-    const {
-      type
-    } = field;
-
-    // @Note: We know that we are inside the properties panel context,
-    // so we can savely use the hook here.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const fieldDefinition = useService('formFields').get(type).config;
-    const Icon = fieldDefinition.icon || formJsViewer.iconsByType(type);
-    if (Icon) {
-      return () => jsxRuntime.jsx(Icon, {
-        width: "36",
-        height: "36",
-        viewBox: "0 0 54 54"
-      });
-    } else if (fieldDefinition.iconUrl) {
-      return getPaletteIcon({
-        iconUrl: fieldDefinition.iconUrl,
-        label: fieldDefinition.label
-      });
-    }
-  },
-  getTypeLabel: field => {
-    const {
-      type
-    } = field;
-    if (type === 'default') {
-      return 'Form';
-    }
-
-    // @Note: We know that we are inside the properties panel context,
-    // so we can savely use the hook here.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const fieldDefinition = useService('formFields').get(type).config;
-    return fieldDefinition.label || type;
-  }
-};
-
 /**
  * Provide placeholders for empty and multiple state.
  */
@@ -9131,6 +9104,7 @@ const PropertiesPanelPlaceholderProvider = {
   }
 };
 
+const EMPTY = {};
 function PropertiesPanel(props) {
   const {
     eventBus,
@@ -9140,7 +9114,7 @@ function PropertiesPanel(props) {
   const formEditor = injector.get('formEditor');
   const modeling = injector.get('modeling');
   const selectionModule = injector.get('selection');
-  const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
+  const propertiesPanelConfig = injector.get('config.propertiesPanel') || EMPTY;
   const {
     feelPopupContainer
   } = propertiesPanelConfig;
@@ -9194,6 +9168,11 @@ function PropertiesPanel(props) {
       return updater(groups);
     }, []);
   }, [providers, selectedFormField, editField]);
+  const formFields = getService('formFields');
+  const PropertiesPanelHeaderProvider = hooks.useMemo(() => getPropertiesPanelHeaderProvider({
+    getDocumentationRef: propertiesPanelConfig.getDocumentationRef,
+    formFields
+  }), [formFields, propertiesPanelConfig]);
   return jsxRuntime.jsx("div", {
     class: "fjs-properties-panel",
     "data-field": selectedFormField && selectedFormField.id,
@@ -9367,6 +9346,24 @@ function Action(props) {
   });
 }
 
+function useService(type, strict) {
+  const {
+    getService
+  } = hooks.useContext(FormPropertiesPanelContext);
+  return getService(type, strict);
+}
+
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
+ */
+function useVariables() {
+  const form = useService('formEditor');
+  const schema = form.getSchema();
+  return formJsViewer.getSchemaVariables(schema);
+}
+
 function AltTextEntry(props) {
   const {
     editField,
@@ -11653,8 +11650,7 @@ function StaticOptionsSourceEntry(props) {
   });
   return {
     items,
-    add: addEntry,
-    shouldSort: false
+    add: addEntry
   };
 }
 
@@ -12498,8 +12494,7 @@ function StaticColumnsSourceEntry(props) {
   });
   return {
     items,
-    add: addEntry,
-    shouldSort: false
+    add: addEntry
   };
 }
 
@@ -13001,8 +12996,7 @@ function CustomPropertiesGroup(field, editField) {
     id: 'custom-values',
     items,
     label: 'Custom properties',
-    tooltip: 'Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.',
-    shouldSort: false
+    tooltip: 'Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.'
   };
 }