@atlaskit/textarea - npm Package Compare versions

Comparing version 4.3.11 to 4.4.0

CHANGELOG.md

 # @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
@@ -4,0 +10,0 @@

dist/cjs/styles.js

@@ -48,4 +48,4 @@ "use strict";
 
-var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
-  return {
+var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
+  return _objectSpread({
     '&:focus': {
@@ -59,10 +59,2 @@ backgroundColor: props.backgroundColorFocus,
     },
-    '&:disabled:focus': {
-      backgroundColor: props.disabledRules.backgroundColorFocus,
-      borderColor: props.disabledRules.borderColorFocus
-    },
-    '&:disabled:not(:focus)': {
-      backgroundColor: props.disabledRules.backgroundColor,
-      borderColor: props.disabledRules.borderColor
-    },
     '&[data-invalid]:focus': {
@@ -76,3 +68,12 @@ backgroundColor: props.invalidRules.backgroundColorFocus,
     }
-  };
+  }, appearance === 'standard' ? {
+    '&:disabled:focus': {
+      backgroundColor: props.disabledRules.backgroundColorFocus,
+      borderColor: props.disabledRules.borderColorFocus
+    },
+    '&:disabled:not(:focus)': {
+      backgroundColor: props.disabledRules.backgroundColor,
+      borderColor: props.disabledRules.borderColor
+    }
+  } : {});
 };
@@ -191,4 +192,4 @@
 
-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,
@@ -195,0 +196,0 @@ '&:disabled': {

dist/cjs/text-area.js

@@ -43,3 +43,3 @@ "use strict";
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.11";
+var packageVersion = "4.4.0";
 var analyticsParams = {
@@ -147,3 +147,3 @@ componentName: 'textArea',
   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, {
@@ -150,0 +150,0 @@ value: value,

dist/cjs/version.json

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

dist/es2019/styles.js

@@ -32,3 +32,3 @@ /** @jsx jsx */
 
-const bgAndBorderColorStyles = props => ({
+const bgAndBorderColorStyles = (props, appearance) => ({
   '&:focus': {
@@ -42,10 +42,2 @@ backgroundColor: props.backgroundColorFocus,
   },
-  '&:disabled:focus': {
-    backgroundColor: props.disabledRules.backgroundColorFocus,
-    borderColor: props.disabledRules.borderColorFocus
-  },
-  '&:disabled:not(:focus)': {
-    backgroundColor: props.disabledRules.backgroundColor,
-    borderColor: props.disabledRules.borderColor
-  },
   '&[data-invalid]:focus': {
@@ -58,3 +50,15 @@ backgroundColor: props.invalidRules.backgroundColorFocus,
     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
+    }
+  } : {})
 });
@@ -167,4 +171,4 @@
 });
-export const themeStyles = props => {
-  return { ...bgAndBorderColorStyles(props),
+export const themeStyles = (props, appearance) => {
+  return { ...bgAndBorderColorStyles(props, appearance),
     ...hoverBackgroundAndBorderStyles(props),
@@ -171,0 +175,0 @@ ...placeholderStyle(props.placeholderTextColor),

dist/es2019/text-area.js

@@ -11,3 +11,3 @@ import _extends from "@babel/runtime/helpers/extends";
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.3.11";
+const packageVersion = "4.4.0";
 const analyticsParams = {
@@ -107,3 +107,3 @@ componentName: 'textArea',
   const textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
-  themeStyles(tokens)];
+  themeStyles(tokens, appearance)];
   return jsx("textarea", _extends({}, controlProps, {
@@ -110,0 +110,0 @@ value: value,

dist/es2019/version.json

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

dist/esm/styles.js

@@ -38,4 +38,4 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
-  return {
+var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
+  return _objectSpread({
     '&:focus': {
@@ -49,10 +49,2 @@ backgroundColor: props.backgroundColorFocus,
     },
-    '&:disabled:focus': {
-      backgroundColor: props.disabledRules.backgroundColorFocus,
-      borderColor: props.disabledRules.borderColorFocus
-    },
-    '&:disabled:not(:focus)': {
-      backgroundColor: props.disabledRules.backgroundColor,
-      borderColor: props.disabledRules.borderColor
-    },
     '&[data-invalid]:focus': {
@@ -66,3 +58,12 @@ backgroundColor: props.invalidRules.backgroundColorFocus,
     }
-  };
+  }, appearance === 'standard' ? {
+    '&:disabled:focus': {
+      backgroundColor: props.disabledRules.backgroundColorFocus,
+      borderColor: props.disabledRules.borderColorFocus
+    },
+    '&:disabled:not(:focus)': {
+      backgroundColor: props.disabledRules.backgroundColor,
+      borderColor: props.disabledRules.borderColor
+    }
+  } : {});
 };
@@ -177,4 +178,4 @@
 };
-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,
@@ -181,0 +182,0 @@ '&:disabled': {

dist/esm/text-area.js

@@ -19,3 +19,3 @@ import _extends from "@babel/runtime/helpers/extends";
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.11";
+var packageVersion = "4.4.0";
 var analyticsParams = {
@@ -125,3 +125,3 @@ componentName: 'textArea',
   var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
-  themeStyles(tokens)];
+  themeStyles(tokens, appearance)];
   return jsx("textarea", _extends({}, controlProps, {
@@ -128,0 +128,0 @@ value: value,

dist/esm/version.json

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

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

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

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

 /** @jsx jsx */
 import { CSSObject } from '@emotion/core';
 import { ThemeTokens } from './theme';
+import { TextAreaProps } from './types';
 export interface StyleProps {
@@ -13,2 +14,2 @@ minimumRows: number | undefined;
 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;

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

 /** @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';
 /**
@@ -106,3 +13,3 @@ * __Text area__
  */
-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;

dist/types/index.d.ts

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

dist/types/styles.d.ts

 /** @jsx jsx */
 import { CSSObject } from '@emotion/core';
 import { ThemeTokens } from './theme';
+import { TextAreaProps } from './types';
 export interface StyleProps {
@@ -13,2 +14,2 @@ minimumRows: number | undefined;
 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;

dist/types/text-area.d.ts

 /** @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';
 /**
@@ -106,3 +13,3 @@ * __Text area__
  */
-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.json

 {
   "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.",
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

140238

increased by1.05%

Number of package files

48

increased by11.63%

Lines of code

2580

increased by0.74%

No dependency changes