@carbon/ibmdotcom-utilities 1.32.0-rc.0 → 1.32.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.32.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.32.0...@carbon/ibmdotcom-utilities@1.32.1) (2022-04-01)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
+# [1.32.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.32.0-rc.1...@carbon/ibmdotcom-utilities@1.32.0) (2022-03-28)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
+# [1.32.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.32.0-rc.0...@carbon/ibmdotcom-utilities@1.32.0-rc.1) (2022-03-17)
+
+
+### Features
+
+* **scrolling-utility:** Add new utility to mimic dotcom-shell functionality ([#8434](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8434)) ([d06b45a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d06b45a))
+
+
+
+
+
 # [1.32.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.31.0...@carbon/ibmdotcom-utilities@1.32.0-rc.0) (2022-03-16)
 
 

package/es/utilities/StickyHeader/StickyHeader.js

@@ -0,0 +1,253 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { baseFontSize, breakpoints } from '@carbon/layout';
+import ddsSettings from '../settings/settings.js';
+import root from 'window-or-global';
+import settings from 'carbon-components/es/globals/js/settings';
+var prefix = settings.prefix;
+var ddsPrefix = ddsSettings.stablePrefix;
+var gridBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
+
+var StickyHeader = /*#__PURE__*/function () {
+  function StickyHeader() {
+    _classCallCheck(this, StickyHeader);
+
+    this.ownerDocument = root.document;
+    this._banner = undefined;
+    this._hasBanner = false;
+    this._lastScrollPosition = 0;
+    this._leadspaceWithSearch = undefined;
+    this._leadspaceSearchBar = undefined;
+    this._localeModal = undefined;
+    this._masthead = undefined;
+    this._mastheadL0 = undefined;
+    this._mastheadL1 = undefined;
+    this._tableOfContents = undefined;
+    this._tableOfContentsInnerBar = undefined;
+    this._tableOfContentsLayout = undefined;
+    this._throttled = false;
+    this._resizeObserver = new ResizeObserver(this._handleResize.bind(this));
+    root.addEventListener('scroll', this._throttledHandler.bind(this));
+  }
+  /**
+   * Create (if needed) and return the globally-scoped instance of `this`.
+   */
+
+
+  _createClass(StickyHeader, [{
+    key: "_validateComponent",
+
+    /**
+     * Compares the tag name of the component provided to what we expect it to be
+     *
+     * @param {HTMLElement} component The component provided
+     * @param {string} expected The lowercase tag name expected
+     * @throws {TypeError} Throws error if component tag name doesn't match expected string
+     * @returns {boolean} Returns true if component tag name matches expected string
+     */
+    value: function _validateComponent(component, expected) {
+      var received = component.tagName.toLowerCase();
+
+      if (received !== expected) {
+        throw new TypeError("".concat(expected, " expected, ").concat(received, " provided"));
+      } else {
+        return true;
+      }
+    }
+  }, {
+    key: "_tableOfContentsStickyUpdate",
+    value: function _tableOfContentsStickyUpdate() {
+      var toc = this._tableOfContents;
+      var tocRoot = toc.shadowRoot;
+      var desktopSelector = ".".concat(ddsPrefix, "-ce--table-of-contents__items-container");
+
+      if (window.outerWidth > gridBreakpoint) {
+        if (toc.layout === 'horizontal') {
+          this._tableOfContentsInnerBar = tocRoot.querySelector(".".concat(prefix, "--tableofcontents__navbar"));
+          this._tableOfContentsLayout = 'horizontal';
+        } else {
+          this._tableOfContentsInnerBar = tocRoot.querySelector(desktopSelector);
+        }
+      } else {
+        this._tableOfContentsInnerBar = tocRoot.querySelector(".".concat(prefix, "--tableofcontents__sidebar"));
+      }
+    }
+  }, {
+    key: "_throttledHandler",
+
+    /**
+     * Rate-limits the scroll event handler
+     */
+    value: function _throttledHandler() {
+      var _this = this;
+
+      if (!this._throttled) {
+        this._throttled = true;
+
+        this._handleScroll();
+
+        setTimeout(function () {
+          _this._throttled = false;
+        }, 20);
+      }
+    }
+  }, {
+    key: "_handleResize",
+    value: function _handleResize() {
+      var hasBanner = this._hasBanner,
+          masthead = this._masthead,
+          toc = this._tableOfContents,
+          tocLayout = this._tableOfContentsLayout;
+
+      if (toc && masthead) {
+        this._tableOfContentsStickyUpdate();
+
+        if (window.innerWidth >= gridBreakpoint && tocLayout !== 'horizontal' && !hasBanner) {
+          masthead.style.top = '0';
+        } else {
+          // This has to happen after the tocStickyUpdate method.
+          var tocInner = this._tableOfContentsInnerBar;
+
+          if (masthead.offsetTop === 0) {
+            tocInner.style.top = "".concat(masthead.offsetHeight, "px");
+          }
+        }
+
+        this._handleScroll();
+      }
+    }
+  }, {
+    key: "_handleScroll",
+    value: function _handleScroll() {
+      var _StickyHeader$global = StickyHeader.global,
+          oldY = _StickyHeader$global._lastScrollPosition,
+          banner = _StickyHeader$global._banner,
+          masthead = _StickyHeader$global._masthead,
+          mastheadL0 = _StickyHeader$global._mastheadL0,
+          mastheadL1 = _StickyHeader$global._mastheadL1,
+          localeModal = _StickyHeader$global._localeModal,
+          toc = _StickyHeader$global._tableOfContents,
+          tocInner = _StickyHeader$global._tableOfContentsInnerBar;
+      if (localeModal && localeModal.hasAttribute('open')) return;
+      var newY = window.scrollY;
+      this._lastScrollPosition = newY;
+      var maxScrollaway = 0;
+      var topmostElement = masthead || tocInner;
+
+      if (masthead && tocInner) {
+        var tocIsAtTop = tocInner.getBoundingClientRect().top <= masthead.offsetTop + masthead.offsetHeight + 1;
+        var tocShouldStick = toc.layout === 'horizontal' || window.innerWidth < gridBreakpoint;
+
+        if (tocIsAtTop && (tocShouldStick || mastheadL1)) {
+          maxScrollaway += masthead.offsetHeight;
+
+          if (mastheadL1 && !tocShouldStick) {
+            maxScrollaway -= mastheadL1.offsetHeight;
+          }
+        } else if (mastheadL0 && mastheadL1) {
+          maxScrollaway += mastheadL0.offsetHeight;
+        }
+
+        var cumulativeOffset = Math.max(Math.min(topmostElement.offsetTop + oldY - newY, 0), maxScrollaway * -1);
+
+        if (banner) {
+          cumulativeOffset += Math.max(banner.offsetHeight - newY, 0);
+        }
+
+        if (masthead) {
+          masthead.style.transition = 'none';
+          masthead.style.top = "".concat(cumulativeOffset, "px");
+          cumulativeOffset += masthead.offsetHeight;
+        }
+
+        if (tocInner) {
+          tocInner.style.transition = 'none';
+          tocInner.style.top = "".concat(cumulativeOffset, "px");
+          cumulativeOffset += tocInner.offsetHeight;
+        }
+      }
+    }
+  }, {
+    key: "banner",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-universal-banner"))) {
+        this._banner = component;
+        this.hasBanner = true;
+
+        if (this._masthead) {
+          this._masthead.setAttribute('with-banner', '');
+        }
+      }
+    }
+  }, {
+    key: "leadspaceWithSearch",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-leadspace-with-search"))) {
+        this._leadspaceWithSearch = component;
+        this._leadspaceWithSearchBar = component.querySelector('dds-search-with-typeahead');
+      }
+    }
+  }, {
+    key: "localeModal",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-locale-modal"))) {
+        this._localeModal = component;
+      }
+    }
+  }, {
+    key: "masthead",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-masthead"))) {
+        this._masthead = component;
+        if (this._banner) this._masthead.setAttribute('with-banner', '');
+        this._mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
+        this._mastheadL1 = component.querySelector("".concat(ddsPrefix, "-masthead-l1"));
+      }
+    }
+  }, {
+    key: "tableOfContents",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-table-of-contents"))) {
+        this._tableOfContents = component;
+
+        this._tableOfContentsStickyUpdate();
+
+        this._resizeObserver.observe(this._tableOfContents);
+      }
+    }
+  }], [{
+    key: "isNecessary",
+
+    /**
+     * True if dotcom shell is not present on page.
+     *
+     * @returns {boolean} true/false
+     */
+    value: function isNecessary() {
+      return Boolean(!root.document.querySelector("".concat(ddsPrefix, "-dotcom-shell-container")));
+    }
+  }, {
+    key: "global",
+    get: function get() {
+      if (!Object.prototype.hasOwnProperty.call(root, 'stickyHeader')) {
+        root.stickyHeader = new StickyHeader();
+      }
+
+      return root.stickyHeader;
+    }
+  }]);
+
+  return StickyHeader;
+}();
+
+export default StickyHeader;

package/es/utilities/StickyHeader/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default as StickyHeader } from './StickyHeader';

package/es/utilities/settings/settings.js

@@ -11,11 +11,11 @@
  * @exports ibmdotcom.settings
  * @type {object} Settings object
  * @property {string} [prefix=dds]
- * Carbon for IBM.com v1.32.0',
+ * Carbon for IBM.com v1.32.1',
  *
  */
 var settings = {
-  version: 'Carbon for IBM.com v1.32.0',
+  version: 'Carbon for IBM.com v1.32.1',
   stablePrefix: 'dds'
 };
 export default settings;

package/lib/utilities/StickyHeader/StickyHeader.js

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _layout = require("@carbon/layout");
+
+var _settings = _interopRequireDefault(require("../settings/settings.js"));
+
+var _windowOrGlobal = _interopRequireDefault(require("window-or-global"));
+
+var _settings2 = _interopRequireDefault(require("carbon-components/umd/globals/js/settings"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var prefix = _settings2.default.prefix;
+var ddsPrefix = _settings.default.stablePrefix;
+
+var gridBreakpoint = parseFloat(_layout.breakpoints.lg.width) * _layout.baseFontSize;
+
+var StickyHeader = /*#__PURE__*/function () {
+  function StickyHeader() {
+    _classCallCheck(this, StickyHeader);
+
+    this.ownerDocument = _windowOrGlobal.default.document;
+    this._banner = undefined;
+    this._hasBanner = false;
+    this._lastScrollPosition = 0;
+    this._leadspaceWithSearch = undefined;
+    this._leadspaceSearchBar = undefined;
+    this._localeModal = undefined;
+    this._masthead = undefined;
+    this._mastheadL0 = undefined;
+    this._mastheadL1 = undefined;
+    this._tableOfContents = undefined;
+    this._tableOfContentsInnerBar = undefined;
+    this._tableOfContentsLayout = undefined;
+    this._throttled = false;
+    this._resizeObserver = new ResizeObserver(this._handleResize.bind(this));
+
+    _windowOrGlobal.default.addEventListener('scroll', this._throttledHandler.bind(this));
+  }
+  /**
+   * Create (if needed) and return the globally-scoped instance of `this`.
+   */
+
+
+  _createClass(StickyHeader, [{
+    key: "_validateComponent",
+
+    /**
+     * Compares the tag name of the component provided to what we expect it to be
+     *
+     * @param {HTMLElement} component The component provided
+     * @param {string} expected The lowercase tag name expected
+     * @throws {TypeError} Throws error if component tag name doesn't match expected string
+     * @returns {boolean} Returns true if component tag name matches expected string
+     */
+    value: function _validateComponent(component, expected) {
+      var received = component.tagName.toLowerCase();
+
+      if (received !== expected) {
+        throw new TypeError("".concat(expected, " expected, ").concat(received, " provided"));
+      } else {
+        return true;
+      }
+    }
+  }, {
+    key: "_tableOfContentsStickyUpdate",
+    value: function _tableOfContentsStickyUpdate() {
+      var toc = this._tableOfContents;
+      var tocRoot = toc.shadowRoot;
+      var desktopSelector = ".".concat(ddsPrefix, "-ce--table-of-contents__items-container");
+
+      if (window.outerWidth > gridBreakpoint) {
+        if (toc.layout === 'horizontal') {
+          this._tableOfContentsInnerBar = tocRoot.querySelector(".".concat(prefix, "--tableofcontents__navbar"));
+          this._tableOfContentsLayout = 'horizontal';
+        } else {
+          this._tableOfContentsInnerBar = tocRoot.querySelector(desktopSelector);
+        }
+      } else {
+        this._tableOfContentsInnerBar = tocRoot.querySelector(".".concat(prefix, "--tableofcontents__sidebar"));
+      }
+    }
+  }, {
+    key: "_throttledHandler",
+
+    /**
+     * Rate-limits the scroll event handler
+     */
+    value: function _throttledHandler() {
+      var _this = this;
+
+      if (!this._throttled) {
+        this._throttled = true;
+
+        this._handleScroll();
+
+        setTimeout(function () {
+          _this._throttled = false;
+        }, 20);
+      }
+    }
+  }, {
+    key: "_handleResize",
+    value: function _handleResize() {
+      var hasBanner = this._hasBanner,
+          masthead = this._masthead,
+          toc = this._tableOfContents,
+          tocLayout = this._tableOfContentsLayout;
+
+      if (toc && masthead) {
+        this._tableOfContentsStickyUpdate();
+
+        if (window.innerWidth >= gridBreakpoint && tocLayout !== 'horizontal' && !hasBanner) {
+          masthead.style.top = '0';
+        } else {
+          // This has to happen after the tocStickyUpdate method.
+          var tocInner = this._tableOfContentsInnerBar;
+
+          if (masthead.offsetTop === 0) {
+            tocInner.style.top = "".concat(masthead.offsetHeight, "px");
+          }
+        }
+
+        this._handleScroll();
+      }
+    }
+  }, {
+    key: "_handleScroll",
+    value: function _handleScroll() {
+      var _StickyHeader$global = StickyHeader.global,
+          oldY = _StickyHeader$global._lastScrollPosition,
+          banner = _StickyHeader$global._banner,
+          masthead = _StickyHeader$global._masthead,
+          mastheadL0 = _StickyHeader$global._mastheadL0,
+          mastheadL1 = _StickyHeader$global._mastheadL1,
+          localeModal = _StickyHeader$global._localeModal,
+          toc = _StickyHeader$global._tableOfContents,
+          tocInner = _StickyHeader$global._tableOfContentsInnerBar;
+      if (localeModal && localeModal.hasAttribute('open')) return;
+      var newY = window.scrollY;
+      this._lastScrollPosition = newY;
+      var maxScrollaway = 0;
+      var topmostElement = masthead || tocInner;
+
+      if (masthead && tocInner) {
+        var tocIsAtTop = tocInner.getBoundingClientRect().top <= masthead.offsetTop + masthead.offsetHeight + 1;
+        var tocShouldStick = toc.layout === 'horizontal' || window.innerWidth < gridBreakpoint;
+
+        if (tocIsAtTop && (tocShouldStick || mastheadL1)) {
+          maxScrollaway += masthead.offsetHeight;
+
+          if (mastheadL1 && !tocShouldStick) {
+            maxScrollaway -= mastheadL1.offsetHeight;
+          }
+        } else if (mastheadL0 && mastheadL1) {
+          maxScrollaway += mastheadL0.offsetHeight;
+        }
+
+        var cumulativeOffset = Math.max(Math.min(topmostElement.offsetTop + oldY - newY, 0), maxScrollaway * -1);
+
+        if (banner) {
+          cumulativeOffset += Math.max(banner.offsetHeight - newY, 0);
+        }
+
+        if (masthead) {
+          masthead.style.transition = 'none';
+          masthead.style.top = "".concat(cumulativeOffset, "px");
+          cumulativeOffset += masthead.offsetHeight;
+        }
+
+        if (tocInner) {
+          tocInner.style.transition = 'none';
+          tocInner.style.top = "".concat(cumulativeOffset, "px");
+          cumulativeOffset += tocInner.offsetHeight;
+        }
+      }
+    }
+  }, {
+    key: "banner",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-universal-banner"))) {
+        this._banner = component;
+        this.hasBanner = true;
+
+        if (this._masthead) {
+          this._masthead.setAttribute('with-banner', '');
+        }
+      }
+    }
+  }, {
+    key: "leadspaceWithSearch",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-leadspace-with-search"))) {
+        this._leadspaceWithSearch = component;
+        this._leadspaceWithSearchBar = component.querySelector('dds-search-with-typeahead');
+      }
+    }
+  }, {
+    key: "localeModal",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-locale-modal"))) {
+        this._localeModal = component;
+      }
+    }
+  }, {
+    key: "masthead",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-masthead"))) {
+        this._masthead = component;
+        if (this._banner) this._masthead.setAttribute('with-banner', '');
+        this._mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
+        this._mastheadL1 = component.querySelector("".concat(ddsPrefix, "-masthead-l1"));
+      }
+    }
+  }, {
+    key: "tableOfContents",
+    set: function set(component) {
+      if (this._validateComponent(component, "".concat(ddsPrefix, "-table-of-contents"))) {
+        this._tableOfContents = component;
+
+        this._tableOfContentsStickyUpdate();
+
+        this._resizeObserver.observe(this._tableOfContents);
+      }
+    }
+  }], [{
+    key: "isNecessary",
+
+    /**
+     * True if dotcom shell is not present on page.
+     *
+     * @returns {boolean} true/false
+     */
+    value: function isNecessary() {
+      return Boolean(!_windowOrGlobal.default.document.querySelector("".concat(ddsPrefix, "-dotcom-shell-container")));
+    }
+  }, {
+    key: "global",
+    get: function get() {
+      if (!Object.prototype.hasOwnProperty.call(_windowOrGlobal.default, 'stickyHeader')) {
+        _windowOrGlobal.default.stickyHeader = new StickyHeader();
+      }
+
+      return _windowOrGlobal.default.stickyHeader;
+    }
+  }]);
+
+  return StickyHeader;
+}();
+
+var _default = StickyHeader;
+exports.default = _default;

package/lib/utilities/StickyHeader/index.js

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

package/lib/utilities/settings/settings.js

@@ -18,11 +18,11 @@ exports.default = void 0;
  * @exports ibmdotcom.settings
  * @type {object} Settings object
  * @property {string} [prefix=dds]
- * Carbon for IBM.com v1.32.0',
+ * Carbon for IBM.com v1.32.1',
  *
  */
 var settings = {
-  version: 'Carbon for IBM.com v1.32.0',
+  version: 'Carbon for IBM.com v1.32.1',
   stablePrefix: 'dds'
 };
 var _default = settings;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "1.32.0-rc.0",
+  "version": "1.32.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,9 +48,9 @@
     "upgrade-carbon": "yarn upgrade-interactive carbon-components --latest --exact"
   },
   "dependencies": {
-    "@carbon/telemetry": "0.0.0-alpha.6",
+    "@carbon/telemetry": "0.1.0",
     "axios": "~0.21.4",
-    "carbon-components": "10.54.0",
+    "carbon-components": "10.55.1",
     "isomorphic-dompurify": "0.4.0",
     "js-cookie": "^2.2.1",
     "marked": "^4.0.10",
@@ -102,5 +102,5 @@
   "release": {
     "branch": "main"
   },
-  "gitHead": "2523b2ca28d7f9353cd354ad5770755da9c5bfeb"
+  "gitHead": "f63d94aaed3d69183a0c0313a5bdb53fd5065d48"
 }