baseui 0.0.0-next-6bede4f → 0.0.0-next-e047a0a

package/input/base-input.js

@@ -98,7 +98,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (e) {
-      if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current) {
+      if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current && !_this.props.readOnly) {
         _this.clearValue(); // prevent event from closing modal or doing something unexpected
 
 
@@ -113,19 +113,23 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _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);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFocusForMaskToggle", function (event) {
@@ -280,10 +284,11 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
           clearable = _this$props2.clearable,
           value = _this$props2.value,
           disabled = _this$props2.disabled,
+          readOnly = _this$props2.readOnly,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override;
 
-      if (disabled || !clearable || value == null || typeof value === 'string' && value.length === 0) {
+      if (disabled || readOnly || !clearable || value == null || typeof value === 'string' && value.length === 0) {
         return null;
       }
 
@@ -373,6 +378,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
         "aria-required": this.props.required,
         autoComplete: autoComplete,
         disabled: this.props.disabled,
+        readOnly: this.props.readOnly,
         id: this.props.id,
         inputMode: this.props.inputMode,
         maxLength: this.props.maxLength,
@@ -432,7 +438,8 @@ _defineProperty(BaseInput, "defaultProps", {
   required: false,
   role: null,
   size: _constants.SIZE.default,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 var _default = BaseInput;

package/input/base-input.js.flow

@@ -64,6 +64,7 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
     role: null,
     size: SIZE.default,
     type: 'text',
+    readOnly: false,
   };
 
   inputRef = this.props.inputRef || React.createRef<T>();
@@ -117,7 +118,12 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
   }
 
   onInputKeyDown = (e: KeyboardEvent) => {
-    if (this.props.clearOnEscape && e.key === 'Escape' && this.inputRef.current) {
+    if (
+      this.props.clearOnEscape &&
+      e.key === 'Escape' &&
+      this.inputRef.current &&
+      !this.props.readOnly
+    ) {
       this.clearValue();
       // prevent event from closing modal or doing something unexpected
       e.stopPropagation();
@@ -131,13 +137,17 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
   };
 
   onFocus = (e: SyntheticFocusEvent<T>) => {
-    this.setState({ isFocused: true });
-    this.props.onFocus(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: true });
+      this.props.onFocus(e);
+    }
   };
 
   onBlur = (e: SyntheticFocusEvent<T>) => {
-    this.setState({ isFocused: false });
-    this.props.onBlur(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: false });
+      this.props.onBlur(e);
+    }
   };
 
   getInputType() {
@@ -219,9 +229,10 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
   };
 
   renderClear() {
-    const { clearable, value, disabled, overrides = {} } = this.props;
+    const { clearable, value, disabled, readOnly, overrides = {} } = this.props;
     if (
       disabled ||
+      readOnly ||
       !clearable ||
       value == null ||
       (typeof value === 'string' && value.length === 0)
@@ -320,6 +331,7 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
           aria-required={this.props.required}
           autoComplete={autoComplete}
           disabled={this.props.disabled}
+          readOnly={this.props.readOnly}
           id={this.props.id}
           inputMode={this.props.inputMode}
           maxLength={this.props.maxLength}

package/input/index.d.ts

@@ -70,6 +70,7 @@ export interface BaseInputProps<T> {
   min?: number;
   max?: number;
   step?: number | 'any';
+  readOnly?: boolean;
 }
 
 export interface State {
@@ -90,6 +91,8 @@ export type InputOverrides = BaseInputOverrides<SharedProps> & {
 export type SharedProps = {
   /** Renders UI in 'focus' state */
   $isFocused: boolean;
+  /** Renders UI in 'readOnly' state */
+  $isReadOnly: boolean;
   /** Renders UI in 'disabled' state */
   $disabled: boolean;
   /** Renders UI in 'error' state */

package/input/input.js

@@ -82,23 +82,27 @@ var Input = /*#__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;
@@ -175,7 +179,8 @@ _defineProperty(Input, "defaultProps", {
   startEnhancer: null,
   endEnhancer: null,
   clearable: false,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 function getAdjoinedProp(startEnhancer, endEnhancer) {

package/input/input.js.flow

@@ -28,6 +28,7 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
     endEnhancer: null,
     clearable: false,
     type: 'text',
+    readOnly: false,
   };
 
   /**
@@ -35,17 +36,21 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
    * customers shouldn't have to manage themselves, such as input's focus state.
    */
   state = {
-    isFocused: this.props.autoFocus || false,
+    isFocused: (this.props.autoFocus && !this.props.readOnly) || false,
   };
 
   onFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    this.setState({ isFocused: true });
-    this.props.onFocus(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: true });
+      this.props.onFocus(e);
+    }
   };
 
   onBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    this.setState({ isFocused: false });
-    this.props.onBlur(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: false });
+      this.props.onBlur(e);
+    }
   };
 
   render() {

package/input/masked-input.js

@@ -43,14 +43,16 @@ var MaskOverride = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onBlur = _ref.onBlur,
       value = _ref.value,
       disabled = _ref.disabled,
-      restProps = _objectWithoutProperties(_ref, ["startEnhancer", "endEnhancer", "error", "positive", "onChange", "onFocus", "onBlur", "value", "disabled"]);
+      readOnly = _ref.readOnly,
+      restProps = _objectWithoutProperties(_ref, ["startEnhancer", "endEnhancer", "error", "positive", "onChange", "onFocus", "onBlur", "value", "disabled", "readOnly"]);
 
   return /*#__PURE__*/React.createElement(_reactInputMask.default, _extends({
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, restProps), function (props) {
     return /*#__PURE__*/React.createElement(_styledComponents.Input, _extends({
       ref: ref,
@@ -58,7 +60,8 @@ var MaskOverride = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onFocus: onFocus,
       onBlur: onBlur,
       value: value,
-      disabled: disabled
+      disabled: disabled,
+      readOnly: readOnly
     }, props));
   });
 });

package/input/masked-input.js.flow

@@ -28,6 +28,7 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLInputElement>(
       onBlur,
       value,
       disabled,
+      readOnly,
       ...restProps
     }: MaskedInputPropsT,
     ref
@@ -39,6 +40,7 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLInputElement>(
         onBlur={onBlur}
         value={value}
         disabled={disabled}
+        readOnly={readOnly}
         {...restProps}
       >
         {(props) => (
@@ -49,6 +51,7 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLInputElement>(
             onBlur={onBlur}
             value={value}
             disabled={disabled}
+            readOnly={readOnly}
             {...props}
           />
         )}

package/input/types.js.flow

@@ -38,6 +38,8 @@ export type StateReducerT = (
 export type SharedPropsT = {|
   /** Renders UI in 'focus' state */
   $isFocused: boolean,
+  /** Renders UI in 'readOnly' state */
+  $isReadOnly: boolean,
   /** Renders UI in 'disabled' state */
   $disabled: boolean,
   /** Renders UI in 'error' state */
@@ -141,6 +143,8 @@ export type BaseInputPropsT<T> = {|
   max?: number,
   /** step value when used as input type=number */
   step?: number | 'any',
+  /** Renders component in 'readOnly' state. */
+  readOnly?: boolean,
 |};
 
 export type InputPropsT = {|

package/input/utils.js

@@ -17,7 +17,8 @@ function getSharedProps(props, state) {
       positive = props.positive,
       adjoined = props.adjoined,
       size = props.size,
-      required = props.required;
+      required = props.required,
+      readOnly = props.readOnly;
   var isFocused = state.isFocused;
   return {
     $isFocused: isFocused,
@@ -26,6 +27,7 @@ function getSharedProps(props, state) {
     $positive: positive,
     $adjoined: adjoined,
     $size: size,
-    $required: required
+    $required: required,
+    $isReadOnly: readOnly
   };
 }

package/input/utils.js.flow

@@ -11,7 +11,7 @@ export function getSharedProps<T>(
   props: BaseInputPropsT<T> | InputPropsT,
   state: InternalStateT
 ): $Shape<SharedPropsT> {
-  const { disabled, error, positive, adjoined, size, required } = props;
+  const { disabled, error, positive, adjoined, size, required, readOnly } = props;
   const { isFocused } = state;
   return {
     $isFocused: isFocused,
@@ -21,6 +21,7 @@ export function getSharedProps<T>(
     $adjoined: adjoined,
     $size: size,
     $required: required,
+    $isReadOnly: readOnly,
   };
 }
 

package/list/index.d.ts

@@ -47,11 +47,11 @@ export interface LabelOverrides {
 }
 
 export interface PropsT {
-  artwork?: React.ReactNode;
+  artwork?: (args: { size: number }) => React.ReactNode;
   artworkSize?: ArtworkSizesT | number;
   shape?: ShapeT;
   children: React.ReactNode;
-  endEnhancer?: React.ReactNode;
+  endEnhancer?: () => React.ReactNode;
   overrides?: ListOverrides;
   sublist?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-6bede4f",
+  "version": "0.0.0-next-e047a0a",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/select/select-component.js

@@ -315,8 +315,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) {
@@ -697,6 +699,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) {
@@ -709,7 +713,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);
         }
       }
     }
@@ -778,7 +784,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 [];
@@ -786,7 +792,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }
 
       return value.map(function (value) {
-        return (0, _index3.expandValue)(value, _this2.props);
+        return (0, _index3.expandValue)(value, _this3.props);
       });
     }
   }, {
@@ -831,7 +837,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;
@@ -848,9 +854,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: {
@@ -879,7 +885,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;
@@ -892,7 +898,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'] || '');
@@ -1053,7 +1059,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
 
@@ -1066,9 +1072,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)) {
@@ -1123,7 +1129,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
       this.options = (0, _index3.normalizeOptions)(this.props.options);
       var _this$props2 = this.props,
@@ -1195,55 +1201,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(_dropdown.default, _extends({
-                innerRef: _this6.dropdown
+                innerRef: _this7.dropdown
               }, dropdownProps));
             },
             placement: _index2.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 === _constants.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 === _constants.TYPE.select ? _this6.renderArrow() : null))));
+            onKeyDown: _this7.handleKeyDown,
+            onClick: _this7.handleClick,
+            onTouchEnd: _this7.handleTouchEnd,
+            onTouchMove: _this7.handleTouchMove,
+            onTouchStart: _this7.handleTouchStart
+          }, sharedProps, controlContainerProps), type === _constants.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 === _constants.TYPE.select ? _this7.renderArrow() : null))));
         });
       });
     }

package/select/select-component.js.flow

@@ -142,7 +142,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       }
 
       if (!prevState.isFocused && this.state.isFocused) {
-        document.addEventListener('click', this.handleClickOutside);
+        setTimeout(() => document.addEventListener('click', this.handleClickOutside), 0);
       }
     }
   }
@@ -316,8 +316,10 @@ class Select extends React.Component<PropsT, SelectStateT> {
       ) {
         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) {

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() {},