@atlaskit/textarea 4.3.11 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textarea
 
+## 4.4.0
+
+### Minor Changes
+
+- [`b8841384da6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8841384da6) - Disabled background and border styles should not be applied to components that have either no background or transparent background to begin with. Textfield and textarea variants that do not have backgrounds (sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents that consume these will also be affected.
+
 ## 4.3.11
 
 ### Patch Changes

package/dist/cjs/styles.js

@@ -45,8 +45,8 @@ var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows,
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
 
-var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
-  return {
+var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
+  return _objectSpread({
     '&:focus': {
       backgroundColor: props.backgroundColorFocus,
       borderColor: props.borderColorFocus
@@ -55,14 +55,6 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
       backgroundColor: props.backgroundColor,
       borderColor: props.borderColor
     },
-    '&:disabled:focus': {
-      backgroundColor: props.disabledRules.backgroundColorFocus,
-      borderColor: props.disabledRules.borderColorFocus
-    },
-    '&:disabled:not(:focus)': {
-      backgroundColor: props.disabledRules.backgroundColor,
-      borderColor: props.disabledRules.borderColor
-    },
     '&[data-invalid]:focus': {
       backgroundColor: props.invalidRules.backgroundColorFocus,
       borderColor: props.invalidRules.borderColorFocus
@@ -71,7 +63,16 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
       backgroundColor: props.invalidRules.backgroundColor,
       borderColor: props.invalidRules.borderColor
     }
-  };
+  }, appearance === 'standard' ? {
+    '&:disabled:focus': {
+      backgroundColor: props.disabledRules.backgroundColorFocus,
+      borderColor: props.disabledRules.borderColorFocus
+    },
+    '&:disabled:not(:focus)': {
+      backgroundColor: props.disabledRules.backgroundColor,
+      borderColor: props.disabledRules.borderColor
+    }
+  } : {});
 };
 
 var placeholderStyle = function placeholderStyle(placeholderTextColor) {
@@ -185,8 +186,8 @@ var getBaseStyles = function getBaseStyles(_ref) {
 
 exports.getBaseStyles = getBaseStyles;
 
-var themeStyles = function themeStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
+var themeStyles = function themeStyles(props, appearance) {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props, appearance)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
     color: props.textColor,
     '&:disabled': {
       color: props.disabledRules.textColor

package/dist/cjs/text-area.js

@@ -40,7 +40,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.11";
+var packageVersion = "4.4.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -143,7 +143,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     });
   }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
   var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
-  (0, _styles.themeStyles)(tokens)];
+  (0, _styles.themeStyles)(tokens, appearance)];
   return (0, _core.jsx)("textarea", (0, _extends2.default)({}, controlProps, {
     value: value,
     disabled: isDisabled,

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.3.11",
+	"version": "4.4.0",
 	"sideEffects": false
 }

package/dist/es2019/styles.js

@@ -29,7 +29,7 @@ const borderBoxMinHeightCompact = (minimumRows, borderHeight) => {
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
 
-const bgAndBorderColorStyles = props => ({
+const bgAndBorderColorStyles = (props, appearance) => ({
   '&:focus': {
     backgroundColor: props.backgroundColorFocus,
     borderColor: props.borderColorFocus
@@ -38,14 +38,6 @@ const bgAndBorderColorStyles = props => ({
     backgroundColor: props.backgroundColor,
     borderColor: props.borderColor
   },
-  '&:disabled:focus': {
-    backgroundColor: props.disabledRules.backgroundColorFocus,
-    borderColor: props.disabledRules.borderColorFocus
-  },
-  '&:disabled:not(:focus)': {
-    backgroundColor: props.disabledRules.backgroundColor,
-    borderColor: props.disabledRules.borderColor
-  },
   '&[data-invalid]:focus': {
     backgroundColor: props.invalidRules.backgroundColorFocus,
     borderColor: props.invalidRules.borderColorFocus
@@ -53,7 +45,19 @@ const bgAndBorderColorStyles = props => ({
   '&[data-invalid]:not(:focus)': {
     backgroundColor: props.invalidRules.backgroundColor,
     borderColor: props.invalidRules.borderColor
-  }
+  },
+  // Disabled background and border styles should not be applied to components that
+  // have either no background or transparent background to begin with
+  ...(appearance === 'standard' ? {
+    '&:disabled:focus': {
+      backgroundColor: props.disabledRules.backgroundColorFocus,
+      borderColor: props.disabledRules.borderColorFocus
+    },
+    '&:disabled:not(:focus)': {
+      backgroundColor: props.disabledRules.backgroundColor,
+      borderColor: props.disabledRules.borderColor
+    }
+  } : {})
 });
 
 const placeholderStyle = placeholderTextColor => ({
@@ -161,8 +165,8 @@ export const getBaseStyles = ({
   ...fontFamilyStyle(isMonospaced),
   maxHeight
 });
-export const themeStyles = props => {
-  return { ...bgAndBorderColorStyles(props),
+export const themeStyles = (props, appearance) => {
+  return { ...bgAndBorderColorStyles(props, appearance),
     ...hoverBackgroundAndBorderStyles(props),
     ...placeholderStyle(props.placeholderTextColor),
     color: props.textColor,

package/dist/es2019/text-area.js

@@ -8,7 +8,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.3.11";
+const packageVersion = "4.4.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
@@ -103,7 +103,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     maxHeight
   }), [minimumRows, resize, appearance, isMonospaced, maxHeight]);
   const textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
-  themeStyles(tokens)];
+  themeStyles(tokens, appearance)];
   return jsx("textarea", _extends({}, controlProps, {
     value: value,
     disabled: isDisabled,

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.3.11",
+	"version": "4.4.0",
 	"sideEffects": false
 }

package/dist/esm/styles.js

@@ -35,8 +35,8 @@ var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows,
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
 
-var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
-  return {
+var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
+  return _objectSpread({
     '&:focus': {
       backgroundColor: props.backgroundColorFocus,
       borderColor: props.borderColorFocus
@@ -45,14 +45,6 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
       backgroundColor: props.backgroundColor,
       borderColor: props.borderColor
     },
-    '&:disabled:focus': {
-      backgroundColor: props.disabledRules.backgroundColorFocus,
-      borderColor: props.disabledRules.borderColorFocus
-    },
-    '&:disabled:not(:focus)': {
-      backgroundColor: props.disabledRules.backgroundColor,
-      borderColor: props.disabledRules.borderColor
-    },
     '&[data-invalid]:focus': {
       backgroundColor: props.invalidRules.backgroundColorFocus,
       borderColor: props.invalidRules.borderColorFocus
@@ -61,7 +53,16 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
       backgroundColor: props.invalidRules.backgroundColor,
       borderColor: props.invalidRules.borderColor
     }
-  };
+  }, appearance === 'standard' ? {
+    '&:disabled:focus': {
+      backgroundColor: props.disabledRules.backgroundColorFocus,
+      borderColor: props.disabledRules.borderColorFocus
+    },
+    '&:disabled:not(:focus)': {
+      backgroundColor: props.disabledRules.backgroundColor,
+      borderColor: props.disabledRules.borderColor
+    }
+  } : {});
 };
 
 var placeholderStyle = function placeholderStyle(placeholderTextColor) {
@@ -171,8 +172,8 @@ export var getBaseStyles = function getBaseStyles(_ref) {
     maxHeight: maxHeight
   });
 };
-export var themeStyles = function themeStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
+export var themeStyles = function themeStyles(props, appearance) {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props, appearance)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
     color: props.textColor,
     '&:disabled': {
       color: props.disabledRules.textColor

package/dist/esm/text-area.js

@@ -16,7 +16,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.11";
+var packageVersion = "4.4.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -121,7 +121,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
   var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
-  themeStyles(tokens)];
+  themeStyles(tokens, appearance)];
   return jsx("textarea", _extends({}, controlProps, {
     value: value,
     disabled: isDisabled,

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.3.11",
+	"version": "4.4.0",
 	"sideEffects": false
 }

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './text-area';
 export { Theme, themeTokens } from './theme';
 export type { ThemeAppearance, ThemeProps, ThemeTokens } from './theme';
+export type { TextAreaProps } from './types';

package/dist/types/styles.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { CSSObject } from '@emotion/core';
 import { ThemeTokens } from './theme';
+import { TextAreaProps } from './types';
 export interface StyleProps {
     minimumRows: number | undefined;
     resize: string | undefined;
@@ -10,4 +11,4 @@ export interface StyleProps {
 }
 export declare const borderWidth = 2;
 export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => CSSObject;
-export declare const themeStyles: (props: ThemeTokens) => CSSObject;
+export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => CSSObject;

package/dist/types/text-area.d.ts

@@ -1,99 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-export interface OwnProps extends WithAnalyticsEventsProps {
-    /**
-     * controls the appearance of the field.
-     * subtle shows styling on hover.
-     * none prevents all field styling.
-     */
-    appearance?: 'standard' | 'subtle' | 'none';
-    /**
-     * Set whether the fields should expand to fill available horizontal space.
-     */
-    isCompact?: boolean;
-    /**
-     * Sets the field as uneditable, with a changed hover state.
-     */
-    isDisabled?: boolean;
-    /**
-     * If true, prevents the value of the input from being edited.
-     */
-    isReadOnly?: boolean;
-    /**
-     * Set required for form that the field is part of.
-     */
-    isRequired?: boolean;
-    /**
-     * Sets styling to indicate that the input is invalid.
-     */
-    isInvalid?: boolean;
-    /**
-     * The minimum number of rows of text to display
-     */
-    minimumRows?: number;
-    /**
-     * The maxheight of the textarea
-     */
-    maxHeight?: string;
-    /**
-     * The value of the text-area.
-     */
-    value?: string;
-    /**
-     * The default value of the textarea
-     */
-    defaultValue?: string;
-    /**
-     * Name of the input form control
-     */
-    name?: string;
-    /**
-     * The placeholder within the textarea
-     */
-    placeholder?: string;
-    /**
-     * Handler to be called when the input is blurred
-     */
-    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /**
-     * Handler to be called when the input changes.
-     */
-    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-    /**
-     * Handler to be called when the input is focused
-     */
-    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /**
-     * Sets content text value to monospace
-     */
-    isMonospaced?: boolean;
-    /**
-     * Enables the resizing of the textarea:
-     * auto: both directions.
-     * horizontal: only along the x axis.
-     * vertical: only along the y axis.
-     * smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
-     * none: explicitly disallow resizing on the textarea.
-     */
-    resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
-    /**
-     * Enables native spell check on the `textarea` element.
-     */
-    spellCheck?: boolean;
-    /**
-     * The theme function TextArea consumes to derive theming constants for use in styling its components
-     */
-    theme?: any;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
-     */
-    testId?: string;
-}
-declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
-export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
+import { TextAreaProps } from './types';
 /**
  * __Text area__
  *
@@ -103,5 +10,5 @@ export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HT
  * - [Code](https://atlassian.design/components/textarea/code)
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
-declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
+declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "minimumRows" | "maxHeight" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "isMonospaced" | "resize" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
 export default TextArea;

package/dist/types/types.d.ts

@@ -0,0 +1,96 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export interface OwnProps extends WithAnalyticsEventsProps {
+    /**
+     * controls the appearance of the field.
+     * subtle shows styling on hover.
+     * none prevents all field styling.
+     */
+    appearance?: 'standard' | 'subtle' | 'none';
+    /**
+     * Set whether the fields should expand to fill available horizontal space.
+     */
+    isCompact?: boolean;
+    /**
+     * Sets the field as uneditable, with a changed hover state.
+     */
+    isDisabled?: boolean;
+    /**
+     * If true, prevents the value of the input from being edited.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Set required for form that the field is part of.
+     */
+    isRequired?: boolean;
+    /**
+     * Sets styling to indicate that the input is invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * The minimum number of rows of text to display
+     */
+    minimumRows?: number;
+    /**
+     * The maxheight of the textarea
+     */
+    maxHeight?: string;
+    /**
+     * The value of the text-area.
+     */
+    value?: string;
+    /**
+     * The default value of the textarea
+     */
+    defaultValue?: string;
+    /**
+     * Name of the input form control
+     */
+    name?: string;
+    /**
+     * The placeholder within the textarea
+     */
+    placeholder?: string;
+    /**
+     * Handler to be called when the input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Handler to be called when the input changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Handler to be called when the input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Sets content text value to monospace
+     */
+    isMonospaced?: boolean;
+    /**
+     * Enables the resizing of the textarea:
+     * auto: both directions.
+     * horizontal: only along the x axis.
+     * vertical: only along the y axis.
+     * smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
+     * none: explicitly disallow resizing on the textarea.
+     */
+    resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
+    /**
+     * Enables native spell check on the `textarea` element.
+     */
+    spellCheck?: boolean;
+    /**
+     * The theme function TextArea consumes to derive theming constants for use in styling its components
+     */
+    theme?: any;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+}
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
+export {};

package/dist/types-ts4.0/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './text-area';
 export { Theme, themeTokens } from './theme';
 export type { ThemeAppearance, ThemeProps, ThemeTokens } from './theme';
+export type { TextAreaProps } from './types';

package/dist/types-ts4.0/styles.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { CSSObject } from '@emotion/core';
 import { ThemeTokens } from './theme';
+import { TextAreaProps } from './types';
 export interface StyleProps {
     minimumRows: number | undefined;
     resize: string | undefined;
@@ -10,4 +11,4 @@ export interface StyleProps {
 }
 export declare const borderWidth = 2;
 export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => CSSObject;
-export declare const themeStyles: (props: ThemeTokens) => CSSObject;
+export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => CSSObject;

package/dist/types-ts4.0/text-area.d.ts

@@ -1,99 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-export interface OwnProps extends WithAnalyticsEventsProps {
-    /**
-     * controls the appearance of the field.
-     * subtle shows styling on hover.
-     * none prevents all field styling.
-     */
-    appearance?: 'standard' | 'subtle' | 'none';
-    /**
-     * Set whether the fields should expand to fill available horizontal space.
-     */
-    isCompact?: boolean;
-    /**
-     * Sets the field as uneditable, with a changed hover state.
-     */
-    isDisabled?: boolean;
-    /**
-     * If true, prevents the value of the input from being edited.
-     */
-    isReadOnly?: boolean;
-    /**
-     * Set required for form that the field is part of.
-     */
-    isRequired?: boolean;
-    /**
-     * Sets styling to indicate that the input is invalid.
-     */
-    isInvalid?: boolean;
-    /**
-     * The minimum number of rows of text to display
-     */
-    minimumRows?: number;
-    /**
-     * The maxheight of the textarea
-     */
-    maxHeight?: string;
-    /**
-     * The value of the text-area.
-     */
-    value?: string;
-    /**
-     * The default value of the textarea
-     */
-    defaultValue?: string;
-    /**
-     * Name of the input form control
-     */
-    name?: string;
-    /**
-     * The placeholder within the textarea
-     */
-    placeholder?: string;
-    /**
-     * Handler to be called when the input is blurred
-     */
-    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /**
-     * Handler to be called when the input changes.
-     */
-    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-    /**
-     * Handler to be called when the input is focused
-     */
-    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /**
-     * Sets content text value to monospace
-     */
-    isMonospaced?: boolean;
-    /**
-     * Enables the resizing of the textarea:
-     * auto: both directions.
-     * horizontal: only along the x axis.
-     * vertical: only along the y axis.
-     * smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
-     * none: explicitly disallow resizing on the textarea.
-     */
-    resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
-    /**
-     * Enables native spell check on the `textarea` element.
-     */
-    spellCheck?: boolean;
-    /**
-     * The theme function TextArea consumes to derive theming constants for use in styling its components
-     */
-    theme?: any;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
-     */
-    testId?: string;
-}
-declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
-export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
+import { TextAreaProps } from './types';
 /**
  * __Text area__
  *
@@ -103,5 +10,5 @@ export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HT
  * - [Code](https://atlassian.design/components/textarea/code)
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
-declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
+declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "minimumRows" | "maxHeight" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "isMonospaced" | "resize" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
 export default TextArea;

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,96 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export interface OwnProps extends WithAnalyticsEventsProps {
+    /**
+     * controls the appearance of the field.
+     * subtle shows styling on hover.
+     * none prevents all field styling.
+     */
+    appearance?: 'standard' | 'subtle' | 'none';
+    /**
+     * Set whether the fields should expand to fill available horizontal space.
+     */
+    isCompact?: boolean;
+    /**
+     * Sets the field as uneditable, with a changed hover state.
+     */
+    isDisabled?: boolean;
+    /**
+     * If true, prevents the value of the input from being edited.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Set required for form that the field is part of.
+     */
+    isRequired?: boolean;
+    /**
+     * Sets styling to indicate that the input is invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * The minimum number of rows of text to display
+     */
+    minimumRows?: number;
+    /**
+     * The maxheight of the textarea
+     */
+    maxHeight?: string;
+    /**
+     * The value of the text-area.
+     */
+    value?: string;
+    /**
+     * The default value of the textarea
+     */
+    defaultValue?: string;
+    /**
+     * Name of the input form control
+     */
+    name?: string;
+    /**
+     * The placeholder within the textarea
+     */
+    placeholder?: string;
+    /**
+     * Handler to be called when the input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Handler to be called when the input changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Handler to be called when the input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Sets content text value to monospace
+     */
+    isMonospaced?: boolean;
+    /**
+     * Enables the resizing of the textarea:
+     * auto: both directions.
+     * horizontal: only along the x axis.
+     * vertical: only along the y axis.
+     * smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
+     * none: explicitly disallow resizing on the textarea.
+     */
+    resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
+    /**
+     * Enables native spell check on the `textarea` element.
+     */
+    spellCheck?: boolean;
+    /**
+     * The theme function TextArea consumes to derive theming constants for use in styling its components
+     */
+    theme?: any;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+}
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
+export {};

package/extract-react-types/textarea-props.tsx

@@ -1,4 +1,4 @@
-import type { OwnProps as Props } from '../src/text-area';
+import type { OwnProps as Props } from '../src/types';
 
 export default function TextareaProps(props: Props) {
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.3.11",
+  "version": "4.4.0",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"