@enact/limestone 1.3.0 → 1.9.4

package/Panels/Header.js

@@ -10,19 +10,19 @@ var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _util = 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 _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 +138,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 +341,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 +353,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,
@@ -441,6 +450,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 +496,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 +529,20 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
 var ContextAsDefaultsHeader = function ContextAsDefaultsHeader(Wrapped) {
   // eslint-disable-next-line no-shadow
   function ContextAsDefaultsHeader(props) {
+    var _ref4;
     var _useContextAsDefaults = (0, _util2.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 +559,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 +569,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));
   };

package/Panels/Header.module.css

@@ -39,6 +39,25 @@
 .header .titlesRow .close {
   margin-inline-end: 0;
 }
+.header:not(.centered) .titlesRow {
+  height: 4.625rem;
+}
+:global(.enact-locale-km) .header:not(.centered) .titlesRow {
+  height: 5.125rem;
+}
+:global(.enact-locale-si) .header:not(.centered) .titlesRow {
+  height: 5.125rem;
+}
+:global(.enact-locale-th) .header:not(.centered) .titlesRow {
+  height: 5.125rem;
+}
+:global(.enact-locale-vi) .header:not(.centered) .titlesRow {
+  height: 5.125rem;
+}
+.header.isPopupHeader .titlesRow {
+  align-items: center;
+  height: 4.25rem;
+}
 .header.wizard .titlesRow {
   padding-bottom: 70.2px;
 }
@@ -50,11 +69,38 @@
 .header .slotSizer {
   display: inline-block;
 }
-.header.centered .title {
+.header .slotSizer > * {
+  margin: 0;
+}
+.header .slotAfter .slotSizer > *:not(:first-child) {
+  margin-inline-start: var(--primitive-spacing-36);
+}
+.header .slotBefore .slotSizer {
+  /* Select the children that have visible siblings right after them */
+}
+.header .slotBefore .slotSizer > *:not([style*="display: none"]):has( ~ *:not([style*="display: none"])) {
+  margin-inline-end: var(--primitive-spacing-36);
+}
+.header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 5.875rem;
+}
+:global(.enact-locale-km) .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 6.375rem;
+}
+:global(.enact-locale-si) .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 6.375rem;
+}
+:global(.enact-locale-th) .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 6.375rem;
+}
+:global(.enact-locale-vi) .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 6.375rem;
+}
+.header.centered:not(.isPopupHeader):not(.wizard) .title {
   margin-top: var(--primitive-spacing-60);
 }
-.header.centered .slotAbove,
-.header.centered .slotBelow {
+.header.centered:not(.isPopupHeader) .slotAbove,
+.header.centered:not(.isPopupHeader) .slotBelow {
   text-align: center;
 }
 .header .title {
@@ -69,7 +115,7 @@
   margin-right: var(--primitive-spacing-6);
 }
 .header .slotAbove {
-  margin: 0 -0.75rem var(--primitive-spacing-24) -0.75rem;
+  margin: 0 calc(var(--primitive-spacing-36) * -1) var(--primitive-spacing-24) calc(var(--primitive-spacing-36) * -1);
 }
 .header .slotAfter {
   text-align: right;
@@ -78,45 +124,43 @@
   text-align: left;
 }
 .header .slotBelow {
-  margin: 0.375rem -0.75rem 0 -0.75rem;
+  margin: var(--primitive-spacing-18) calc(var(--primitive-spacing-36) * -1) 0 calc(var(--primitive-spacing-36) * -1);
 }
-.header .standard .slotBefore > *:first-child,
-.header .compact .slotBefore > *:first-child,
-.header .mini .slotBefore > *:first-child {
-  margin-inline-start: 0;
-}
-.header .standard .slotAfter > *:last-child,
-.header .compact .slotAfter > *:last-child,
-.header .mini .slotAfter > *:last-child {
-  margin-inline-end: 0;
-}
-.header.standard {
-  margin: 0;
-  padding: 2.0375rem 2.75rem 0.125rem 2.75rem;
-}
-.header.standard .subtitle,
-.header.standard .title {
-  padding: 0;
-}
-.header.standard .subtitle {
-  margin: 0.43125rem 0 0 0;
-}
-.header.standard.slotBefore:not(.centered) .slotBefore {
+.header.standard.slotBefore:not(.centered) .slotBefore,
+.header.mini.slotBefore:not(.centered) .slotBefore,
+.header.wizard.slotBefore:not(.centered) .slotBefore {
   margin-left: 0;
   margin-right: var(--primitive-spacing-36);
 }
-:global(.enact-locale-right-to-left) .header.standard.slotBefore:not(.centered) .slotBefore {
+:global(.enact-locale-right-to-left) .header.standard.slotBefore:not(.centered) .slotBefore,
+:global(.enact-locale-right-to-left) .header.mini.slotBefore:not(.centered) .slotBefore,
+:global(.enact-locale-right-to-left) .header.wizard.slotBefore:not(.centered) .slotBefore {
   margin-left: var(--primitive-spacing-36);
   margin-right: 0;
 }
-.header.standard.slotAfter:not(.centered) .slotAfter {
+.header.standard.slotAfter:not(.centered) .slotAfter,
+.header.mini.slotAfter:not(.centered) .slotAfter,
+.header.wizard.slotAfter:not(.centered) .slotAfter {
   margin-left: var(--primitive-spacing-36);
   margin-right: 0;
 }
-:global(.enact-locale-right-to-left) .header.standard.slotAfter:not(.centered) .slotAfter {
+:global(.enact-locale-right-to-left) .header.standard.slotAfter:not(.centered) .slotAfter,
+:global(.enact-locale-right-to-left) .header.mini.slotAfter:not(.centered) .slotAfter,
+:global(.enact-locale-right-to-left) .header.wizard.slotAfter:not(.centered) .slotAfter {
   margin-left: 0;
   margin-right: var(--primitive-spacing-36);
 }
+.header.standard {
+  margin: 0;
+  padding: 2.0375rem 2.75rem 0.125rem 2.75rem;
+}
+.header.standard .subtitle,
+.header.standard .title {
+  padding: 0;
+}
+.header.standard .subtitle {
+  margin: 0;
+}
 .header.compact {
   margin: 0;
   padding: 1.28125rem 1.25rem 1.5px 1.25rem;
@@ -157,12 +201,20 @@
   margin-left: 0;
   margin-right: var(--primitive-spacing-30);
 }
+.header.compact.isPopupHeader.slotAfter {
+  padding-left: 1.25rem;
+  padding-right: NaNrem - var(--primitive-spacing-24));
+}
+:global(.enact-locale-right-to-left) .header.compact.isPopupHeader.slotAfter {
+  padding-left: NaNrem - var(--primitive-spacing-24));
+  padding-right: 1.25rem;
+}
 .header.wizard {
   margin: 0;
   padding: 3.2875rem 2.75rem 0.125rem 2.75rem;
 }
 .header.wizard.noSubtitle {
-  padding-bottom: calc( 70.2px + var(--primitive-spacing-6));
+  padding-bottom: NaNrem + var(--primitive-spacing-6));
 }
 .header.wizard .titleContainer:nth-child(2) {
   top: 0;

package/Panels/Panel.module.css

@@ -12,7 +12,7 @@
 }
 .panel .body {
   position: relative;
-  padding: 0 2rem;
+  padding: 0 NaNrem - var(--primitive-spacing-36));
   flex: 1;
   min-height: 0;
   opacity: 0;

package/Panels/index.d.ts

@@ -361,14 +361,13 @@ export class Route extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, RouteProps>
 > {}
 
-export interface PanelDecoratorProps
-  extends Merge<
-    Merge<
-      spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps,
-      ui_Slottable_SlottableProps
-    >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface PanelDecoratorProps extends Merge<
+  Merge<
+    spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps,
+    ui_Slottable_SlottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function PanelDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & PanelDecoratorProps>;

package/Picker/Picker.d.ts

@@ -166,11 +166,10 @@ export class PickerBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, PickerBaseProps>
 > {}
 
-export interface PickerProps
-  extends Merge<
-    Merge<PickerBaseProps, ui_Changeable_ChangeableProps>,
-    limestone_Marquee_MarqueeControllerProps
-  > {
+export interface PickerProps extends Merge<
+  Merge<PickerBaseProps, ui_Changeable_ChangeableProps>,
+  limestone_Marquee_MarqueeControllerProps
+> {
   /**
    * Default index of the selected child.
    *

package/Picker/Picker.module.css

@@ -1,10 +1,10 @@
 .title {
-  margin-left: 1.875rem;
+  margin-left: calc(var(--primitive-spacing-36) + var(--primitive-spacing-36) + 18px);
   margin-right: var(--primitive-spacing-24);
 }
 :global(.enact-locale-right-to-left) .title {
   margin-left: var(--primitive-spacing-24);
-  margin-right: 1.875rem;
+  margin-right: calc(var(--primitive-spacing-36) + var(--primitive-spacing-36) + 18px);
 }
 .title.inlineTitle {
   display: inline-block;