baseui 11.0.1 → 11.1.0

package/es/locale/tr_TR.js

@@ -0,0 +1,115 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export default {
+  accordion: {
+    collapse: 'Daralt',
+    expand: 'Genişlet'
+  },
+  breadcrumbs: {
+    ariaLabel: 'Navigasyon'
+  },
+  datepicker: {
+    ariaLabel: 'Bir tarih seçin.',
+    ariaLabelRange: 'Bir tarih aralığı seçin',
+    ariaLabelCalendar: 'Takvim',
+    ariaRoleDescriptionCalendarMonth: 'Aylık Takvim',
+    previousMonth: 'Geçtiğimiz ay.',
+    nextMonth: 'Gelecek ay.',
+    pastWeek: 'Geçen Hafta',
+    pastMonth: 'Geçen Ay',
+    pastThreeMonths: 'Son 3 Ay',
+    pastSixMonths: 'Son 6 Ay',
+    pastYear: 'Geçen Yıl',
+    pastTwoYears: 'Son 2 Yıl',
+    screenReaderMessageInput: 'Takvimle etkileşim kurmak ve bir tarih seçmek için aşağı ok tuşuna basın. Takvimi kapatmak için kaçış (ESC) düğmesine basın.',
+    selectedDate: 'Seçilen tarih ${date}.',
+    selectedDateRange: 'Seçilen tarih aralığı ${startDate} ile ${endDate} arasındadır.',
+    selectSecondDatePrompt: 'İkinci tarihi seçin.',
+    quickSelectLabel: 'Bir tarih aralığı seçin',
+    quickSelectAriaLabel: 'Bir tarih aralığı seçin',
+    quickSelectPlaceholder: 'Hiçbiri',
+    timeSelectEndLabel: 'Bitiş zamanı',
+    timeSelectStartLabel: 'Başlangıç zamanı',
+    timePickerAriaLabel12Hour: 'Bir zaman seçin, 12-saat formatında.',
+    timePickerAriaLabel24Hour: 'Bir zaman seçin, 24-saat formatında.',
+    timezonePickerAriaLabel: 'Bir saat dilimi seçin.',
+    selectedStartDateLabel: 'Seçilen başlangıç tarihi.',
+    selectedEndDateLabel: 'Seçilen bitiş tarihi.',
+    dateNotAvailableLabel: 'Kullanılabilir değil.',
+    dateAvailableLabel: 'Kullanılabilir.',
+    selectedLabel: 'Seçildi.',
+    chooseLabel: 'Seç'
+  },
+  datatable: {
+    emptyState: 'Tanımlanan filtre kriterleriyle eşleşen satır yok. Daha fazla veri görüntülemek için lütfen bir veya daha fazla filtreyi kaldırın.',
+    loadingState: 'Satır yükleniyor.',
+    searchAriaLabel: 'Metne göre ara',
+    filterAdd: 'Filtre Ekle',
+    filterExclude: 'Dahil etme',
+    filterApply: 'Uygula',
+    filterExcludeRange: 'Exclude range',
+    filterExcludeValue: 'Exclude value',
+    filterAppliedTo: 'uygulanan filtre',
+    optionsLabel: 'Filtrelenecek sütunu seçin',
+    optionsSearch: 'Filtrelemek için bir sütun arayın...',
+    optionsEmpty: 'Sütun yok.',
+    categoricalFilterSelectAll: 'Tümünü Seç',
+    categoricalFilterSelectClear: 'Temizle',
+    categoricalFilterEmpty: 'Kategori bulunamadı',
+    datetimeFilterRange: 'Aralık',
+    datetimeFilterRangeDatetime: 'Tarih, Zaman',
+    datetimeFilterRangeDate: 'Tarih',
+    datetimeFilterRangeTime: 'Zaman',
+    datetimeFilterCategorical: 'Kategorik',
+    datetimeFilterCategoricalWeekday: 'Hafta içi',
+    datetimeFilterCategoricalMonth: 'Ay',
+    datetimeFilterCategoricalQuarter: 'Çeyrek',
+    datetimeFilterCategoricalHalf: 'Yarım',
+    datetimeFilterCategoricalFirstHalf: 'H1',
+    datetimeFilterCategoricalSecondHalf: 'H2',
+    datetimeFilterCategoricalYear: 'Yıl',
+    numericalFilterRange: 'Aralık',
+    numericalFilterSingleValue: 'Single Value',
+    booleanFilterTrue: 'doğru',
+    booleanFilterFalse: 'yanlış',
+    booleanColumnTrueShort: 'D',
+    booleanColumnFalseShort: 'Y'
+  },
+  buttongroup: {
+    ariaLabel: 'buton grup'
+  },
+  fileuploader: {
+    dropFilesToUpload: 'Dosyaları yüklemek için buraya bırakın...',
+    or: '',
+    browseFiles: 'Dosyalara göz atın',
+    retry: 'Yüklemeyi Yeniden Dene',
+    cancel: 'İptal'
+  },
+  menu: {
+    noResultsMsg: 'Sonuç yok',
+    parentMenuItemAriaLabel: 'Şu anda iç içe bir liste kutusu açan bir öğedesiniz. Bu öğeye girmek için sağ ok ve geri dönmek için sol ok tuşuna basın.'
+  },
+  modal: {
+    close: 'Kapat'
+  },
+  drawer: {
+    close: 'Kapat'
+  },
+  pagination: {
+    prev: 'Önceki',
+    next: 'Sonraki',
+    preposition: 'nın'
+  },
+  select: {
+    noResultsMsg: 'Sonuç bulunamadı',
+    placeholder: 'Seç...',
+    create: 'Oluştur'
+  },
+  toast: {
+    close: 'Kapat'
+  }
+};

package/es/notification/notification.js

@@ -10,11 +10,26 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { Toast, TYPE } from '../toast/index.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 export default class Notification extends React.Component {
   render() {
+    const overrides = mergeOverrides({
+      Body: {
+        style: ({
+          $theme
+        }) => ({
+          marginTop: $theme.sizing.scale600,
+          marginRight: $theme.sizing.scale600,
+          marginBottom: $theme.sizing.scale600,
+          marginLeft: $theme.sizing.scale600
+        })
+      }
+    }, this.props.overrides);
     return /*#__PURE__*/React.createElement(Toast, _extends({
       "data-baseweb": "notification"
-    }, this.props));
+    }, this.props, {
+      overrides: overrides
+    }));
   }
 
 }

package/es/payment-card/custom-cards.config.js

@@ -0,0 +1,22 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+/*
+  This file should be used for adding new card type configuration
+*/
+const UATP_CARD_TYPE_CONFIG = {
+  niceType: 'Uatp',
+  type: 'uatp',
+  patterns: [[1001, 1999]],
+  gaps: [4, 9],
+  lengths: [15],
+  code: {
+    name: 'CVV',
+    size: 0
+  }
+};
+export const CUSTOM_CARDS_CONFIGURATION = [UATP_CARD_TYPE_CONFIG];

package/es/payment-card/icons/uatp.js

@@ -0,0 +1,52 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+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';
+
+const UatpIcon = ({
+  size
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M23 4H1V20H23V4Z",
+  fill: "#F0F0F0"
+}), /*#__PURE__*/React.createElement("g", {
+  clipPath: "url(#clip0_90345_28085)"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M10.5057 9.64723H10.1817H9.70679V10.9659L10.3044 12.6255L11.4708 12.133L10.5057 9.64723Z",
+  fill: "#0A2C1B"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M6.34592 14.6471L6.34001 9.64723H5.07682V13.7451C4.94173 13.7928 4.80176 13.8253 4.65948 13.8421C4.38337 13.8743 3.9371 13.9265 3.60459 13.6339C3.27002 13.3394 3.26507 12.8846 3.26655 12.7802V9.64723H2.00336V12.7802C1.96122 13.7182 2.32658 14.1754 2.45948 14.3209C3.17638 15.1058 4.54287 14.9387 5.39513 14.8345C5.71171 14.7958 6.02491 14.7331 6.33204 14.6471L6.32786 14.6427L6.34592 14.6471Z",
+  fill: "#0A2C1B"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M21.999 11.453C21.9951 11.2269 21.9447 10.4929 21.3738 10.0162C21.1483 9.82795 20.9283 9.75218 20.7469 9.6897C20.5867 9.63455 20.2633 9.54148 19.3754 9.58086C18.9585 9.59952 18.5429 9.64148 18.1306 9.70653V14.8388H19.3938V13.3179C19.4958 13.3263 19.6189 13.3331 19.7586 13.3337C19.9448 13.3351 20.1309 13.325 20.3158 13.3033C20.4802 13.2817 21.266 13.1786 21.709 12.5414C22.0104 12.1079 22.0024 11.6443 21.999 11.453ZM20.5118 11.9928C20.3546 12.1594 20.1557 12.1903 19.9414 12.2236C19.7608 12.2514 19.5768 12.2484 19.3972 12.2148V10.7433C19.4924 10.7303 19.5885 10.7245 19.6845 10.7259C19.9706 10.73 20.2799 10.7344 20.4943 10.9523C20.6881 11.1491 20.6983 11.4123 20.699 11.4747C20.6996 11.5392 20.6985 11.7948 20.5118 11.9928Z",
+  fill: "#0A2C1B"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10.4995 13.1673L11.1015 14.8388H12.5212L11.6926 12.7045C11.3054 12.8761 10.9077 13.0304 10.4995 13.1673Z",
+  fill: "#0A2C1B"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M6.60772 13.6849C6.59882 13.6856 6.59 13.6828 6.58303 13.6773C6.57607 13.6717 6.57148 13.6637 6.57019 13.6548C6.56891 13.646 6.57102 13.637 6.5761 13.6297C6.58119 13.6223 6.58887 13.6172 6.59759 13.6153C7.44534 13.4378 8.27682 13.1899 9.08338 12.8742C12.0436 11.7142 12.5355 10.4597 14.7222 9.60822C17.2224 8.63467 19.7225 9.06335 20.7271 9.30762C20.7338 9.30921 20.7396 9.31329 20.7433 9.31903C20.7471 9.32476 20.7485 9.3317 20.7473 9.33844C20.746 9.34518 20.7423 9.35119 20.7368 9.35525C20.7313 9.35931 20.7244 9.3611 20.7176 9.36026C19.7189 9.24529 18.7085 9.28396 17.7216 9.47491C15.1767 9.96677 14.237 11.2345 11.9094 12.341C10.7268 12.9032 8.98995 13.517 6.60772 13.6849Z",
+  fill: "#3EB54A"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M16.9918 9.64723H12.6013V10.7793H14.1649V14.8388H15.4281V10.7793H16.9918V9.64723Z",
+  fill: "#0A2C1B"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M9.23192 9.64723H8.95198L6.93652 14.8388H8.31211L9.70682 10.9659V9.64723H9.23192Z",
+  fill: "#0A2C1B"
+})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "clip0_90345_28085"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "20",
+  height: "5.92493",
+  fill: "white",
+  transform: "translate(2 9)"
+}))));
+
+export default UatpIcon;

package/es/payment-card/payment-card.js

@@ -24,7 +24,9 @@ import MaestroIcon from './icons/maestro.js';
 import MastercardIcon from './icons/mastercard.js';
 import UnionPayIcon from './icons/unionpay.js';
 import VisaIcon from './icons/visa.js';
+import UatpIcon from './icons/uatp.js';
 import { IconWrapper as StyledIconWrapper } from './styled-components.js';
+import { CUSTOM_CARDS_CONFIGURATION } from './custom-cards.config.js';
 const CardTypeToComponent = {
   visa: VisaIcon,
   mastercard: MastercardIcon,
@@ -35,16 +37,19 @@ const CardTypeToComponent = {
   unionpay: UnionPayIcon,
   maestro: MaestroIcon,
   elo: EloIcon,
-  generic: GenericIcon
+  generic: GenericIcon,
+  uatp: UatpIcon
 };
 
 class PaymentCard extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props); // For adding new custom card type, add card config to custom-cards.config.js
 
     _defineProperty(this, "caretPosition", 0);
 
     _defineProperty(this, "inRef", null);
+
+    CUSTOM_CARDS_CONFIGURATION.forEach(cardTypeConfig => valid.creditCardType.addCard(cardTypeConfig));
   }
 
   componentDidUpdate(prevProps) {

package/es/popover/popover.js

@@ -338,6 +338,7 @@ class PopoverInner extends React.Component {
       $popoverOffset: popoverOffset,
       $placement: placement,
       $isAnimating: isAnimating,
+      $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
       $isOpen: isOpen,
       $popoverMargin: popoverMargin,
       $isHoverTrigger: this.isHoverTrigger()
@@ -408,7 +409,7 @@ class PopoverInner extends React.Component {
   }
 
   render() {
-    const mountedAndOpen = this.state.isMounted && this.props.isOpen;
+    const mountedAndOpen = this.state.isMounted && (this.props.isOpen || this.state.isAnimating);
     const rendered = [this.renderAnchor()];
     const renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
     const defaultPopperOptions = {

package/es/popover/stateful-container.js

@@ -143,6 +143,7 @@ class StatefulContainer extends React.Component {
     const {
       accessibilityType,
       autoFocus,
+      animateOutTime,
       dismissOnClickOutside,
       dismissOnEsc,
       focusLock,
@@ -167,6 +168,7 @@ class StatefulContainer extends React.Component {
     } = this.props;
     const popoverProps = {
       accessibilityType,
+      animateOutTime,
       autoFocus,
       content: this.renderContent,
       focusLock,

package/es/popover/styled-components.js

@@ -13,6 +13,7 @@ import { getPopoverMarginStyles, getArrowPositionStyles, getStartPosition, getEn
  */
 export function getBodyStyles(props) {
   const {
+    $animationDuration,
     $isOpen,
     $isAnimating,
     $placement,
@@ -33,7 +34,7 @@ export function getBodyStyles(props) {
     borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
     boxShadow: $theme.lighting.shadow600,
     transitionProperty: 'opacity,transform',
-    transitionDuration: $isAnimating ? '0.1s' : '0s',
+    transitionDuration: $isAnimating ? $isOpen ? '0.1s' : `${$animationDuration}ms` : '0s',
     transitionTimingFunction: $isOpen ? $theme.animation.easeOutCurve : $theme.animation.easeInCurve,
     opacity: $isAnimating && $isOpen ? 1 : 0,
     transform: $isAnimating && $isOpen ? getEndPosition($popoverOffset) : getStartPosition($popoverOffset, $placement, $showArrow ? ARROW_SIZE : 0, $popoverMargin),

package/es/progress-steps/numbered-step.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides.js';
 import { StyledNumberStep, StyledNumberIcon, StyledContent, StyledContentTitle, StyledNumberContentTail, StyledContentDescription } from './styled-components.js';
-import StyledCheckIcon from '../icon/check.js';
+import Check from '../icon/check.js';
 
 function NumberedStep({
   overrides = {},
@@ -26,7 +26,7 @@ function NumberedStep({
   const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
   const [Title, titleProps] = getOverrides(overrides.Title, StyledContentTitle);
   const [Description, descriptionProps] = getOverrides(overrides.Description, StyledContentDescription);
-  const [CheckIcon, checkIconProps] = getOverrides(overrides.Icon, StyledCheckIcon);
+  const [CheckIcon, checkIconProps] = getOverrides(overrides.Icon, Check);
   const sharedProps = {
     $isCompleted: isCompleted,
     $isActive: isActive

package/es/select/select-component.js

@@ -11,7 +11,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';
@@ -19,10 +19,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() {
@@ -224,8 +224,10 @@ class Select extends 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) {
@@ -436,6 +438,12 @@ class Select extends React.Component {
     _defineProperty(this, "handleInputRef", 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);
       }
@@ -586,7 +594,7 @@ class Select extends React.Component {
       }
 
       if (!prevState.isFocused && this.state.isFocused) {
-        document.addEventListener('click', this.handleClickOutside);
+        setTimeout(() => document.addEventListener('click', this.handleClickOutside), 0);
       }
     }
   }
@@ -806,24 +814,27 @@ class Select extends React.Component {
       return;
     }
 
-    const sharedProps = this.getSharedProps();
+    const {
+      $size,
+      ...sharedProps
+    } = this.getSharedProps();
     const {
       overrides = {}
     } = this.props;
     const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+    const sizes = {
+      [SIZE.mini]: 15,
+      [SIZE.compact]: 15,
+      [SIZE.default]: 18,
+      [SIZE.large]: 22
+    };
     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));
   }
 
@@ -832,21 +843,35 @@ class Select extends React.Component {
       return null;
     }
 
+    const {
+      $size,
+      ...sharedProps
+    } = this.getSharedProps();
     const {
       overrides = {}
     } = this.props;
     const [SelectArrow, selectArrowProps] = getOverrides(overrides.SelectArrow, TriangleDownIcon);
-    const 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: ({
+          $theme,
+          $disabled
+        }) => {
+          return {
+            color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary
+          };
         }
       }
+    }, selectArrowProps.overrides);
+    const sizes = {
+      [SIZE.mini]: 16,
+      [SIZE.compact]: 16,
+      [SIZE.default]: 20,
+      [SIZE.large]: 24
+    };
+    return /*#__PURE__*/React.createElement(SelectArrow, _extends({
+      size: sizes[this.props.size] || sizes[SIZE.default],
+      title: 'open'
     }, sharedProps, selectArrowProps));
   }
 

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

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

package/es/snackbar/snackbar-context.js

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

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

@@ -118,6 +118,20 @@ export const StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, ({
   };
 });
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
+export const StyledSortIconContainer = styled('span', ({
+  $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 const StyledSortAscIcon = styled(ChevronUp, ({
   $theme
 }) => {

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

@@ -9,8 +9,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';
 export default class TableBuilder extends React.Component {
   constructor(...args) {
@@ -64,9 +67,10 @@ export default class TableBuilder extends React.Component {
     const [TableBodyCell, tableBodyCellProps] = getOverrides(overrides.TableBodyCell, StyledTableBodyCell);
     const [TableLoadingMessage, tableLoadingMessageProps] = getOverrides(overrides.TableLoadingMessage, StyledTableLoadingMessage);
     const [TableEmptyMessage, tableEmptyMessageProps] = getOverrides(overrides.TableEmptyMessage, StyledTableEmptyMessage);
-    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, StyledSortAscIcon);
-    const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, StyledSortDescIcon);
-    const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, StyledSortNoneIcon);
+    const [SortIconContainer, sortIconContainerProps] = getOverrides(overrides.SortIconContainer, StyledSortIconContainer);
+    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, ChevronUp);
+    const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, ChevronDown);
+    const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, Blank);
     const columns = React.Children.toArray(children).filter(Boolean).map(child => child.props);
 
     function renderHeader(col, colIndex, isFocusVisible) {
@@ -91,6 +95,7 @@ export default class TableBuilder extends React.Component {
       switch (col.id === sortColumn && sortOrder) {
         case 'ASC':
           sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortAscIconProps));
@@ -99,6 +104,7 @@ export default class TableBuilder extends React.Component {
 
         case 'DESC':
           sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortDescIconProps));
@@ -107,6 +113,7 @@ export default class TableBuilder extends React.Component {
 
         default:
           sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortNoneIconProps));
@@ -130,7 +137,7 @@ export default class TableBuilder extends 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) {

package/es/textarea/textarea.js

@@ -18,21 +18,25 @@ class Textarea extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isFocused: this.props.autoFocus || false
+      isFocused: this.props.autoFocus && !this.props.readOnly || false
     });
 
     _defineProperty(this, "onFocus", e => {
-      this.setState({
-        isFocused: true
-      });
-      this.props.onFocus(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: true
+        });
+        this.props.onFocus(e);
+      }
     });
 
     _defineProperty(this, "onBlur", e => {
-      this.setState({
-        isFocused: false
-      });
-      this.props.onBlur(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: false
+        });
+        this.props.onBlur(e);
+      }
     });
   }
 
@@ -52,6 +56,7 @@ class Textarea extends 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,
@@ -70,6 +75,7 @@ class Textarea extends React.Component {
 _defineProperty(Textarea, "defaultProps", {
   autoFocus: false,
   disabled: false,
+  readOnly: false,
   error: false,
   name: '',
   onBlur: () => {},

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

@@ -13,6 +13,14 @@ const tagHoverBackground = `rgba(255, 255, 255, 0.2)`;
 // need to be overrideable through primitives
 
 export default ((themePrimitives = colorTokens) => ({
+  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/es/themes/light-theme/color-component-tokens.js

@@ -13,6 +13,14 @@ const tagHoverBackground = `rgba(0, 0, 0, 0.08)`;
 // overrideable through primitives (`foundation` )
 
 export default ((themePrimitives = colorTokens) => ({
+  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,