@carbon/ibmdotcom-utilities 1.58.0 → 1.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -27,20 +27,26 @@ var StickyHeader = /*#__PURE__*/function () {
27
27
  function StickyHeader() {
28
28
  _classCallCheck(this, StickyHeader);
29
29
  this.ownerDocument = _windowOrGlobal.default.document;
30
- this._banner = undefined;
31
- this._cumulativeHeight = 0;
32
- this._hasBanner = false;
33
- this._lastScrollPosition = 0;
34
- this._leadspaceWithSearch = undefined;
35
- this._leadspaceSearchBar = undefined;
36
- this._leadspaceWithSearchStickyThreshold = 0;
37
- this._localeModal = undefined;
38
- this._masthead = undefined;
39
- this._mastheadL0 = undefined;
40
- this._mastheadL1 = undefined;
41
- this._tableOfContents = undefined;
42
- this._tableOfContentsInnerBar = undefined;
43
- this._tableOfContentsLayout = undefined;
30
+ this._state = {
31
+ cumulativeOffset: 0,
32
+ hasBanner: false,
33
+ leadspaceSearchThreshold: 0,
34
+ maxScrollaway: 0,
35
+ scrollPosPrevious: 0,
36
+ scrollPos: 0
37
+ };
38
+ this._elements = {
39
+ banner: undefined,
40
+ leadspaceSearch: undefined,
41
+ leadspaceSearchBar: undefined,
42
+ leadspaceSearchInput: undefined,
43
+ localeModal: undefined,
44
+ masthead: undefined,
45
+ mastheadL0: undefined,
46
+ mastheadL1: undefined,
47
+ tableOfContents: undefined,
48
+ tableOfContentsInnerBar: undefined
49
+ };
44
50
  this._throttled = false;
45
51
  this._resizeObserver = new ResizeObserver(this._handleResize.bind(this));
46
52
  _windowOrGlobal.default.addEventListener('scroll', this._throttledHandler.bind(this));
@@ -52,7 +58,7 @@ var StickyHeader = /*#__PURE__*/function () {
52
58
  _createClass(StickyHeader, [{
53
59
  key: "height",
54
60
  get: function get() {
55
- return this._cumulativeHeight;
61
+ return this._state.cumulativeOffset;
56
62
  }
57
63
 
58
64
  /**
@@ -73,74 +79,80 @@ var StickyHeader = /*#__PURE__*/function () {
73
79
  return true;
74
80
  }
75
81
  }
82
+
83
+ /**
84
+ * Stores references to TOC sub-elements that are relevant to current viewport
85
+ * dimensions.
86
+ */
76
87
  }, {
77
- key: "_tableOfContentsStickyUpdate",
78
- value: function _tableOfContentsStickyUpdate() {
79
- var toc = this._tableOfContents;
88
+ key: "_updateTableOfContentsRefs",
89
+ value: function _updateTableOfContentsRefs() {
90
+ var toc = this._elements.tableOfContents;
80
91
  var tocRoot = toc.shadowRoot;
81
- var desktopSelector = ".".concat(ddsPrefix, "-ce--table-of-contents__items-container");
82
- if (window.innerWidth > gridBreakpoint) {
83
- if (toc.layout === 'horizontal') {
84
- this._tableOfContentsInnerBar = tocRoot.querySelector(".".concat(prefix, "--tableofcontents__navbar"));
85
- this._tableOfContentsLayout = 'horizontal';
86
- } else {
87
- this._tableOfContentsInnerBar = tocRoot.querySelector(desktopSelector);
92
+ var selectors = {
93
+ desktop: {
94
+ vertical: ".".concat(ddsPrefix, "-ce--table-of-contents__items-container"),
95
+ horizontal: ".".concat(prefix, "--tableofcontents__navbar")
96
+ },
97
+ mobile: {
98
+ vertical: ".".concat(prefix, "--tableofcontents__sidebar"),
99
+ horizontal: ".".concat(prefix, "--tableofcontents__navbar")
88
100
  }
89
- } else {
90
- this._tableOfContentsInnerBar = tocRoot.querySelector(toc.layout === 'horizontal' ? ".".concat(prefix, "--tableofcontents__navbar") : ".".concat(prefix, "--tableofcontents__sidebar"));
91
- }
101
+ };
102
+ var viewportDimension = window.innerWidth >= gridBreakpoint ? 'desktop' : 'mobile';
103
+ this._elements.tableOfContentsInnerBar = tocRoot.querySelector(selectors[viewportDimension][toc.layout || 'vertical']);
92
104
  }
93
105
  }, {
94
106
  key: "banner",
95
107
  set: function set(component) {
96
108
  if (this._validateComponent(component, "".concat(ddsPrefix, "-universal-banner"))) {
97
- this._banner = component;
98
- this.hasBanner = true;
99
- if (this._masthead) {
100
- this._masthead.setAttribute('with-banner', '');
109
+ this._elements.banner = component;
110
+ this._state.hasBanner = true;
111
+ if (this._elements.masthead) {
112
+ this._elements.masthead.setAttribute('with-banner', '');
101
113
  }
102
- this._calculateCumulativeHeight();
114
+ this._manageStickyElements();
103
115
  }
104
116
  }
105
117
  }, {
106
- key: "leadspaceWithSearch",
118
+ key: "leadspaceSearch",
107
119
  set: function set(component) {
108
120
  if (this._validateComponent(component, "".concat(ddsPrefix, "-leadspace-with-search"))) {
109
- this._leadspaceWithSearch = component;
121
+ this._elements.leadspaceSearch = component;
110
122
  var leadspaceSearchBar = component.shadowRoot.querySelector(".".concat(prefix, "--search-container"));
111
- this._leadspaceSearchBar = leadspaceSearchBar;
112
- this._leadspaceWithSearchInput = component.querySelector("".concat(ddsPrefix, "-search-with-typeahead"));
113
- this._leadspaceWithSearchStickyThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
114
- this._calculateCumulativeHeight();
123
+ this._elements.leadspaceSearchBar = leadspaceSearchBar;
124
+ this._elements.leadspaceSearchInput = component.querySelector("".concat(ddsPrefix, "-search-with-typeahead"));
125
+ this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
126
+ this._manageStickyElements();
115
127
  }
116
128
  }
117
129
  }, {
118
130
  key: "localeModal",
119
131
  set: function set(component) {
120
132
  if (this._validateComponent(component, "".concat(ddsPrefix, "-locale-modal"))) {
121
- this._localeModal = component;
122
- this._calculateCumulativeHeight();
133
+ this._elements.localeModal = component;
134
+ this._manageStickyElements();
123
135
  }
124
136
  }
125
137
  }, {
126
138
  key: "masthead",
127
139
  set: function set(component) {
128
140
  if (this._validateComponent(component, "".concat(ddsPrefix, "-masthead"))) {
129
- this._masthead = component;
130
- if (this._banner) this._masthead.setAttribute('with-banner', '');
131
- this._mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
132
- this._mastheadL1 = component.querySelector("".concat(ddsPrefix, "-masthead-l1"));
133
- this._calculateCumulativeHeight();
141
+ this._elements.masthead = component;
142
+ if (this._elements.banner) this._elements.masthead.setAttribute('with-banner', '');
143
+ this._elements.mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
144
+ this._elements.mastheadL1 = component.querySelector("".concat(ddsPrefix, "-masthead-l1"));
145
+ this._manageStickyElements();
134
146
  }
135
147
  }
136
148
  }, {
137
149
  key: "tableOfContents",
138
150
  set: function set(component) {
139
151
  if (this._validateComponent(component, "".concat(ddsPrefix, "-table-of-contents"))) {
140
- this._tableOfContents = component;
141
- this._tableOfContentsStickyUpdate();
142
- this._resizeObserver.observe(this._tableOfContents);
143
- this._calculateCumulativeHeight();
152
+ this._elements.tableOfContents = component;
153
+ this._updateTableOfContentsRefs();
154
+ this._resizeObserver.observe(this._elements.tableOfContents);
155
+ this._manageStickyElements();
144
156
  }
145
157
  }
146
158
 
@@ -153,7 +165,7 @@ var StickyHeader = /*#__PURE__*/function () {
153
165
  var _this = this;
154
166
  if (!this._throttled) {
155
167
  this._throttled = true;
156
- this._calculateCumulativeHeight();
168
+ this._manageStickyElements();
157
169
  setTimeout(function () {
158
170
  _this._throttled = false;
159
171
  }, 20);
@@ -162,93 +174,190 @@ var StickyHeader = /*#__PURE__*/function () {
162
174
  }, {
163
175
  key: "_handleResize",
164
176
  value: function _handleResize() {
165
- var hasBanner = this._hasBanner,
166
- masthead = this._masthead,
167
- toc = this._tableOfContents,
168
- tocLayout = this._tableOfContentsLayout,
169
- leadspaceSearchBar = this._leadspaceSearchBar;
177
+ var hasBanner = this._state._hasBanner;
178
+ var _this$_elements = this._elements,
179
+ masthead = _this$_elements.masthead,
180
+ toc = _this$_elements.tableOfContents,
181
+ leadspaceSearchBar = _this$_elements.leadspaceSearchBar;
170
182
  if (toc && masthead) {
171
- this._tableOfContentsStickyUpdate();
172
- if (window.innerWidth >= gridBreakpoint && tocLayout !== 'horizontal' && !hasBanner) {
183
+ this._updateTableOfContentsRefs();
184
+ if (window.innerWidth >= gridBreakpoint && toc.layout !== 'horizontal' && !hasBanner) {
173
185
  masthead.style.top = '0';
174
186
  } else {
175
- // This has to happen after the tocStickyUpdate method.
176
- var tocInner = this._tableOfContentsInnerBar;
187
+ // This has to happen after the _updateTableOfContentsRefs method.
188
+ var tocInner = this._elements.tableOfContentsInnerBar;
177
189
  if (masthead.offsetTop === 0) {
178
190
  tocInner.style.top = "".concat(masthead.offsetHeight, "px");
179
191
  }
180
192
  }
181
- this._calculateCumulativeHeight();
193
+ this._manageStickyElements();
182
194
  }
183
195
  if (leadspaceSearchBar) {
184
- this._leadspaceWithSearchStickyThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
196
+ this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
185
197
  }
186
198
  }
199
+
200
+ /**
201
+ * Handles the banner given the current scroll position.
202
+ */
187
203
  }, {
188
- key: "_calculateCumulativeHeight",
189
- value: function _calculateCumulativeHeight() {
190
- var _StickyHeader$global = StickyHeader.global,
191
- oldY = _StickyHeader$global._lastScrollPosition,
192
- banner = _StickyHeader$global._banner,
193
- masthead = _StickyHeader$global._masthead,
194
- mastheadL0 = _StickyHeader$global._mastheadL0,
195
- mastheadL1 = _StickyHeader$global._mastheadL1,
196
- localeModal = _StickyHeader$global._localeModal,
197
- toc = _StickyHeader$global._tableOfContents,
198
- tocInner = _StickyHeader$global._tableOfContentsInnerBar,
199
- leadspaceSearch = _StickyHeader$global._leadspaceWithSearch,
200
- leadspaceSearchBar = _StickyHeader$global._leadspaceSearchBar,
201
- leadspaceSearchInput = _StickyHeader$global._leadspaceWithSearchInput,
202
- leadspaceSearchThreshold = _StickyHeader$global._leadspaceWithSearchStickyThreshold;
203
- var customPropertyName = this.constructor.customPropertyName;
204
- if (localeModal && localeModal.hasAttribute('open')) return;
205
- var newY = window.scrollY;
206
- this._lastScrollPosition = Math.max(0, newY);
204
+ key: "_handleBanner",
205
+ value: function _handleBanner() {
206
+ var banner = this._elements.banner;
207
+ var scrollPos = this._state.scrollPos;
208
+ this._state.cumulativeOffset += Math.max(banner.offsetHeight - scrollPos, 0);
209
+ }
207
210
 
208
- /**
209
- * maxScrollaway is a calculated value matching the height of all components
210
- * that are allowed to hide above the viewport.
211
- *
212
- * We should only have one sticky header showing as the page scrolls down.
213
- *
214
- * Items that stick, in order
215
- * - L0
216
- * - L1
217
- * - The TOC in horizontal bar form
218
- * - The leadspace with search (if no TOC)
219
- */
220
- var maxScrollaway = 0;
211
+ /**
212
+ * Handles the masthead given the current scroll position.
213
+ */
214
+ }, {
215
+ key: "_handleMasthead",
216
+ value: function _handleMasthead() {
217
+ var masthead = this._elements.masthead;
218
+ masthead.style.transition = 'none';
219
+ masthead.style.top = "".concat(this._state.cumulativeOffset, "px");
221
220
 
222
- // Calculate maxScrollaway values based on TOC positon
223
- var tocIsAtTop = false;
224
- var tocShouldStick = false;
225
- if (tocInner) {
226
- tocIsAtTop = tocInner.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1;
227
- tocShouldStick = toc.layout === 'horizontal' || window.innerWidth < gridBreakpoint;
228
- if (masthead && tocIsAtTop && (tocShouldStick || mastheadL1)) {
229
- maxScrollaway += masthead.offsetHeight;
230
- if (mastheadL1 && !tocShouldStick) {
231
- maxScrollaway -= mastheadL1.offsetHeight;
232
- }
233
- } else if (mastheadL0 && mastheadL1) {
234
- maxScrollaway += mastheadL0.offsetHeight;
221
+ // Masthead always sticks, therefore always add its height.
222
+ this._state.cumulativeOffset += masthead.offsetHeight;
223
+ }
224
+
225
+ /**
226
+ * Handles the table of contents given the current scroll position.
227
+ */
228
+ }, {
229
+ key: "_handleToc",
230
+ value: function _handleToc() {
231
+ var tableOfContentsInnerBar = this._elements.tableOfContentsInnerBar;
232
+ var tocShouldStick = this._state.tocShouldStick;
233
+ tableOfContentsInnerBar.style.transition = 'none';
234
+ tableOfContentsInnerBar.style.top = "".concat(this._state.cumulativeOffset, "px");
235
+ var tocIsStuck = Math.round(tableOfContentsInnerBar.getBoundingClientRect().top) <= this._state.cumulativeOffset + 1;
236
+ if (tocShouldStick && tocIsStuck) {
237
+ this._state.cumulativeOffset += tableOfContentsInnerBar.offsetHeight;
238
+ }
239
+ }
240
+
241
+ /**
242
+ * Handles the leadspace search given the current scroll position.
243
+ */
244
+ }, {
245
+ key: "_handleLeadspaceSearch",
246
+ value: function _handleLeadspaceSearch() {
247
+ var _this$_elements2 = this._elements,
248
+ leadspaceSearch = _this$_elements2.leadspaceSearch,
249
+ leadspaceSearchBar = _this$_elements2.leadspaceSearchBar,
250
+ leadspaceSearchInput = _this$_elements2.leadspaceSearchInput;
251
+ var leadspaceSearchThreshold = this._state.leadspaceSearchThreshold;
252
+ var searchShouldBeSticky = leadspaceSearch.getBoundingClientRect().bottom <= leadspaceSearchThreshold;
253
+ var searchIsSticky = leadspaceSearch.hasAttribute('sticky-search');
254
+ if (searchShouldBeSticky) {
255
+ if (!searchIsSticky) {
256
+ leadspaceSearch.style.paddingBottom = "".concat(leadspaceSearchBar.offsetHeight, "px");
257
+ leadspaceSearch.setAttribute('sticky-search', '');
258
+ leadspaceSearchInput.setAttribute('large', '');
259
+ window.requestAnimationFrame(function () {
260
+ leadspaceSearchBar.style.transitionDuration = '110ms';
261
+ leadspaceSearchBar.style.transform = 'translateY(0)';
262
+ });
235
263
  }
264
+ leadspaceSearchBar.style.top = "".concat(this._state.cumulativeOffset, "px");
265
+ this._state.cumulativeOffset += leadspaceSearchBar.offsetHeight;
266
+ } else if (searchIsSticky) {
267
+ leadspaceSearch.style.paddingBottom = '';
268
+ leadspaceSearch.removeAttribute('sticky-search');
269
+ leadspaceSearchInput.removeAttribute('large');
270
+ leadspaceSearchBar.style.transitionDuration = '';
271
+ leadspaceSearchBar.style.transform = '';
272
+ leadspaceSearchBar.style.top = '';
236
273
  }
274
+ }
237
275
 
238
- // Calculate maxScrollaway values based on leadspace search position
239
- if (!tocInner && leadspaceSearchBar) {
240
- var searchIsAtTop = leadspaceSearchBar.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1;
241
- if (masthead && searchIsAtTop) {
242
- maxScrollaway += masthead.offsetHeight;
276
+ /**
277
+ * Calculates a value matching the height of all components that are allowed
278
+ * to hide above the viewport.
279
+ *
280
+ * Adding an item's height to this value indicates we expect it to be hidden
281
+ * above the viewport.
282
+ *
283
+ * Items that stick, in order
284
+ * - L0
285
+ * - L1
286
+ * - The TOC in horizontal bar form
287
+ * - The leadspace with search (if no TOC)
288
+ */
289
+ }, {
290
+ key: "_calculateMaxScrollaway",
291
+ value: function _calculateMaxScrollaway() {
292
+ var _this$_elements3 = this._elements,
293
+ masthead = _this$_elements3.masthead,
294
+ mastheadL0 = _this$_elements3.mastheadL0,
295
+ mastheadL1 = _this$_elements3.mastheadL1,
296
+ tableOfContents = _this$_elements3.tableOfContents,
297
+ tableOfContentsInnerBar = _this$_elements3.tableOfContentsInnerBar,
298
+ leadspaceSearchBar = _this$_elements3.leadspaceSearchBar;
299
+
300
+ // Reset the value before performing any further calculations.
301
+ this._state.maxScrollaway = 0;
302
+
303
+ // Collect conditions we may want to test for to make logic easier to read.
304
+ var tocShouldStick = tableOfContents ? tableOfContents.layout === 'horizontal' || window.innerWidth < gridBreakpoint : false;
305
+ var tocIsAtTop = tableOfContentsInnerBar ? tableOfContentsInnerBar.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1 : false;
306
+ var searchIsAtTop = leadspaceSearchBar ? leadspaceSearchBar.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1 : false;
307
+ var tocIsAtSearch = leadspaceSearchBar && tableOfContentsInnerBar ? tableOfContentsInnerBar.getBoundingClientRect().top <= leadspaceSearchBar.getBoundingClientRect().bottom : false;
308
+ var mastheadL0IsActive = masthead === null || masthead === void 0 ? void 0 : masthead.querySelector('[expanded]');
309
+ var mastheadL1IsActive = mastheadL1 && mastheadL1.hasAttribute('active');
310
+
311
+ // Begin calculating maxScrollAway.
312
+
313
+ // If L0 is open, lock it to the top of the page.
314
+ if (mastheadL0 && mastheadL0IsActive) {
315
+ this._state.maxScrollaway = 0;
316
+ }
317
+ // If L1 is open, lock it to the top of the page.
318
+ else if (mastheadL1IsActive && mastheadL0) {
319
+ this._state.maxScrollaway = mastheadL0.offsetHeight;
320
+ } else {
321
+ // In cases where we have both an eligible ToC and leadspace search, we want
322
+ // the ToC to take precedence. Scroll away leadspace search.
323
+ if (searchIsAtTop && tocIsAtSearch && tocShouldStick) {
324
+ this._state.maxScrollaway += leadspaceSearchBar.offsetHeight;
325
+ }
326
+
327
+ // Scroll away entire masthead if either ToC or leadspace search is eligible
328
+ // to be the stuck element (unless L1 is open). Otherwise, scroll away the
329
+ // L0 if we have an L1.
330
+ if (searchIsAtTop || tocIsAtTop && tocShouldStick) {
331
+ if (masthead) {
332
+ this._state.maxScrollaway += masthead.offsetHeight;
333
+ }
334
+ } else if (masthead && mastheadL0 && mastheadL1) {
335
+ this._state.maxScrollaway += mastheadL0.offsetHeight;
243
336
  }
244
337
  }
338
+ }
339
+
340
+ /**
341
+ * Positions sticky elements. Does so by checking the scroll position and where
342
+ * tracked elements are in relation to it, then applying the correct styles to
343
+ * each element in succession to ensure that only one element is stuck to the
344
+ * top of the page, and all other elements that have been scrolled past can be
345
+ * revealed when scrolling back up.
346
+ */
347
+ }, {
348
+ key: "_positionElements",
349
+ value: function _positionElements() {
350
+ var _this$_elements4 = this._elements,
351
+ banner = _this$_elements4.banner,
352
+ masthead = _this$_elements4.masthead,
353
+ tocInner = _this$_elements4.tableOfContentsInnerBar,
354
+ leadspaceSearchBar = _this$_elements4.leadspaceSearchBar;
355
+ var oldY = this._state.scrollPosPrevious;
245
356
 
246
357
  /**
247
- * Cumulative offset is a calculated value used to set the `top` property of
248
- * components that stick to the top of the viewport.
249
- *
250
- * This value is equal to the difference between the previous scrollY and
251
- * the current scrollY values, but is positively and negatively limited.
358
+ * Reset to a value that is equal to the difference between the previous
359
+ * scrollY and the current scrollY values, but is positively and negatively
360
+ * limited.
252
361
  *
253
362
  * Positive limit: 0
254
363
  * all elements visible, starting at the top of the viewport.
@@ -258,55 +367,56 @@ var StickyHeader = /*#__PURE__*/function () {
258
367
  * with the elements that should be visible starting at the top of the
259
368
  * viewport.
260
369
  */
261
- var cumulativeOffset = Math.max(Math.min((masthead ? masthead.offsetTop : 0) + oldY - newY, 0), maxScrollaway * -1);
370
+ this._state.cumulativeOffset = Math.max(Math.min((masthead ? masthead.offsetTop : 0) + oldY - this._state.scrollPos, 0), this._state.maxScrollaway * -1);
371
+
372
+ /**
373
+ * Handle each potentially sticky element in the order we expect them to
374
+ * appear on the page. Important to do this sequentially for
375
+ * cumulativeOffset to be correctly calculated by the time each of these
376
+ * methods accesses it.
377
+ *
378
+ * @TODO One idea for improving this so the execution order doesn't matter
379
+ * is to collect our elements into an array ordered by document position,
380
+ * then loop over that array and execute a corresponding handler method.
381
+ */
262
382
  if (banner) {
263
- cumulativeOffset += Math.max(banner.offsetHeight - newY, 0);
383
+ this._handleBanner();
264
384
  }
265
385
  if (masthead) {
266
- masthead.style.transition = 'none';
267
- masthead.style.top = "".concat(cumulativeOffset, "px");
268
- cumulativeOffset += masthead.offsetHeight;
386
+ this._handleMasthead();
269
387
  }
270
- if (tocInner) {
271
- tocInner.style.transition = 'none';
272
- tocInner.style.top = "".concat(cumulativeOffset, "px");
273
- tocShouldStick = toc.layout === 'horizontal' || window.innerWidth < gridBreakpoint;
274
- var tocIsStuck = Math.round(tocInner.getBoundingClientRect().top) <= cumulativeOffset + 1;
275
- if (tocShouldStick && tocIsStuck) {
276
- cumulativeOffset += tocInner.offsetHeight;
277
- }
388
+ if (leadspaceSearchBar) {
389
+ this._handleLeadspaceSearch();
278
390
  }
279
- if (!tocInner && leadspaceSearchBar) {
280
- var searchShouldBeSticky = leadspaceSearch.getBoundingClientRect().bottom <= leadspaceSearchThreshold;
281
- var searchIsSticky = leadspaceSearch.hasAttribute('sticky-search');
282
- if (searchShouldBeSticky) {
283
- if (!searchIsSticky) {
284
- leadspaceSearch.style.paddingBottom = "".concat(leadspaceSearchBar.offsetHeight, "px");
285
- leadspaceSearch.setAttribute('sticky-search', '');
286
- leadspaceSearchInput.setAttribute('large', '');
287
- window.requestAnimationFrame(function () {
288
- leadspaceSearchBar.style.transitionDuration = '110ms';
289
- leadspaceSearchBar.style.transform = 'translateY(0)';
290
- });
291
- }
292
- leadspaceSearchBar.style.top = "".concat(cumulativeOffset, "px");
293
- cumulativeOffset += leadspaceSearchBar.offsetHeight;
294
- }
295
- if (!searchShouldBeSticky && searchIsSticky) {
296
- leadspaceSearch.removeAttribute('sticky-search');
297
- leadspaceSearch.style.paddingBottom = '';
298
- leadspaceSearchBar.style.top = '';
299
- leadspaceSearchBar.style.transitionDuration = '';
300
- leadspaceSearchBar.style.transform = '';
301
- leadspaceSearchInput.removeAttribute('large');
302
- }
391
+ if (tocInner) {
392
+ this._handleToc();
303
393
  }
394
+ }
395
+
396
+ /**
397
+ * Manages which elements are stuck and where they are positioned. We should
398
+ * only have one element stuck to the top of the viewport as the page scrolls
399
+ * down.
400
+ */
401
+ }, {
402
+ key: "_manageStickyElements",
403
+ value: function _manageStickyElements() {
404
+ var localeModal = this._elements.localeModal;
405
+ var scrollPosPrevious = this._state.scrollPos;
406
+
407
+ // Exit early if locale modal is open.
408
+ if (localeModal && localeModal.hasAttribute('open')) return;
409
+
410
+ // Store scroll positions.
411
+ this._state.scrollPosPrevious = scrollPosPrevious;
412
+ this._state.scrollPos = Math.max(0, window.scrollY);
304
413
 
305
- // Set internal property for use in scripts
306
- this._cumulativeHeight = cumulativeOffset;
414
+ // Given the current state, calculate how elements should be positioned.
415
+ this._calculateMaxScrollaway();
416
+ this._positionElements();
307
417
 
308
418
  // Set custom property for use in stylesheets
309
- _windowOrGlobal.default.document.documentElement.style.setProperty(customPropertyName, "".concat(this._cumulativeHeight, "px"));
419
+ _windowOrGlobal.default.document.documentElement.style.setProperty(this.constructor.customPropertyName, "".concat(this._state.cumulativeOffset, "px"));
310
420
  }
311
421
  }], [{
312
422
  key: "global",
@@ -17,10 +17,10 @@ exports.default = void 0;
17
17
  * @exports ibmdotcom.settings
18
18
  * @type {object} Settings object
19
19
  * @property {string} [prefix=dds]
20
- * Carbon for IBM.com v1.58.0',
20
+ * Carbon for IBM.com v1.59.0',
21
21
  */
22
22
  var settings = {
23
- version: 'Carbon for IBM.com v1.58.0',
23
+ version: 'Carbon for IBM.com v1.59.0',
24
24
  stablePrefix: 'dds'
25
25
  };
26
26
  var _default = exports.default = settings;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibmdotcom-utilities",
3
3
  "description": "Carbon for IBM.com Utilities",
4
- "version": "1.58.0",
4
+ "version": "1.59.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -50,7 +50,7 @@
50
50
  },
51
51
  "dependencies": {
52
52
  "@ibm/telemetry-js": "^1.3.0",
53
- "axios": "^1.6.0",
53
+ "axios": "^1.6.8",
54
54
  "carbon-components": "10.58.12",
55
55
  "isomorphic-dompurify": "0.27.0",
56
56
  "js-cookie": "^2.2.1",
@@ -92,5 +92,5 @@
92
92
  "rollup-plugin-terser": "^7.0.2",
93
93
  "whatwg-fetch": "^2.0.3"
94
94
  },
95
- "gitHead": "b3c53496b8863b2b27dfbfea9606b1097161690f"
95
+ "gitHead": "198bdef4ac7666807a6cab98dc8fda7307899b95"
96
96
  }
@@ -5402,10 +5402,10 @@
5402
5402
  * @exports ibmdotcom.settings
5403
5403
  * @type {object} Settings object
5404
5404
  * @property {string} [prefix=dds]
5405
- * Carbon for IBM.com v1.58.0',
5405
+ * Carbon for IBM.com v1.59.0',
5406
5406
  */
5407
5407
  var settings = {
5408
- version: 'Carbon for IBM.com v1.58.0',
5408
+ version: 'Carbon for IBM.com v1.59.0',
5409
5409
  stablePrefix: 'dds'
5410
5410
  };
5411
5411