@telus-uds/components-community.sticky 1.1.31 → 1.1.32

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-community.sticky
 
-This log was last generated on Wed, 01 Nov 2023 00:54:31 GMT and should not be manually modified.
+This log was last generated on Tue, 07 Nov 2023 16:20:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.1.32
+
+Tue, 07 Nov 2023 16:20:19 GMT
+
+### Patches
+
+- Bump @telus-uds/components-base to v1.67.0
+- Bump @telus-uds/system-theme-tokens to v2.44.0
+- Bump @telus-uds/components-web to v2.22.0
+
 ## 1.1.31
 
-Wed, 01 Nov 2023 00:54:31 GMT
+Wed, 01 Nov 2023 01:05:43 GMT
 
 ### Patches
 

package/lib/Sticky.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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 = {
@@ -30,20 +21,17 @@ function createObserver(ref, callback) {
     let [e] = _ref;
     const isNotVisibleInViewport = e.intersectionRatio < 1;
     let correctYPosition = true;
-
     if (workWithViewport) {
       const {
         y
       } = e.boundingClientRect;
       correctYPosition = y < 0;
     }
-
     callback(isNotVisibleInViewport && correctYPosition);
   }, options);
   observer.observe(ref.current);
   return observer;
 }
-
 const Sticky = _ref2 => {
   let {
     children,
@@ -70,31 +58,25 @@ const Sticky = _ref2 => {
     if (observer) {
       observer.disconnect();
     }
-
     if (variant === 'default' || variant === 'hidden') {
       setObserver(createObserver(sentinelTopRef, 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);
-
         if (intersected) {
           var _stickyWrapperRef$cur3;
-
           (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
         }
       }, workWithViewport));
     }
-
     if (variant === 'alternate') {
       setObserver(createObserver(sentinelBottomRef, intersected => {
         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);
       }, workWithViewport));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [variant]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -117,26 +99,22 @@ const Sticky = _ref2 => {
     })]
   });
 };
-
 Sticky.propTypes = {
   /**
    * Sets top and bottom padding using the theme's spacing scale.
    *
    */
   vertical: _componentsBase.spacingProps.types.spacingValue,
-
   /**
    * Sets left and right padding using the theme's spacing scale.
    *
    */
   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/lib/index.js

@@ -10,10 +10,7 @@ Object.defineProperty(exports, "Sticky", {
   }
 });
 exports.default = void 0;
-
 var _Sticky = _interopRequireDefault(require("./Sticky"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _Sticky.default;
 exports.default = _default;

package/lib/styles.js

@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const StickyWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "styles__StickyWrapper",
   componentId: "[object Object]__sc-160gk65-0"
 })(["top:0;&.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;top:0px;z-index:1;box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}&.hidden{animation:0.3s animateIn forwards;.sticky-element{animation:0.3s shadowIn forwards;}}}&.alternate{}&.hidden{position:sticky;pointerevents:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;animation:0.6s shadowOut forwards;}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"]);
-
 var _default = StickyWrapper;
 exports.default = _default;

package/lib-module/Sticky.js

@@ -5,7 +5,6 @@ import StickyWrapper from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 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 = {
@@ -15,20 +14,17 @@ function createObserver(ref, callback) {
     let [e] = _ref;
     const isNotVisibleInViewport = e.intersectionRatio < 1;
     let correctYPosition = true;
-
     if (workWithViewport) {
       const {
         y
       } = e.boundingClientRect;
       correctYPosition = y < 0;
     }
-
     callback(isNotVisibleInViewport && correctYPosition);
   }, options);
   observer.observe(ref.current);
   return observer;
 }
-
 const Sticky = _ref2 => {
   let {
     children,
@@ -55,31 +51,25 @@ const Sticky = _ref2 => {
     if (observer) {
       observer.disconnect();
     }
-
     if (variant === 'default' || variant === 'hidden') {
       setObserver(createObserver(sentinelTopRef, 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);
-
         if (intersected) {
           var _stickyWrapperRef$cur3;
-
           (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
         }
       }, workWithViewport));
     }
-
     if (variant === 'alternate') {
       setObserver(createObserver(sentinelBottomRef, intersected => {
         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);
       }, workWithViewport));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [variant]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
@@ -102,26 +92,22 @@ const Sticky = _ref2 => {
     })]
   });
 };
-
 Sticky.propTypes = {
   /**
    * Sets top and bottom padding using the theme's spacing scale.
    *
    */
   vertical: spacingProps.types.spacingValue,
-
   /**
    * Sets left and right padding using the theme's spacing scale.
    *
    */
   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/package.json

@@ -4,14 +4,14 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.66.0",
+    "@telus-uds/components-base": "1.67.0",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.43.0",
+    "@telus-uds/system-theme-tokens": "^2.44.0",
     "prop-types": "^15.7.2",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@telus-uds/components-web": "^2.21.2",
+    "@telus-uds/components-web": "^2.22.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.31"
+  "version": "1.1.32"
 }