@bpmn-io/properties-panel 1.8.2 → 2.0.0

package/assets/properties-panel.css

@@ -113,7 +113,9 @@
   --font-family: sans-serif;
   --font-family-monospace: monospace;
 
-  display: none;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   position: relative;
   height: 100%;
   width: 100%;
@@ -135,12 +137,6 @@
   font-family: var(--font-family);
 }
 
-.bio-properties-panel.open {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
 /**
  * Placeholder (empty, multi select, ...)
  */

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { useContext, useRef, useEffect, useMemo, useCallback, useState, useLayoutEffect } from '../preact/hooks';
 import { isFunction, isArray, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
-import classnames from 'classnames';
 import { forwardRef } from '../preact/compat';
 import { jsx, jsxs } from '../preact/jsx-runtime';
+import classnames from 'classnames';
 import { query } from 'min-dom';
 import { createContext, createElement } from '../preact';
 import { FeelersEditor } from 'feelers';
@@ -383,6 +383,18 @@ function useShowEntryEvent(id) {
  * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
+  const [scrollContainer, setScrollContainer] = useState(query(scrollContainerSelector));
+  const updateScrollContainer = useCallback(() => {
+    const newScrollContainer = query(scrollContainerSelector);
+    if (newScrollContainer !== scrollContainer) {
+      setScrollContainer(newScrollContainer);
+    }
+  }, [scrollContainerSelector, scrollContainer]);
+  useEffect(() => {
+    updateScrollContainer();
+  }, [updateScrollContainer]);
+  useEvent('propertiesPanel.attach', updateScrollContainer);
+  useEvent('propertiesPanel.detach', updateScrollContainer);
   useEffect(() => {
     const Observer = IntersectionObserver;
 
@@ -390,42 +402,36 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
     if (!Observer) {
       return;
     }
-    let observer;
-    if (ref.current) {
-      const scrollContainer = query(scrollContainerSelector);
 
-      // TODO(@barmac): test this
-      if (!scrollContainer) {
+    // TODO(@barmac): test this
+    if (!ref.current || !scrollContainer) {
+      return;
+    }
+    const observer = new Observer(entries => {
+      // scroll container is unmounted, do not update sticky state
+      if (scrollContainer.scrollHeight === 0) {
         return;
       }
-      observer = new Observer(entries => {
-        // The ScrollContainer is unmounted, do not update sticky state
-        if (scrollContainer.scrollHeight === 0) {
-          return;
+      entries.forEach(entry => {
+        if (entry.intersectionRatio < 1) {
+          setSticky(true);
+        } else if (entry.intersectionRatio === 1) {
+          setSticky(false);
         }
-        entries.forEach(entry => {
-          if (entry.intersectionRatio < 1) {
-            setSticky(true);
-          } else if (entry.intersectionRatio === 1) {
-            setSticky(false);
-          }
-        });
-      }, {
-        root: scrollContainer,
-        rootMargin: '0px 0px 999999% 0px',
-        // Use bottom margin to avoid stickyness when scrolling out to bottom
-        threshold: [1]
       });
-      observer.observe(ref.current);
-    }
+    }, {
+      root: scrollContainer,
+      rootMargin: '0px 0px 999999% 0px',
+      // Use bottom margin to avoid stickyness when scrolling out to bottom
+      threshold: [1]
+    });
+    observer.observe(ref.current);
 
     // Unobserve if unmounted
     return () => {
-      if (ref.current && observer) {
-        observer.unobserve(ref.current);
-      }
+      observer.unobserve(ref.current);
     };
-  }, [ref.current, scrollContainerSelector, setSticky]);
+  }, [ref.current, scrollContainer, setSticky]);
 }
 
 /**
@@ -560,9 +566,7 @@ function Placeholder(props) {
   });
 }
 
-const DEFAULT_LAYOUT = {
-  open: true
-};
+const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
 
 /**
@@ -726,7 +730,7 @@ function PropertiesPanel(props) {
           children: jsx(EventContext.Provider, {
             value: eventContext,
             children: jsxs("div", {
-              class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
+              class: "bio-properties-panel",
               children: [jsx(Header, {
                 element: element,
                 headerProvider: headerProvider