@telus-uds/components-community.sticky 2.1.4 → 3.0.1

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-community.sticky
 
-This log was last generated on Wed, 22 Jan 2025 21:06:14 GMT and should not be manually modified.
+This log was last generated on Mon, 10 Feb 2025 17:30:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.0.1
+
+Mon, 10 Feb 2025 17:30:58 GMT
+
+### Patches
+
+- Bump @telus-uds/components-base to v3.1.0
+- Bump @telus-uds/components-web to v4.1.0
+- Bump @telus-uds/system-theme-tokens to v4.1.0
+
+## 3.0.0
+
+Fri, 31 Jan 2025 20:53:28 GMT
+
+### Major changes
+
+- Add CommonJS builds along with ESM (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v3.0.0
+- Bump @telus-uds/components-web to v4.0.0
+- Bump @telus-uds/system-constants to v3.0.0
+- Bump @telus-uds/system-theme-tokens to v4.0.0
+
 ## 2.1.4
 
-Wed, 22 Jan 2025 21:06:14 GMT
+Wed, 22 Jan 2025 21:08:36 GMT
 
 ### Patches
 

package/jest.config.cjs

@@ -11,7 +11,7 @@ module.exports = () => ({
     // mock icon imports as in https://jestjs.io/docs/webpack#mocking-css-modules
     '\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
     '\\.css': '<rootDir>/__mocks__/styleMock.js',
-    '^@telus-uds/components-base/server$': '<rootDir>/../../../components-base/lib/server.js'
+    '^@telus-uds/components-base/server$': '<rootDir>/../../../components-base/lib/cjs/server.js'
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   transformIgnorePatterns: [

package/lib/cjs/Sticky.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(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(e) { return e && e.__esModule ? e : { default: e }; }
+function createObserver(ref, callback) {
+  let workWithViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  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);
+  });
+  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,
+    position = 'top',
+    shadow = true,
+    onStick = () => {},
+    throttleTime = 100,
+    throttleConfig = {
+      trailing: true
+    }
+  } = _ref2;
+  // Position "bottom" does not support the "hidden" variant.
+  if (variant === 'hidden' && position === 'bottom') {
+    // eslint-disable-next-line no-param-reassign
+    variant = 'default';
+  }
+  const sentinelTopRef = _react.default.useRef();
+  const sentinelBottomRef = _react.default.useRef();
+  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(sentinelPositionRef, intersected => {
+        stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected);
+        stickyWrapperRef.current?.classList.toggle(position, intersected);
+        if (intersected) {
+          stickyWrapperRef.current?.classList.remove('pristine');
+        }
+        onStickThrottled(intersected);
+      }, workWithViewport));
+    }
+    if (variant === 'alternate') {
+      setObserver(createObserver(sentinelBottomRef, intersected => {
+        stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected);
+        stickyWrapperRef.current?.classList.toggle('bottom', intersected);
+        onStickThrottled(intersected);
+      }, workWithViewport));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [variant]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "sentinelTop",
+      ref: sentinelTopRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.default, {
+      className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
+      ref: stickyWrapperRef,
+      shadow: shadow,
+      position: position,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "sticky-element",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+          vertical: vertical,
+          horizontal: horizontal,
+          children: children
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "sentinelBottom",
+      ref: sentinelBottomRef
+    })]
+  });
+};
+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.
+   */
+  children: _propTypes.default.node.isRequired,
+  variant: _propTypes.default.oneOf(['default', 'alternate', 'hidden']),
+  /**
+   * Sets whether sticky component is stuck to top or bottom of page.
+   * Note: Position "bottom" does not support the "hidden" variant.
+   */
+  position: _propTypes.default.oneOf(['top', 'bottom']),
+  /**
+   * Adds shadow to sticky component.
+   */
+  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 = exports.default = Sticky;

package/lib/cjs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Sticky", {
+  enumerable: true,
+  get: function () {
+    return _Sticky.default;
+  }
+});
+exports.default = void 0;
+var _Sticky = _interopRequireDefault(require("./Sticky"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Sticky.default;

package/lib/cjs/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StickyWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "styles__StickyWrapper",
+  componentId: "[object Object]__sc-160gk65-0"
+})(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events: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);}}"], props => props.position === 'top' ? (0, _styledComponents.css)(["top:0;"]) : (0, _styledComponents.css)(["bottom:0;"]), props => props.position === 'top' && (0, _styledComponents.css)(["top:0px;"]), props => props.position === 'bottom' && (0, _styledComponents.css)(["bottom:0px;"]), props => props.shadow && (0, _styledComponents.css)(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && (0, _styledComponents.css)([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && (0, _styledComponents.css)(["animation:0.6s shadowOut forwards;"]));
+var _default = exports.default = StickyWrapper;

package/lib/esm/styles.js

@@ -0,0 +1,6 @@
+import styled, { css } from 'styled-components';
+const StickyWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__StickyWrapper",
+  componentId: "[object Object]__sc-160gk65-0"
+})(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events: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);}}"], props => props.position === 'top' ? css(["top:0;"]) : css(["bottom:0;"]), props => props.position === 'top' && css(["top:0px;"]), props => props.position === 'bottom' && css(["bottom:0px;"]), props => props.shadow && css(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && css([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && css(["animation:0.6s shadowOut forwards;"]));
+export default StickyWrapper;

package/package.json

@@ -1,14 +1,13 @@
 {
   "author": "TELUS Digital",
-  "type": "module",
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "^2.5.0",
-    "@telus-uds/components-web": "^3.4.0",
-    "@telus-uds/system-constants": "^2.0.0",
-    "@telus-uds/system-theme-tokens": "^3.3.0",
+    "@telus-uds/components-base": "^3.1.0",
+    "@telus-uds/components-web": "^4.1.0",
+    "@telus-uds/system-constants": "^3.0.0",
+    "@telus-uds/system-theme-tokens": "^4.1.0",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "styled-components": "^5.3.10"
@@ -28,14 +27,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "main": "lib/index.js",
-  "module": "lib/index.js",
-  "exports": {
-    ".": {
-      "import": "./lib/index.js",
-      "default": "./lib/index.js"
-    }
-  },
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/telus/universal-design-system.git"
@@ -45,11 +38,13 @@
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
     "test": "jest",
-    "build": "babel src -d lib --env-name module"
+    "build:cjs": "babel src -d lib/cjs",
+    "build:esm": "babel src -d lib/esm --env-name module",
+    "build": "npm run build:cjs && npm run build:esm"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "2.1.4"
+  "version": "3.0.1"
 }

package/src/styles.js

@@ -1,6 +1,4 @@
-import { styledComponents } from '@telus-uds/components-web'
-
-const { styled, css } = styledComponents
+import styled, { css } from 'styled-components'
 
 const StickyWrapper = styled.div`
   ${(props) =>

package/lib/styles.js

@@ -1,112 +0,0 @@
-import { styledComponents } from '@telus-uds/components-web';
-const {
-  styled,
-  css
-} = styledComponents;
-const StickyWrapper = styled.div`
-  ${props => props.position === 'top' ? css`
-          top: 0;
-        ` : css`
-          bottom: 0;
-        `}
-
-  &.sticky-mode {
-    &.alternate,
-    &.default {
-      position: -webkit-sticky;
-      position: sticky;
-      z-index: 1;
-      ${props => props.position === 'top' && css`
-          top: 0px;
-        `}
-      ${props => props.position === 'bottom' && css`
-          bottom: 0px;
-        `}
-      ${props => props.shadow && css`
-          box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
-        `}
-    }
-
-    &.hidden {
-      animation: 0.3s animateIn forwards;
-      ${props => props.shadow && css`
-          .sticky-element {
-            animation: 0.3s shadowIn forwards;
-          }
-        `}
-    }
-  }
-  &.alternate {
-  }
-  &.hidden {
-    position: sticky;
-    pointer-events: none;
-    height: 0px;
-    min-height: 0px;
-    max-height: 0px;
-    animation: 0.6s animateOut forwards;
-    &.pristine {
-      display: none;
-    }
-    .sticky-element {
-      background: white;
-      ${props => props.shadow && css`
-          animation: 0.6s shadowOut forwards;
-        `}
-    }
-  }
-
-  .sticky-element {
-    background: #ffffff;
-  }
-
-  @keyframes animateIn {
-    from {
-      height: 0%;
-      pointer-events: none;
-      transform: translateY(-100vh);
-      opacity: 0;
-      z-index: -1;
-    }
-    to {
-      height: 100%;
-      pointer-events: all;
-      transform: translateY(0);
-      opacity: 1;
-      z-index: 1;
-    }
-  }
-  @keyframes animateOut {
-    from {
-      height: 100%;
-      pointer-events: all;
-      transform: translateY(0);
-      opacity: 1;
-      z-index: 1;
-    }
-    to {
-      height: 0%;
-      pointer-events: 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;