@bpmn-io/properties-panel 3.18.1 → 3.19.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';
@@ -967,6 +967,7 @@ const useBufferedFocus = function (editor, ref) {
 };
 const CodeEditor = forwardRef((props, ref) => {
   const {
+    contentAttributes,
     enableGutters,
     value,
     onInput,
@@ -1012,7 +1013,8 @@ const CodeEditor = forwardRef((props, ref) => {
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
-      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping]
+      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping],
+      contentAttributes
     });
     setEditor(editor);
     return () => {
@@ -2102,9 +2104,12 @@ function FeelTextfieldComponent(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(CodeEditor, {
-        id: prefixId$5(id),
         name: id,
         onInput: handleLocalInput,
+        contentAttributes: {
+          'id': prefixId$5(id),
+          'aria-label': label
+        },
         disabled: disabled,
         popupOpen: popuOpen,
         onFeelToggle: () => {
@@ -2661,7 +2666,6 @@ const DEFAULT_TOOLTIP = {};
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
- *    shouldSort?: Boolean,
  *    shouldOpen?: Boolean
  * } } ListGroupDefinition
  *
@@ -3094,6 +3098,7 @@ function ListItem(props) {
         } else if (isFunction(focusableInput.focus)) {
           focusableInput.focus();
         }
+        focusableInput.scrollIntoView();
       }
     }
   }, [autoOpen, autoFocusEntry]);
@@ -3118,97 +3123,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);
@@ -3280,8 +3249,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;
           }
@@ -3291,7 +3259,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,
@@ -3305,21 +3273,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,
@@ -3611,16 +3564,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) {
@@ -3678,7 +3627,7 @@ function List(props) {
       component: component,
       element: element,
       id: id,
-      items: sortedItems,
+      items: items,
       newItems: newItems,
       onRemove: onRemove,
       open: open
@@ -3742,41 +3691,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) {