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

package/LICENSE

@@ -1,23 +1,23 @@
-Copyright (c) 2021-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-The source code responsible for displaying the bpmn.io project watermark that
-links back to https://bpmn.io as part of rendered diagrams MUST NOT be
-removed or changed. When this software is being used in a website or application,
-the watermark must stay fully visible and not visually overlapped by other elements.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+Copyright (c) 2021-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the watermark must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
 OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/assets/form-js-editor.css

@@ -2135,6 +2135,31 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
+.bio-properties-panel-popup .bio-properties-panel-popup__close {
+  margin: -12px;
+  margin-left: 12px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background-color: var(--popup-header-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:hover,
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  background-color: var(--popup-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  outline-offset: -2px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  margin-top: 2px;
+}
+
 .bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }

package/dist/assets/properties-panel.css

@@ -1334,6 +1334,31 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
+.bio-properties-panel-popup .bio-properties-panel-popup__close {
+  margin: -12px;
+  margin-left: 12px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background-color: var(--popup-header-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:hover,
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  background-color: var(--popup-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  outline-offset: -2px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  margin-top: 2px;
+}
+
 .bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }

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
@@ -11653,8 +11645,7 @@ function StaticOptionsSourceEntry(props) {
   });
   return {
     items,
-    add: addEntry,
-    shouldSort: false
+    add: addEntry
   };
 }
 
@@ -12498,8 +12489,7 @@ function StaticColumnsSourceEntry(props) {
   });
   return {
     items,
-    add: addEntry,
-    shouldSort: false
+    add: addEntry
   };
 }
 
@@ -13001,8 +12991,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.'
   };
 }