[Sticky] Fix Sticky to update items when props change

.changeset/thin-paws-wait.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `Sticky` to update sticky items when props change

polaris-react/src/components/Sticky/Sticky.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 
 import {getRectForNode} from '../../utilities/geometry';
-import {useStickyManager} from '../../utilities/sticky-manager';
+import {StickyManager, useStickyManager} from '../../utilities/sticky-manager';
 
 interface State {
   isSticky: boolean;
@@ -55,6 +55,36 @@ class StickyInner extends Component<CombinedProps, State> {
     });
   }
 
+  componentDidUpdate() {
+    const {
+      boundingElement,
+      offset = false,
+      disableWhenStacked = false,
+      stickyManager,
+    } = this.props;
+
+    if (!this.stickyNode || !this.placeHolderNode) return;
+
+    const stickyManagerItem = stickyManager.getStickyItem(this.stickyNode);
+    const didPropsChange =
+      !stickyManagerItem ||
+      boundingElement !== stickyManagerItem.boundingElement ||
+      offset !== stickyManagerItem.offset ||
+      disableWhenStacked !== stickyManagerItem.disableWhenStacked;
+
+    if (!didPropsChange) return;
+
+    stickyManager.unregisterStickyItem(this.stickyNode);
+    stickyManager.registerStickyItem({
+      stickyNode: this.stickyNode,
+      placeHolderNode: this.placeHolderNode,
+      handlePositioning: this.handlePositioning,
+      offset,
+      boundingElement,
+      disableWhenStacked,
+    });
+  }
+
   componentWillUnmount() {
     const {stickyManager} = this.props;
     if (!this.stickyNode) return;

polaris-react/src/utilities/sticky-manager/sticky-manager.ts

@@ -67,6 +67,10 @@ export class StickyManager {
     this.stickyItems.splice(nodeIndex, 1);
   }
 
+  getStickyItem(node: HTMLElement) {
+    return this.stickyItems.find(({stickyNode}) => node === stickyNode);
+  }
+
   setContainer(el: Document | HTMLElement) {
     this.container = el;
     if (isDocument(el)) {