@bpmn-io/properties-panel 3.18.2 → 3.20.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { useContext, useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from '../preact/hooks';
-import { isFunction, isString, isArray, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
+import { isFunction, isString, isArray, get, assign, set, isNumber, debounce } from 'min-dash';
 import { createPortal, forwardRef } from '../preact/compat';
 import { jsx, jsxs, Fragment } from '../preact/jsx-runtime';
 import { createContext, createElement } from '../preact';
@@ -974,6 +974,7 @@ const CodeEditor = forwardRef((props, ref) => {
     onFeelToggle = noop$5,
     onLint = noop$5,
     onPopupOpen = noop$5,
+    placeholder,
     popupOpen,
     disabled,
     tooltipContainer,
@@ -1010,6 +1011,7 @@ const CodeEditor = forwardRef((props, ref) => {
       onChange: handleInput,
       onKeyDown: onKeyDown,
       onLint: onLint,
+      placeholder: placeholder,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
@@ -1039,6 +1041,12 @@ const CodeEditor = forwardRef((props, ref) => {
     }
     editor.setVariables(variables);
   }, [variables]);
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setPlaceholder(placeholder);
+  }, [placeholder]);
   const handleClick = () => {
     ref.current.focus();
   };
@@ -1944,6 +1952,7 @@ function FeelTextfieldComponent(props) {
     hostLanguage,
     onInput,
     onError,
+    placeholder,
     feel,
     value = '',
     disabled = false,
@@ -2118,6 +2127,7 @@ function FeelTextfieldComponent(props) {
         },
         onLint: handleLint,
         onPopupOpen: handlePopupOpen,
+        placeholder: placeholder,
         value: feelOnlyValue,
         variables: variables,
         ref: editorRef,
@@ -2146,7 +2156,8 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
   const inputRef = useRef();
 
@@ -2179,6 +2190,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
+    placeholder: placeholder,
     value: value || ''
   });
 });
@@ -2236,7 +2248,8 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
   const inputRef = useRef();
 
@@ -2264,6 +2277,7 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
+    placeholder: placeholder,
     value: value || '',
     "data-gramm": "false"
   });
@@ -2359,6 +2373,7 @@ const OptionalFeelCheckbox = 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) {
@@ -2381,6 +2396,7 @@ function FeelEntry(props) {
     variables,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
   const [validationError, setValidationError] = useState(null);
@@ -2424,6 +2440,7 @@ function FeelEntry(props) {
       onError: onError,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       example: example,
       hostLanguage: hostLanguage,
       singleLine: singleLine,
@@ -2492,6 +2509,7 @@ function FeelNumberEntry(props) {
  * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string} [props.placeholder]
  */
 function FeelTextAreaEntry(props) {
   return jsx(FeelEntry, {
@@ -2666,7 +2684,6 @@ const DEFAULT_TOOLTIP = {};
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
- *    shouldSort?: Boolean,
  *    shouldOpen?: Boolean
  * } } ListGroupDefinition
  *
@@ -3099,6 +3116,7 @@ function ListItem(props) {
         } else if (isFunction(focusableInput.focus)) {
           focusableInput.focus();
         }
+        focusableInput.scrollIntoView();
       }
     }
   }, [autoOpen, autoFocusEntry]);
@@ -3123,97 +3141,61 @@ function ListGroup(props) {
     id,
     items,
     label,
-    shouldOpen = true,
-    shouldSort = true
+    shouldOpen = true
   } = props;
+  useEffect(() => {
+    if (props.shouldSort != undefined) {
+      console.warn('the property \'shouldSort\' is no longer supported');
+    }
+  }, [props.shouldSort]);
   const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
   const [sticky, setSticky] = useState(false);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = useState([]);
-  const [newItemAdded, setNewItemAdded] = useState(false);
+  const [localItems, setLocalItems] = useState([]);
+  const [newlyAddedItemIds, setNewlyAddedItemIds] = useState([]);
 
   // Flag to mark that add button was clicked in the last render cycle
   const [addTriggered, setAddTriggered] = 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.
   useEffect(() => {
-    if (!prevItems || !shouldSort) {
-      setOrdering(createOrdering(items));
-    }
-  }, [items, element]);
+    setLocalItems(items);
+  }, [items]);
 
-  // (1) items were added
+  // (1) handle auto opening when items were added
   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
-  useEffect(() => {
-    if (shouldSort && open && !newItemAdded) {
-      setOrdering(createOrdering(sortItems(items)));
     }
-  }, [open, shouldSort]);
-
-  // (3) items were deleted
-  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);
@@ -3285,8 +3267,7 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
       children: jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
-        children: ordering.map((o, index) => {
-          const item = getItem(items, o);
+        children: localItems.map((item, index) => {
           if (!item) {
             return;
           }
@@ -3296,7 +3277,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 createElement(ListItem, {
             ...item,
             autoOpen: autoOpen,
@@ -3310,21 +3291,6 @@ function ListGroup(props) {
   });
 }
 
-// helpers ////////////////////
-
-/**
- * Sorts given items alphanumeric by label
- */
-function sortItems(items) {
-  return sortBy(items, i => i.label.toLowerCase());
-}
-function getItem(items, id) {
-  return find(items, i => i.id === id);
-}
-function createOrdering(items) {
-  return items.map(i => i.id);
-}
-
 function Checkbox(props) {
   const {
     id,
@@ -3616,16 +3582,12 @@ function List(props) {
     onAdd,
     onRemove,
     autoFocusEntry,
-    compareFn,
     ...restProps
   } = props;
   const [open, setOpen] = useState(!!shouldOpen);
   const hasItems = !!items.length;
   const toggleOpen = () => hasItems && setOpen(!open);
-  const opening = !usePrevious(open) && open;
   const elementChanged = usePrevious(element) !== element;
-  const shouldReset = opening || elementChanged;
-  const sortedItems = useSortedItems(items, compareFn, shouldReset);
   const newItems = useNewItems(items, elementChanged);
   useEffect(() => {
     if (open && !hasItems) {
@@ -3683,7 +3645,7 @@ function List(props) {
       component: component,
       element: element,
       id: id,
-      items: sortedItems,
+      items: items,
       newItems: newItems,
       onRemove: onRemove,
       open: open
@@ -3747,41 +3709,6 @@ function ItemsList(props) {
     })
   });
 }
-
-/**
- * Place new items in the beginning of the list and sort the rest with provided function.
- *
- * @template Item
- * @param {Item[]} currentItems
- * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
- * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
- * @returns {Item[]}
- */
-function useSortedItems(currentItems, compareFn, shouldReset = false) {
-  const itemsRef = useRef(currentItems.slice());
-
-  // (1) Reset and optionally sort.
-  if (shouldReset) {
-    itemsRef.current = currentItems.slice();
-    if (compareFn) {
-      itemsRef.current.sort(compareFn);
-    }
-  } else {
-    const items = itemsRef.current;
-
-    // (2) Add new item to the list.
-    for (const item of currentItems) {
-      if (!items.includes(item)) {
-        // Unshift or push depending on whether we have a compareFn
-        compareFn ? items.unshift(item) : items.push(item);
-      }
-    }
-
-    // (3) Filter out removed items.
-    itemsRef.current = items.filter(item => currentItems.includes(item));
-  }
-  return itemsRef.current;
-}
 function useNewItems(items = [], shouldReset) {
   const previousItems = usePrevious(items.slice()) || [];
   if (shouldReset) {
@@ -4017,6 +3944,7 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
+    placeholder,
     rows = autoResize ? 1 : 2,
     tooltip
   } = props;
@@ -4059,6 +3987,7 @@ function TextArea(props) {
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       rows: rows,
       value: localValue,
       disabled: disabled,
@@ -4098,6 +4027,7 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     autoResize,
     tooltip
   } = props;
@@ -4133,6 +4063,7 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled,
+      placeholder: placeholder,
       autoResize: autoResize,
       tooltip: tooltip,
       element: element
@@ -4165,6 +4096,7 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
+    placeholder,
     value = '',
     tooltip
   } = props;
@@ -4206,6 +4138,7 @@ function Textfield(props) {
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: localValue
     })]
   });
@@ -4239,6 +4172,7 @@ function TextfieldEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
   const globalError = useError(id);
@@ -4270,6 +4204,7 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value,
       tooltip: tooltip,
       element: element