@telus-uds/components-community.sticky 1.1.2 → 1.1.4

package/CHANGELOG.json

@@ -2,7 +2,67 @@
   "name": "@telus-uds/components-community.sticky",
   "entries": [
     {
-      "date": "Tue, 30 May 2023 02:42:51 GMT",
+      "date": "Tue, 06 Jun 2023 20:37:42 GMT",
+      "tag": "@telus-uds/components-community.sticky_v1.1.4",
+      "version": "1.1.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "oscar.palencia@telus.com",
+            "package": "@telus-uds/components-community.sticky",
+            "commit": "9f6bf985b27789c4b8d35af0dbeb581d95a00a2c",
+            "comment": "Fixing support for nesting container (overflows)"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/components-base to v1.48.0",
+            "commit": "9f6bf985b27789c4b8d35af0dbeb581d95a00a2c"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/system-theme-tokens to v2.30.0",
+            "commit": "9f6bf985b27789c4b8d35af0dbeb581d95a00a2c"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/components-web to v2.6.0",
+            "commit": "9f6bf985b27789c4b8d35af0dbeb581d95a00a2c"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 02 Jun 2023 00:34:55 GMT",
+      "tag": "@telus-uds/components-community.sticky_v1.1.3",
+      "version": "1.1.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/components-base to v1.47.0",
+            "commit": "daa853cc53ed0fa547f7a4d219bd15760890d348"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/system-theme-tokens to v2.29.0",
+            "commit": "daa853cc53ed0fa547f7a4d219bd15760890d348"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-community.sticky",
+            "comment": "Bump @telus-uds/components-web to v2.5.0",
+            "commit": "daa853cc53ed0fa547f7a4d219bd15760890d348"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 30 May 2023 02:46:46 GMT",
       "tag": "@telus-uds/components-community.sticky_v1.1.2",
       "version": "1.1.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @telus-uds/components-community.sticky
 
-This log was last generated on Tue, 30 May 2023 02:42:51 GMT and should not be manually modified.
+This log was last generated on Tue, 06 Jun 2023 20:37:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.1.4
+
+Tue, 06 Jun 2023 20:37:42 GMT
+
+### Patches
+
+- Fixing support for nesting container (overflows) (oscar.palencia@telus.com)
+- Bump @telus-uds/components-base to v1.48.0
+- Bump @telus-uds/system-theme-tokens to v2.30.0
+- Bump @telus-uds/components-web to v2.6.0
+
+## 1.1.3
+
+Fri, 02 Jun 2023 00:34:55 GMT
+
+### Patches
+
+- Bump @telus-uds/components-base to v1.47.0
+- Bump @telus-uds/system-theme-tokens to v2.29.0
+- Bump @telus-uds/components-web to v2.5.0
+
 ## 1.1.2
 
-Tue, 30 May 2023 02:42:51 GMT
+Tue, 30 May 2023 02:46:46 GMT
 
 ### Patches
 

package/__tests__/Sticky.test.jsx

@@ -33,6 +33,24 @@ describe('Sticky', () => {
     expect(titleElement).toBeInTheDocument()
   })
 
+  it("is rendered without checking for container's y position", () => {
+    const { getByText, container } = render(
+      <Theme>
+        <Sticky workWithViewport={false}>
+          <Typography>Sticky Content</Typography>
+        </Sticky>
+      </Theme>
+    )
+    const sentinelTop = container.querySelector('.sentinelTop')
+    const sentinelBottom = container.querySelector('.sentinelBottom')
+    const stickyElement = container.querySelector('.sticky-element')
+    const titleElement = getByText(/Sticky Content/i)
+    expect(sentinelTop).toBeInTheDocument()
+    expect(sentinelBottom).toBeInTheDocument()
+    expect(stickyElement).toBeInTheDocument()
+    expect(titleElement).toBeInTheDocument()
+  })
+
   it('is rendered with children using alternate variant', () => {
     const { getByText, container } = render(
       <Theme>

package/lib/Sticky.js

@@ -22,13 +22,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function createObserver(ref, callback) {
+  let workWithViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   const options = {
     threshold: [1]
   };
   const observer = new IntersectionObserver(_ref => {
     let [e] = _ref;
     const isNotVisibleInViewport = e.intersectionRatio < 1;
-    callback(isNotVisibleInViewport);
+    let correctYPosition = true;
+
+    if (workWithViewport) {
+      const {
+        y
+      } = e.boundingClientRect;
+      correctYPosition = y < 0;
+    }
+
+    callback(isNotVisibleInViewport && correctYPosition);
   }, options);
   observer.observe(ref.current);
   return observer;
@@ -49,7 +59,8 @@ const Sticky = _ref2 => {
       sm: 0,
       lg: 0,
       xl: 0
-    }
+    },
+    workWithViewport = true
   } = _ref2;
   const sentinelTopRef = (0, _react.useRef)();
   const sentinelBottomRef = (0, _react.useRef)();
@@ -66,7 +77,7 @@ const Sticky = _ref2 => {
 
         (_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 ? void 0 : _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
         (_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle('top', intersected);
-      }));
+      }, workWithViewport));
     }
 
     if (variant === 'alternate') {
@@ -75,7 +86,7 @@ const Sticky = _ref2 => {
 
         (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.toggle('sticky-mode', intersected);
         (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('bottom', intersected);
-      }));
+      }, workWithViewport));
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [variant]);
@@ -114,6 +125,12 @@ Sticky.propTypes = {
    */
   horizontal: _componentsBase.spacingProps.types.spacingValue,
 
+  /**
+   * Whether the sticky should wait to cross the viewport to stick or not
+   * Defaults to true. Set to false for nested container (using overflow)
+   */
+  workWithViewport: _propTypes.default.bool,
+
   /**
    * Sticky accepts any content as children.
    */

package/package.json

@@ -4,14 +4,14 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.46.0",
+    "@telus-uds/components-base": "1.48.0",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.28.0",
+    "@telus-uds/system-theme-tokens": "^2.30.0",
     "prop-types": "^15.7.2",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@telus-uds/components-web": "^2.4.0",
+    "@telus-uds/components-web": "^2.6.0",
     "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
@@ -45,5 +45,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.1.2"
+  "version": "1.1.4"
 }

package/src/Sticky.jsx

@@ -3,11 +3,16 @@ import PropTypes from 'prop-types'
 import { spacingProps, Box } from '@telus-uds/components-base'
 import StickyWrapper from './styles'
 
-function createObserver(ref, callback) {
+function createObserver(ref, callback, workWithViewport = true) {
   const options = { threshold: [1] }
   const observer = new IntersectionObserver(([e]) => {
     const isNotVisibleInViewport = e.intersectionRatio < 1
-    callback(isNotVisibleInViewport)
+    let correctYPosition = true
+    if (workWithViewport) {
+      const { y } = e.boundingClientRect
+      correctYPosition = y < 0
+    }
+    callback(isNotVisibleInViewport && correctYPosition)
   }, options)
   observer.observe(ref.current)
   return observer
@@ -17,7 +22,8 @@ const Sticky = ({
   children,
   variant = 'default',
   vertical = { xs: 0, sm: 0, lg: 0, xl: 0 },
-  horizontal = { xs: 0, sm: 0, lg: 0, xl: 0 }
+  horizontal = { xs: 0, sm: 0, lg: 0, xl: 0 },
+  workWithViewport = true
 }) => {
   const sentinelTopRef = useRef()
   const sentinelBottomRef = useRef()
@@ -29,18 +35,26 @@ const Sticky = ({
     }
     if (variant === 'default' || variant === 'hidden') {
       setObserver(
-        createObserver(sentinelTopRef, (intersected) => {
-          stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
-          stickyWrapperRef.current?.classList.toggle('top', intersected)
-        })
+        createObserver(
+          sentinelTopRef,
+          (intersected) => {
+            stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
+            stickyWrapperRef.current?.classList.toggle('top', intersected)
+          },
+          workWithViewport
+        )
       )
     }
     if (variant === 'alternate') {
       setObserver(
-        createObserver(sentinelBottomRef, (intersected) => {
-          stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
-          stickyWrapperRef.current?.classList.toggle('bottom', intersected)
-        })
+        createObserver(
+          sentinelBottomRef,
+          (intersected) => {
+            stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
+            stickyWrapperRef.current?.classList.toggle('bottom', intersected)
+          },
+          workWithViewport
+        )
       )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -72,6 +86,11 @@ Sticky.propTypes = {
    *
    */
   horizontal: spacingProps.types.spacingValue,
+  /**
+   * Whether the sticky should wait to cross the viewport to stick or not
+   * Defaults to true. Set to false for nested container (using overflow)
+   */
+  workWithViewport: PropTypes.bool,
   /**
    * Sticky accepts any content as children.
    */

package/stories/Sticky.stories.jsx

@@ -219,4 +219,4 @@ export const Default = (args) => (
 )
 
 Default.storyName = 'Sticky'
-Default.args = { variant: 'default' }
+Default.args = { variant: 'default', checkYPostion: true }