baseui 11.0.1 → 11.1.0

package/table-semantic/table-builder.js

@@ -13,8 +13,16 @@ var _styledComponents = require("./styled-components.js");
 
 var _overrides = require("../helpers/overrides.js");
 
+var _blank = _interopRequireDefault(require("../icon/blank.js"));
+
+var _chevronDown = _interopRequireDefault(require("../icon/chevron-down.js"));
+
+var _chevronUp = _interopRequireDefault(require("../icon/chevron-up.js"));
+
 var _focusVisible = require("../utils/focusVisible.js");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
@@ -175,20 +183,25 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           TableEmptyMessage = _getOverrides22[0],
           tableEmptyMessageProps = _getOverrides22[1];
 
-      var _getOverrides23 = (0, _overrides.getOverrides)(overrides.SortAscIcon, _styledComponents.StyledSortAscIcon),
+      var _getOverrides23 = (0, _overrides.getOverrides)(overrides.SortIconContainer, _styledComponents.StyledSortIconContainer),
           _getOverrides24 = _slicedToArray(_getOverrides23, 2),
-          SortAscIcon = _getOverrides24[0],
-          sortAscIconProps = _getOverrides24[1];
+          SortIconContainer = _getOverrides24[0],
+          sortIconContainerProps = _getOverrides24[1];
 
-      var _getOverrides25 = (0, _overrides.getOverrides)(overrides.SortDescIcon, _styledComponents.StyledSortDescIcon),
+      var _getOverrides25 = (0, _overrides.getOverrides)(overrides.SortAscIcon, _chevronUp.default),
           _getOverrides26 = _slicedToArray(_getOverrides25, 2),
-          SortDescIcon = _getOverrides26[0],
-          sortDescIconProps = _getOverrides26[1];
+          SortAscIcon = _getOverrides26[0],
+          sortAscIconProps = _getOverrides26[1];
 
-      var _getOverrides27 = (0, _overrides.getOverrides)(overrides.SortNoneIcon, _styledComponents.StyledSortNoneIcon),
+      var _getOverrides27 = (0, _overrides.getOverrides)(overrides.SortDescIcon, _chevronDown.default),
           _getOverrides28 = _slicedToArray(_getOverrides27, 2),
-          SortNoneIcon = _getOverrides28[0],
-          sortNoneIconProps = _getOverrides28[1];
+          SortDescIcon = _getOverrides28[0],
+          sortDescIconProps = _getOverrides28[1];
+
+      var _getOverrides29 = (0, _overrides.getOverrides)(overrides.SortNoneIcon, _blank.default),
+          _getOverrides30 = _slicedToArray(_getOverrides29, 2),
+          SortNoneIcon = _getOverrides30[0],
+          sortNoneIconProps = _getOverrides30[1];
 
       var columns = React.Children.toArray(children).filter(Boolean).map(function (child) {
         return child.props;
@@ -198,10 +211,10 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
         var colOverrides = col.overrides || {};
 
         if (!col.sortable) {
-          var _getOverrides29 = (0, _overrides.getOverrides)(colOverrides.TableHeadCell, TableHeadCell),
-              _getOverrides30 = _slicedToArray(_getOverrides29, 2),
-              ColTableHeadCell = _getOverrides30[0],
-              colTableHeadCellProps = _getOverrides30[1];
+          var _getOverrides31 = (0, _overrides.getOverrides)(colOverrides.TableHeadCell, TableHeadCell),
+              _getOverrides32 = _slicedToArray(_getOverrides31, 2),
+              ColTableHeadCell = _getOverrides32[0],
+              colTableHeadCellProps = _getOverrides32[1];
 
           return /*#__PURE__*/React.createElement(ColTableHeadCell, _extends({
             key: colIndex,
@@ -213,10 +226,10 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           }, tableHeadCellProps, colTableHeadCellProps), col.header);
         }
 
-        var _getOverrides31 = (0, _overrides.getOverrides)(colOverrides.TableHeadCellSortable, TableHeadCellSortable),
-            _getOverrides32 = _slicedToArray(_getOverrides31, 2),
-            ColTableHeadCellSortable = _getOverrides32[0],
-            colTableHeadCellSortableProps = _getOverrides32[1];
+        var _getOverrides33 = (0, _overrides.getOverrides)(colOverrides.TableHeadCellSortable, TableHeadCellSortable),
+            _getOverrides34 = _slicedToArray(_getOverrides33, 2),
+            ColTableHeadCellSortable = _getOverrides34[0],
+            colTableHeadCellSortableProps = _getOverrides34[1];
 
         var sortIcon = null;
         var sortLabel = 'not sorted';
@@ -224,6 +237,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));
@@ -232,6 +246,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
 
           case 'DESC':
             sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
+              size: "16px",
               "aria-hidden": true,
               role: "presentation"
             }, sortDescIconProps));
@@ -240,6 +255,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
 
           default:
             sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
+              size: "16px",
               "aria-hidden": true,
               role: "presentation"
             }, sortNoneIconProps));
@@ -265,16 +281,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 = (0, _overrides.getOverrides)(colOverrides.TableBodyCell, TableBodyCell),
-            _getOverrides34 = _slicedToArray(_getOverrides33, 2),
-            ColTableBodyCell = _getOverrides34[0],
-            colTableBodyCellProps = _getOverrides34[1];
+        var _getOverrides35 = (0, _overrides.getOverrides)(colOverrides.TableBodyCell, TableBodyCell),
+            _getOverrides36 = _slicedToArray(_getOverrides35, 2),
+            ColTableBodyCell = _getOverrides36[0],
+            colTableBodyCellProps = _getOverrides36[1];
 
         return /*#__PURE__*/React.createElement(ColTableBodyCell, _extends({
           key: colIndex,

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

@@ -19,13 +19,13 @@ import {
   StyledTableBodyCell,
   StyledTableLoadingMessage,
   StyledTableEmptyMessage,
-  StyledSortAscIcon,
-  StyledSortDescIcon,
-  StyledSortNoneIcon,
+  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';
-
 import type { TableBuilderPropsT } from './types.js';
 
 export default class TableBuilder<T> extends React.Component<
@@ -113,17 +113,16 @@ export default class TableBuilder<T> extends React.Component<
       StyledTableEmptyMessage
     );
 
-    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, StyledSortAscIcon);
-
-    const [SortDescIcon, sortDescIconProps] = getOverrides(
-      overrides.SortDescIcon,
-      StyledSortDescIcon
+    const [SortIconContainer, sortIconContainerProps] = getOverrides(
+      overrides.SortIconContainer,
+      StyledSortIconContainer
     );
 
-    const [SortNoneIcon, sortNoneIconProps] = getOverrides(
-      overrides.SortNoneIcon,
-      StyledSortNoneIcon
-    );
+    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)
@@ -164,15 +163,31 @@ export default class TableBuilder<T> extends React.Component<
 
       switch (col.id === sortColumn && sortOrder) {
         case 'ASC':
-          sortIcon = <SortAscIcon aria-hidden={true} role="presentation" {...sortAscIconProps} />;
+          sortIcon = (
+            <SortAscIcon size="16px" aria-hidden={true} role="presentation" {...sortAscIconProps} />
+          );
           sortLabel = 'ascending sorting';
           break;
         case 'DESC':
-          sortIcon = <SortDescIcon aria-hidden={true} role="presentation" {...sortDescIconProps} />;
+          sortIcon = (
+            <SortDescIcon
+              size="16px"
+              aria-hidden={true}
+              role="presentation"
+              {...sortDescIconProps}
+            />
+          );
           sortLabel = 'descending sorting';
           break;
         default:
-          sortIcon = <SortNoneIcon aria-hidden={true} role="presentation" {...sortNoneIconProps} />;
+          sortIcon = (
+            <SortNoneIcon
+              size="16px"
+              aria-hidden={true}
+              role="presentation"
+              {...sortNoneIconProps}
+            />
+          );
           break;
       }
 
@@ -198,7 +213,7 @@ export default class TableBuilder<T> extends React.Component<
           {...colTableHeadCellSortableProps}
         >
           {col.header}
-          {sortIcon}
+          <SortIconContainer {...sortIconContainerProps}>{sortIcon}</SortIconContainer>
         </ColTableHeadCellSortable>
       );
     }

package/table-semantic/types.js.flow

@@ -41,6 +41,7 @@ export type TablePropsT = {
 export type BuilderOverridesT = {
   ...OverridesT,
   TableHeadCellSortable?: OverrideT,
+  SortIconContainer?: OverrideT,
   SortAscIcon?: OverrideT,
   SortDescIcon?: OverrideT,
   SortNoneIcon?: OverrideT,

package/tabs/index.d.ts

@@ -1,23 +1,23 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
-export interface ORIENTATION {
+export declare const ORIENTATION: {
   horizontal: 'horizontal';
   vertical: 'vertical';
-}
-export interface STATE_CHANGE_TYPE {
+};
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
-}
+};
 
 export interface State {
   activeKey: React.Key;
 }
 
 export type StateReducer = (
-  stateChangeType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
+  stateChangeType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
   nextState: State,
-  currentState: State,
+  currentState: State
 ) => State;
 
 export interface TabsOverrides<T> {
@@ -32,12 +32,12 @@ export interface TabsProps {
   activeKey?: React.Key;
   disabled?: boolean;
   renderAll?: boolean;
-  onChange?: (args: {activeKey: React.Key}) => any;
-  orientation?: ORIENTATION[keyof ORIENTATION];
-  overrides?: TabsOverrides<SharedProps & {$active?: boolean}>;
+  onChange?: (args: { activeKey: React.Key }) => any;
+  orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
+  overrides?: TabsOverrides<SharedProps & { $active?: boolean }>;
 }
 
-export const Tabs: React.FC<TabsProps>;
+export declare const Tabs: React.FC<TabsProps>;
 
 export type StatefulTabsProps = TabsProps & {
   activeKey?: never;
@@ -49,8 +49,8 @@ export type StatefulTabsProps = TabsProps & {
 export class StatefulTabs extends React.Component<StatefulTabsProps, State> {
   onTabChange(newState: State): void;
   internalSetState(
-    type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
-    changes: State,
+    type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
+    changes: State
   ): void;
   getInitialKey(): any;
 }
@@ -62,7 +62,7 @@ export interface TabOverrides<T> {
 export interface SharedProps {
   $disabled?: boolean;
   $active?: boolean;
-  $orientation?: ORIENTATION[keyof ORIENTATION];
+  $orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
 }
 
 export interface TabProps {
@@ -76,7 +76,7 @@ export interface TabProps {
   overrides?: TabOverrides<SharedProps>;
   title?: React.ReactNode;
   id?: string;
-  $orientation?: ORIENTATION[keyof ORIENTATION];
+  $orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
 }
 
 export class Tab extends React.Component<TabProps> {
@@ -85,10 +85,7 @@ export class Tab extends React.Component<TabProps> {
   getSharedProps(): SharedProps;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledTab: StyletronComponent<any>;
-export const StyledTabBar: StyletronComponent<any>;
-export const StyledTabContent: StyletronComponent<any>;
-
-export const ORIENTATION: ORIENTATION;
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledTab: StyletronComponent<any>;
+export declare const StyledTabBar: StyletronComponent<any>;
+export declare const StyledTabContent: StyletronComponent<any>;

package/tabs-motion/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 // constants
 
@@ -20,23 +20,23 @@ export enum STATE_CHANGE_TYPE {
 
 // utils
 
-export const getTabId: (uid: string, key: React.Key) => string;
-export const getTabPanelId: (uid: string, key: React.Key) => string;
-export const isHorizontal: (orientation: ORIENTATION) => boolean;
-export const isVertical: (orientation: ORIENTATION) => boolean;
-export const isIntrinsic: (fill: FILL) => boolean;
-export const isFixed: (fill: FILL) => boolean;
-export const isRTL: (direction: string) => boolean;
+export declare const getTabId: (uid: string, key: React.Key) => string;
+export declare const getTabPanelId: (uid: string, key: React.Key) => string;
+export declare const isHorizontal: (orientation: ORIENTATION) => boolean;
+export declare const isVertical: (orientation: ORIENTATION) => boolean;
+export declare const isIntrinsic: (fill: FILL) => boolean;
+export declare const isFixed: (fill: FILL) => boolean;
+export declare const isRTL: (direction: string) => boolean;
 
 // styled-components
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledTabList: StyletronComponent<any>;
-export const StyledTab: StyletronComponent<any>;
-export const StyledArtworkContainer: StyletronComponent<any>;
-export const StyledTabBorder: StyletronComponent<any>;
-export const StyledTabHighlight: StyletronComponent<any>;
-export const StyledTabPanel: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledTabList: StyletronComponent<any>;
+export declare const StyledTab: StyletronComponent<any>;
+export declare const StyledArtworkContainer: StyletronComponent<any>;
+export declare const StyledTabBorder: StyletronComponent<any>;
+export declare const StyledTabHighlight: StyletronComponent<any>;
+export declare const StyledTabPanel: StyletronComponent<any>;
 
 // tabs
 
@@ -63,16 +63,16 @@ interface TabsProps {
   children: React.ReactNode;
   activeKey?: React.Key;
   disabled?: boolean;
-  fill?: FILL[keyof FILL];
-  orientation?: ORIENTATION[keyof ORIENTATION];
+  fill?: typeof FILL[keyof typeof FILL];
+  orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
   activateOnFocus?: boolean;
   renderAll?: boolean;
-  onChange?: (params: {activeKey: React.Key}) => void;
+  onChange?: (params: { activeKey: React.Key }) => void;
   overrides?: TabsOverrides;
   uid?: string;
 }
 
-export const Tabs: React.FC<TabsProps>;
+export declare const Tabs: React.FC<TabsProps>;
 
 // tab
 
@@ -101,7 +101,7 @@ interface TabProps {
   tabRef?: React.MutableRefObject<HTMLButtonElement | undefined>;
 }
 
-export const Tab: React.FC<TabProps>;
+export declare const Tab: React.FC<TabProps>;
 
 // stateful-tabs
 
@@ -110,7 +110,7 @@ interface State {
 }
 
 interface Action {
-  type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE];
+  type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE];
   payload: React.Key;
 }
 
@@ -121,4 +121,4 @@ type StatefulTabsProps = TabsProps & {
   stateReducer?: StateReducer;
 };
 
-export const StatefulTabs: React.FC<StatefulTabsProps>;
+export declare const StatefulTabs: React.FC<StatefulTabsProps>;

package/tag/index.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
-export interface KIND {
+export declare const KIND: {
   custom: 'custom';
   neutral: 'neutral';
   primary: 'primary';
@@ -19,19 +19,19 @@ export interface KIND {
   green: 'green';
   purple: 'purple';
   brown: 'brown';
-}
+};
 
-export interface VARIANT {
+export declare const VARIANT: {
   solid: 'solid';
   light: 'light';
   outlined: 'outlined';
-}
+};
 
-export interface SIZE {
+export declare const SIZE: {
   small: 'small';
   medium: 'medium';
   large: 'large';
-}
+};
 
 export interface TagOverrides {
   Root?: Override<any>;
@@ -47,12 +47,12 @@ export interface TagProps {
   disabled?: boolean;
   isFocused?: boolean;
   isHovered?: boolean;
-  kind?: KIND[keyof KIND];
-  variant?: VARIANT[keyof VARIANT];
+  kind?: typeof KIND[keyof typeof KIND];
+  variant?: typeof VARIANT[keyof typeof VARIANT];
   children?: React.ReactNode;
   title?: string;
   color?: string;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
   onActionClick?: (e: Event, children?: React.ReactNode) => any;
   onActionKeyDown?: (e: Event, children?: React.ReactNode) => any;
   onClick?: (event: Event) => any;
@@ -65,10 +65,6 @@ export class Tag extends React.Component<TagProps> {
   handleActionKeyDown(event: KeyboardEvent): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledAction: StyletronComponent<any>;
-export const StyledText: StyletronComponent<any>;
-
-export const KIND: KIND;
-export const VARIANT: VARIANT;
-export const SIZE: SIZE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledAction: StyletronComponent<any>;
+export declare const StyledText: StyletronComponent<any>;

package/tag/types.js.flow

@@ -70,7 +70,7 @@ export type SharedPropsArgT = {
   $isHovered?: boolean,
   $kind?: string,
   $variant?: string,
-  $isFocusVisible: boolean,
+  $isFocusVisible?: boolean,
   $size?: string,
 };
 

package/textarea/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
+import { StyletronComponent } from 'styletron-react';
 import {
   BaseInputProps,
   StatefulContainer,
@@ -13,30 +13,27 @@ export interface TextareaProps extends BaseInputProps<HTMLTextAreaElement> {
   maxLength?: number;
 }
 
-export interface ADJOINED {
+export declare const ADJOINED: {
   none: 'none';
   left: 'left';
   right: 'right';
   both: 'both';
-}
-export interface SIZE {
+};
+export declare const SIZE: {
   default: 'default';
   compact: 'compact';
   large: 'large';
-}
+};
 
 export class Textarea extends React.Component<TextareaProps> {}
 
-export type StatefulTextareaProps = TextareaProps &
-  StatefulContainerProps & {children?: never};
+export type StatefulTextareaProps = TextareaProps & StatefulContainerProps & { children?: never };
 
-export const StatefulTextarea: React.FC<StatefulTextareaProps>;
+export declare const StatefulTextarea: React.FC<StatefulTextareaProps>;
 
-export {StatefulContainer};
+export { StatefulContainer };
 
-export const StyledTextareaContainer: StyletronComponent<any>;
-export const StyledTextarea: StyletronComponent<any>;
+export declare const StyledTextareaContainer: StyletronComponent<any>;
+export declare const StyledTextarea: StyletronComponent<any>;
 
-export const ADJOINED: ADJOINED;
-export const SIZE: SIZE;
-export {STATE_CHANGE_TYPE};
+export { STATE_CHANGE_TYPE };

package/textarea/textarea.js

@@ -72,23 +72,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;
@@ -116,6 +120,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,
@@ -136,6 +141,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Textarea, "defaultProps", {
   autoFocus: false,
   disabled: false,
+  readOnly: false,
   error: false,
   name: '',
   onBlur: function onBlur() {},

package/textarea/textarea.js.flow

@@ -19,6 +19,7 @@ class Textarea extends React.Component<TextareaPropsT, { isFocused: boolean }> {
   static defaultProps = {
     autoFocus: false,
     disabled: false,
+    readOnly: false,
     error: false,
     name: '',
     onBlur: () => {},
@@ -35,17 +36,21 @@ class Textarea extends React.Component<TextareaPropsT, { isFocused: boolean }> {
   };
 
   state = {
-    isFocused: this.props.autoFocus || false,
+    isFocused: (this.props.autoFocus && !this.props.readOnly) || false,
   };
 
   onFocus = (e: SyntheticFocusEvent<HTMLTextAreaElement>) => {
-    this.setState({ isFocused: true });
-    this.props.onFocus(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: true });
+      this.props.onFocus(e);
+    }
   };
 
   onBlur = (e: SyntheticFocusEvent<HTMLTextAreaElement>) => {
-    this.setState({ isFocused: false });
-    this.props.onBlur(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: false });
+      this.props.onBlur(e);
+    }
   };
 
   render() {
@@ -63,6 +68,7 @@ class Textarea extends React.Component<TextareaPropsT, { isFocused: boolean }> {
       <Root
         data-baseweb="textarea"
         $isFocused={this.state.isFocused}
+        $isReadOnly={this.props.readOnly}
         $disabled={this.props.disabled}
         $error={this.props.error}
         $positive={this.props.positive}

package/textarea/types.js.flow

@@ -20,6 +20,7 @@ export type SharedStylePropsT = {
   $disabled: boolean,
   $error: boolean,
   $isFocused: boolean,
+  $isReadOnly: boolean,
   $positive?: boolean,
   $required: boolean,
   $size: SizeT,