baseui 11.0.1 → 11.1.0

package/esm/select/select-component.js

@@ -1,5 +1,9 @@
 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); }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 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); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -53,7 +57,7 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import { getOverrides } from '../helpers/overrides.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import DeleteAlt from '../icon/delete-alt.js';
 import TriangleDownIcon from '../icon/triangle-down.js';
 import SearchIconComponent from '../icon/search.js';
@@ -61,10 +65,10 @@ import { LocaleContext } from '../locale/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input.js';
-import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
+import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants.js';
 import defaultProps from './default-props.js';
 import SelectDropdown from './dropdown.js';
-import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
+import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
 import { expandValue, normalizeOptions } from './utils/index.js';
 
 function Noop() {
@@ -292,8 +296,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
         if (containsNode(_this.anchor.current, event.relatedTarget) || containsNode(_this.dropdown.current, event.relatedTarget)) {
           return;
         }
-      } else if (containsNode(_this.anchor.current, event.target)) {
-        return;
+      } else if (event.type !== 'blur') {
+        if (containsNode(_this.anchor.current, event.target)) {
+          return;
+        }
       }
 
       if (_this.props.onBlur) {
@@ -511,6 +517,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
       _this.input = input;
 
+      if (typeof _this.props.inputRef === 'function') {
+        _this.props.inputRef(input);
+      } else if (_this.props.inputRef) {
+        _this.props.inputRef.current = input;
+      }
+
       if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
         _this.props.controlRef(input);
       }
@@ -668,6 +680,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this2 = this;
+
       if (typeof document !== 'undefined') {
         if (prevState.isOpen !== this.state.isOpen) {
           if (this.state.isOpen) {
@@ -680,7 +694,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
         }
 
         if (!prevState.isFocused && this.state.isFocused) {
-          document.addEventListener('click', this.handleClickOutside);
+          setTimeout(function () {
+            return document.addEventListener('click', _this2.handleClickOutside);
+          }, 0);
         }
       }
     }
@@ -749,7 +765,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
      * Extends the value into an array from the given options
      */
     function getValueArray(value) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!Array.isArray(value)) {
         if (value === null || value === undefined) return [];
@@ -757,7 +773,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }
 
       return value.map(function (value) {
-        return expandValue(value, _this2.props);
+        return expandValue(value, _this3.props);
       });
     }
   }, {
@@ -802,7 +818,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderValue",
     value: function renderValue(valueArray, isOpen, locale) {
-      var _this3 = this;
+      var _this4 = this;
 
       var _this$props$overrides2 = this.props.overrides,
           overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
@@ -819,9 +835,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
           var disabled = sharedProps.$disabled || value.clearableValue === false;
           return /*#__PURE__*/React.createElement(Value, _extends({
             value: value,
-            key: "value-".concat(i, "-").concat(value[_this3.props.valueKey]),
+            key: "value-".concat(i, "-").concat(value[_this4.props.valueKey]),
             removeValue: function removeValue() {
-              return _this3.removeValue(value);
+              return _this4.removeValue(value);
             },
             disabled: disabled,
             overrides: {
@@ -850,7 +866,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderInput",
     value: function renderInput(listboxId) {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props$overrides3 = this.props.overrides,
           overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
@@ -863,7 +879,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var sharedProps = this.getSharedProps();
       var isOpen = this.state.isOpen;
       var selected = this.getValueArray(this.props.value).map(function (v) {
-        return v[_this4.props.labelKey];
+        return v[_this5.props.labelKey];
       }).join(', ');
       var selectedLabel = selected.length ? "Selected ".concat(selected, ". ") : '';
       var label = "".concat(selectedLabel).concat(this.props['aria-label'] || '');
@@ -927,13 +943,18 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderClear",
     value: function renderClear() {
+      var _sizes;
+
       var isValueEntered = Boolean(this.props.value && this.props.value.length || this.state.inputValue);
 
       if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
         return;
       }
 
-      var sharedProps = this.getSharedProps();
+      var _this$getSharedProps = this.getSharedProps(),
+          $size = _this$getSharedProps.$size,
+          sharedProps = _objectWithoutProperties(_this$getSharedProps, ["$size"]);
+
       var _this$props$overrides4 = this.props.overrides,
           overrides = _this$props$overrides4 === void 0 ? {} : _this$props$overrides4;
 
@@ -943,27 +964,28 @@ var Select = /*#__PURE__*/function (_React$Component) {
           clearIconProps = _getOverrides6[1];
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+      var sizes = (_sizes = {}, _defineProperty(_sizes, SIZE.mini, 15), _defineProperty(_sizes, SIZE.compact, 15), _defineProperty(_sizes, SIZE.default, 18), _defineProperty(_sizes, SIZE.large, 22), _sizes);
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
         role: "button",
-        overrides: {
-          Svg: {
-            component: StyledClearIcon,
-            props: overrides.ClearIcon && overrides.ClearIcon.props ? overrides.ClearIcon.props : {},
-            style: overrides.ClearIcon && overrides.ClearIcon.style ? overrides.ClearIcon.style : {}
-          }
-        }
+        size: sizes[this.props.size] || sizes[SIZE.default]
       }, sharedProps, clearIconProps));
     }
   }, {
     key: "renderArrow",
     value: function renderArrow() {
+      var _sizes2;
+
       if (this.props.type !== TYPE.select) {
         return null;
       }
 
+      var _this$getSharedProps2 = this.getSharedProps(),
+          $size = _this$getSharedProps2.$size,
+          sharedProps = _objectWithoutProperties(_this$getSharedProps2, ["$size"]);
+
       var _this$props$overrides5 = this.props.overrides,
           overrides = _this$props$overrides5 === void 0 ? {} : _this$props$overrides5;
 
@@ -972,17 +994,21 @@ var Select = /*#__PURE__*/function (_React$Component) {
           SelectArrow = _getOverrides8[0],
           selectArrowProps = _getOverrides8[1];
 
-      var sharedProps = this.getSharedProps();
-      return /*#__PURE__*/React.createElement(SelectArrow, _extends({
-        size: 16,
-        title: 'open',
-        overrides: {
-          Svg: {
-            component: StyledSelectArrow,
-            props: overrides.SelectArrow && overrides.SelectArrow.props ? overrides.SelectArrow.props : {},
-            style: overrides.SelectArrow && overrides.SelectArrow.style ? overrides.SelectArrow.style : {}
+      selectArrowProps.overrides = mergeOverrides({
+        Svg: {
+          style: function style(_ref4) {
+            var $theme = _ref4.$theme,
+                $disabled = _ref4.$disabled;
+            return {
+              color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary
+            };
           }
         }
+      }, selectArrowProps.overrides);
+      var sizes = (_sizes2 = {}, _defineProperty(_sizes2, SIZE.mini, 16), _defineProperty(_sizes2, SIZE.compact, 16), _defineProperty(_sizes2, SIZE.default, 20), _defineProperty(_sizes2, SIZE.large, 24), _sizes2);
+      return /*#__PURE__*/React.createElement(SelectArrow, _extends({
+        size: sizes[this.props.size] || sizes[SIZE.default],
+        title: 'open'
       }, sharedProps, selectArrowProps));
     }
   }, {
@@ -1014,7 +1040,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "filterOptions",
     value: function filterOptions(excludeOptions) {
-      var _this5 = this;
+      var _this6 = this;
 
       var filterValue = this.state.inputValue.trim(); // apply filter function
 
@@ -1027,9 +1053,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
 
       var filterDoesNotMatchOption = this.props.ignoreCase ? function (opt) {
-        return opt[_this5.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
+        return opt[_this6.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
       } : function (opt) {
-        return opt[_this5.props.labelKey] !== filterValue.trim();
+        return opt[_this6.props.labelKey] !== filterValue.trim();
       };
 
       if (filterValue && this.props.creatable && this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
@@ -1084,7 +1110,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
       this.options = normalizeOptions(this.props.options);
       var _this$props2 = this.props,
@@ -1156,55 +1182,55 @@ var Select = /*#__PURE__*/function (_React$Component) {
           , _extends({
             innerRef: function innerRef(ref) {
               if (!ref) return;
-              _this6.anchor = ref.anchorRef;
+              _this7.anchor = ref.anchorRef;
             },
             autoFocus: false,
             focusLock: false,
-            mountNode: _this6.props.mountNode,
+            mountNode: _this7.props.mountNode,
             onEsc: function onEsc() {
-              return _this6.closeMenu();
+              return _this7.closeMenu();
             },
             isOpen: isOpen,
             popoverMargin: 0,
             content: function content() {
               var dropdownProps = {
-                error: _this6.props.error,
-                positive: _this6.props.positive,
-                getOptionLabel: _this6.props.getOptionLabel || _this6.getOptionLabel.bind(_this6, locale),
+                error: _this7.props.error,
+                positive: _this7.props.positive,
+                getOptionLabel: _this7.props.getOptionLabel || _this7.getOptionLabel.bind(_this7, locale),
                 id: listboxId,
-                isLoading: _this6.props.isLoading,
-                labelKey: _this6.props.labelKey,
-                maxDropdownHeight: _this6.props.maxDropdownHeight,
+                isLoading: _this7.props.isLoading,
+                labelKey: _this7.props.labelKey,
+                maxDropdownHeight: _this7.props.maxDropdownHeight,
                 multi: multi,
                 noResultsMsg: noResultsMsg,
-                onActiveDescendantChange: _this6.handleActiveDescendantChange,
-                onItemSelect: _this6.selectValue,
+                onActiveDescendantChange: _this7.handleActiveDescendantChange,
+                onItemSelect: _this7.selectValue,
                 options: options,
                 overrides: overrides,
-                required: _this6.props.required,
-                searchable: _this6.props.searchable,
-                size: _this6.props.size,
+                required: _this7.props.required,
+                searchable: _this7.props.searchable,
+                size: _this7.props.size,
                 type: type,
                 value: valueArray,
-                valueKey: _this6.props.valueKey,
-                width: _this6.anchor.current ? _this6.anchor.current.clientWidth : null,
-                keyboardControlNode: _this6.anchor
+                valueKey: _this7.props.valueKey,
+                width: _this7.anchor.current ? _this7.anchor.current.clientWidth : null,
+                keyboardControlNode: _this7.anchor
               };
               return /*#__PURE__*/React.createElement(SelectDropdown, _extends({
-                innerRef: _this6.dropdown
+                innerRef: _this7.dropdown
               }, dropdownProps));
             },
             placement: PLACEMENT.bottom
           }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
-            onBlur: _this6.handleBlur,
+            onBlur: _this7.handleBlur,
             "data-baseweb": "select"
           }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
-            onKeyDown: _this6.handleKeyDown,
-            onClick: _this6.handleClick,
-            onTouchEnd: _this6.handleTouchEnd,
-            onTouchMove: _this6.handleTouchMove,
-            onTouchStart: _this6.handleTouchStart
-          }, sharedProps, controlContainerProps), type === TYPE.search ? _this6.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this6.renderValue(valueArray, isOpen, locale), _this6.renderInput(listboxId), _this6.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this6.props.placeholder !== 'undefined' ? _this6.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this6.renderLoading(), _this6.renderClear(), type === TYPE.select ? _this6.renderArrow() : null))));
+            onKeyDown: _this7.handleKeyDown,
+            onClick: _this7.handleClick,
+            onTouchEnd: _this7.handleTouchEnd,
+            onTouchMove: _this7.handleTouchMove,
+            onTouchStart: _this7.handleTouchStart
+          }, sharedProps, controlContainerProps), type === TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray, isOpen, locale), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === TYPE.select ? _this7.renderArrow() : null))));
         });
       });
     }

package/esm/select/utils/default-filter-options.js

@@ -43,7 +43,7 @@ var filterOptions = function filterOptions(options, filterValue, excludeOptions,
     acc.add(option[props.valueKey]);
     return acc;
   }, new Set());
-  var re = new RegExp("".concat(props.matchPos === 'start' ? '$' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
+  var re = new RegExp("".concat(props.matchPos === 'start' ? '^' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
 
   return options.filter(function (option) {
     if (excludeValues.has(option[props.valueKey])) return false;

package/esm/snackbar/snackbar-context.js

@@ -136,7 +136,7 @@ export default function SnackbarProvider(_ref) {
     setTimeout(function () {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

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

@@ -115,8 +115,21 @@ export var StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, function
   };
 });
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
-export var StyledSortAscIcon = styled(ChevronUp, function (_ref7) {
+export var StyledSortIconContainer = styled('span', function (_ref7) {
   var $theme = _ref7.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    top: '50%',
+    right: $theme.sizing.scale500,
+    transform: 'translateY(-50%)'
+  };
+}); // No longer used, but will maintain for some time to support existing usage
+
+StyledSortIconContainer.displayName = "StyledSortIconContainer";
+export var StyledSortAscIcon = styled(ChevronUp, function (_ref8) {
+  var $theme = _ref8.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -125,8 +138,8 @@ export var StyledSortAscIcon = styled(ChevronUp, function (_ref7) {
   };
 });
 StyledSortAscIcon.displayName = "StyledSortAscIcon";
-export var StyledSortDescIcon = styled(ChevronDown, function (_ref8) {
-  var $theme = _ref8.$theme;
+export var StyledSortDescIcon = styled(ChevronDown, function (_ref9) {
+  var $theme = _ref9.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -135,8 +148,8 @@ export var StyledSortDescIcon = styled(ChevronDown, function (_ref8) {
   };
 });
 StyledSortDescIcon.displayName = "StyledSortDescIcon";
-export var StyledSortNoneIcon = styled(Blank, function (_ref9) {
-  var $theme = _ref9.$theme;
+export var StyledSortNoneIcon = styled(Blank, function (_ref10) {
+  var $theme = _ref10.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -145,13 +158,13 @@ export var StyledSortNoneIcon = styled(Blank, function (_ref9) {
   };
 });
 StyledSortNoneIcon.displayName = "StyledSortNoneIcon";
-export var StyledTableBody = styled('tbody', function (_ref10) {
-  var $theme = _ref10.$theme;
+export var StyledTableBody = styled('tbody', function (_ref11) {
+  var $theme = _ref11.$theme;
   return {};
 });
 StyledTableBody.displayName = "StyledTableBody";
-export var StyledTableBodyRow = styled('tr', function (_ref11) {
-  var $theme = _ref11.$theme;
+export var StyledTableBodyRow = styled('tr', function (_ref12) {
+  var $theme = _ref12.$theme;
   return {
     ':hover': {
       backgroundColor: $theme.colors.tableStripedBackground
@@ -159,15 +172,15 @@ export var StyledTableBodyRow = styled('tr', function (_ref11) {
   };
 });
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
-export var StyledTableBodyCell = styled('td', function (_ref12) {
+export var StyledTableBodyCell = styled('td', function (_ref13) {
   var _notLastChild2;
 
-  var $theme = _ref12.$theme,
-      $size = _ref12.$size,
-      $divider = _ref12.$divider,
-      $isNumeric = _ref12.$isNumeric,
-      $isLastRow = _ref12.$isLastRow,
-      $isSortable = _ref12.$isSortable;
+  var $theme = _ref13.$theme,
+      $size = _ref13.$size,
+      $divider = _ref13.$divider,
+      $isNumeric = _ref13.$isNumeric,
+      $isLastRow = _ref13.$isLastRow,
+      $isSortable = _ref13.$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;
@@ -187,8 +200,8 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
   });
 });
 StyledTableBodyCell.displayName = "StyledTableBodyCell";
-export var StyledTableLoadingMessage = styled('div', function (_ref13) {
-  var $theme = _ref13.$theme;
+export var StyledTableLoadingMessage = styled('div', function (_ref14) {
+  var $theme = _ref14.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.ParagraphSmall), {}, {
     color: $theme.colors.contentPrimary,
     padding: $theme.sizing.scale600

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

@@ -47,8 +47,11 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { StyledRoot, StyledTable, StyledTableHead, StyledTableHeadRow, StyledTableHeadCell, StyledTableHeadCellSortable, StyledTableBody, StyledTableBodyRow, StyledTableBodyCell, StyledTableLoadingMessage, StyledTableEmptyMessage, StyledSortAscIcon, StyledSortDescIcon, StyledSortNoneIcon } from './styled-components.js';
+import { StyledRoot, StyledTable, StyledTableHead, StyledTableHeadRow, StyledTableHeadCell, StyledTableHeadCellSortable, StyledTableBody, StyledTableBodyRow, StyledTableBodyCell, StyledTableLoadingMessage, StyledTableEmptyMessage, StyledSortIconContainer } from './styled-components.js';
 import { getOverrides } from '../helpers/overrides.js';
+import Blank from '../icon/blank.js';
+import ChevronDown from '../icon/chevron-down.js';
+import ChevronUp from '../icon/chevron-up.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 var TableBuilder = /*#__PURE__*/function (_React$Component) {
@@ -167,20 +170,25 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           TableEmptyMessage = _getOverrides22[0],
           tableEmptyMessageProps = _getOverrides22[1];
 
-      var _getOverrides23 = getOverrides(overrides.SortAscIcon, StyledSortAscIcon),
+      var _getOverrides23 = getOverrides(overrides.SortIconContainer, StyledSortIconContainer),
           _getOverrides24 = _slicedToArray(_getOverrides23, 2),
-          SortAscIcon = _getOverrides24[0],
-          sortAscIconProps = _getOverrides24[1];
+          SortIconContainer = _getOverrides24[0],
+          sortIconContainerProps = _getOverrides24[1];
 
-      var _getOverrides25 = getOverrides(overrides.SortDescIcon, StyledSortDescIcon),
+      var _getOverrides25 = getOverrides(overrides.SortAscIcon, ChevronUp),
           _getOverrides26 = _slicedToArray(_getOverrides25, 2),
-          SortDescIcon = _getOverrides26[0],
-          sortDescIconProps = _getOverrides26[1];
+          SortAscIcon = _getOverrides26[0],
+          sortAscIconProps = _getOverrides26[1];
 
-      var _getOverrides27 = getOverrides(overrides.SortNoneIcon, StyledSortNoneIcon),
+      var _getOverrides27 = getOverrides(overrides.SortDescIcon, ChevronDown),
           _getOverrides28 = _slicedToArray(_getOverrides27, 2),
-          SortNoneIcon = _getOverrides28[0],
-          sortNoneIconProps = _getOverrides28[1];
+          SortDescIcon = _getOverrides28[0],
+          sortDescIconProps = _getOverrides28[1];
+
+      var _getOverrides29 = getOverrides(overrides.SortNoneIcon, Blank),
+          _getOverrides30 = _slicedToArray(_getOverrides29, 2),
+          SortNoneIcon = _getOverrides30[0],
+          sortNoneIconProps = _getOverrides30[1];
 
       var columns = React.Children.toArray(children).filter(Boolean).map(function (child) {
         return child.props;
@@ -190,10 +198,10 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
         var colOverrides = col.overrides || {};
 
         if (!col.sortable) {
-          var _getOverrides29 = getOverrides(colOverrides.TableHeadCell, TableHeadCell),
-              _getOverrides30 = _slicedToArray(_getOverrides29, 2),
-              ColTableHeadCell = _getOverrides30[0],
-              colTableHeadCellProps = _getOverrides30[1];
+          var _getOverrides31 = getOverrides(colOverrides.TableHeadCell, TableHeadCell),
+              _getOverrides32 = _slicedToArray(_getOverrides31, 2),
+              ColTableHeadCell = _getOverrides32[0],
+              colTableHeadCellProps = _getOverrides32[1];
 
           return /*#__PURE__*/React.createElement(ColTableHeadCell, _extends({
             key: colIndex,
@@ -205,10 +213,10 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           }, tableHeadCellProps, colTableHeadCellProps), col.header);
         }
 
-        var _getOverrides31 = getOverrides(colOverrides.TableHeadCellSortable, TableHeadCellSortable),
-            _getOverrides32 = _slicedToArray(_getOverrides31, 2),
-            ColTableHeadCellSortable = _getOverrides32[0],
-            colTableHeadCellSortableProps = _getOverrides32[1];
+        var _getOverrides33 = getOverrides(colOverrides.TableHeadCellSortable, TableHeadCellSortable),
+            _getOverrides34 = _slicedToArray(_getOverrides33, 2),
+            ColTableHeadCellSortable = _getOverrides34[0],
+            colTableHeadCellSortableProps = _getOverrides34[1];
 
         var sortIcon = null;
         var sortLabel = 'not sorted';
@@ -216,6 +224,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
         switch (col.id === sortColumn && sortOrder) {
           case 'ASC':
             sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, _extends({
+              size: "16px",
               "aria-hidden": true,
               role: "presentation"
             }, sortAscIconProps));
@@ -224,6 +233,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
 
           case 'DESC':
             sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
+              size: "16px",
               "aria-hidden": true,
               role: "presentation"
             }, sortDescIconProps));
@@ -232,6 +242,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
 
           default:
             sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
+              size: "16px",
               "aria-hidden": true,
               role: "presentation"
             }, sortNoneIconProps));
@@ -257,16 +268,16 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
               onSort && onSort(col.id);
             }
           }
-        }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, sortIcon);
+        }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, sortIconContainerProps, sortIcon));
       }
 
       function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
         var colOverrides = col.overrides || {};
 
-        var _getOverrides33 = getOverrides(colOverrides.TableBodyCell, TableBodyCell),
-            _getOverrides34 = _slicedToArray(_getOverrides33, 2),
-            ColTableBodyCell = _getOverrides34[0],
-            colTableBodyCellProps = _getOverrides34[1];
+        var _getOverrides35 = getOverrides(colOverrides.TableBodyCell, TableBodyCell),
+            _getOverrides36 = _slicedToArray(_getOverrides35, 2),
+            ColTableBodyCell = _getOverrides36[0],
+            colTableBodyCellProps = _getOverrides36[1];
 
         return /*#__PURE__*/React.createElement(ColTableBodyCell, _extends({
           key: colIndex,

package/esm/textarea/textarea.js

@@ -64,23 +64,27 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isFocused: _this.props.autoFocus || false
+      isFocused: _this.props.autoFocus && !_this.props.readOnly || false
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     return _this;
@@ -108,6 +112,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "textarea",
         $isFocused: this.state.isFocused,
+        $isReadOnly: this.props.readOnly,
         $disabled: this.props.disabled,
         $error: this.props.error,
         $positive: this.props.positive,
@@ -128,6 +133,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Textarea, "defaultProps", {
   autoFocus: false,
   disabled: false,
+  readOnly: false,
   error: false,
   name: '',
   onBlur: function onBlur() {},

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

@@ -15,6 +15,14 @@ var tagHoverBackground = "rgba(255, 255, 255, 0.2)";
 export default (function () {
   var themePrimitives = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : colorTokens;
   return {
+    bannerActionLowInfo: themePrimitives.accent600,
+    bannerActionLowNegative: themePrimitives.negative600,
+    bannerActionLowPositive: themePrimitives.positive600,
+    bannerActionLowWarning: themePrimitives.warning600,
+    bannerActionHighInfo: themePrimitives.accent500,
+    bannerActionHighNegative: themePrimitives.negative600,
+    bannerActionHighPositive: themePrimitives.positive600,
+    bannerActionHighWarning: themePrimitives.warning600,
     // Buttons
     buttonPrimaryFill: themePrimitives.primary,
     buttonPrimaryText: themePrimitives.black,

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

@@ -15,6 +15,14 @@ var tagHoverBackground = "rgba(0, 0, 0, 0.08)";
 export default (function () {
   var themePrimitives = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : colorTokens;
   return {
+    bannerActionLowInfo: themePrimitives.accent100,
+    bannerActionLowNegative: themePrimitives.negative100,
+    bannerActionLowPositive: themePrimitives.positive100,
+    bannerActionLowWarning: themePrimitives.warning200,
+    bannerActionHighInfo: themePrimitives.accent500,
+    bannerActionHighNegative: themePrimitives.negative500,
+    bannerActionHighPositive: themePrimitives.positive500,
+    bannerActionHighWarning: themePrimitives.warning200,
     // Buttons
     buttonPrimaryFill: themePrimitives.primary,
     buttonPrimaryText: themePrimitives.white,