@bpmn-io/properties-panel 3.21.0 → 3.22.1

package/dist/index.esm.js

@@ -3183,7 +3183,7 @@ function ListGroup(props) {
     id,
     items,
     label,
-    shouldOpen = true,
+    shouldOpen = false,
     translate = translateFallback
   } = props;
   useEffect(() => {
@@ -3192,57 +3192,25 @@ function ListGroup(props) {
     }
   }, [props.shouldSort]);
   const groupRef = useRef(null);
-  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
   const [sticky, setSticky] = useState(false);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
   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 prevElement = usePrevious(element);
-  const elementChanged = element !== prevElement;
-  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(() => {
-    setLocalItems(items);
-  }, [items]);
+  const toggleOpen = useCallback(() => setOpen(!open), [open]);
+  const openItemIds = element === prevElement && open && addTriggered ? getNewItemIds(items, localItems) : [];
 
-  // (1) handle auto opening when items were added
+  // reset local state after items changed
   useEffect(() => {
-    // reset addTriggered flag
+    setLocalItems(items);
     setAddTriggered(false);
-    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();
-        }
-        setNewlyAddedItemIds(newItemIds);
-      } else {
-        // ignore newly added items that do not result from a triggered add
-        setNewlyAddedItemIds([]);
-      }
-    }
-  }, [items, open, shouldHandleEffects, addTriggered, localItems]);
+  }, [items]);
 
   // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
-  const toggleOpen = () => setOpen(!open);
   const hasItems = !!items.length;
   const propertiesPanelContext = {
     ...useContext(LayoutContext),
@@ -3250,6 +3218,7 @@ function ListGroup(props) {
   };
   const handleAddClick = e => {
     setAddTriggered(true);
+    setOpen(true);
     add(e);
   };
   const allErrors = useErrors();
@@ -3312,7 +3281,7 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
       children: jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
-        children: localItems.map((item, index) => {
+        children: items.map((item, index) => {
           if (!item) {
             return;
           }
@@ -3321,8 +3290,9 @@ function ListGroup(props) {
           } = item;
 
           // if item was added, open it
-          // Existing items will not be affected as autoOpen is only applied on first render
-          const autoOpen = newlyAddedItemIds.includes(item.id);
+          // existing items will not be affected as autoOpen
+          // is only applied on first render
+          const autoOpen = openItemIds.includes(item.id);
           return createElement(ListItem, {
             ...item,
             autoOpen: autoOpen,
@@ -3336,6 +3306,11 @@ function ListGroup(props) {
     })]
   });
 }
+function getNewItemIds(newItems, oldItems) {
+  const newIds = newItems.map(item => item.id);
+  const oldIds = oldItems.map(item => item.id);
+  return newIds.filter(itemId => !oldIds.includes(itemId));
+}
 
 function Checkbox(props) {
   const {
@@ -4006,7 +3981,7 @@ function TextArea(props) {
   };
   useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
-  }, []);
+  });
   useEffect(() => {
     if (value === localValue) {
       return;