@atlaskit/textarea 4.3.10 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [`bedbdec0e82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bedbdec0e82) - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.
+
 ## 4.3.10
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparent = exports.textColor = exports.subtleHoverBackgroundColor = exports.placeholderTextColor = exports.invalidBorderColor = exports.disabledTextColor = exports.disabledBorder = exports.disabledBackground = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
+exports.transparent = exports.textColor = exports.subtleBorderColorHover = exports.placeholderTextColor = exports.invalidBorderColor = exports.disabledTextColor = exports.disabledBorder = exports.disabledBackground = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -47,11 +47,11 @@ var defaultBackgroundColorFocus = {
   dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
-var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
+var subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
-exports.subtleHoverBackgroundColor = subtleHoverBackgroundColor;
+exports.subtleBorderColorHover = subtleBorderColorHover;
 var placeholderTextColor = {
   light: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
   dark: "var(--ds-text-subtlest, ".concat(_colors.DN200, ")")

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) {
@@ -82,10 +83,11 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
   };
 };
 
-var hoverBackgroundStyle = function hoverBackgroundStyle(props) {
+var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -150,7 +152,7 @@ var staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: "background-color ".concat(transitionDuration, " ease-in-out"),
+  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out"),
   wordWrap: 'break-word',
   fontSize: fontSize,
   borderWidth: borderWidth,
@@ -184,8 +186,8 @@ var getBaseStyles = function getBaseStyles(_ref) {
 
 exports.getBaseStyles = getBaseStyles;
 
-var themeStyles = function themeStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundStyle(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.10";
+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/theme.js

@@ -61,7 +61,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -74,6 +74,11 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -104,6 +109,7 @@ var Theme = (0, _components.createTheme)(function (_ref) {
   return {
     borderColor: borderColor[appearance][mode],
     borderColorFocus: borderColorFocus[appearance][mode],
+    borderColorHover: borderColorHover[appearance][mode],
     backgroundColorHover: backgroundColorHover[appearance][mode],
     backgroundColorFocus: backgroundColorFocus[appearance][mode],
     backgroundColor: backgroundColor[appearance][mode],

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.10",
+	"version": "4.4.0",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -31,9 +31,9 @@ export const defaultBackgroundColorFocus = {
   light: `var(--ds-background-input-pressed, ${N0})`,
   dark: `var(--ds-background-input-pressed, ${DN10})`
 };
-export const subtleHoverBackgroundColor = {
-  light: `var(--ds-background-input-hovered, ${N30})`,
-  dark: `var(--ds-background-input-hovered, ${DN30})`
+export const subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
 export const placeholderTextColor = {
   light: `var(--ds-text-subtlest, ${N100})`,

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 => ({
@@ -62,10 +66,11 @@ const placeholderStyle = placeholderTextColor => ({
   }
 });
 
-const hoverBackgroundStyle = props => {
+const hoverBackgroundAndBorderStyles = props => {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -125,7 +130,8 @@ const staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: `background-color ${transitionDuration} ease-in-out`,
+  transition: `background-color ${transitionDuration} ease-in-out,
+               border-color ${transitionDuration} ease-in-out`,
   wordWrap: 'break-word',
   fontSize,
   borderWidth: borderWidth,
@@ -159,9 +165,9 @@ export const getBaseStyles = ({
   ...fontFamilyStyle(isMonospaced),
   maxHeight
 });
-export const themeStyles = props => {
-  return { ...bgAndBorderColorStyles(props),
-    ...hoverBackgroundStyle(props),
+export const themeStyles = (props, appearance) => {
+  return { ...bgAndBorderColorStyles(props, appearance),
+    ...hoverBackgroundAndBorderStyles(props),
     ...placeholderStyle(props.placeholderTextColor),
     color: props.textColor,
     '&:disabled': {

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.10";
+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/theme.js

@@ -46,7 +46,7 @@ const backgroundColorFocus = {
 };
 const backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 const borderColor = {
@@ -59,6 +59,11 @@ const borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+const borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -88,6 +93,7 @@ export const Theme = createTheme(({
 }) => ({
   borderColor: borderColor[appearance][mode],
   borderColorFocus: borderColorFocus[appearance][mode],
+  borderColorHover: borderColorHover[appearance][mode],
   backgroundColorHover: backgroundColorHover[appearance][mode],
   backgroundColorFocus: backgroundColorFocus[appearance][mode],
   backgroundColor: backgroundColor[appearance][mode],

package/dist/es2019/types.js

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

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -31,9 +31,9 @@ export var defaultBackgroundColorFocus = {
   light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
   dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
 };
-export var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
-  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
+export var subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
 export var placeholderTextColor = {
   light: "var(--ds-text-subtlest, ".concat(N100, ")"),

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) {
@@ -72,10 +73,11 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
   };
 };
 
-var hoverBackgroundStyle = function hoverBackgroundStyle(props) {
+var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -140,7 +142,7 @@ var staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: "background-color ".concat(transitionDuration, " ease-in-out"),
+  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out"),
   wordWrap: 'break-word',
   fontSize: fontSize,
   borderWidth: borderWidth,
@@ -170,8 +172,8 @@ export var getBaseStyles = function getBaseStyles(_ref) {
     maxHeight: maxHeight
   });
 };
-export var themeStyles = function themeStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundStyle(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.10";
+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/theme.js

@@ -46,7 +46,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -59,6 +59,11 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -88,6 +93,7 @@ export var Theme = createTheme(function (_ref) {
   return {
     borderColor: borderColor[appearance][mode],
     borderColorFocus: borderColorFocus[appearance][mode],
+    borderColorHover: borderColorHover[appearance][mode],
     backgroundColorHover: backgroundColorHover[appearance][mode],
     backgroundColorFocus: backgroundColorFocus[appearance][mode],
     backgroundColor: backgroundColor[appearance][mode],

package/dist/esm/types.js

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

package/dist/esm/version.json

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

package/dist/types/component-tokens.d.ts

@@ -30,9 +30,9 @@ export declare const defaultBackgroundColorFocus: {
     light: "var(--ds-background-input-pressed)";
     dark: "var(--ds-background-input-pressed)";
 };
-export declare const subtleHoverBackgroundColor: {
-    light: "var(--ds-background-input-hovered)";
-    dark: "var(--ds-background-input-hovered)";
+export declare const subtleBorderColorHover: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
 };
 export declare const placeholderTextColor: {
     light: "var(--ds-text-subtlest)";

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/theme.d.ts

@@ -16,6 +16,7 @@ export declare type ThemeProps = {
 export declare type ThemeTokens = {
     borderColor: string;
     borderColorFocus: string;
+    borderColorHover: string;
     backgroundColor: string;
     backgroundColorFocus: string;
     backgroundColorHover: string;

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/component-tokens.d.ts

@@ -30,9 +30,9 @@ export declare const defaultBackgroundColorFocus: {
     light: "var(--ds-background-input-pressed)";
     dark: "var(--ds-background-input-pressed)";
 };
-export declare const subtleHoverBackgroundColor: {
-    light: "var(--ds-background-input-hovered)";
-    dark: "var(--ds-background-input-hovered)";
+export declare const subtleBorderColorHover: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
 };
 export declare const placeholderTextColor: {
     light: "var(--ds-text-subtlest)";

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/theme.d.ts

@@ -16,6 +16,7 @@ export declare type ThemeProps = {
 export declare type ThemeTokens = {
     borderColor: string;
     borderColorFocus: string;
+    borderColorHover: string;
     backgroundColor: string;
     backgroundColorFocus: string;
     backgroundColorHover: string;

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.10",
+  "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/"