baseui 10.2.1 → 10.6.0

package/esm/select/select-component.js

@@ -159,7 +159,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -307,7 +307,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -661,7 +661,14 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
+
+      if (this.props.methodsRef) {
+        var methodsRef = this.props.methodsRef;
+        methodsRef.current = {
+          setDropdownOpen: this.handleDropdownOpen.bind(this)
+        };
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -690,13 +697,20 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",
     value: function focus() {
       if (!this.input) return;
       this.input.focus();
+    }
+  }, {
+    key: "handleDropdownOpen",
+    value: function handleDropdownOpen(nextOpenState) {
+      this.setState({
+        isOpen: nextOpenState
+      });
     } // Handle touch outside on mobile to dismiss menu, ensures that the
     // touch target is not within the anchor DOM node.
 
@@ -912,7 +926,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
@@ -992,7 +1005,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function filterOptions(excludeOptions) {
       var _this5 = this;
 
-      var filterValue = this.state.inputValue; // apply filter function
+      var filterValue = this.state.inputValue.trim(); // apply filter function
 
       if (this.props.filterOptions) {
         this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {

package/esm/select/styled-components.js

@@ -326,25 +326,49 @@ function getSvgStyles(_ref4) {
 }
 
 export var StyledSelectArrow = styled('svg', function (props) {
+  var _sizes;
+
   var $theme = props.$theme,
-      $disabled = props.$disabled;
+      $disabled = props.$disabled,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, SIZE.mini, 16), _defineProperty(_sizes, SIZE.compact, 16), _defineProperty(_sizes, SIZE.default, 20), _defineProperty(_sizes, SIZE.large, 24), _sizes);
+  var size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
 export var StyledClearIcon = styled('svg', function (props) {
-  var $theme = props.$theme;
+  var _sizes2;
+
+  var $theme = props.$theme,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes2 = {}, _defineProperty(_sizes2, SIZE.mini, 15), _defineProperty(_sizes2, SIZE.compact, 15), _defineProperty(_sizes2, SIZE.default, 18), _defineProperty(_sizes2, SIZE.large, 22), _sizes2);
+  var size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 StyledClearIcon.displayName = "StyledClearIcon";

package/esm/snackbar/snackbar-context.js

@@ -61,6 +61,15 @@ export function useSnackbar() {
     dequeue: context.dequeue
   };
 }
+
+function usePrevious(value) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 export default function SnackbarProvider(_ref) {
   var children = _ref.children,
       _ref$overrides = _ref.overrides,
@@ -95,10 +104,6 @@ export default function SnackbarProvider(_ref) {
   function enqueue(elementProps) {
     var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDuration;
     setSnackbars(function (prev) {
-      if (prev.length === 0) {
-        enter(duration);
-      }
-
       return [].concat(_toConsumableArray(prev), [{
         elementProps: elementProps,
         duration: duration
@@ -106,6 +111,13 @@ export default function SnackbarProvider(_ref) {
     });
   }
 
+  var prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(function () {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
     setSnackbars(function (prev) {

package/esm/spinner/styled-components.js

@@ -52,7 +52,7 @@ export var StyledActivePath = styled('path', function (props) {
 }); // TODO(v11): Replace Spinner with SpinnerNext
 
 StyledActivePath.displayName = "StyledActivePath";
-export var StyledSpinnerNext = styled('div', function (_ref) {
+export var StyledSpinnerNext = styled('i', function (_ref) {
   var $theme = _ref.$theme,
       _ref$$size = _ref.$size,
       $size = _ref$$size === void 0 ? SIZE.medium : _ref$$size;

package/esm/table-semantic/styled-components.js

@@ -70,7 +70,8 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
 
   var $theme = _ref5.$theme,
       $size = _ref5.$size,
-      $divider = _ref5.$divider;
+      $divider = _ref5.$divider,
+      $isNumeric = _ref5.$isNumeric;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
   var padding = sizeToCellPadding($theme, $size);
@@ -83,7 +84,7 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
     verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1
@@ -164,14 +165,15 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
       $size = _ref12.$size,
       $divider = _ref12.$divider,
       $isNumeric = _ref12.$isNumeric,
-      $isLastRow = _ref12.$isLastRow;
+      $isLastRow = _ref12.$isLastRow,
+      $isSortable = _ref12.$isSortable;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
   var borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
   var padding = sizeToCellPadding($theme, $size);
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
     paddingTop: padding,
-    paddingRight: padding,
+    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

package/esm/table-semantic/table-builder.js

@@ -200,6 +200,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
             $col: col,
             $colIndex: colIndex,
             $divider: divider,
+            $isNumeric: col.numeric,
             $size: size
           }, tableHeadCellProps, colTableHeadCellProps), col.header);
         }
@@ -242,6 +243,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $col: col,
           $colIndex: colIndex,
           $divider: divider,
+          $isNumeric: col.numeric,
           role: "button",
           tabIndex: "0",
           "aria-label": "".concat(col.tableHeadAriaLabel || col.header, ", ").concat(sortLabel),
@@ -275,6 +277,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $rowIndex: rowIndex,
           $isNumeric: col.numeric,
           $isLastRow: rowIndex === lastRowindex,
+          $isSortable: col.sortable,
           $size: size
         }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
       }

package/esm/themes/dark-theme/color-component-tokens.js

@@ -93,7 +93,7 @@ export default (function () {
     linkActive: themePrimitives.primary300,
     // List
     listHeaderFill: themePrimitives.mono600,
-    listBodyFill: themePrimitives.mono700,
+    listBodyFill: themePrimitives.mono800,
     listIconFill: themePrimitives.mono100,
     listBorder: themePrimitives.mono500,
     // ProgressSteps

package/esm/themes/dark-theme/color-semantic-tokens.js

@@ -23,12 +23,12 @@ export default (function () {
     backgroundInversePrimary: foundation.primaryA,
     backgroundInverseSecondary: colors.gray300,
     // Content
-    contentPrimary: foundation.primaryA,
-    contentSecondary: colors.gray400,
-    contentTertiary: colors.gray500,
-    contentInversePrimary: foundation.primaryB,
-    contentInverseSecondary: colors.gray600,
-    contentInverseTertiary: colors.gray500,
+    contentPrimary: colors.white,
+    contentSecondary: colors.gray300,
+    contentTertiary: colors.gray400,
+    contentInversePrimary: colors.black,
+    contentInverseSecondary: colors.gray700,
+    contentInverseTertiary: colors.gray600,
     // Border
     borderOpaque: colors.gray700,
     borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
@@ -75,7 +75,8 @@ export default (function () {
     rewardsTier1: colors.blue400,
     rewardsTier2: colors.yellow400,
     rewardsTier3: colors.platinum400,
-    rewardsTier4: colors.gray200
+    rewardsTier4: colors.gray200,
+    membership: colors.yellow600
   };
   return _objectSpread(_objectSpread({}, core), coreExtensions);
 });

package/esm/themes/light-theme/color-component-tokens.js

@@ -22,32 +22,32 @@ export default (function () {
     buttonPrimaryActive: themePrimitives.primary600,
     buttonPrimarySelectedFill: themePrimitives.primary600,
     buttonPrimarySelectedText: themePrimitives.white,
-    buttonPrimarySpinnerForeground: themePrimitives.primary50,
-    buttonPrimarySpinnerBackground: themePrimitives.primary500,
+    buttonPrimarySpinnerForeground: themePrimitives.accent,
+    buttonPrimarySpinnerBackground: themePrimitives.primaryB,
     buttonSecondaryFill: themePrimitives.primary100,
     buttonSecondaryText: themePrimitives.primary,
     buttonSecondaryHover: themePrimitives.primary200,
     buttonSecondaryActive: themePrimitives.primary300,
     buttonSecondarySelectedFill: themePrimitives.primary300,
     buttonSecondarySelectedText: themePrimitives.primary,
-    buttonSecondarySpinnerForeground: themePrimitives.primary700,
-    buttonSecondarySpinnerBackground: themePrimitives.primary300,
+    buttonSecondarySpinnerForeground: themePrimitives.accent,
+    buttonSecondarySpinnerBackground: themePrimitives.primaryB,
     buttonTertiaryFill: 'transparent',
     buttonTertiaryText: themePrimitives.primary,
     buttonTertiaryHover: themePrimitives.primary50,
     buttonTertiaryActive: themePrimitives.primary100,
     buttonTertiarySelectedFill: themePrimitives.primary100,
     buttonTertiarySelectedText: themePrimitives.primary,
-    buttonTertiarySpinnerForeground: themePrimitives.primary700,
-    buttonTertiarySpinnerBackground: themePrimitives.primary300,
+    buttonTertiarySpinnerForeground: themePrimitives.accent,
+    buttonTertiarySpinnerBackground: themePrimitives.primary100,
     buttonMinimalFill: 'transparent',
     buttonMinimalText: themePrimitives.primary,
     buttonMinimalHover: themePrimitives.primary50,
     buttonMinimalActive: themePrimitives.primary100,
     buttonMinimalSelectedFill: themePrimitives.primary100,
     buttonMinimalSelectedText: themePrimitives.primary,
-    buttonMinimalSpinnerForeground: themePrimitives.primary700,
-    buttonMinimalSpinnerBackground: themePrimitives.primary300,
+    buttonMinimalSpinnerForeground: themePrimitives.accent,
+    buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
     buttonDisabledSpinnerForeground: themePrimitives.mono600,
@@ -93,7 +93,7 @@ export default (function () {
     linkActive: themePrimitives.primary500,
     // List
     listHeaderFill: themePrimitives.white,
-    listBodyFill: themePrimitives.mono200,
+    listBodyFill: themePrimitives.white,
     listIconFill: themePrimitives.mono500,
     listBorder: themePrimitives.mono500,
     // ProgressSteps

package/esm/themes/light-theme/color-semantic-tokens.js

@@ -58,7 +58,7 @@ export default (function () {
     contentOnColor: colors.white,
     contentOnColorInverse: colors.black,
     contentNegative: foundation.negative,
-    contentWarning: colors.yellow700,
+    contentWarning: colors.yellow600,
     contentPositive: colors.green400,
     // Border
     borderStateDisabled: colors.gray50,
@@ -75,7 +75,8 @@ export default (function () {
     rewardsTier1: colors.blue400,
     rewardsTier2: colors.yellow400,
     rewardsTier3: colors.platinum400,
-    rewardsTier4: colors.black
+    rewardsTier4: colors.black,
+    membership: colors.yellow600
   };
   return _objectSpread(_objectSpread({}, core), coreExtensions);
 });

package/esm/tokens/colors.js

@@ -11,7 +11,7 @@ var colors = {
   gray200: '#E2E2E2',
   gray300: '#CBCBCB',
   gray400: '#AFAFAF',
-  gray500: '#757575',
+  gray500: '#6B6B6B',
   gray600: '#545454',
   gray700: '#333333',
   gray800: '#1F1F1F',
@@ -48,7 +48,7 @@ var colors = {
   yellow300: '#FFCF70',
   yellow400: '#FFC043',
   yellow500: '#BC8B2C',
-  yellow600: '#997328',
+  yellow600: '#996F00',
   yellow700: '#674D1B',
   green50: '#E6F2ED',
   green100: '#ADDEC9',

package/esm/tooltip/styled-components.js

@@ -28,6 +28,10 @@ import { getEndPosition } from '../popover/utils.js';
 export var Body = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, getBodyStyles(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     boxShadow: props.$theme.lighting.shadow400,
     color: props.$theme.colors.tooltipText,
     // Reset transition property to opacity only, and static transform
@@ -39,6 +43,10 @@ Body.displayName = "Body";
 export var Inner = styled('div', function (props) {
   return _objectSpread(_objectSpread(_objectSpread({}, getInnerStyles(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     paddingTop: props.$theme.sizing.scale300,
     paddingBottom: props.$theme.sizing.scale300,
     paddingLeft: props.$theme.sizing.scale600,

package/index.d.ts

@@ -51,6 +51,7 @@ export function styled<
     P
 >;
 
+export {Theme} from 'baseui/theme';
 export const LightTheme: Theme;
 export const LightThemeMove: Theme;
 export const lightThemePrimitives: ThemePrimitives;

package/link/index.d.ts

@@ -6,6 +6,7 @@ export interface LinkProps
     React.AnchorHTMLAttributes<HTMLAnchorElement>,
     HTMLAnchorElement
   > {
+  animateUnderline?: boolean;
   target?: '_self' | '_blank' | '_parent' | '_top';
 }
 

package/list/index.d.ts

@@ -1,3 +1,4 @@
+import {HeaderNavigationOverrides} from 'baseui/header-navigation';
 import * as React from 'react';
 import {StyletronComponent} from 'styletron-react';
 import {Override} from '../overrides';
@@ -84,3 +85,38 @@ export const StyledEndEnhancerContainer: StyletronComponent<{}>;
 export const StyledArtworkContainer: StyletronComponent<
   StyledArtworkContainerPropsT
 >;
+
+export interface HeadingPropsT {
+  heading: React.ReactNode;
+  subHeading?: React.ReactNode;
+  endEnhancer?: React.ReactNode;
+  endEnhancerDescription?: React.ReactNode;
+  overrides?: HeaderNavigationOverrides;
+  maxLines?: number;
+}
+
+export interface StyledHeadingEndEnhancerContainerPropsT {
+  $isText: boolean;
+}
+
+export type StyledHeadingHeadingPropsT = {
+  $maxLines: 1 | 2;
+};
+
+export const ListHeading: React.ForwardRefExoticComponent<
+  HeadingPropsT & React.RefAttributes<HTMLLIElement>
+>;
+
+export const StyledHeadingRoot: StyletronComponent<{}>;
+export const StyledHeadingContent: StyletronComponent<{}>;
+export const StyledHeadingContentRow: StyletronComponent<{}>;
+export const StyledHeadingMainHeading: StyletronComponent<
+  StyledHeadingHeadingPropsT
+>;
+export const StyledHeadingSubHeading: StyletronComponent<
+  StyledHeadingHeadingPropsT
+>;
+export const StyledHeadingEndEnhancerContainer: StyletronComponent<
+  StyledHeadingEndEnhancerContainerPropsT
+>;
+export const StyledHeadingEndEnhancerDescriptionContainer: StyletronComponent<{}>;

package/list/list-heading.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,12 +9,16 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIs = _interopRequireDefault(require("react-is"));
+var ReactIs = _interopRequireWildcard(require("react-is"));
 
 var _overrides = require("../helpers/overrides.js");
 
 var _styledComponents = require("./styled-components.js");
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -47,7 +53,7 @@ function RenderNode(props) {
     return Component;
   }
 
-  if (_reactIs.default.isValidElementType(Component)) {
+  if (ReactIs.isValidElementType(Component)) {
     // $FlowFixMe
     return /*#__PURE__*/_react.default.createElement(Component, restProps);
   } // $FlowFixMe
@@ -56,9 +62,14 @@ function RenderNode(props) {
   return Component;
 }
 
+function isMaxLinesValid(maxLines) {
+  return maxLines === 1 || maxLines === 2;
+}
+
 var ListHeading = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$overrides = props.overrides,
-      overrides = _props$overrides === void 0 ? {} : _props$overrides;
+      overrides = _props$overrides === void 0 ? {} : _props$overrides,
+      maxLines = props.maxLines;
   var EndEnhancer = props.endEnhancer;
   var EndEnhancerDescription = props.endEnhancerDescription;
   var SubHeading = props.subHeading;
@@ -95,15 +106,21 @@ var ListHeading = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var isEndEnhancerString = typeof EndEnhancer === 'string';
 
-  if (isEndEnhancerString && EndEnhancerDescription) {
-    console.warn('endEnhancerDescription will not be rendered if endEnhancer is not a string');
+  if (process.env.NODE_ENV !== "production") {
+    if (isEndEnhancerString && EndEnhancerDescription) {
+      console.warn('endEnhancerDescription will not be rendered if endEnhancer is not a string');
+    }
+
+    if (maxLines && !isMaxLinesValid(maxLines)) {
+      console.warn('maxLines must be 1 or 2.');
+    }
   }
 
   return /*#__PURE__*/_react.default.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: ref
   }, rootProps), /*#__PURE__*/_react.default.createElement(Content, contentProps, /*#__PURE__*/_react.default.createElement(_styledComponents.StyledHeadingContentRow, null, /*#__PURE__*/_react.default.createElement(HeadingContainer, _extends({
-    $maxLines: props.maxLines
+    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
   }, headingContainerProps), /*#__PURE__*/_react.default.createElement(RenderNode, {
     component: props.heading
   })), EndEnhancer && /*#__PURE__*/_react.default.createElement(EndEnhancerContainer, _extends({
@@ -111,7 +128,7 @@ var ListHeading = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, endEnhancerContainerProps), /*#__PURE__*/_react.default.createElement(RenderNode, {
     component: EndEnhancer
   }))), (SubHeading || EndEnhancerDescription) && /*#__PURE__*/_react.default.createElement(_styledComponents.StyledHeadingContentRow, null, /*#__PURE__*/_react.default.createElement(SubHeadingContainer, _extends({
-    $maxLines: props.maxLines
+    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
   }, subHeadingContainerProps), /*#__PURE__*/_react.default.createElement(RenderNode, {
     component: SubHeading
   })), EndEnhancerDescription && isEndEnhancerString && /*#__PURE__*/_react.default.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/_react.default.createElement(RenderNode, {

package/list/list-heading.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import React from 'react';
-import ReactIs from 'react-is';
+import * as ReactIs from 'react-is';
 
 import {getOverrides} from '../helpers/overrides.js';
 
@@ -39,9 +39,13 @@ function RenderNode(props) {
   return Component;
 }
 
+function isMaxLinesValid(maxLines) {
+  return maxLines === 1 || maxLines === 2;
+}
+
 const ListHeading = React.forwardRef<HeadingPropsT, HTMLLIElement>(
   (props: HeadingPropsT, ref) => {
-    const {overrides = {}} = props;
+    const {overrides = {}, maxLines} = props;
     const EndEnhancer = props.endEnhancer;
     const EndEnhancerDescription = props.endEnhancerDescription;
     const SubHeading = props.subHeading;
@@ -73,10 +77,15 @@ const ListHeading = React.forwardRef<HeadingPropsT, HTMLLIElement>(
 
     const isEndEnhancerString = typeof EndEnhancer === 'string';
 
-    if (isEndEnhancerString && EndEnhancerDescription) {
-      console.warn(
-        'endEnhancerDescription will not be rendered if endEnhancer is not a string',
-      );
+    if (__DEV__) {
+      if (isEndEnhancerString && EndEnhancerDescription) {
+        console.warn(
+          'endEnhancerDescription will not be rendered if endEnhancer is not a string',
+        );
+      }
+      if (maxLines && !isMaxLinesValid(maxLines)) {
+        console.warn('maxLines must be 1 or 2.');
+      }
     }
 
     return (
@@ -89,7 +98,7 @@ const ListHeading = React.forwardRef<HeadingPropsT, HTMLLIElement>(
           {/* ----- Top Row -------------------------- */}
           <StyledHeadingContentRow>
             <HeadingContainer
-              $maxLines={props.maxLines}
+              $maxLines={isMaxLinesValid(maxLines) ? maxLines : 1}
               {...headingContainerProps}
             >
               <RenderNode component={props.heading} />
@@ -109,7 +118,7 @@ const ListHeading = React.forwardRef<HeadingPropsT, HTMLLIElement>(
           {(SubHeading || EndEnhancerDescription) && (
             <StyledHeadingContentRow>
               <SubHeadingContainer
-                $maxLines={props.maxLines}
+                $maxLines={isMaxLinesValid(maxLines) ? maxLines : 1}
                 {...subHeadingContainerProps}
               >
                 <RenderNode component={SubHeading} />