baseui 10.10.0 → 10.12.0

package/esm/breadcrumbs/breadcrumbs.js

@@ -23,7 +23,7 @@ import { LocaleContext } from '../locale/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
 import ChevronRight from '../icon/chevron-right.js';
 import ChevronLeft from '../icon/chevron-left.js';
-import { StyledRoot, StyledSeparator, StyledList, StyledListItem } from './styled-components.js';
+import { StyledList, StyledListItem, StyledRoot, StyledSeparator } from './styled-components.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 export function Breadcrumbs(props) {
   var _props$overrides = props.overrides,
@@ -62,16 +62,13 @@ export function Breadcrumbs(props) {
       Separator = _getOverrides12[0],
       baseSeparatorProps = _getOverrides12[1];
 
-  var iconOverrides = mergeOverrides({
+  baseIconProps.overrides = mergeOverrides({
     Svg: {
       style: {
         verticalAlign: 'text-bottom'
       }
     }
-  }, // $FlowFixMe
-  baseIconProps && baseIconProps.overrides); // $FlowFixMe
-
-  baseIconProps.overrides = iconOverrides;
+  }, baseIconProps && baseIconProps.overrides);
   childrenArray.forEach(function (child, index) {
     childrenWithSeparators.push( /*#__PURE__*/React.createElement(ListItem, _extends({
       key: "breadcrumb-item-".concat(index),
@@ -84,7 +81,7 @@ export function Breadcrumbs(props) {
   });
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
     return /*#__PURE__*/React.createElement(Root, _extends({
-      "aria-label": props.ariaLabel || locale.breadcrumbs.ariaLabel,
+      "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,
       "data-baseweb": "breadcrumbs"
     }, baseRootProps), /*#__PURE__*/React.createElement(List, baseListProps, childrenWithSeparators));
   });

package/esm/button/button.js

@@ -179,7 +179,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Button, "defaultProps", defaultProps);
 
-var ForwardedButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var ForwardedButton = /*#__PURE__*/React.forwardRef( //$FlowFixMe
+function (props, ref) {
   return /*#__PURE__*/React.createElement(Button, _extends({
     forwardedRef: ref
   }, props));

package/esm/button/styled-components.js

@@ -15,6 +15,7 @@ import { KIND, SIZE, SHAPE } from './constants.js';
 export var BaseButton = styled('button', function (_ref) {
   var $theme = _ref.$theme,
       $size = _ref.$size,
+      $colors = _ref.$colors,
       $kind = _ref.$kind,
       $shape = _ref.$shape,
       $isLoading = _ref.$isLoading,
@@ -66,14 +67,14 @@ export var BaseButton = styled('button', function (_ref) {
     $theme: $theme,
     $size: $size,
     $shape: $shape
-  })), getKindStyles({
+  })), getColorStyles({
     $theme: $theme,
+    $colors: $colors,
     $kind: $kind,
     $isLoading: $isLoading,
     $isSelected: $isSelected,
     $disabled: $disabled
   })), getShapeStyles({
-    $theme: $theme,
     $shape: $shape,
     $size: $size
   }));
@@ -337,13 +338,27 @@ function getPaddingStyles(_ref12) {
   }
 }
 
-function getKindStyles(_ref13) {
+function getColorStyles(_ref13) {
   var $theme = _ref13.$theme,
+      $colors = _ref13.$colors,
       $isLoading = _ref13.$isLoading,
       $isSelected = _ref13.$isSelected,
       $kind = _ref13.$kind,
       $disabled = _ref13.$disabled;
 
+  if ($colors) {
+    return {
+      color: $colors.color,
+      backgroundColor: $colors.backgroundColor,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+      }
+    };
+  }
+
   if ($disabled) {
     return Object.freeze({});
   }
@@ -431,8 +446,7 @@ function getKindStyles(_ref13) {
 }
 
 function getShapeStyles(_ref14) {
-  var $theme = _ref14.$theme,
-      $shape = _ref14.$shape,
+  var $shape = _ref14.$shape,
       $size = _ref14.$size;
 
   if ($shape === SHAPE.circle || $shape === SHAPE.square) {

package/esm/button/utils.js

@@ -5,13 +5,15 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export function getSharedProps(_ref) {
-  var disabled = _ref.disabled,
+  var colors = _ref.colors,
+      disabled = _ref.disabled,
       isLoading = _ref.isLoading,
       isSelected = _ref.isSelected,
       kind = _ref.kind,
       shape = _ref.shape,
       size = _ref.size;
   return {
+    $colors: colors,
     $disabled: disabled,
     $isLoading: isLoading,
     $isSelected: isSelected,

package/esm/button-group/button-group.js

@@ -97,7 +97,6 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           _this$props$mode = _this$props.mode,
           mode = _this$props$mode === void 0 ? MODE.checkbox : _this$props$mode,
           children = _this$props.children,
-          ariaLabel = _this$props.ariaLabel,
           selected = _this$props.selected,
           disabled = _this$props.disabled,
           _onClick = _this$props.onClick,
@@ -110,6 +109,7 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
+      var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
       var isRadio = mode === MODE.radio;
       var numItems = React.Children.count(children);
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {

package/esm/button-group/stateful-button-group.js

@@ -23,6 +23,10 @@ export default function StatefulButtonGroup(props) {
   }, restProps), function (_ref) {
     var containerProps = _extends({}, _ref);
 
-    return /*#__PURE__*/React.createElement(ButtonGroup, containerProps, props.children);
+    return (
+      /*#__PURE__*/
+      //$FlowFixMe
+      React.createElement(ButtonGroup, containerProps, props.children)
+    );
   });
 }

package/esm/checkbox/checkbox.js

@@ -174,8 +174,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props2.checked,
           children = _this$props2.children,
           required = _this$props2.required,
-          title = _this$props2.title,
-          ariaLabel = _this$props2.ariaLabel;
+          title = _this$props2.title;
       var RootOverride = overrides.Root,
           CheckmarkOverride = overrides.Checkmark,
           LabelOverride = overrides.Label,
@@ -236,7 +235,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         name: name,
         checked: checked,
         required: required,
-        "aria-label": ariaLabel,
+        "aria-label": this.props['aria-label'] || this.props.ariaLabel,
         "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],

package/esm/combobox/combobox.js

@@ -198,7 +198,7 @@ function Combobox(props) {
     if (listboxRef.current && event.relatedTarget && // NOTE(chase): Contains method expects a Node type, but relatedTarget is
     // EventTarget which is a super type of Node. Passing an EventTarget seems
     // to work fine, assuming the flow type is too strict.
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     listboxRef.current.contains(event.relatedTarget)) {
       return;
     }
@@ -290,7 +290,7 @@ function Combobox(props) {
       popoverOverrides = _getOverrides12$$over === void 0 ? {} : _getOverrides12$$over,
       restPopoverProps = _objectWithoutProperties(_getOverrides12$, ["overrides"]);
 
-  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  return /*#__PURE__*/React.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: rootRef
   }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
@@ -305,7 +305,7 @@ function Combobox(props) {
     content: /*#__PURE__*/React.createElement(ListBox // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
     , _extends({
       tabIndex: "-1",
-      id: listboxId // eslint-disable-next-line flowtype/no-weak-types
+      id: listboxId // flowlint-next-line unclear-type:off
       ,
       ref: listboxRef,
       role: "listbox",
@@ -325,7 +325,7 @@ function Combobox(props) {
           key: index,
           onClick: function onClick() {
             return handleOptionClick(index);
-          } // eslint-disable-next-line flowtype/no-weak-types
+          } // flowlint-next-line unclear-type:off
           ,
           ref: isSelected ? selectedOptionRef : null,
           role: "option",

package/esm/data-table/column-custom.js

@@ -14,6 +14,7 @@ import Column from './column.js';
 import { COLUMNS } from './constants.js';
 
 function CustomColumn(options) {
+  //$FlowFixMe
   return Column(_objectSpread({
     kind: COLUMNS.CUSTOM
   }, options));

package/esm/data-table/column-datetime.js

@@ -233,7 +233,7 @@ function DatetimeFilter(props) {
   var _React$useState7 = React.useState([initialState.categoricalOperator]),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       categoricalOperator = _React$useState8[0],
-      setCategoricalOperator = _React$useState8[1]; // eslint-disable-next-line flowtype/no-weak-types
+      setCategoricalOperator = _React$useState8[1]; // flowlint-next-line unclear-type:off
 
 
   var _React$useState9 = React.useState(initialState.rangeDates.length ? initialState.rangeDates : [new Date(datesSorted[0]), new Date(datesSorted[datesSorted.length - 1])]),
@@ -275,7 +275,7 @@ function DatetimeFilter(props) {
     },
     onApply: function onApply() {
       if (isRange) {
-        // eslint-disable-next-line flowtype/no-weak-types
+        // flowlint-next-line unclear-type:off
         var op = rangeOperator[0].id;
         var description = '';
 
@@ -307,7 +307,7 @@ function DatetimeFilter(props) {
       }
 
       if (isCategorical) {
-        // eslint-disable-next-line flowtype/no-weak-types
+        // flowlint-next-line unclear-type:off
         var _op = categoricalOperator[0].id;
         var selection = [];
         var operatorLocaleLabelKey = '';
@@ -400,7 +400,7 @@ function DatetimeFilter(props) {
     value: rangeOperator,
     onChange: function onChange(params) {
       return setRangeOperator(params.value);
-    } // eslint-disable-next-line flowtype/no-weak-types
+    } // flowlint-next-line unclear-type:off
     ,
     mountNode: mountNode.current,
     options: RANGE_OPERATIONS.map(function (op) {
@@ -415,7 +415,7 @@ function DatetimeFilter(props) {
     className: css({
       paddingTop: theme.sizing.scale600
     })
-  }, (rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(Datepicker // eslint-disable-next-line flowtype/no-weak-types
+  }, (rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(Datepicker // flowlint-next-line unclear-type:off
   , {
     mountNode: mountNode.current,
     value: rangeDates,
@@ -487,7 +487,7 @@ function DatetimeFilter(props) {
         label: locale.datatable[op.localeLabelKey],
         id: op.id
       };
-    }) // eslint-disable-next-line flowtype/no-weak-types
+    }) // flowlint-next-line unclear-type:off
     ,
     mountNode: mountNode.current,
     size: "compact",

package/esm/data-table/column.js

@@ -40,6 +40,7 @@ function Column(options) {
     mapDataToValue: options.mapDataToValue,
     maxWidth: options.maxWidth,
     minWidth: options.minWidth,
+    // eslint-disable-next-line react/display-name
     renderCell: /*#__PURE__*/React.forwardRef(function (props, ref) {
       var _useStyletron = useStyletron(),
           _useStyletron2 = _slicedToArray(_useStyletron, 2),

package/esm/data-table/data-table.js

@@ -67,7 +67,7 @@ function CellPlacement(_ref) {
 
   var backgroundColor = theme.colors.backgroundPrimary;
 
-  if (rowIndex % 2 && columnIndex === data.columnHighlightIndex || rowIndex === data.rowHighlightIndex) {
+  if (Boolean(rowIndex % 2) && columnIndex === data.columnHighlightIndex || rowIndex === data.rowHighlightIndex) {
     backgroundColor = theme.colors.backgroundTertiary;
   } else if (rowIndex % 2 || columnIndex === data.columnHighlightIndex) {
     backgroundColor = theme.colors.backgroundSecondary;
@@ -178,7 +178,7 @@ function Header(props) {
   var _React$useState3 = React.useState(0),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       endResizePos = _React$useState4[0],
-      setEndResizePos = _React$useState4[1]; // eslint-disable-next-line flowtype/no-weak-types
+      setEndResizePos = _React$useState4[1]; // flowlint-next-line unclear-type:off
 
 
   var headerCellRef = React.useRef(null);
@@ -550,7 +550,7 @@ export function DataTable(_ref2) {
 
     return rowHeight;
   }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
 
   var _React$useState7 = React.useState(null),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
@@ -933,7 +933,7 @@ export function DataTable(_ref2) {
         tableHeight: height,
         widths: normalizedWidths
       }
-    }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
+    }, /*#__PURE__*/React.createElement(VariableSizeGrid // flowlint-next-line unclear-type:off
     , {
       ref: setGridRef,
       overscanRowCount: 10,

package/esm/datepicker/calendar-header.js

@@ -57,10 +57,10 @@ import { StatefulMenu } from '../menu/index.js';
 import { Popover } from '../popover/index.js';
 import { LocaleContext } from '../locale/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
-import { StyledCalendarHeader, StyledPrevButton, StyledNextButton, StyledMonthHeader, StyledWeekdayHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer } from './styled-components.js';
-import { ORIENTATION, WEEKDAYS, DENSITY } from './constants.js';
+import { StyledCalendarHeader, StyledMonthHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer, StyledNextButton, StyledPrevButton, StyledWeekdayHeader } from './styled-components.js';
+import { DENSITY, ORIENTATION, WEEKDAYS } from './constants.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
+import { forkBlur, forkFocus, isFocusVisible } from '../utils/focusVisible.js';
 
 var navBtnStyle = function navBtnStyle(_ref) {
   var $theme = _ref.$theme;
@@ -92,7 +92,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, CalendarHeader);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props); //$FlowFixMe
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
@@ -236,7 +236,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
           monthsShown = _this$props2.monthsShown,
           order = _this$props2.order;
 
-      if (monthsShown && _this.isMultiMonthHorizontal()) {
+      if (!!monthsShown && _this.isMultiMonthHorizontal()) {
         if (direction === DIRECTION.NEXT) {
           var isLastMonth = order === monthsShown - 1;
           return !isLastMonth;
@@ -448,17 +448,14 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
           OverriddenStatefulMenu = _getOverrides16[0],
           menuProps = _getOverrides16[1];
 
-      var menuOverrides = mergeOverrides({
+      menuProps.overrides = mergeOverrides({
         List: {
           style: {
             height: 'auto',
             maxHeight: '257px'
           }
         }
-      }, // $FlowFixMe
-      menuProps && menuProps.overrides); // $FlowFixMe
-
-      menuProps.overrides = menuOverrides;
+      }, menuProps && menuProps.overrides);
 
       var initialMonthIndex = _this.monthItems.findIndex(function (month) {
         return month.id === _this.dateHelpers.getMonth(date).toString();

package/esm/datepicker/calendar.js

@@ -580,7 +580,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     var _this$props3 = _this.props,
         _highlightedDate = _this$props3.highlightedDate,
         _value = _this$props3.value,
-        adapter = _this$props3.adapter;
+        adapter = _this$props3.adapter; //$FlowFixMe
+
     _this.dateHelpers = new DateHelpers(adapter);
 
     var dateInView = _this.getDateInView();

package/esm/datepicker/datepicker.js

@@ -100,7 +100,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, Datepicker);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props); //$FlowFixMe
 
     _defineProperty(_assertThisInitialized(_this), "calendar", void 0);
 

package/esm/datepicker/styled-components.js

@@ -219,7 +219,7 @@ function generateDayStyles(defaultCode, defaultStyle) {
   var codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
   var codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
   return _ref7 = {}, _defineProperty(_ref7, defaultCode, defaultStyle), _defineProperty(_ref7, codeForSM, defaultStyle), _defineProperty(_ref7, codeForEM, defaultStyle), _ref7;
-} // eslint-disable-next-line flowtype/no-weak-types
+} // flowlint-next-line unclear-type:off
 
 
 function getDayStyles(code, _ref8) {
@@ -542,7 +542,7 @@ export var StyledDay = styled('div', function (props) {
       content: '""'
     } : {})
   } : // a hack to make flow happy, otherwise it complains about complexity
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   {});
 });
 StyledDay.displayName = "StyledDay";

package/esm/datepicker/utils/date-helpers.js

@@ -82,7 +82,7 @@ var DateHelpers = function DateHelpers(_adapter) {
     // in e2e tests down the road, we're going to have
     // to figure that out
 
-    var _ref = adapterMap[className] || adapterMap['DateFnsUtils'],
+    var _ref = adapterMap[className] || adapterMap.DateFnsUtils,
         _ref$getOptions = _ref.getOptions,
         getOptions = _ref$getOptions === void 0 ? defaultGetOptions : _ref$getOptions,
         formats = _ref.formats;

package/esm/datepicker/utils/index.js

@@ -78,7 +78,7 @@ export var subMonths = createDirtySetter(defaultDateHelpers.subMonths);
 export var subYears = createDirtySetter(defaultDateHelpers.subYears); // ** Date Comparison
 
 export var isBefore = createDirtyCompare(defaultDateHelpers.isBefore);
-export var isAfter = createDirtyCompare(defaultDateHelpers.isAfter); // eslint-disable-next-line flowtype/no-weak-types
+export var isAfter = createDirtyCompare(defaultDateHelpers.isAfter); // flowlint-next-line unclear-type:off
 
 export var format = function format(date, _format, locale) {
   return defaultDateHelpers.format(date, _format, locale);

package/esm/drawer/drawer.js

@@ -194,7 +194,7 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
       if (mountNode) {
         return mountNode;
       } // Flow thinks body could be null (cast through any)
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
 
 
       return document.body;

package/esm/flex-grid/flex-grid-item.js

@@ -61,7 +61,9 @@ export var flexGridItemMediaQueryStyle = function flexGridItemMediaQueryStyle(_r
     // Subtract .5px to avoid rounding issues on IE/Edge
     // See https://github.com/uber/baseweb/pull/1748
     width: "calc(".concat(widthCalc, " - .5px)")
-  }, _defineProperty(_objectSpread2, marginDirection, colGapQuantity && ((itemIndex + 1) % colCount !== 0 ? colGap : 0)), _defineProperty(_objectSpread2, "marginBottom", rowGapQuantity && (~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0)), _objectSpread2), itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? _defineProperty({}, marginDirection, "calc(".concat(colCount - itemIndex % colCount - 1, " * (").concat(colGap, " + ").concat(widthCalc, "))")) : {}));
+  }, _defineProperty(_objectSpread2, marginDirection, colGapQuantity && ( //flowlint-line sketchy-number-and:off
+  (itemIndex + 1) % colCount !== 0 ? colGap : 0)), _defineProperty(_objectSpread2, "marginBottom", rowGapQuantity && ( //flowlint-line sketchy-number-and:off
+  ~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0)), _objectSpread2), itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? _defineProperty({}, marginDirection, "calc(".concat(colCount - itemIndex % colCount - 1, " * (").concat(colGap, " + ").concat(widthCalc, "))")) : {}));
 };
 export var getResponsiveValue = function getResponsiveValue(responsive, i) {
   if (!responsive) {
@@ -152,9 +154,9 @@ var FlexGridItem = function FlexGridItem(_ref4) {
     }
   };
   var blockOverrides = overrides ? mergeOverrides(flexGridItemOverrides, overrides) : flexGridItemOverrides;
-  return /*#__PURE__*/React.createElement(Block // coerced to any because because of how react components are typed.
+  return /*#__PURE__*/React.createElement(Block // coerced to any because of how react components are typed.
   // cannot guarantee an html element
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   , _extends({
     ref: forwardedRef,
     as: as,

package/esm/flex-grid/flex-grid.js

@@ -31,14 +31,19 @@ export var BaseFlexGrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       flexWrap = _ref.flexWrap,
       restProps = _objectWithoutProperties(_ref, ["display", "flexWrap"]);
 
-  return /*#__PURE__*/React.createElement(Block, _extends({
-    display: display || 'flex',
-    flexWrap: flexWrap || flexWrap === false ? flexWrap : true,
-    "data-baseweb": "flex-grid"
-  }, restProps, {
-    ref: ref
-  }));
+  return (
+    /*#__PURE__*/
+    //$FlowFixMe
+    React.createElement(Block, _extends({
+      display: display || 'flex',
+      flexWrap: flexWrap || flexWrap === false ? flexWrap : true,
+      "data-baseweb": "flex-grid"
+    }, restProps, {
+      ref: ref
+    }))
+  );
 });
+BaseFlexGrid.displayName = 'BaseFlexGrid';
 
 var FlexGrid = function FlexGrid(_ref2) {
   var forwardedRef = _ref2.forwardedRef,
@@ -55,9 +60,9 @@ var FlexGrid = function FlexGrid(_ref2) {
       FlexGrid = _getOverrides2[0],
       flexGridProps = _getOverrides2[1];
 
-  return /*#__PURE__*/React.createElement(FlexGrid // coerced to any because because of how react components are typed.
+  return /*#__PURE__*/React.createElement(FlexGrid // coerced to any because of how react components are typed.
   // cannot guarantee an html element
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   , _extends({
     ref: forwardedRef,
     as: as

package/esm/form-control/form-control.js

@@ -36,11 +36,11 @@ import { UIDConsumer } from 'react-uid';
 import { Label as StyledLabel, LabelEndEnhancer as StyledLabelEndEnhancer, LabelContainer as StyledLabelContainer, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
-  if (error && typeof error !== 'boolean') {
+  if (!!error && typeof error !== 'boolean') {
     return typeof error === 'function' ? error(sharedProps) : error;
   }
 
-  if (positive && typeof positive !== 'boolean') {
+  if (!!positive && typeof positive !== 'boolean') {
     return typeof positive === 'function' ? positive(sharedProps) : positive;
   }
 
@@ -148,7 +148,7 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, getOverrideProps(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
         "data-baseweb": "form-control-label",
         htmlFor: htmlFor || onlyChildProps.id
-      }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, getOverrideProps(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(UIDConsumer, null, function (captionId) {
+      }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), !!labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, getOverrideProps(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(UIDConsumer, null, function (captionId) {
         return /*#__PURE__*/React.createElement(ControlContainer, _extends({
           "data-baseweb": "form-control-container"
         }, sharedProps, getOverrideProps(ControlContainerOverride)), React.Children.map(children, function (child, index) {
@@ -162,7 +162,7 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
             error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
             positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
           });
-        }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
+        }), (!!caption || !!error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
           "data-baseweb": "form-control-caption",
           id: captionId
         }, sharedProps, getOverrideProps(CaptionOverride)), hint));

package/esm/heading/heading.js

@@ -13,7 +13,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import Block from '../block/block.js';
 import { LevelContext } from './heading-level.js';
-var FONTS = ['', 'font1050', 'font950', 'font850', 'font750', 'font650', 'font550'];
+var FONTS = ['', 'font1050', 'font950', 'font850', 'font750', 'font650', 'font550']; //$FlowFixMe
 
 var Heading = function Heading(_ref) {
   var styleLevel = _ref.styleLevel,

package/esm/helpers/overrides.js

@@ -23,7 +23,7 @@ import deepMerge from '../utils/deep-merge.js';
 /**
  * Given an override argument, returns the component implementation override if it exists
  */
-// eslint-disable-next-line flowtype/no-weak-types
+// flowlint-next-line unclear-type:off
 export function getOverride(override) {
   if (isValidElementType(override)) {
     return override;
@@ -33,7 +33,7 @@ export function getOverride(override) {
   if (override && _typeof(override) === 'object') {
     // Remove this 'any' once this flow issue is fixed:
     // https://github.com/facebook/flow/issues/6666
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     return override.component;
   } // null/undefined
 
@@ -48,15 +48,18 @@ export function getOverride(override) {
 export function getOverrideProps(override) {
   if (override && _typeof(override) === 'object') {
     if (_typeof(override.props) === 'object') {
+      //$FlowFixMe
       return _objectSpread(_objectSpread({}, override.props), {}, {
         $style: override.style
       });
     } else {
+      //$FlowFixMe
       return {
         $style: override.style
       };
     }
-  }
+  } //$FlowFixMe
+
 
   return {};
 }
@@ -68,13 +71,13 @@ export function getOverrideProps(override) {
 export function toObjectOverride(override) {
   if (isValidElementType(override)) {
     return {
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       component: override
     };
   } // Flow can't figure out that typeof 'function' above will
   // catch React.StatelessFunctionalComponent
   // (probably related to https://github.com/facebook/flow/issues/6666)
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
 
 
   return override || {};
@@ -83,7 +86,7 @@ export function toObjectOverride(override) {
  * Get a convenient override array that will always have [component, props]
  */
 
-/* eslint-disable flowtype/no-weak-types */
+/* flowlint unclear-type:off */
 
 export function getOverrides(override, defaultComponent) {
   var Component = getOverride(override) || defaultComponent;
@@ -103,14 +106,15 @@ export function getOverrides(override, defaultComponent) {
         ref: ref
       }, nextProps));
     });
-    DynamicOverride.displayName = Component.displayName;
+    DynamicOverride.displayName = Component.displayName; //$FlowFixMe
+
     return [DynamicOverride, {}];
   }
 
   var props = getOverrideProps(override);
   return [Component, props];
 }
-/* eslint-enable flowtype/no-weak-types */
+/* flowlint unclear-type:error */
 
 /**
  * Merges two overrides objects – this is useful if you want to inject your own
@@ -170,7 +174,7 @@ export function mergeConfigurationOverrides(target, source) {
 export function useOverrides(defaults) {
   var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return React.useMemo(function () {
-    return (// eslint-disable-next-line flowtype/no-weak-types
+    return (// flowlint-next-line unclear-type:off
       Object.keys(defaults).reduce(function (obj, key) {
         obj[key] = getOverrides(overrides[key], defaults[key]);
         return obj;