@bpmn-io/properties-panel 0.18.0 → 0.19.0

package/dist/index.js

@@ -468,11 +468,40 @@ function useShowEntryEvent(id) {
 
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
   hooks.useEffect(() => {
+    const Observer = IntersectionObserver; // return early if IntersectionObserver is not available
 
-    {
+    if (!Observer) {
       return;
     }
-  }, [ref]);
+
+    let observer;
+
+    if (ref.current) {
+      const scrollContainer = minDom.query(scrollContainerSelector);
+      observer = new Observer(entries => {
+        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);
+    } // Unobserve if unmounted
+
+
+    return () => {
+      if (ref.current && observer) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [ref, scrollContainerSelector, setSticky]);
 }
 
 /**
@@ -531,7 +560,7 @@ function Group(props) {
     setEdited(hasOneEditedEntry);
   }, [entries]); // set css class when group is sticky to top
 
-  useStickyIntersectionObserver(groupRef);
+  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
   const propertiesPanelContext = { ...hooks.useContext(LayoutContext),
     onShow
   };
@@ -1108,7 +1137,7 @@ function ListGroup(props) {
     }
   }, [items, shouldHandleEffects]); // set css class when group is sticky to top
 
-  useStickyIntersectionObserver(groupRef);
+  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
 
   const toggleOpen = () => setOpen(!open);
 
@@ -1290,7 +1319,7 @@ function CheckboxEntry(props) {
       label: label,
       onChange: setValue,
       value: value
-    }), error && jsxRuntime.jsx("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description, {
@@ -5330,7 +5359,7 @@ function FeelEntry(props) {
       value: value,
       variables: props.variables,
       OptionalComponent: props.OptionalComponent
-    }), error && jsxRuntime.jsx("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description, {
@@ -5660,7 +5689,7 @@ function NumberFieldEntry(props) {
       min: min,
       step: step,
       value: value
-    }), jsxRuntime.jsx(Description, {
+    }, element), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -5766,7 +5795,7 @@ function SelectEntry(props) {
       onChange: setValue,
       options: options,
       disabled: disabled
-    }), error && jsxRuntime.jsx("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description, {
@@ -5830,7 +5859,7 @@ function Simple(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       value: localValue
-    })
+    }, element)
   });
 }
 function isEdited$3(node) {
@@ -5935,7 +5964,7 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled
-    }), error && jsxRuntime.jsx("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description, {
@@ -6073,7 +6102,7 @@ function TextfieldEntry(props) {
       label: label,
       onInput: onInput,
       value: value
-    }), error && jsxRuntime.jsx("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description, {