@enact/limestone 1.3.0 → 1.10.0

package/PageViews/PageViewsRouter.js

@@ -7,11 +7,13 @@ exports.PageViewsRouter = PageViewsRouter;
 exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
+var _util = require("@enact/core/util");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _Panels = require("../internal/Panels");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["autoFocus", "children", "componentRef", "data-spotlight-id", "index", "onTransition", "onWillTransition", "rtl"],
+var _excluded = ["autoFocus", "bannerMode", "children", "componentRef", "data-spotlight-id", "index", "onFooterCloseClick", "onFooterNextClick", "onNextClick", "onPrevClick", "onTransition", "onWillTransition", "rtl", "showFooterButtons"],
   _excluded2 = ["onWillTransition"]; // single-index ViewManagers need some help knowing when the transition direction needs to change
 // because the index is always 0 from its perspective.
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -23,36 +25,45 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function useReverseTransition(index, rtl) {
-  var prevIndex = (0, _react.useRef)(index);
+  var prevIndex = (0, _util.usePrevious)(index);
   var reverse = false;
-  if (prevIndex.current !== index) {
-    reverse = rtl ? index > prevIndex.current : index < prevIndex.current;
+  if (prevIndex !== index) {
+    reverse = rtl ? index > prevIndex : index < prevIndex;
   }
-  prevIndex.current = index;
   return {
     reverseTransition: reverse
   };
 }
 
 /**
- * PageViewsRouter passes children, index and transition handlers
+ * PageViewsRouter passes children, index and transition handlers.
  *
  * @class PageViewsRouter
  * @memberof limestone/PageViews
  * @private
  */
 function PageViewsRouter(Wrapped) {
-  var PageViewsProvider = function PageViewsProvider(_ref) {
-    var autoFocus = _ref.autoFocus,
-      children = _ref.children,
-      componentRef = _ref.componentRef,
-      spotlightId = _ref['data-spotlight-id'],
-      _ref$index = _ref.index,
-      index = _ref$index === void 0 ? 0 : _ref$index,
-      onTransition = _ref.onTransition,
-      onWillTransition = _ref.onWillTransition,
-      rtl = _ref.rtl,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  var _PageViewsProvider = function PageViewsProvider(props) {
+    var pageViewsProviderProps = (0, _util.setDefaultProps)(props, {
+      index: 0
+    });
+    (0, _util.checkPropTypes)(_PageViewsProvider, pageViewsProviderProps);
+    var autoFocus = pageViewsProviderProps.autoFocus,
+      bannerMode = pageViewsProviderProps.bannerMode,
+      children = pageViewsProviderProps.children,
+      componentRef = pageViewsProviderProps.componentRef,
+      spotlightId = pageViewsProviderProps['data-spotlight-id'],
+      index = pageViewsProviderProps.index,
+      onFooterCloseClick = pageViewsProviderProps.onFooterCloseClick,
+      onFooterNextClick = pageViewsProviderProps.onFooterNextClick,
+      onNextClick = pageViewsProviderProps.onNextClick,
+      onPrevClick = pageViewsProviderProps.onPrevClick,
+      onTransition = pageViewsProviderProps.onTransition,
+      onWillTransition = pageViewsProviderProps.onWillTransition,
+      rtl = pageViewsProviderProps.rtl,
+      showFooterButtons = pageViewsProviderProps.showFooterButtons,
+      rest = _objectWithoutProperties(pageViewsProviderProps, _excluded);
+    var uniqueId = (0, _react.useId)();
     var totalIndex = _react.Children.count(children);
     var _useToggleRole = (0, _Panels.useToggleRole)(),
       a11yRef = _useToggleRole.ref,
@@ -63,8 +74,42 @@ function PageViewsRouter(Wrapped) {
     var ref = (0, _useChainRefs["default"])(autoFocusRef, a11yRef, componentRef);
     var _useReverseTransition = useReverseTransition(index, rtl),
       reverseTransition = _useReverseTransition.reverseTransition;
+    var navigationSource = (0, _react.useRef)(null); // 'internal-next' | 'internal-prev' | 'footer' | null
+
+    (0, _react.useEffect)(function () {
+      if (showFooterButtons && !bannerMode) {
+        _spotlight["default"].focus(spotlightId, {
+          enterTo: 'default-element'
+        });
+      }
+    }, [bannerMode, showFooterButtons, spotlightId]);
+    var handleNextClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'internal-next';
+      onNextClick === null || onNextClick === void 0 || onNextClick(ev);
+    }, [onNextClick]);
+    var handlePrevClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'internal-prev';
+      onPrevClick === null || onPrevClick === void 0 || onPrevClick(ev);
+    }, [onPrevClick]);
+    var handleFooterNextClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'footer';
+      onFooterNextClick === null || onFooterNextClick === void 0 || onFooterNextClick(ev);
+    }, [onFooterNextClick]);
+    var handleTransition = (0, _react.useCallback)(function (ev) {
+      if (showFooterButtons && !bannerMode) {
+        var source = navigationSource.current;
+        var newIndex = ev.index;
+        if (source === 'footer' || source === 'internal-next' && newIndex === totalIndex - 1 || source === 'internal-prev' && newIndex === 0) {
+          _spotlight["default"].focus(spotlightId, {
+            enterTo: 'default-element'
+          });
+        }
+      }
+      navigationSource.current = null;
+      onTransition === null || onTransition === void 0 || onTransition(ev);
+    }, [bannerMode, onTransition, showFooterButtons, spotlightId, totalIndex]);
     var _useFocusOnTransition = (0, _Panels.useFocusOnTransition)({
-        onTransition: onTransition,
+        onTransition: handleTransition,
         onWillTransition: onWillTransition,
         spotlightId: spotlightId
       }),
@@ -74,17 +119,30 @@ function PageViewsRouter(Wrapped) {
       focusOnWillTransition(ev);
       a11yOnWillTransition(ev);
     }, [a11yOnWillTransition, focusOnWillTransition]);
+    (0, _react.useEffect)(function () {
+      return function () {
+        _spotlight["default"].resume();
+      };
+    }, []);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread(_objectSpread({}, rest), transition), {}, {
+      bannerMode: bannerMode,
       componentRef: ref,
       "data-spotlight-id": spotlightId,
       index: index,
-      totalIndex: totalIndex,
+      onFooterCloseClick: onFooterCloseClick,
+      onFooterNextClick: handleFooterNextClick,
+      onNextClick: handleNextClick,
+      onPrevClick: handlePrevClick,
       onWillTransition: handleWillTransition,
       reverseTransition: reverseTransition,
+      rtl: rtl,
+      showFooterButtons: showFooterButtons,
+      totalIndex: totalIndex,
+      uniqueId: uniqueId,
       children: children
     }));
   };
-  PageViewsProvider.propTypes = /** @lends limestone/PageViews.PageViewsRouter.prototype */{
+  _PageViewsProvider.propTypes = /** @lends limestone/PageViews.PageViewsRouter.prototype */{
     /**
      * Sets the strategy used to automatically focus an element within the PageViews upon render.
      * When set to 'none', focus is not set only on the first render.
@@ -102,19 +160,19 @@ function PageViewsRouter(Wrapped) {
      */
     componentRef: _propTypes["default"].ref,
     /**
-    * The spotlight id for the panel.
-    *
-    * @type {String}
-    * @private
-    */
+     * The spotlight id for the panel.
+     *
+     * @type {String}
+     * @private
+     */
     'data-spotlight-id': _propTypes2["default"].string,
     /**
-    * The currently selected step.
-    *
-    * @type {Number}
-    * @default 0
-    * @private
-    */
+     * The currently selected step.
+     *
+     * @type {Number}
+     * @default 0
+     * @private
+     */
     index: _propTypes2["default"].number,
     /**
      * Disables panel transitions.
@@ -124,18 +182,18 @@ function PageViewsRouter(Wrapped) {
      */
     noAnimation: _propTypes2["default"].bool,
     /**
-    * Called when a transition completes.
-    *
-    * @type {Function}
-    * @private
-    */
+     * Called when a transition completes.
+     *
+     * @type {Function}
+     * @private
+     */
     onTransition: _propTypes2["default"].func,
     /**
-    * Called when a transition begins.
-    *
-    * @type {Function}
-    * @private
-    */
+     * Called when a transition begins.
+     *
+     * @type {Function}
+     * @private
+     */
     onWillTransition: _propTypes2["default"].func,
     /**
      * Used to determine the transition direction.
@@ -145,6 +203,6 @@ function PageViewsRouter(Wrapped) {
      */
     rtl: _propTypes2["default"].bool
   };
-  return PageViewsProvider;
+  return _PageViewsProvider;
 }
 var _default = exports["default"] = PageViewsRouter;

package/PageViews/tests/PageViews-specs.js

@@ -189,4 +189,175 @@ describe('PageViews Specs', function () {
       expect(actual).toMatchObject(expected);
     });
   }));
+  test('should render accept `fullContents` prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      fullContents: true,
+      pageIndicatorType: "number",
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
+        children: "I got contents"
+      })]
+    }));
+    var panel = _react.screen.getByRole('region');
+    var expected = 'fullContents';
+    expect(panel).toHaveClass(expected);
+  });
+  test('should navigate on Page Indicator click when `bannerMode` is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handleStepsClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      bannerMode: true,
+      index: 2,
+      onChange: handleChange,
+      onStepsClick: handleStepsClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var indicatorDot = _react.screen.getByRole('list').children[1];
+    var expected = {
+      type: 'onStepsClick'
+    };
+    yield user.click(indicatorDot);
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 1,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = handleStepsClick.mock.calls.length && handleStepsClick.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should navigate via 5-way left key when `bannerMode` is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      bannerMode: true,
+      index: 1,
+      onChange: handleChange,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var pageViews = _react.screen.getByRole('region').children[0];
+    yield _react.fireEvent.keyDown(pageViews, {
+      which: 37,
+      keyCode: 37,
+      code: 37
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 0,
+        type: 'onChange'
+      });
+    });
+  }));
+  test('should navigate via 5-way right key when `bannerMode` is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      bannerMode: true,
+      index: 1,
+      onChange: handleChange,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var pageViews = _react.screen.getByRole('region').children[0];
+    yield _react.fireEvent.keyDown(pageViews, {
+      which: 39,
+      keyCode: 39,
+      code: 39
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 2,
+        type: 'onChange'
+      });
+    });
+  }));
+  test('should render footer Close and Next buttons when `showFooterButtons` is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.getByText('Close')).toBeInTheDocument();
+    expect(_react.screen.getByText('Next')).toBeInTheDocument();
+  });
+  test('should not render footer Next button on the last page', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.getByText('Close')).toBeInTheDocument();
+    expect(_react.screen.queryByText('Next')).toBeNull();
+  });
+  test('should not render footer buttons when `bannerMode` is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      bannerMode: true,
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.queryByText('Close')).toBeNull();
+  });
+  test('should fire `onFooterNextClick`, `onChange`, and `onTransition` when footer Next button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handleFooterNextClick = jest.fn();
+    var spy = jest.fn();
+    var user = _userEvent["default"].setup();
+    var index = 0;
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+        showFooterButtons: true,
+        index: index,
+        onChange: handleChange,
+        onFooterNextClick: handleFooterNextClick,
+        onTransition: spy,
+        noAnimation: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+      })),
+      rerender = _render3.rerender;
+    yield user.click(_react.screen.getByText('Next'));
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 1,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleFooterNextClick).toHaveBeenCalled();
+    });
+    spy.mockClear();
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: index,
+      onChange: handleChange,
+      onFooterNextClick: handleFooterNextClick,
+      onTransition: spy,
+      noAnimation: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var expected = {
+      index: index,
+      type: 'onTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onFooterCloseClick` when footer Close button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleFooterCloseClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 0,
+      onFooterCloseClick: handleFooterCloseClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    yield user.click(_react.screen.getByText('Close'));
+    yield (0, _react.waitFor)(function () {
+      expect(handleFooterCloseClick).toHaveBeenCalled();
+    });
+  }));
 });

package/Panels/Header.js

@@ -7,22 +7,23 @@ exports["default"] = exports.HeaderBase = exports.Header = void 0;
 var _handle = require("@enact/core/handle");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
-var _util = require("@enact/i18n/util");
+var _util = require("@enact/core/util");
+var _util2 = require("@enact/i18n/util");
 var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
 var _Layout = require("@enact/ui/Layout");
-var _Measurable = require("@enact/ui/Measurable");
 var _resolution = require("@enact/ui/resolution");
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
 var _ViewManager = _interopRequireWildcard(require("@enact/ui/ViewManager"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _react = require("react");
-var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Heading = _interopRequireDefault(require("../Heading"));
-var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Panels = require("../internal/Panels");
-var _util2 = require("../internal/Panels/util");
+var _util3 = require("../internal/Panels/util");
+var _PopupTabLayoutStateContext = require("../PopupTabLayout/PopupTabLayoutStateContext");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _HeaderModule = _interopRequireDefault(require("./Header.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["backButtonAriaLabel", "backButtonAvailable", "backButtonBackgroundOpacity", "centered", "children", "closeButtonAriaLabel", "closeButtonBackgroundOpacity", "css", "noBackButton", "noCloseButton", "onBack", "onClose", "shadowed", "slotAbove", "slotAfter", "slotAfterRef", "slotBefore", "slotBeforeRef", "slotSize", "titleCell", "type"];
@@ -138,6 +139,13 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
      * @public
      */
     css: _propTypes2["default"].object,
+    /**
+           * Informs Header that it is part of a Popup.
+           *
+           * @type {Boolean}
+           * @private
+           */
+    isPopupHeader: _propTypes2["default"].bool,
     /**
      * Determines what triggers the header content to start its animation.
      *
@@ -334,6 +342,7 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
       var backButtonAvailable = _ref.backButtonAvailable,
         centered = _ref.centered,
         children = _ref.children,
+        isPopupHeader = _ref.isPopupHeader,
         noBackButton = _ref.noBackButton,
         noCloseButton = _ref.noCloseButton,
         noSubtitle = _ref.noSubtitle,
@@ -345,6 +354,7 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
         subtitle = _ref.subtitle;
       return styler.append({
         centered: centered,
+        isPopupHeader: isPopupHeader,
         noSubtitle: noSubtitle,
         shadowed: shadowed,
         slotAfter: slotAfter || !noCloseButton,
@@ -366,7 +376,7 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
         title = _ref2.title,
         titleId = _ref2.titleId,
         type = _ref2.type;
-      var direction = (0, _util.isRtlText)(title) || (0, _util.isRtlText)(subtitle) ? 'rtl' : 'ltr';
+      var direction = (0, _util2.isRtlText)(title) || (0, _util2.isRtlText)(subtitle) ? 'rtl' : 'ltr';
       var titleHeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], _objectSpread(_objectSpread({}, centered ? {
         slotSize: slotSize
       } : {}), {}, {
@@ -441,6 +451,7 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
       type = _ref3.type,
       rest = _objectWithoutProperties(_ref3, _excluded);
     delete rest.arranger;
+    delete rest.isPopupHeader;
     delete rest.marqueeOn;
     delete rest.noSubtitle;
     delete rest.subtitle;
@@ -486,7 +497,6 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
         children: slotAbove
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
         className: css.titlesRow,
-        align: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
           className: css.slotBefore,
           shrink: !syncCellSize,
@@ -520,15 +530,21 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
 var ContextAsDefaultsHeader = function ContextAsDefaultsHeader(Wrapped) {
   // eslint-disable-next-line no-shadow
   function ContextAsDefaultsHeader(props) {
-    var _useContextAsDefaults = (0, _util2.useContextAsDefaults)(props),
+    var _ref4;
+    (0, _util.checkPropTypes)(ContextAsDefaultsHeader, props);
+    var _useContextAsDefaults = (0, _util3.useContextAsDefaults)(props),
       contextProps = _useContextAsDefaults.contextProps,
       provideContextAsDefaults = _useContextAsDefaults.provideContextAsDefaults;
     var _use = (0, _react.use)(_Panels.PanelsStateContext),
       panelsType = _use.type;
+    var _use2 = (0, _react.use)(_PopupTabLayoutStateContext.PopupTabLayoutStateContext),
+      tabLayoutType = _use2.type;
     var index = props['data-index'];
     var backButtonAvailable = index > 0 && panelsType !== 'wizard' || panelsType === 'flexiblePopup';
+    var isPopupHeader = (_ref4 = panelsType || tabLayoutType) === null || _ref4 === void 0 ? void 0 : _ref4.toLowerCase().includes('popup');
     return provideContextAsDefaults(/*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread(_objectSpread({}, contextProps), props), {}, {
-      backButtonAvailable: backButtonAvailable
+      backButtonAvailable: backButtonAvailable,
+      isPopupHeader: isPopupHeader
     })));
   }
   ContextAsDefaultsHeader.propTypes = {
@@ -545,18 +561,9 @@ var ContextAsDefaultsHeader = function ContextAsDefaultsHeader(Wrapped) {
 var HeaderMeasurementDecorator = function HeaderMeasurementDecorator(Wrapped) {
   return function HeaderMeasurementDecorator(props) {
     // eslint-disable-line no-shadow
-    var _ref4 = (0, _Measurable.useMeasurable)() || {},
-      slotBeforeRef = _ref4.ref,
-      _ref4$measurement = _ref4.measurement,
-      _ref4$measurement2 = _ref4$measurement === void 0 ? {} : _ref4$measurement,
-      _ref4$measurement2$wi = _ref4$measurement2.width,
-      slotBeforeWidth = _ref4$measurement2$wi === void 0 ? 0 : _ref4$measurement2$wi;
-    var _ref5 = (0, _Measurable.useMeasurable)() || {},
-      slotAfterRef = _ref5.ref,
-      _ref5$measurement = _ref5.measurement,
-      _ref5$measurement2 = _ref5$measurement === void 0 ? {} : _ref5$measurement,
-      _ref5$measurement2$wi = _ref5$measurement2.width,
-      slotAfterWidth = _ref5$measurement2$wi === void 0 ? 0 : _ref5$measurement2$wi;
+    var slotBeforeRef = (0, _react.useRef)(null);
+    var slotAfterRef = (0, _react.useRef)(null);
+    var lastSlotSizeRef = (0, _react.useRef)(null);
     var _useState = (0, _react.useState)({}),
       _useState2 = _slicedToArray(_useState, 2),
       _useState2$ = _useState2[0],
@@ -564,24 +571,37 @@ var HeaderMeasurementDecorator = function HeaderMeasurementDecorator(Wrapped) {
       prevSlotBeforeWidth = _useState2$.prevSlotBeforeWidth,
       prevSlotAfterWidth = _useState2$.prevSlotAfterWidth,
       setSlotSize = _useState2[1];
+    (0, _react.useEffect)(function () {
+      var slotBeforeElement = slotBeforeRef.current;
+      var slotAfterElement = slotAfterRef.current;
+      var slotBeforeWidth = slotBeforeElement && slotBeforeElement.getBoundingClientRect ? slotBeforeElement.getBoundingClientRect().width : 0;
+      var slotAfterWidth = slotAfterElement && slotAfterElement.getBoundingClientRect ? slotAfterElement.getBoundingClientRect().width : 0;
 
-    // If the slot width has changed, re-run this.
-    if (slotBeforeWidth !== prevSlotBeforeWidth || slotAfterWidth !== prevSlotAfterWidth) {
-      var largestSlotSize = Math.max(slotBeforeWidth, slotAfterWidth);
-
-      // And only do this the largest slot is a different value this time around.
-      if (slotSize !== largestSlotSize) {
-        setSlotSize({
-          slotSize: largestSlotSize,
-          prevSlotBeforeWidth: slotBeforeWidth,
-          prevSlotAfterWidth: slotAfterWidth
-        });
+      // If the slot width has changed, re-run this.
+      if (slotBeforeWidth !== prevSlotBeforeWidth || slotAfterWidth !== prevSlotAfterWidth) {
+        var largestSlotSize = Math.max(slotBeforeWidth, slotAfterWidth);
+        // And only do this the largest slot is a different value this time around.
+        if (slotSize !== largestSlotSize) {
+          lastSlotSizeRef.current = largestSlotSize;
+          setSlotSize({
+            slotSize: largestSlotSize,
+            prevSlotBeforeWidth: slotBeforeWidth,
+            prevSlotAfterWidth: slotAfterWidth
+          });
+        } else {
+          setSlotSize(function (s) {
+            return _objectSpread(_objectSpread({}, s), {}, {
+              prevSlotBeforeWidth: slotBeforeWidth,
+              prevSlotAfterWidth: slotAfterWidth
+            });
+          });
+        }
       }
-    }
+    }, [props.slotBefore, props.slotAfter, prevSlotBeforeWidth, prevSlotAfterWidth, slotSize]);
     var measurableProps = {
       slotBeforeRef: slotBeforeRef,
       slotAfterRef: slotAfterRef,
-      slotSize: (0, _resolution.unit)(slotSize, 'rem')
+      slotSize: typeof slotSize === 'number' ? (0, _resolution.unit)(slotSize, 'rem') : '0rem'
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, props), measurableProps));
   };