@atlaskit/textfield 5.2.0 → 5.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textfield
 
+## 5.2.2
+
+### 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.
+
+## 5.2.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 5.2.0
 
 ### Minor Changes

package/dist/cjs/component-tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparent = exports.textColor = exports.subtleBackgroundColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
+exports.transparent = exports.textColor = exports.subtleBorderColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -27,14 +27,9 @@ var defaultBackgroundColorHover = {
   dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
 };
 exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
-var subtleBackgroundColorHover = {
-  light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.DN30, ")")
-};
-exports.subtleBackgroundColorHover = subtleBackgroundColorHover;
 var defaultBorderColor = {
-  light: "var(--ds-border, ".concat(_colors.N40, ")"),
-  dark: "var(--ds-border, ".concat(_colors.DN40, ")")
+  light: "var(--ds-border-input, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-border-input, ".concat(_colors.DN40, ")")
 };
 exports.defaultBorderColor = defaultBorderColor;
 var defaultBorderColorFocus = {
@@ -42,6 +37,11 @@ var defaultBorderColorFocus = {
   dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
 };
 exports.defaultBorderColorFocus = defaultBorderColorFocus;
+var subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
+};
+exports.subtleBorderColorHover = subtleBorderColorHover;
 var transparent = {
   light: 'transparent',
   dark: 'transparent'

package/dist/cjs/styles.js

@@ -73,7 +73,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleBackgroundColorHover,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -86,6 +86,11 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
   return {
@@ -94,7 +99,8 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     color: componentTokens.textColor[mode],
     cursor: 'text',
     '&:hover': {
-      backgroundColor: backgroundColorHover[appearance][mode]
+      backgroundColor: backgroundColorHover[appearance][mode],
+      borderColor: borderColorHover[appearance][mode]
     },
     '&:focus-within': {
       backgroundColor: backgroundColorFocus[appearance][mode],
@@ -221,6 +227,7 @@ var textFieldColors = {
   backgroundColorHover: backgroundColorHover,
   borderColor: borderColor,
   borderColorFocus: borderColorFocus,
+  borderColorHover: borderColorHover,
   placeholderTextColor: componentTokens.placeholderTextColor,
   textColor: componentTokens.textColor,
   invalidRules: invalidRules,

package/dist/cjs/text-field.js

@@ -40,7 +40,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.2.0"
+  packageVersion: "5.2.2"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.2.0",
+	"version": "5.2.2",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -15,18 +15,18 @@ export const defaultBackgroundColorHover = {
   light: `var(--ds-background-input-hovered, ${N30})`,
   dark: `var(--ds-background-input-hovered, ${DN30})`
 };
-export const subtleBackgroundColorHover = {
-  light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
-  dark: `var(--ds-background-neutral-subtle-hovered, ${DN30})`
-};
 export const defaultBorderColor = {
-  light: `var(--ds-border, ${N40})`,
-  dark: `var(--ds-border, ${DN40})`
+  light: `var(--ds-border-input, ${N40})`,
+  dark: `var(--ds-border-input, ${DN40})`
 };
 export const defaultBorderColorFocus = {
   light: `var(--ds-border-focused, ${B100})`,
   dark: `var(--ds-border-focused, ${B75})`
 };
+export const subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
+};
 export const transparent = {
   light: 'transparent',
   dark: 'transparent'

package/dist/es2019/styles.js

@@ -49,7 +49,7 @@ const backgroundColorFocus = {
 };
 const backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleBackgroundColorHover,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 const borderColor = {
@@ -62,6 +62,11 @@ const borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+const borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 const getContainerTextBgAndBorderColor = (appearance, mode) => ({
   backgroundColor: backgroundColor[appearance][mode],
@@ -69,7 +74,8 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
   color: componentTokens.textColor[mode],
   cursor: 'text',
   '&:hover': {
-    backgroundColor: backgroundColorHover[appearance][mode]
+    backgroundColor: backgroundColorHover[appearance][mode],
+    borderColor: borderColorHover[appearance][mode]
   },
   '&:focus-within': {
     backgroundColor: backgroundColorFocus[appearance][mode],
@@ -184,6 +190,7 @@ export const textFieldColors = {
   backgroundColorHover,
   borderColor,
   borderColorFocus,
+  borderColorHover,
   placeholderTextColor: componentTokens.placeholderTextColor,
   textColor: componentTokens.textColor,
   invalidRules,

package/dist/es2019/text-field.js

@@ -9,7 +9,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.2.0"
+  packageVersion: "5.2.2"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.2.0",
+	"version": "5.2.2",
 	"sideEffects": false
 }

package/dist/esm/component-tokens.js

@@ -15,18 +15,18 @@ export var defaultBackgroundColorHover = {
   light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
   dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
 };
-export var subtleBackgroundColorHover = {
-  light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
-  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(DN30, ")")
-};
 export var defaultBorderColor = {
-  light: "var(--ds-border, ".concat(N40, ")"),
-  dark: "var(--ds-border, ".concat(DN40, ")")
+  light: "var(--ds-border-input, ".concat(N40, ")"),
+  dark: "var(--ds-border-input, ".concat(DN40, ")")
 };
 export var defaultBorderColorFocus = {
   light: "var(--ds-border-focused, ".concat(B100, ")"),
   dark: "var(--ds-border-focused, ".concat(B75, ")")
 };
+export var subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
+};
 export var transparent = {
   light: 'transparent',
   dark: 'transparent'

package/dist/esm/styles.js

@@ -55,7 +55,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleBackgroundColorHover,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -68,6 +68,11 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
   return {
@@ -76,7 +81,8 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     color: componentTokens.textColor[mode],
     cursor: 'text',
     '&:hover': {
-      backgroundColor: backgroundColorHover[appearance][mode]
+      backgroundColor: backgroundColorHover[appearance][mode],
+      borderColor: borderColorHover[appearance][mode]
     },
     '&:focus-within': {
       backgroundColor: backgroundColorFocus[appearance][mode],
@@ -198,6 +204,7 @@ export var textFieldColors = {
   backgroundColorHover: backgroundColorHover,
   borderColor: borderColor,
   borderColorFocus: borderColorFocus,
+  borderColorHover: borderColorHover,
   placeholderTextColor: componentTokens.placeholderTextColor,
   textColor: componentTokens.textColor,
   invalidRules: invalidRules,

package/dist/esm/text-field.js

@@ -17,7 +17,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.2.0"
+  packageVersion: "5.2.2"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.2.0",
+	"version": "5.2.2",
 	"sideEffects": false
 }

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

@@ -14,18 +14,18 @@ export declare const defaultBackgroundColorHover: {
     light: "var(--ds-background-input-hovered)";
     dark: "var(--ds-background-input-hovered)";
 };
-export declare const subtleBackgroundColorHover: {
-    light: "var(--ds-background-neutral-subtle-hovered)";
-    dark: "var(--ds-background-neutral-subtle-hovered)";
-};
 export declare const defaultBorderColor: {
-    light: "var(--ds-border)";
-    dark: "var(--ds-border)";
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
 };
 export declare const defaultBorderColorFocus: {
     light: "var(--ds-border-focused)";
     dark: "var(--ds-border-focused)";
 };
+export declare const subtleBorderColorHover: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
+};
 export declare const transparent: {
     light: string;
     dark: string;

package/dist/types/styles.d.ts

@@ -21,6 +21,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly cursor: string;
     readonly '&:hover': {
         backgroundColor: string;
+        borderColor: string;
     };
     readonly '&:focus-within': {
         backgroundColor: string;
@@ -131,8 +132,8 @@ export declare const textFieldColors: {
             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;
@@ -141,8 +142,8 @@ export declare const textFieldColors: {
     };
     borderColor: {
         standard: {
-            light: "var(--ds-border)";
-            dark: "var(--ds-border)";
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
         };
         subtle: {
             light: string;
@@ -167,6 +168,20 @@ export declare const textFieldColors: {
             dark: string;
         };
     };
+    borderColorHover: {
+        standard: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        subtle: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
     placeholderTextColor: {
         light: "var(--ds-text-subtlest)";
         dark: "var(--ds-text-subtlest)";

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

@@ -0,0 +1,44 @@
+export declare const disabledBackgroundColor: {
+    light: "var(--ds-background-disabled)";
+    dark: "var(--ds-background-disabled)";
+};
+export declare const defaultBackgroundColor: {
+    light: "var(--ds-background-input)";
+    dark: "var(--ds-background-input)";
+};
+export declare const defaultBackgroundColorFocus: {
+    light: "var(--ds-background-input-pressed)";
+    dark: "var(--ds-background-input-pressed)";
+};
+export declare const defaultBackgroundColorHover: {
+    light: "var(--ds-background-input-hovered)";
+    dark: "var(--ds-background-input-hovered)";
+};
+export declare const defaultBorderColor: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
+};
+export declare const defaultBorderColorFocus: {
+    light: "var(--ds-border-focused)";
+    dark: "var(--ds-border-focused)";
+};
+export declare const subtleBorderColorHover: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
+};
+export declare const transparent: {
+    light: string;
+    dark: string;
+};
+export declare const textColor: {
+    light: "var(--ds-text)";
+    dark: "var(--ds-text)";
+};
+export declare const disabledTextColor: {
+    light: "var(--ds-text-disabled)";
+    dark: "var(--ds-text-disabled)";
+};
+export declare const placeholderTextColor: {
+    light: "var(--ds-text-subtlest)";
+    dark: "var(--ds-text-subtlest)";
+};

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

@@ -0,0 +1,3 @@
+export { default } from './text-field';
+export { textFieldColors as TextFieldColors } from './styles';
+export type { TextfieldProps as TextFieldProps, Appearance } from './types';

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

@@ -0,0 +1,223 @@
+import { ThemeModes } from '@atlaskit/theme/types';
+import { Appearance } from './types';
+export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => {
+    readonly borderRadius: 3;
+    readonly borderWidth: 2;
+    readonly borderStyle: "none" | "solid";
+    readonly boxSizing: "border-box";
+    readonly display: "flex";
+    readonly flex: "1 1 100%";
+    readonly fontSize: number;
+    readonly justifyContent: "space-between";
+    readonly maxWidth: string | number;
+    readonly overflow: "hidden";
+    readonly transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out";
+    readonly wordWrap: "break-word";
+    readonly verticalAlign: "top";
+    readonly pointerEvents: "auto";
+    readonly backgroundColor: string;
+    readonly borderColor: string;
+    readonly color: "var(--ds-text)";
+    readonly cursor: string;
+    readonly '&:hover': {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    readonly '&:focus-within': {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    readonly '&[data-disabled]': {
+        backgroundColor: "var(--ds-background-disabled)";
+        borderColor: "var(--ds-background-disabled)";
+        color: "var(--ds-text-disabled)";
+        cursor: string;
+    };
+    readonly '&[data-invalid]': {
+        borderColor: "var(--ds-border-danger)";
+    };
+    readonly '&[data-invalid]:focus-within': {
+        backgroundColor: "var(--ds-background-input-pressed)";
+        borderColor: "var(--ds-border-focused)";
+    };
+    readonly '@media screen and (-ms-high-contrast: active)': {
+        '&[data-invalid]:focus-within': {
+            borderColor: string;
+        };
+        '&:focus-within': {
+            borderColor: string;
+        };
+        '&[data-disabled]': {
+            borderColor: string;
+        };
+    };
+    readonly alignItems: "center";
+};
+export declare const inputStyles: (mode: ThemeModes) => {
+    readonly backgroundColor: "transparent";
+    readonly border: 0;
+    readonly boxSizing: "border-box";
+    readonly color: "inherit";
+    readonly cursor: "inherit";
+    readonly fontSize: number;
+    readonly minWidth: "0";
+    readonly outline: "none";
+    readonly width: "100%";
+    readonly lineHeight: number;
+    readonly fontFamily: string;
+    readonly '&[data-monospaced]': {
+        readonly fontFamily: string;
+    };
+    readonly '&[data-compact]': {
+        readonly padding: `${number}px ${number}px`;
+        readonly height: `${string}em`;
+    };
+    readonly '&:not([data-compact])': {
+        readonly padding: `${number}px ${number}px`;
+        readonly height: `${string}em`;
+    };
+    readonly '&[disabled]': {
+        readonly WebkitTextFillColor: "var(--ds-text-disabled)";
+    };
+    readonly '&::-ms-clear': {
+        readonly display: "none";
+    };
+    readonly '&:invalid': {
+        readonly boxShadow: "none";
+    };
+    readonly '&::placeholder': {
+        readonly color: "var(--ds-text-subtlest)";
+        readonly '&:disabled': {
+            readonly color: "var(--ds-text-disabled)";
+        };
+    };
+    readonly '@media screen and (-ms-high-contrast: active)': {
+        readonly '&[disabled]': {
+            readonly color: "GrayText";
+        };
+    };
+};
+export declare const textFieldColors: {
+    backgroundColor: {
+        standard: {
+            light: "var(--ds-background-input)";
+            dark: "var(--ds-background-input)";
+        };
+        subtle: {
+            light: string;
+            dark: string;
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    backgroundColorFocus: {
+        standard: {
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
+        };
+        subtle: {
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    backgroundColorHover: {
+        standard: {
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
+        };
+        subtle: {
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    borderColor: {
+        standard: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        subtle: {
+            light: string;
+            dark: string;
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    borderColorFocus: {
+        standard: {
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
+        };
+        subtle: {
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    borderColorHover: {
+        standard: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        subtle: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    placeholderTextColor: {
+        light: "var(--ds-text-subtlest)";
+        dark: "var(--ds-text-subtlest)";
+    };
+    textColor: {
+        light: "var(--ds-text)";
+        dark: "var(--ds-text)";
+    };
+    invalidRules: {
+        light: {
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
+        };
+        dark: {
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
+        };
+    };
+    disabledRules: {
+        light: {
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            textColor: "var(--ds-text-disabled)";
+        };
+        dark: {
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            textColor: "var(--ds-text-disabled)";
+        };
+    };
+};

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

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import React from 'react';
+import { TextfieldProps } from './types';
+declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
+/**
+ * __Textfield__
+ *
+ * A text field is an input that allows a user to write or edit text.
+ *
+ * - [Examples](https://atlassian.design/components/textfield/examples)
+ * - [Code](https://atlassian.design/components/textfield/code)
+ * - [Usage](https://atlassian.design/components/textfield/usage)
+ */
+export default _default;

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

@@ -0,0 +1,71 @@
+import React, { AllHTMLAttributes, FormEventHandler } from 'react';
+export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
+    /**
+     * Affects the visual style of the text field.
+     */
+    appearance?: 'standard' | 'none' | 'subtle';
+    /**
+     * Applies compact styling, making the field smaller.
+     */
+    isCompact?: boolean;
+    /**
+     * Sets the field as to appear disabled,
+     * users will not be able to interact with the text field.
+     */
+    isDisabled?: boolean;
+    /**
+     * Changes the text field to have a border indicating that its value is invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * Sets content text value to appear monospaced.
+     */
+    isMonospaced?: 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;
+    /**
+     * Element after input in text field.
+     */
+    elemAfterInput?: React.ReactNode;
+    /**
+     * Element before input in text field.
+     */
+    elemBeforeInput?: React.ReactNode;
+    /**
+     * Sets maximum width of input.
+     */
+    width?: string | number;
+    /**
+     * Handler called when the mouse down event is triggered on the input element.
+     */
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * 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;
+    /**
+     * Name of the input element.
+     */
+    name?: string;
+    /**
+     * Class name to apply to the input element.
+     */
+    className?: string;
+    /**
+     * Placeholder text to display in the text field whenever it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Handler called when the inputs value changes.
+     */
+    onChange?: FormEventHandler<HTMLInputElement>;
+}
+export declare type Appearance = 'subtle' | 'standard' | 'none';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -48,12 +55,12 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^12.1.5",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [