@bpmn-io/properties-panel 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -6,6 +6,11 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.19.0
+
+* `FEAT`: make group headers sticky ([#175](https://github.com/bpmn-io/properties-panel/pull/175))
+* `CHORE`: use element as key for entries ([#176](https://github.com/bpmn-io/properties-panel/pull/176))
+
 ## 0.18.0
 
 * `FEAT`: pass variables to FEEL editor ([#171](https://github.com/bpmn-io/properties-panel/pull/171))

package/assets/properties-panel.css

@@ -176,7 +176,7 @@
   background-color: var(--header-background-color);
   border-bottom: 1px solid var(--header-bottom-border-color);
   width: 100%;
-  z-index: 1;
+  z-index: 10;
   max-height: 64px;
   overflow: hidden;
 }
@@ -246,16 +246,10 @@
   justify-content: space-between;
   margin-bottom: -1px; /* avoid double borders */
   position: relative;  /* browsers not supporting sticky */
-
-  /**
-   * @pinussilvestrus Note: we exclude the sticky header feature until we
-   * find a proper fix for https://github.com/bpmn-io/bpmn-js-properties-panel/issues/726
-   */
-   
-  /* position: -webkit-sticky;  /* for safari */
-  /* position: sticky; */
+  position: -webkit-sticky;  /* for safari */
+  position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 10;
 }
 
 .bio-properties-panel-group-header .bio-properties-panel-group-header-title {

package/dist/index.esm.js

@@ -460,11 +460,40 @@ function useShowEntryEvent(id) {
 
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
   useEffect(() => {
+    const Observer = IntersectionObserver; // return early if IntersectionObserver is not available
 
-    {
+    if (!Observer) {
       return;
     }
-  }, [ref]);
+
+    let observer;
+
+    if (ref.current) {
+      const scrollContainer = 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]);
 }
 
 /**
@@ -523,7 +552,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 = { ...useContext(LayoutContext),
     onShow
   };
@@ -1100,7 +1129,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);
 
@@ -1282,7 +1311,7 @@ function CheckboxEntry(props) {
       label: label,
       onChange: setValue,
       value: value
-    }), error && jsx("div", {
+    }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsx(Description, {
@@ -5322,7 +5351,7 @@ function FeelEntry(props) {
       value: value,
       variables: props.variables,
       OptionalComponent: props.OptionalComponent
-    }), error && jsx("div", {
+    }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsx(Description, {
@@ -5652,7 +5681,7 @@ function NumberFieldEntry(props) {
       min: min,
       step: step,
       value: value
-    }), jsx(Description, {
+    }, element), jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -5758,7 +5787,7 @@ function SelectEntry(props) {
       onChange: setValue,
       options: options,
       disabled: disabled
-    }), error && jsx("div", {
+    }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsx(Description, {
@@ -5822,7 +5851,7 @@ function Simple(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       value: localValue
-    })
+    }, element)
   });
 }
 function isEdited$3(node) {
@@ -5927,7 +5956,7 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled
-    }), error && jsx("div", {
+    }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsx(Description, {
@@ -6065,7 +6094,7 @@ function TextfieldEntry(props) {
       label: label,
       onInput: onInput,
       value: value
-    }), error && jsx("div", {
+    }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsx(Description, {