@atlaskit/textarea 4.3.7 → 4.3.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/textarea
 
+## 4.3.8
+
+### Patch Changes
+
+- [`e4abd2c2888`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4abd2c2888) - Update token used for background color of subtle text area on hover
+- [`926f9b57c59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/926f9b57c59) - Internal code change turning on new linting rules.
+- [`fe575d49d66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe575d49d66) - Updated styles to use new input design tokens
+
 ## 4.3.7
 
 ### Patch Changes

package/codemods/{4.0.0-lite-mode.ts → 4.0.0-lite-mode.tsx}

@@ -1,4 +1,4 @@
-import { renameForwardedRefToRef } from './migrates/rename-forwardedRef-to-ref';
+import { renameForwardedRefToRef } from './migrates/rename-forwarded-ref-to-ref';
 import { createTransformer } from './utils';
 
 const transformer = createTransformer('@atlaskit/textarea', [

package/codemods/__tests__/{rename-forwardedRef-to-ref.ts → rename-forwarded-ref-to-ref.tsx}

@@ -1,6 +1,6 @@
 jest.autoMockOff();
 
-import { renameForwardedRefToRef } from '../migrates/rename-forwardedRef-to-ref';
+import { renameForwardedRefToRef } from '../migrates/rename-forwarded-ref-to-ref';
 import { createTransformer } from '../utils';
 
 const transformer = createTransformer('@atlaskit/textarea', [

package/dist/cjs/component-tokens.js

@@ -33,8 +33,8 @@ var defaultBorderColorFocus = {
 };
 exports.defaultBorderColorFocus = defaultBorderColorFocus;
 var defaultBackgroundColor = {
-  light: "var(--ds-background-neutral, ".concat(_colors.N10, ")"),
-  dark: "var(--ds-background-neutral, ".concat(_colors.DN10, ")")
+  light: "var(--ds-background-input, ".concat(_colors.N10, ")"),
+  dark: "var(--ds-background-input, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultBackgroundColorHover = {
@@ -45,12 +45,11 @@ exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
 var defaultBackgroundColorFocus = {
   light: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
   dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
-}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
-
+};
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
 var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
 };
 exports.subtleHoverBackgroundColor = subtleHoverBackgroundColor;
 var placeholderTextColor = {

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.7";
+var packageVersion = "4.3.8";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -158,6 +158,16 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     css: textAreaStyles
   }, rest));
 });
+/**
+ * __Text area__
+ *
+ * A text area lets users enter long form text which spans over multiple lines.
+ *
+ * - [Examples](https://atlassian.design/components/textarea/examples)
+ * - [Code](https://atlassian.design/components/textarea/code)
+ * - [Usage](https://atlassian.design/components/textarea/usage)
+ */
+
 var TextArea = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function TextArea(props, ref) {
   return (0, _core.jsx)(_components.default.Consumer, null, function (_ref) {
     var mode = _ref.mode;

package/dist/cjs/theme.js

@@ -74,6 +74,12 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 var themeTokens = {
   borderColor: borderColor,
   borderColorFocus: borderColorFocus,
@@ -85,6 +91,12 @@ var themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+
 exports.themeTokens = themeTokens;
 var Theme = (0, _components.createTheme)(function (_ref) {
   var appearance = _ref.appearance,

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -20,8 +20,8 @@ export const defaultBorderColorFocus = {
   dark: `var(--ds-border-focused, ${B75})`
 };
 export const defaultBackgroundColor = {
-  light: `var(--ds-background-neutral, ${N10})`,
-  dark: `var(--ds-background-neutral, ${DN10})`
+  light: `var(--ds-background-input, ${N10})`,
+  dark: `var(--ds-background-input, ${DN10})`
 };
 export const defaultBackgroundColorHover = {
   light: `var(--ds-background-input-hovered, ${N30})`,
@@ -30,11 +30,10 @@ export const defaultBackgroundColorHover = {
 export const defaultBackgroundColorFocus = {
   light: `var(--ds-background-input-pressed, ${N0})`,
   dark: `var(--ds-background-input-pressed, ${DN10})`
-}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
-
+};
 export const subtleHoverBackgroundColor = {
-  light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
-  dark: `var(--ds-background-neutral-subtle-hovered, ${DN30})`
+  light: `var(--ds-background-input-hovered, ${N30})`,
+  dark: `var(--ds-background-input-hovered, ${DN30})`
 };
 export const placeholderTextColor = {
   light: `var(--ds-text-subtlest, ${N100})`,

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.7";
+const packageVersion = "4.3.8";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
@@ -118,6 +118,16 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     css: textAreaStyles
   }, rest));
 });
+/**
+ * __Text area__
+ *
+ * A text area lets users enter long form text which spans over multiple lines.
+ *
+ * - [Examples](https://atlassian.design/components/textarea/examples)
+ * - [Code](https://atlassian.design/components/textarea/code)
+ * - [Usage](https://atlassian.design/components/textarea/usage)
+ */
+
 const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
   return jsx(GlobalTheme.Consumer, null, ({
     mode

package/dist/es2019/theme.js

@@ -59,6 +59,12 @@ const borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export const themeTokens = {
   borderColor,
   borderColorFocus,
@@ -70,6 +76,12 @@ export const themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+
 export const Theme = createTheme(({
   appearance,
   mode

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -20,8 +20,8 @@ export var defaultBorderColorFocus = {
   dark: "var(--ds-border-focused, ".concat(B75, ")")
 };
 export var defaultBackgroundColor = {
-  light: "var(--ds-background-neutral, ".concat(N10, ")"),
-  dark: "var(--ds-background-neutral, ".concat(DN10, ")")
+  light: "var(--ds-background-input, ".concat(N10, ")"),
+  dark: "var(--ds-background-input, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorHover = {
   light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
@@ -30,11 +30,10 @@ export var defaultBackgroundColorHover = {
 export var defaultBackgroundColorFocus = {
   light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
   dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
-}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
-
+};
 export var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
-  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
 };
 export var placeholderTextColor = {
   light: "var(--ds-text-subtlest, ".concat(N100, ")"),

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.7";
+var packageVersion = "4.3.8";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -136,6 +136,16 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     css: textAreaStyles
   }, rest));
 });
+/**
+ * __Text area__
+ *
+ * A text area lets users enter long form text which spans over multiple lines.
+ *
+ * - [Examples](https://atlassian.design/components/textarea/examples)
+ * - [Code](https://atlassian.design/components/textarea/code)
+ * - [Usage](https://atlassian.design/components/textarea/usage)
+ */
+
 var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
   return jsx(GlobalTheme.Consumer, null, function (_ref) {
     var mode = _ref.mode;

package/dist/esm/theme.js

@@ -59,6 +59,12 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export var themeTokens = {
   borderColor: borderColor,
   borderColorFocus: borderColorFocus,
@@ -70,6 +76,12 @@ export var themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+
 export var Theme = createTheme(function (_ref) {
   var appearance = _ref.appearance,
       mode = _ref.mode;

package/dist/esm/version.json

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

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

@@ -19,8 +19,8 @@ export declare const defaultBorderColorFocus: {
     dark: "var(--ds-border-focused)";
 };
 export declare const defaultBackgroundColor: {
-    light: "var(--ds-background-neutral)";
-    dark: "var(--ds-background-neutral)";
+    light: "var(--ds-background-input)";
+    dark: "var(--ds-background-input)";
 };
 export declare const defaultBackgroundColorHover: {
     light: "var(--ds-background-input-hovered)";
@@ -31,8 +31,8 @@ export declare const defaultBackgroundColorFocus: {
     dark: "var(--ds-background-input-pressed)";
 };
 export declare const subtleHoverBackgroundColor: {
-    light: "var(--ds-background-neutral-subtle-hovered)";
-    dark: "var(--ds-background-neutral-subtle-hovered)";
+    light: "var(--ds-background-input-hovered)";
+    dark: "var(--ds-background-input-hovered)";
 };
 export declare const placeholderTextColor: {
     light: "var(--ds-text-subtlest)";

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

@@ -8,35 +8,65 @@ export interface OwnProps extends WithAnalyticsEventsProps {
      * none prevents all field styling.
      */
     appearance?: 'standard' | 'subtle' | 'none';
-    /** Set whether the fields should expand to fill available horizontal space. */
+    /**
+     * Set whether the fields should expand to fill available horizontal space.
+     */
     isCompact?: boolean;
-    /** Sets the field as uneditable, with a changed hover state. */
+    /**
+     * Sets the field as uneditable, with a changed hover state.
+     */
     isDisabled?: boolean;
-    /** If true, prevents the value of the input from being edited. */
+    /**
+     * If true, prevents the value of the input from being edited.
+     */
     isReadOnly?: boolean;
-    /** Set required for form that the field is part of. */
+    /**
+     * Set required for form that the field is part of.
+     */
     isRequired?: boolean;
-    /** Sets styling to indicate that the input is invalid. */
+    /**
+     * Sets styling to indicate that the input is invalid.
+     */
     isInvalid?: boolean;
-    /** The minimum number of rows of text to display */
+    /**
+     * The minimum number of rows of text to display
+     */
     minimumRows?: number;
-    /** The maxheight of the textarea */
+    /**
+     * The maxheight of the textarea
+     */
     maxHeight?: string;
-    /** The value of the text-area. */
+    /**
+     * The value of the text-area.
+     */
     value?: string;
-    /** The default value of the textarea */
+    /**
+     * The default value of the textarea
+     */
     defaultValue?: string;
-    /** Name of the input form control */
+    /**
+     * Name of the input form control
+     */
     name?: string;
-    /** The placeholder within the textarea */
+    /**
+     * The placeholder within the textarea
+     */
     placeholder?: string;
-    /** Handler to be called when the input is blurred */
+    /**
+     * Handler to be called when the input is blurred
+     */
     onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /** Handler to be called when the input changes. */
+    /**
+     * Handler to be called when the input changes.
+     */
     onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-    /** Handler to be called when the input is focused */
+    /**
+     * Handler to be called when the input is focused
+     */
     onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /** Sets content text value to monospace */
+    /**
+     * Sets content text value to monospace
+     */
     isMonospaced?: boolean;
     /**
      * Enables the resizing of the textarea:
@@ -58,10 +88,20 @@ export interface OwnProps extends WithAnalyticsEventsProps {
     /**
      * 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 */
+     * serving as a hook for automated tests
+     */
     testId?: string;
 }
 declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
-export declare type Props = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
-declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "rows" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "spellCheck" | "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" | "onFocus" | "onFocusCapture" | "onBlur" | "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" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "theme" | "testId" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
+export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
+/**
+ * __Text area__
+ *
+ * A text area lets users enter long form text which spans over multiple lines.
+ *
+ * - [Examples](https://atlassian.design/components/textarea/examples)
+ * - [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" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "rows" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "spellCheck" | "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" | "onFocus" | "onFocusCapture" | "onBlur" | "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" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "theme" | "testId" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
 export default TextArea;

package/dist/types/theme.d.ts

@@ -2,8 +2,17 @@
 export declare type ThemeAppearance = 'standard' | 'subtle' | 'none';
 export declare type ThemeProps = {
     appearance: ThemeAppearance;
+    /**
+     * @deprecated
+     * Mode is deprecated and will be deleted in the future.
+     */
     mode: 'dark' | 'light';
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export declare type ThemeTokens = {
     borderColor: string;
     borderColorFocus: string;
@@ -28,6 +37,11 @@ export declare type ThemeTokens = {
     textColor: string;
     placeholderTextColor: string;
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export declare const themeTokens: {
     borderColor: {
         standard: {
@@ -59,8 +73,8 @@ export declare const themeTokens: {
     };
     backgroundColor: {
         standard: {
-            light: "var(--ds-background-neutral)";
-            dark: "var(--ds-background-neutral)";
+            light: "var(--ds-background-input)";
+            dark: "var(--ds-background-input)";
         };
         subtle: {
             light: string;
@@ -91,8 +105,8 @@ export declare const themeTokens: {
             dark: "var(--ds-background-input-hovered)";
         };
         subtle: {
-            light: "var(--ds-background-neutral-subtle-hovered)";
-            dark: "var(--ds-background-neutral-subtle-hovered)";
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
         };
         none: {
             light: string;
@@ -121,14 +135,14 @@ export declare const themeTokens: {
         light: {
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
-            backgroundColor: "var(--ds-background-neutral)";
+            backgroundColor: "var(--ds-background-input)";
             backgroundColorFocus: "var(--ds-background-input-pressed)";
             backgroundColorHover: "var(--ds-background-input-hovered)";
         };
         dark: {
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
-            backgroundColor: "var(--ds-background-neutral)";
+            backgroundColor: "var(--ds-background-input)";
             backgroundColorFocus: "var(--ds-background-input-pressed)";
             backgroundColorHover: "var(--ds-background-input-hovered)";
         };
@@ -142,6 +156,11 @@ export declare const themeTokens: {
         dark: "var(--ds-text-subtlest)";
     };
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export declare const Theme: {
     Consumer: import("react").ComponentType<{
         children: (tokens: ThemeTokens) => import("react").ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.3.7",
+  "version": "4.3.8",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,7 +13,7 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/textarea/",
   "atlassian": {
     "team": "Design System Team",
@@ -24,11 +24,11 @@
     }
   },
   "af:exports": {
-    ".": "./src/index.ts",
-    "./component-tokens": "./src/component-tokens.ts",
-    "./styles": "./src/styles.ts",
+    ".": "./src/index.tsx",
+    "./component-tokens": "./src/component-tokens.tsx",
+    "./styles": "./src/styles.tsx",
     "./text-area": "./src/text-area.tsx",
-    "./theme": "./src/theme.ts"
+    "./theme": "./src/theme.tsx"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
@@ -43,6 +43,7 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
@@ -67,6 +68,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "design-system": "v1",
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",

package/common.ts

@@ -1 +0,0 @@
-export const docsText = `The default export of @atlaskit/textarea is a hybrid uncontrolled/controlled component; it is uncontrolled by default, but can be optionally controlled by setting the value prop. To set a default value for TextArea while leaving component uncontrolled, specify a defaultValue prop.`;