@telus-uds/components-community.sticky 1.6.4 → 1.7.1

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-community.sticky
 
-This log was last generated on Sat, 12 Oct 2024 00:31:05 GMT and should not be manually modified.
+This log was last generated on Wed, 13 Nov 2024 17:18:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.7.1
+
+Wed, 13 Nov 2024 17:18:39 GMT
+
+### Patches
+
+- Bump @telus-uds/components-web to v2.44.0
+
+## 1.7.0
+
+Thu, 31 Oct 2024 05:09:12 GMT
+
+### Minor changes
+
+- Bump @telus-uds/components-base to v1.97.0
+- Bump @telus-uds/system-theme-tokens to v2.66.0
+- Bump @telus-uds/components-web to v2.43.0
+
+### Patches
+
+- `Sticky`: Ability for the stickiness to start when the “top” or “bottom” comes off the screen, so that the stickiness is uniform regardless of whether the Sticky component is stuck to the top or bottom of a page. (patti.perlock2@telus.com)
+
 ## 1.6.4
 
-Sat, 12 Oct 2024 00:31:05 GMT
+Sat, 12 Oct 2024 00:40:49 GMT
 
 ### Patches
 

package/lib/Sticky.js

@@ -13,9 +13,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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;
@@ -27,7 +24,7 @@ function createObserver(ref, callback) {
       correctYPosition = y < 0;
     }
     callback(isNotVisibleInViewport && correctYPosition);
-  }, options);
+  });
   observer.observe(ref.current);
   return observer;
 }
@@ -66,15 +63,16 @@ const Sticky = _ref2 => {
   const stickyWrapperRef = _react.default.useRef();
   const [observer, setObserver] = _react.default.useState();
   const onStickThrottled = (0, _lodash.default)(onStick, throttleTime, throttleConfig);
+  const sentinelPositionRef = position === 'top' ? sentinelTopRef : sentinelBottomRef;
   _react.default.useEffect(() => {
     if (observer) {
       observer.disconnect();
     }
     if (variant === 'default' || variant === 'hidden') {
-      setObserver(createObserver(sentinelTopRef, intersected => {
+      setObserver(createObserver(sentinelPositionRef, intersected => {
         var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
         (_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);
+        (_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle(position, intersected);
         if (intersected) {
           var _stickyWrapperRef$cur3;
           (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');

package/lib-module/Sticky.js

@@ -8,9 +8,6 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 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;
@@ -22,7 +19,7 @@ function createObserver(ref, callback) {
       correctYPosition = y < 0;
     }
     callback(isNotVisibleInViewport && correctYPosition);
-  }, options);
+  });
   observer.observe(ref.current);
   return observer;
 }
@@ -61,15 +58,16 @@ const Sticky = _ref2 => {
   const stickyWrapperRef = React.useRef();
   const [observer, setObserver] = React.useState();
   const onStickThrottled = throttle(onStick, throttleTime, throttleConfig);
+  const sentinelPositionRef = position === 'top' ? sentinelTopRef : sentinelBottomRef;
   React.useEffect(() => {
     if (observer) {
       observer.disconnect();
     }
     if (variant === 'default' || variant === 'hidden') {
-      setObserver(createObserver(sentinelTopRef, intersected => {
+      setObserver(createObserver(sentinelPositionRef, intersected => {
         var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
         (_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);
+        (_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle(position, intersected);
         if (intersected) {
           var _stickyWrapperRef$cur3;
           (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');

package/package.json

@@ -4,15 +4,15 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.96.0",
+    "@telus-uds/components-base": "1.97.0",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.65.0",
+    "@telus-uds/system-theme-tokens": "^2.66.0",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@telus-uds/components-web": "^2.42.0",
+    "@telus-uds/components-web": "^2.44.0",
     "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
@@ -46,5 +46,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.6.4"
+  "version": "1.7.1"
 }

package/src/Sticky.jsx

@@ -5,7 +5,6 @@ import throttle from 'lodash.throttle'
 import StickyWrapper from './styles'
 
 function createObserver(ref, callback, workWithViewport = true) {
-  const options = { threshold: [1] }
   const observer = new IntersectionObserver(([e]) => {
     const isNotVisibleInViewport = e.intersectionRatio < 1
     let correctYPosition = true
@@ -14,7 +13,7 @@ function createObserver(ref, callback, workWithViewport = true) {
       correctYPosition = y < 0
     }
     callback(isNotVisibleInViewport && correctYPosition)
-  }, options)
+  })
   observer.observe(ref.current)
   return observer
 }
@@ -44,6 +43,8 @@ const Sticky = ({
 
   const onStickThrottled = throttle(onStick, throttleTime, throttleConfig)
 
+  const sentinelPositionRef = position === 'top' ? sentinelTopRef : sentinelBottomRef
+
   React.useEffect(() => {
     if (observer) {
       observer.disconnect()
@@ -51,10 +52,10 @@ const Sticky = ({
     if (variant === 'default' || variant === 'hidden') {
       setObserver(
         createObserver(
-          sentinelTopRef,
+          sentinelPositionRef,
           (intersected) => {
             stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
-            stickyWrapperRef.current?.classList.toggle('top', intersected)
+            stickyWrapperRef.current?.classList.toggle(position, intersected)
             if (intersected) {
               stickyWrapperRef.current?.classList.remove('pristine')
             }