baseui 0.0.0-alpha-8ab2335 → 0.0.0-alpha-e79754d

package/tabs-motion/tabs.js

@@ -9,8 +9,6 @@ exports.Tabs = Tabs;
 
 var React = _interopRequireWildcard(require("react"));
 
-var ReactIs = _interopRequireWildcard(require("react-is"));
-
 var _reactUid = require("react-uid");
 
 var _styles = require("../styles");
@@ -126,40 +124,25 @@ var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode)
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
-function RenderEnhancer(_ref) {
-  var Enhancer = _ref.Enhancer;
-
-  if (typeof Enhancer === 'string') {
-    return Enhancer;
-  }
-
-  if (ReactIs.isValidElementType(Enhancer)) {
-    return /*#__PURE__*/React.createElement(Enhancer, null);
-  }
-
-  return Enhancer;
-}
-
-function Tabs(_ref2) {
-  var _ref2$activeKey = _ref2.activeKey,
-      activeKey = _ref2$activeKey === void 0 ? '0' : _ref2$activeKey,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      children = _ref2.children,
-      _ref2$fill = _ref2.fill,
-      fill = _ref2$fill === void 0 ? _constants.FILL.intrinsic : _ref2$fill,
-      _ref2$activateOnFocus = _ref2.activateOnFocus,
-      activateOnFocus = _ref2$activateOnFocus === void 0 ? true : _ref2$activateOnFocus,
-      onChange = _ref2.onChange,
-      _ref2$orientation = _ref2.orientation,
-      orientation = _ref2$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref2$orientation,
-      _ref2$overrides = _ref2.overrides,
-      overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides,
-      _ref2$renderAll = _ref2.renderAll,
-      renderAll = _ref2$renderAll === void 0 ? false : _ref2$renderAll,
-      _ref2$uid = _ref2.uid,
-      customUid = _ref2$uid === void 0 ? null : _ref2$uid,
-      endEnhancer = _ref2.endEnhancer;
+function Tabs(_ref) {
+  var _ref$activeKey = _ref.activeKey,
+      activeKey = _ref$activeKey === void 0 ? '0' : _ref$activeKey,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      children = _ref.children,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? _constants.FILL.intrinsic : _ref$fill,
+      _ref$activateOnFocus = _ref.activateOnFocus,
+      activateOnFocus = _ref$activateOnFocus === void 0 ? true : _ref$activateOnFocus,
+      onChange = _ref.onChange,
+      _ref$orientation = _ref.orientation,
+      orientation = _ref$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref$orientation,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
+      _ref$renderAll = _ref.renderAll,
+      renderAll = _ref$renderAll === void 0 ? false : _ref$renderAll,
+      _ref$uid = _ref.uid,
+      customUid = _ref$uid === void 0 ? null : _ref$uid;
   // Create unique id prefix for this tabs component
   var generatedUid = (0, _reactUid.useUID)();
   var uid = customUid || generatedUid; // Unpack overrides
@@ -187,12 +170,7 @@ function Tabs(_ref2) {
   var _getOverrides7 = (0, _overrides.getOverrides)(TabBorderOverrides, _styledComponents.StyledTabBorder),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       TabBorder = _getOverrides8[0],
-      TabBorderProps = _getOverrides8[1];
-
-  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.EndEnhancerContainer, _styledComponents.StyledEndEnhancerContainer),
-      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      EndEnhancerContainer = _getOverrides10[0],
-      endEnhancerContainerProps = _getOverrides10[1]; // Count key updates
+      TabBorderProps = _getOverrides8[1]; // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -298,10 +276,7 @@ function Tabs(_ref2) {
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(_styledComponents.StyledTabBar, {
-    $hasEndEnhancer: Boolean(endEnhancer),
-    $orientation: orientation
-  }, /*#__PURE__*/React.createElement(TabList, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -329,11 +304,7 @@ function Tabs(_ref2) {
     $animate: keyUpdated > 1,
     "aria-hidden": "true",
     role: "presentation"
-  }, sharedStylingProps, TabHighlightProps))), orientation === _constants.ORIENTATION.horizontal && endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({}, endEnhancerContainerProps, {
-    $orientation: orientation
-  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
-    Enhancer: endEnhancer
-  }))), /*#__PURE__*/React.createElement(TabBorder, _extends({
+  }, sharedStylingProps, TabHighlightProps))), /*#__PURE__*/React.createElement(TabBorder, _extends({
     "data-baseweb": "tab-border",
     "aria-hidden": "true",
     role: "presentation"
@@ -350,20 +321,20 @@ function Tabs(_ref2) {
   }));
 }
 
-function InternalTab(_ref3) {
-  var childKey = _ref3.childKey,
-      childIndex = _ref3.childIndex,
-      activeKey = _ref3.activeKey,
-      orientation = _ref3.orientation,
-      activeTabRef = _ref3.activeTabRef,
-      updateHighlight = _ref3.updateHighlight,
-      parseKeyDown = _ref3.parseKeyDown,
-      activateOnFocus = _ref3.activateOnFocus,
-      uid = _ref3.uid,
-      disabled = _ref3.disabled,
-      sharedStylingProps = _ref3.sharedStylingProps,
-      onChange = _ref3.onChange,
-      props = _objectWithoutProperties(_ref3, _excluded);
+function InternalTab(_ref2) {
+  var childKey = _ref2.childKey,
+      childIndex = _ref2.childIndex,
+      activeKey = _ref2.activeKey,
+      orientation = _ref2.orientation,
+      activeTabRef = _ref2.activeTabRef,
+      updateHighlight = _ref2.updateHighlight,
+      parseKeyDown = _ref2.parseKeyDown,
+      activateOnFocus = _ref2.activateOnFocus,
+      uid = _ref2.uid,
+      disabled = _ref2.disabled,
+      sharedStylingProps = _ref2.sharedStylingProps,
+      onChange = _ref2.onChange,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -414,15 +385,15 @@ function InternalTab(_ref3) {
   var TabOverrides = overrides.Tab,
       ArtworkContainerOverrides = overrides.ArtworkContainer;
 
-  var _getOverrides11 = (0, _overrides.getOverrides)(TabOverrides, _styledComponents.StyledTab),
-      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      Tab = _getOverrides12[0],
-      TabProps = _getOverrides12[1];
+  var _getOverrides9 = (0, _overrides.getOverrides)(TabOverrides, _styledComponents.StyledTab),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      Tab = _getOverrides10[0],
+      TabProps = _getOverrides10[1];
 
-  var _getOverrides13 = (0, _overrides.getOverrides)(ArtworkContainerOverrides, _styledComponents.StyledArtworkContainer),
-      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      ArtworkContainer = _getOverrides14[0],
-      ArtworkContainerProps = _getOverrides14[1]; // Keyboard focus styling
+  var _getOverrides11 = (0, _overrides.getOverrides)(ArtworkContainerOverrides, _styledComponents.StyledArtworkContainer),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      ArtworkContainer = _getOverrides12[0],
+      ArtworkContainerProps = _getOverrides12[1]; // Keyboard focus styling
 
 
   var _React$useState5 = React.useState(false),
@@ -435,8 +406,7 @@ function InternalTab(_ref3) {
       setFocusVisible(true);
     }
   }, []);
-  var handleBlur = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function (event) {
+  var handleBlur = React.useCallback(function (event) {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -522,14 +492,14 @@ function InternalTab(_ref3) {
   })) : null, title ? title : key);
 }
 
-function InternalTabPanel(_ref4) {
-  var childKey = _ref4.childKey,
-      childIndex = _ref4.childIndex,
-      activeKey = _ref4.activeKey,
-      uid = _ref4.uid,
-      sharedStylingProps = _ref4.sharedStylingProps,
-      renderAll = _ref4.renderAll,
-      props = _objectWithoutProperties(_ref4, _excluded3);
+function InternalTabPanel(_ref3) {
+  var childKey = _ref3.childKey,
+      childIndex = _ref3.childIndex,
+      activeKey = _ref3.activeKey,
+      uid = _ref3.uid,
+      sharedStylingProps = _ref3.sharedStylingProps,
+      renderAll = _ref3.renderAll,
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -538,10 +508,10 @@ function InternalTabPanel(_ref4) {
       children = props.children;
   var TabPanelOverrides = overrides.TabPanel;
 
-  var _getOverrides15 = (0, _overrides.getOverrides)(TabPanelOverrides, _styledComponents.StyledTabPanel),
-      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
-      TabPanel = _getOverrides16[0],
-      TabPanelProps = _getOverrides16[1];
+  var _getOverrides13 = (0, _overrides.getOverrides)(TabPanelOverrides, _styledComponents.StyledTabPanel),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      TabPanel = _getOverrides14[0],
+      TabPanelProps = _getOverrides14[1];
 
   return /*#__PURE__*/React.createElement(TabPanel, _extends({
     "data-baseweb": "tab-panel",

package/tabs-motion/tabs.js.flow

@@ -10,7 +10,6 @@ LICENSE file in the root directory of this source tree.
 /* global window */
 
 import * as React from 'react';
-import * as ReactIs from 'react-is';
 import { useUID } from 'react-uid';
 import { useStyletron } from '../styles/index.js';
 import { getOverrides } from '../helpers/overrides.js';
@@ -24,8 +23,6 @@ import {
   StyledTabHighlight,
   StyledTabBorder,
   StyledTabPanel,
-  StyledEndEnhancerContainer,
-  StyledTabBar,
 } from './styled-components.js';
 import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils.js';
 
@@ -91,18 +88,6 @@ const scrollParentToCentreTarget = (targetNode) => {
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
-function RenderEnhancer({ Enhancer }) {
-  if (typeof Enhancer === 'string') {
-    return Enhancer;
-  }
-  if (ReactIs.isValidElementType(Enhancer)) {
-    // $FlowFixMe
-    return <Enhancer />;
-  }
-  // $FlowFixMe
-  return Enhancer;
-}
-
 export function Tabs({
   activeKey = '0',
   disabled = false,
@@ -114,7 +99,6 @@ export function Tabs({
   overrides = {},
   renderAll = false,
   uid: customUid = null,
-  endEnhancer,
 }: TabsPropsT) {
   // Create unique id prefix for this tabs component
   const generatedUid = useUID();
@@ -131,10 +115,6 @@ export function Tabs({
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
   const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
   const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
-  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
-    overrides.EndEnhancerContainer,
-    StyledEndEnhancerContainer
-  );
 
   // Count key updates
   // We disable a few things until after first mount:
@@ -236,56 +216,45 @@ export function Tabs({
 
   return (
     <Root {...sharedStylingProps} {...RootProps}>
-      <StyledTabBar $hasEndEnhancer={Boolean(endEnhancer)} $orientation={orientation}>
-        <TabList
-          data-baseweb="tab-list"
-          role="tablist"
-          aria-orientation={orientation}
+      <TabList
+        data-baseweb="tab-list"
+        role="tablist"
+        aria-orientation={orientation}
+        {...sharedStylingProps}
+        {...TabListProps}
+      >
+        {React.Children.map(children, (child, index) => {
+          if (!child) return;
+          return (
+            <InternalTab
+              childKey={child.key}
+              childIndex={index}
+              activeKey={activeKey}
+              orientation={orientation}
+              activeTabRef={activeTabRef}
+              updateHighlight={updateHighlight}
+              parseKeyDown={parseKeyDown}
+              activateOnFocus={activateOnFocus}
+              uid={uid}
+              disabled={disabled}
+              sharedStylingProps={sharedStylingProps}
+              onChange={onChange}
+              {...child.props}
+            />
+          );
+        })}
+        <TabHighlight
+          data-baseweb="tab-highlight"
+          $length={highlightLayout.length}
+          $distance={highlightLayout.distance}
+          // This avoids the tab sliding in from the side on mount
+          $animate={keyUpdated > 1}
+          aria-hidden="true"
+          role="presentation"
           {...sharedStylingProps}
-          {...TabListProps}
-        >
-          {React.Children.map(children, (child, index) => {
-            if (!child) return;
-            return (
-              <InternalTab
-                childKey={child.key}
-                childIndex={index}
-                activeKey={activeKey}
-                orientation={orientation}
-                activeTabRef={activeTabRef}
-                updateHighlight={updateHighlight}
-                parseKeyDown={parseKeyDown}
-                activateOnFocus={activateOnFocus}
-                uid={uid}
-                disabled={disabled}
-                sharedStylingProps={sharedStylingProps}
-                onChange={onChange}
-                {...child.props}
-              />
-            );
-          })}
-          <TabHighlight
-            data-baseweb="tab-highlight"
-            $length={highlightLayout.length}
-            $distance={highlightLayout.distance}
-            // This avoids the tab sliding in from the side on mount
-            $animate={keyUpdated > 1}
-            aria-hidden="true"
-            role="presentation"
-            {...sharedStylingProps}
-            {...TabHighlightProps}
-          />
-        </TabList>
-
-        {orientation === ORIENTATION.horizontal &&
-          endEnhancer !== null &&
-          endEnhancer !== undefined && (
-            <EndEnhancerContainer {...endEnhancerContainerProps} $orientation={orientation}>
-              <RenderEnhancer Enhancer={endEnhancer} />
-            </EndEnhancerContainer>
-          )}
-      </StyledTabBar>
-
+          {...TabHighlightProps}
+        />
+      </TabList>
       <TabBorder
         data-baseweb="tab-border"
         aria-hidden="true"

package/tabs-motion/types.d.ts

@@ -1,5 +1,5 @@
-import type * as React from 'react';
-import type { ORIENTATION, FILL, STATE_CHANGE_TYPE } from './constants';
+import * as React from 'react';
+import { ORIENTATION, FILL, STATE_CHANGE_TYPE } from './constants';
 import type { Override } from '../helpers/overrides';
 import type { IconProps } from '../icon';
 export declare type Orientation = typeof ORIENTATION[keyof typeof ORIENTATION];
@@ -10,8 +10,6 @@ export declare type TabsOverrides = {
     TabList?: Override;
     TabHighlight?: Override;
     TabBorder?: Override;
-    EndEnhancerContainer?: Override;
-    StyledTabBar?: Override;
 };
 export declare type TabOverrides = {
     Tab?: Override;
@@ -40,7 +38,6 @@ export declare type TabsProps = {
     overrides?: TabsOverrides;
     renderAll?: boolean;
     uid?: string;
-    endEnhancer?: React.ReactNode;
 };
 export declare type StatefulTabsProps = {
     initialState?: StatefulTabsState;

package/tabs-motion/types.js.flow

@@ -22,8 +22,6 @@ export type TabsOverridesT = {
   TabList?: OverrideT,
   TabHighlight?: OverrideT,
   TabBorder?: OverrideT,
-  EndEnhancerContainer?: OverrideT,
-  StyledTabBar?: OverrideT,
 };
 
 export type TabOverridesT = {
@@ -59,7 +57,6 @@ export type TabsPropsT = {|
   overrides?: TabsOverridesT,
   renderAll?: boolean,
   uid?: string,
-  endEnhancer?: React.Node | React.AbstractComponent<{}>,
 |};
 
 export type StatefulTabsPropsT = {|

package/tabs-motion/utils.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Fill, Orientation } from './types';
 export declare const getTabId: (uid: string, key: React.Key) => string;
 export declare const getTabPanelId: (uid: string, key: React.Key) => string;

package/tag/styled-components.js

@@ -290,7 +290,6 @@ var Action = (0, _styles.styled)('span', function (props) {
 });
 exports.Action = Action;
 Action.displayName = "Action";
-Action.displayName = 'Action';
 var StartEnhancerContainer = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       _ref2$$size = _ref2.$size,
@@ -311,7 +310,6 @@ var StartEnhancerContainer = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StartEnhancerContainer = StartEnhancerContainer;
 StartEnhancerContainer.displayName = "StartEnhancerContainer";
-StartEnhancerContainer.displayName = 'StartEnhancerContainer';
 var Text = (0, _styles.styled)('span', function (props) {
   var $theme = props.$theme;
   return {
@@ -324,7 +322,6 @@ var Text = (0, _styles.styled)('span', function (props) {
 });
 exports.Text = Text;
 Text.displayName = "Text";
-Text.displayName = 'Text';
 var Root = (0, _styles.styled)('span', function (props) {
   var _SIZE$small$SIZE$medi2, _SIZE$small$SIZE$medi3, _SIZE$small$SIZE$medi4;
 
@@ -391,5 +388,4 @@ var Root = (0, _styles.styled)('span', function (props) {
   });
 });
 exports.Root = Root;
-Root.displayName = "Root";
-Root.displayName = 'Root';
+Root.displayName = "Root";

package/tag/tag.js

@@ -92,8 +92,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if ((0, _focusVisible.isFocusVisible)(event)) {
       setFocusVisible(true);
     }
-  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  }
 
   function handleBlur(event) {
     if (focusVisible !== false) {
@@ -176,8 +175,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, 12), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, 16), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, 20), _SIZE$small$SIZE$medi)[size]; // Capitalize for JSX
 
   var StartEnhancer = startEnhancer;
-  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  , _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({
     ref: ref,
     "data-baseweb": "tag",
     "aria-label": isButton && closeable ? "".concat(typeof children === 'string' ? "".concat(children, ", ") : '', "close by backspace") : null,

package/tag/types.d.ts

@@ -1,5 +1,6 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
+import type { ReactNode } from 'react';
 export declare const TagKind: Readonly<{
     readonly custom: "custom";
     readonly neutral: "neutral";
@@ -52,15 +53,15 @@ export declare type TagProps = {
     /** Defines tags look. Set it to one of VARIANT[key] values. Defaults to VARIANT.light */
     variant?: TagVariant;
     /** Component or String value for label of tag. Default is empty string. */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** The color theme to be applied to a Tag. Default is `KIND.primary`. */
     color?: string;
     /** Text to display in native OS tooltip on long hover. */
     title?: string;
     /** onClick handler for the action button element. */
-    onActionClick?: (e: Event, children?: React.ReactNode) => unknown;
+    onActionClick?: (e: Event, children?: ReactNode) => unknown;
     /** keydown handler for the action button element. */
-    onActionKeyDown?: (e: Event, children?: React.ReactNode) => unknown;
+    onActionKeyDown?: (e: Event, children?: ReactNode) => unknown;
     /** onClick handler for the tag. Passing an onClick handler also makes the tag clickable. */
     onClick?: null | ((event: Event) => unknown);
     /** onkeydown handler for the tag. */

package/textarea/styled-components.js

@@ -16,30 +16,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var StyledTextAreaRoot = (0, _styles.styled)('div', function (props) {
-  return _objectSpread(_objectSpread({}, (0, _styledComponents.getRootStyles)(_objectSpread(_objectSpread({
+  return (0, _styledComponents.getRootStyles)(_objectSpread(_objectSpread({
     $positive: false
   }, props), {}, {
     $hasIconTrailing: false
-  }))), {}, {
-    width: props.$resize ? 'fit-content' : '100%'
-  });
+  }));
 });
 exports.StyledTextAreaRoot = StyledTextAreaRoot;
 StyledTextAreaRoot.displayName = "StyledTextAreaRoot";
-StyledTextAreaRoot.displayName = 'StyledTextAreaRoot';
 var StyledTextareaContainer = (0, _styles.styled)('div', function (props) {
-  return (0, _styledComponents.getInputContainerStyles)(_objectSpread({
+  return _objectSpread({}, (0, _styledComponents.getInputContainerStyles)(_objectSpread({
     $positive: false
-  }, props));
+  }, props)));
 });
 exports.StyledTextareaContainer = StyledTextareaContainer;
 StyledTextareaContainer.displayName = "StyledTextareaContainer";
-StyledTextareaContainer.displayName = 'StyledTextareaContainer';
 var StyledTextarea = (0, _styles.styled)('textarea', function (props) {
   return _objectSpread(_objectSpread({}, (0, _styledComponents.getInputStyles)(props)), {}, {
-    resize: props.$resize || 'none'
+    resize: 'none'
   });
 });
 exports.StyledTextarea = StyledTextarea;
-StyledTextarea.displayName = "StyledTextarea";
-StyledTextarea.displayName = 'StyledTextarea';
+StyledTextarea.displayName = "StyledTextarea";

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;
@@ -120,14 +124,12 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         $disabled: this.props.disabled,
         $error: this.props.error,
         $positive: this.props.positive,
-        $required: this.props.required,
-        $resize: this.props.resize
+        $required: this.props.required
       }, rootProps), /*#__PURE__*/React.createElement(_input.BaseInput, _extends({}, this.props, {
         type: _input.CUSTOM_INPUT_TYPE.textarea,
         overrides: inputOverrides,
         onFocus: this.onFocus,
-        onBlur: this.onBlur,
-        resize: this.props.resize
+        onBlur: this.onBlur
       })));
     }
   }]);

package/textarea/textarea.js.flow

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

package/textarea/types.d.ts

@@ -1,8 +1,9 @@
-import type * as React from 'react';
-import type { Properties } from 'csstype';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import type { BaseInputProps, StateReducer, State, ADJOINED, SIZE } from '../input';
-declare type SyntheticTextareaEvent = React.SyntheticEvent<HTMLTextAreaElement>;
+import type { BaseInputProps, StateReducer, State } from '../input';
+import { ADJOINED, SIZE } from '../input';
+import type { SyntheticEvent } from 'react';
+declare type SyntheticTextareaEvent = SyntheticEvent<HTMLTextAreaElement>;
 export declare type Size = keyof typeof SIZE;
 export declare type SharedStyleProps = {
     $adjoined: keyof typeof ADJOINED;
@@ -12,7 +13,6 @@ export declare type SharedStyleProps = {
     $isReadOnly?: boolean;
     $positive?: boolean;
     $required?: boolean;
-    $resize?: Properties['resize'];
     $size: Size;
 };
 declare type BaseTextAreaProps = BaseInputProps<HTMLTextAreaElement>;
@@ -21,7 +21,6 @@ export declare type TextareaOverrides = {
 } & BaseTextAreaProps['overrides'];
 export declare type TextareaProps = {
     overrides?: TextareaOverrides;
-    resize?: Properties['resize'];
     /** Sets the size and number of visible text lines
      of the textarea element. */
     rows?: number;

package/textarea/types.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import type { Property$Resize } from 'csstype';
+
 import type { OverrideT } from '../helpers/overrides.js';
 import type { BaseInputPropsT, StateReducerT, StateT } from '../input/types.js';
 import { ADJOINED, SIZE } from '../input/constants.js';
@@ -23,7 +23,6 @@ export type SharedStylePropsT = {
   $isReadOnly: boolean,
   $positive?: boolean,
   $required: boolean,
-  $resize?: Property$Resize,
   $size: SizeT,
 };
 
@@ -37,7 +36,6 @@ export type TextareaOverridesT = {
 export type TextareaPropsT = {
   ...BaseTextAreaPropsT,
   overrides?: TextareaOverridesT,
-  resize?: Property$Resize,
   /** Sets the size and number of visible text lines
    of the textarea element. */
   rows?: number,