@telus-uds/components-community.sticky 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-community.sticky
 
-This log was last generated on Mon, 29 Jan 2024 18:26:01 GMT and should not be manually modified.
+This log was last generated on Wed, 07 Feb 2024 19:09:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.4.0
+
+Wed, 07 Feb 2024 19:09:40 GMT
+
+### Minor changes
+
+- The onStick prop is a callback function that gets triggered when the sticky behavior changes i.e., when the element becomes sticky or stops being sticky. ThrottleTime prop that specifies the time interval (in milliseconds) during which the onStick callback is throttled. The throttleConfig prop allows you to customize the behavior of the throttling, such as whether the throttled function is called immediately (leading) or after the specified time interval (trailing). (victor.morales@telus.com)
+- Bump @telus-uds/components-base to v1.76.0
+- Bump @telus-uds/components-web to v2.31.0
+
 ## 1.3.2
 
-Mon, 29 Jan 2024 18:26:01 GMT
+Mon, 29 Jan 2024 18:41:50 GMT
 
 ### Patches
 

package/lib/Sticky.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,7 +51,12 @@ const Sticky = _ref2 => {
     },
     workWithViewport = true,
     position = 'top',
-    shadow = true
+    shadow = true,
+    onStick = () => {},
+    throttleTime = 100,
+    throttleConfig = {
+      trailing: true
+    }
   } = _ref2;
   // Position "bottom" does not support the "hidden" variant.
   if (variant === 'hidden' && position === 'bottom') {
@@ -61,6 +67,7 @@ const Sticky = _ref2 => {
   const sentinelBottomRef = (0, _react.useRef)();
   const stickyWrapperRef = (0, _react.useRef)();
   const [observer, setObserver] = (0, _react.useState)();
+  const onStickThrottled = (0, _lodash.default)(onStick, throttleTime, throttleConfig);
   (0, _react.useEffect)(() => {
     if (observer) {
       observer.disconnect();
@@ -74,6 +81,7 @@ const Sticky = _ref2 => {
           var _stickyWrapperRef$cur3;
           (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
         }
+        onStickThrottled(intersected);
       }, workWithViewport));
     }
     if (variant === 'alternate') {
@@ -81,6 +89,7 @@ const Sticky = _ref2 => {
         var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
         (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
         (_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 ? void 0 : _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
+        onStickThrottled(intersected);
       }, workWithViewport));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -137,7 +146,19 @@ Sticky.propTypes = {
   /**
    * Adds shadow to sticky component.
    */
-  shadow: _propTypes.default.bool
+  shadow: _propTypes.default.bool,
+  /**
+   * Callback when sticky is stuck to top or bottom of page.
+   */
+  onStick: _propTypes.default.func,
+  /**
+   * Time in milliseconds to throttle the onStick callback.
+   */
+  throttleTime: _propTypes.default.number,
+  /**
+   * Throttle configuration.
+   */
+  throttleConfig: _propTypes.default.object
 };
 var _default = Sticky;
 exports.default = _default;

package/lib-module/Sticky.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { spacingProps, Box } from '@telus-uds/components-base';
+import throttle from 'lodash.throttle';
 import StickyWrapper from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -43,7 +44,12 @@ const Sticky = _ref2 => {
     },
     workWithViewport = true,
     position = 'top',
-    shadow = true
+    shadow = true,
+    onStick = () => {},
+    throttleTime = 100,
+    throttleConfig = {
+      trailing: true
+    }
   } = _ref2;
   // Position "bottom" does not support the "hidden" variant.
   if (variant === 'hidden' && position === 'bottom') {
@@ -54,6 +60,7 @@ const Sticky = _ref2 => {
   const sentinelBottomRef = useRef();
   const stickyWrapperRef = useRef();
   const [observer, setObserver] = useState();
+  const onStickThrottled = throttle(onStick, throttleTime, throttleConfig);
   useEffect(() => {
     if (observer) {
       observer.disconnect();
@@ -67,6 +74,7 @@ const Sticky = _ref2 => {
           var _stickyWrapperRef$cur3;
           (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
         }
+        onStickThrottled(intersected);
       }, workWithViewport));
     }
     if (variant === 'alternate') {
@@ -74,6 +82,7 @@ const Sticky = _ref2 => {
         var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
         (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
         (_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 ? void 0 : _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
+        onStickThrottled(intersected);
       }, workWithViewport));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -130,6 +139,18 @@ Sticky.propTypes = {
   /**
    * Adds shadow to sticky component.
    */
-  shadow: PropTypes.bool
+  shadow: PropTypes.bool,
+  /**
+   * Callback when sticky is stuck to top or bottom of page.
+   */
+  onStick: PropTypes.func,
+  /**
+   * Time in milliseconds to throttle the onStick callback.
+   */
+  throttleTime: PropTypes.number,
+  /**
+   * Throttle configuration.
+   */
+  throttleConfig: PropTypes.object
 };
 export default Sticky;

package/package.json

@@ -4,14 +4,15 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.75.0",
+    "@telus-uds/components-base": "1.76.0",
     "@telus-uds/system-constants": "^1.3.0",
     "@telus-uds/system-theme-tokens": "^2.50.1",
+    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@telus-uds/components-web": "^2.30.0",
+    "@telus-uds/components-web": "^2.31.0",
     "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
@@ -45,5 +46,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.3.2"
+  "version": "1.4.0"
 }

package/src/Sticky.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { spacingProps, Box } from '@telus-uds/components-base'
+import throttle from 'lodash.throttle'
 import StickyWrapper from './styles'
 
 function createObserver(ref, callback, workWithViewport = true) {
@@ -25,7 +26,10 @@ const Sticky = ({
   horizontal = { xs: 0, sm: 0, lg: 0, xl: 0 },
   workWithViewport = true,
   position = 'top',
-  shadow = true
+  shadow = true,
+  onStick = () => {},
+  throttleTime = 100,
+  throttleConfig = { trailing: true }
 }) => {
   // Position "bottom" does not support the "hidden" variant.
   if (variant === 'hidden' && position === 'bottom') {
@@ -37,6 +41,9 @@ const Sticky = ({
   const sentinelBottomRef = useRef()
   const stickyWrapperRef = useRef()
   const [observer, setObserver] = useState()
+
+  const onStickThrottled = throttle(onStick, throttleTime, throttleConfig)
+
   useEffect(() => {
     if (observer) {
       observer.disconnect()
@@ -51,6 +58,7 @@ const Sticky = ({
             if (intersected) {
               stickyWrapperRef.current?.classList.remove('pristine')
             }
+            onStickThrottled(intersected)
           },
           workWithViewport
         )
@@ -63,6 +71,7 @@ const Sticky = ({
           (intersected) => {
             stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
             stickyWrapperRef.current?.classList.toggle('bottom', intersected)
+            onStickThrottled(intersected)
           },
           workWithViewport
         )
@@ -120,7 +129,19 @@ Sticky.propTypes = {
   /**
    * Adds shadow to sticky component.
    */
-  shadow: PropTypes.bool
+  shadow: PropTypes.bool,
+  /**
+   * Callback when sticky is stuck to top or bottom of page.
+   */
+  onStick: PropTypes.func,
+  /**
+   * Time in milliseconds to throttle the onStick callback.
+   */
+  throttleTime: PropTypes.number,
+  /**
+   * Throttle configuration.
+   */
+  throttleConfig: PropTypes.object
 }
 
 export default Sticky