@telus-uds/components-community.sticky 1.1.19 → 1.1.20

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @telus-uds/components-community.sticky
 
-This log was last generated on Thu, 31 Aug 2023 17:58:49 GMT and should not be manually modified.
+This log was last generated on Tue, 12 Sep 2023 15:31:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.1.20
+
+Tue, 12 Sep 2023 15:31:31 GMT
+
+### Patches
+
+- remove and re add npmignore files (evander.owusu@telus.com)
+- Bump @telus-uds/components-base to v1.60.0
+- Bump @telus-uds/system-theme-tokens to v2.41.1
+- Bump @telus-uds/components-web to v2.18.0
+
 ## 1.1.19
 
-Thu, 31 Aug 2023 17:58:49 GMT
+Thu, 31 Aug 2023 18:02:14 GMT
 
 ### Patches
 

package/lib-module/Sticky.js

@@ -0,0 +1,131 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { spacingProps, Box } from '@telus-uds/components-base';
+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 = {
+    threshold: [1]
+  };
+  const observer = new IntersectionObserver(_ref => {
+    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,
+    variant = 'default',
+    vertical = {
+      xs: 0,
+      sm: 0,
+      lg: 0,
+      xl: 0
+    },
+    horizontal = {
+      xs: 0,
+      sm: 0,
+      lg: 0,
+      xl: 0
+    },
+    workWithViewport = true
+  } = _ref2;
+  const sentinelTopRef = useRef();
+  const sentinelBottomRef = useRef();
+  const stickyWrapperRef = useRef();
+  const [observer, setObserver] = useState();
+  useEffect(() => {
+    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
+
+  }, [variant]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "sentinelTop",
+      ref: sentinelTopRef
+    }), /*#__PURE__*/_jsx(StickyWrapper, {
+      className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
+      ref: stickyWrapperRef,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "sticky-element",
+        children: /*#__PURE__*/_jsx(Box, {
+          vertical: vertical,
+          horizontal: horizontal,
+          children: children
+        })
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "sentinelBottom",
+      ref: sentinelBottomRef
+    })]
+  });
+};
+
+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.
+   */
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['default', 'alternate', 'hidden'])
+};
+export default Sticky;

package/lib-module/index.js

@@ -0,0 +1,3 @@
+import Sticky from './Sticky';
+export { default as Sticky } from './Sticky';
+export default Sticky;

package/lib-module/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+const StickyWrapper = /*#__PURE__*/styled.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);}}"]);
+export default StickyWrapper;

package/package.json

@@ -4,14 +4,14 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.59.2",
+    "@telus-uds/components-base": "1.60.0",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.41.0",
+    "@telus-uds/system-theme-tokens": "^2.41.1",
     "prop-types": "^15.7.2",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@telus-uds/components-web": "^2.17.2",
+    "@telus-uds/components-web": "^2.18.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.19"
+  "version": "1.1.20"
 }

package/.eslintrc.js

@@ -1,21 +0,0 @@
-const path = require('path')
-const base = require('../../../../eslintrc.base')
-
-base.rules['import/no-extraneous-dependencies'] = [
-  'error',
-  { packageDir: [__dirname, path.join(__dirname, '../..')] }
-]
-base.settings = {
-  ...base.settings,
-  'import/resolver': {
-    node: {
-      ...base.settings?.['import/resolver']?.node,
-      moduleDirectory: [
-        path.join(__dirname, '../../node_modules'),
-        path.join(__dirname, '../../../../node_modules')
-      ]
-    }
-  }
-}
-
-module.exports = base