@atlaskit/textfield 5.0.5 → 5.1.3

package/dist/es2019/styles.js

@@ -1,40 +1,40 @@
+import { R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import * as componentTokens from './component-tokens';
 const fontSize = getFontSize();
 const gridSize = getGridSize();
 const disabledRules = {
   light: {
-    backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.light,
+    backgroundColor: componentTokens.disabledBackgroundColor.light,
     backgroundColorHover: componentTokens.disabledBackgroundColor.light,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.light,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.light,
+    borderColor: componentTokens.disabledBackgroundColor.light,
     textColor: componentTokens.disabledTextColor.light
   },
   dark: {
-    backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.dark,
+    backgroundColor: componentTokens.disabledBackgroundColor.dark,
     backgroundColorHover: componentTokens.disabledBackgroundColor.dark,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.dark,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark,
+    borderColor: componentTokens.disabledBackgroundColor.dark,
     textColor: componentTokens.disabledTextColor.dark
   }
 };
 const invalidRules = {
   light: {
+    // ----
     backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
-    borderColor: componentTokens.invalidBorderColor.light,
+    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
+    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
+    borderColor: token('color.iconBorder.danger', R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.light
   },
   dark: {
+    // ----
     backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
-    borderColor: componentTokens.invalidBorderColor.dark,
+    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
+    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
+    borderColor: token('color.iconBorder.danger', R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
   }
 };
@@ -50,7 +50,7 @@ const backgroundColorFocus = {
 };
 const backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleBackgroundColorHover,
   none: componentTokens.transparent
 };
 const borderColor = {
@@ -82,24 +82,13 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
     color: disabledRules[mode].textColor,
     cursor: 'not-allowed'
   },
-  '&[data-disabled]:focus-within': {
-    backgroundColor: disabledRules[mode].backgroundColorFocus,
-    borderColor: disabledRules[mode].borderColorFocus
-  },
-  '&[data-disabled]:hover': {
-    backgroundColor: disabledRules[mode].backgroundColorHover
-  },
   '&[data-invalid]': {
-    backgroundColor: invalidRules[mode].backgroundColor,
     borderColor: invalidRules[mode].borderColor
   },
   '&[data-invalid]:focus-within': {
     backgroundColor: invalidRules[mode].backgroundColorFocus,
     borderColor: invalidRules[mode].borderColorFocus
   },
-  '&[data-invalid]:hover': {
-    backgroundColor: invalidRules[mode].backgroundColorHover
-  },
   '@media screen and (-ms-high-contrast: active)': {
     '&[data-invalid]:focus-within': {
       borderColor: 'Highlight'
@@ -188,8 +177,9 @@ export const inputStyles = mode => ({
       color: 'GrayText'
     }
   }
-});
-export const TextFieldColors = {
+}); // TODO: Remove when removing legacy theming.
+
+export const textFieldColors = {
   backgroundColor,
   backgroundColorFocus,
   backgroundColorHover,

package/dist/es2019/text-field.js

@@ -4,15 +4,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.0.5"
+  packageVersion: "5.1.3"
 };
-const TextfieldWithMode = /*#__PURE__*/forwardRef((props, ref) => {
-  const input = useRef(null);
+const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     appearance = 'standard',
     isCompact = false,
@@ -22,7 +21,6 @@ const TextfieldWithMode = /*#__PURE__*/forwardRef((props, ref) => {
     isReadOnly = false,
     isMonospaced = false,
     width,
-    mode,
     elemAfterInput,
     elemBeforeInput,
     testId,
@@ -30,8 +28,12 @@ const TextfieldWithMode = /*#__PURE__*/forwardRef((props, ref) => {
     onBlur,
     onMouseDown,
     className,
-    ...otherProps
+    ...spreadProps
   } = props;
+  const inputRef = useRef(null);
+  const {
+    mode
+  } = useGlobalTheme();
   const handleOnFocus = usePlatformLeafEventHandler({
     fn: event => {
       onFocus && onFocus(event);
@@ -47,7 +49,7 @@ const TextfieldWithMode = /*#__PURE__*/forwardRef((props, ref) => {
     ...analyticsParams
   });
   const handleOnMouseDown = useCallback(event => {
-    /** Running e.preventDefault() on the INPUT prevents double click behaviour */
+    // Running e.preventDefault() on the INPUT prevents double click behaviour
     // Sadly we needed this cast as the target type is being correctly set
     const target = event.target;
 
@@ -55,72 +57,73 @@ const TextfieldWithMode = /*#__PURE__*/forwardRef((props, ref) => {
       event.preventDefault();
     }
 
-    if (input && input.current && !isDisabled && document.activeElement !== input.current) {
-      input.current.focus();
+    if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
+      inputRef.current.focus();
     }
 
     onMouseDown && onMouseDown(event);
-  }, [onMouseDown, input, isDisabled]); // we want to keep a copy of the ref as well as pass it along
-
+  }, [onMouseDown, isDisabled]);
   const setInputRef = useCallback(inputElement => {
-    input.current = inputElement;
-    const forwardedRef = ref;
+    inputRef.current = inputElement;
 
-    if (!forwardedRef) {
+    if (!ref) {
       return;
     }
 
-    if (typeof forwardedRef === 'object') {
+    if (typeof ref === 'object') {
       // This is a blunder on the part of @types/react
       // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
       // .current should be assignable
-      // @ts-ignore
-      forwardedRef.current = inputElement;
+      // @ts-expect-error
+      ref.current = inputElement;
     }
 
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(inputElement);
+    if (typeof ref === 'function') {
+      ref(inputElement);
     }
   }, [ref]);
-  const inputControlProps = {
-    'data-compact': isCompact ? isCompact : undefined,
-    'data-monospaced': isMonospaced ? isMonospaced : undefined,
-    'aria-invalid': isInvalid ? isInvalid : undefined
-  };
-  const containerControlProps = {
-    'data-disabled': isDisabled ? isDisabled : undefined,
-    'data-invalid': isInvalid ? isInvalid : undefined
-  };
   const containerStyles = useMemo(() => getContainerStyles(appearance, mode, width), [appearance, mode, width]);
   const inputStyle = useMemo(() => getInputStyles(mode), [mode]);
-  return (// https://product-fabric.atlassian.net/browse/DST-1970
+  return (// We use event bubbling here to listen to any child element mouse down event.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("div", _extends({}, containerControlProps, {
-      onMouseDown: handleOnMouseDown,
+    jsx("div", {
+      "data-disabled": isDisabled ? isDisabled : undefined,
+      "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
       "data-testid": testId && `${testId}-container`,
+      onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: containerStyles,
       className: className
-    }), elemBeforeInput, jsx("input", _extends({}, otherProps, inputControlProps, {
+    }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
+      "data-compact": isCompact ? isCompact : undefined,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
+      "data-ds--text-field--input": true,
+      "data-testid": testId,
+      "aria-invalid": isInvalid ? isInvalid : undefined,
       disabled: isDisabled,
       readOnly: isReadOnly,
       required: isRequired,
       onBlur: handleOnBlur,
       onFocus: handleOnFocus,
-      ref: setInputRef,
-      "data-ds--text-field--input": true,
-      "data-testid": testId,
+      ref: setInputRef // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: inputStyle
     })), elemAfterInput)
   );
 });
-const Textfield = /*#__PURE__*/forwardRef(function Textfield(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
-    mode
-  }) => jsx(TextfieldWithMode, _extends({}, props, {
-    mode: mode,
-    ref: ref
-  })));
-});
 Textfield.displayName = 'Textfield';
-export default /*#__PURE__*/memo(Textfield);
+/**
+ * __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 /*#__PURE__*/memo(Textfield); // The above generic is used to let ERTC know what props to extract.
+// See: https://github.com/atlassian/extract-react-types/issues/201

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -1,49 +1,46 @@
-import { B100, B75, DN10, DN20, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors'; // The following are the name for color mappings in @atlaskit/themes
-// The exports are the functions, not the objects, so could not be used here
-
+import { B100, B75, DN10, DN30, DN40, DN600, DN90, N0, N10, N100, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var disabledBackgroundColor = {
-  light: N20,
-  dark: DN20
-}; // For validation red is the new 'yellow' which was { light: Y300, dark: Y300 }
-
-export var invalidBorderColor = {
-  light: R400,
-  dark: R400
-}; // The following do not yet have a darkmode 'map': N20A, N10
-
+  light: token('color.background.disabled', N10),
+  dark: token('color.background.disabled', DN10)
+};
 export var defaultBackgroundColor = {
-  light: N10,
-  dark: DN10
+  light: token('color.background.subtleBorderedNeutral.resting', N10),
+  dark: token('color.background.subtleBorderedNeutral.resting', DN10)
 };
 export var defaultBackgroundColorFocus = {
-  light: N0,
-  dark: DN10
+  light: token('color.background.default', N0),
+  dark: token('color.background.default', DN10)
 };
 export var defaultBackgroundColorHover = {
-  light: N30,
-  dark: DN30
+  light: token('color.background.default', N30),
+  dark: token('color.background.default', DN30)
+};
+export var subtleBackgroundColorHover = {
+  light: token('color.background.transparentNeutral.hover', N30),
+  dark: token('color.background.transparentNeutral.hover', DN30)
 };
 export var defaultBorderColor = {
-  light: N40,
-  dark: DN40
+  light: token('color.border.neutral', N40),
+  dark: token('color.border.neutral', DN40)
 };
 export var defaultBorderColorFocus = {
-  light: B100,
-  dark: B75
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
 };
 export var transparent = {
   light: 'transparent',
   dark: 'transparent'
 };
 export var textColor = {
-  light: N900,
-  dark: DN600
+  light: token('color.text.highEmphasis', N900),
+  dark: token('color.text.highEmphasis', DN600)
 };
 export var disabledTextColor = {
-  light: N70,
-  dark: DN90
+  light: token('color.text.disabled', N70),
+  dark: token('color.text.disabled', DN90)
 };
 export var placeholderTextColor = {
-  light: N100,
-  dark: DN90
+  light: token('color.text.lowEmphasis', N100),
+  dark: token('color.text.lowEmphasis', DN90)
 };

package/dist/esm/index.js

@@ -1,2 +1,2 @@
 export { default } from './text-field';
-export { TextFieldColors } from './styles';
+export { textFieldColors as TextFieldColors } from './styles';

package/dist/esm/styles.js

@@ -4,43 +4,43 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+import { R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import * as componentTokens from './component-tokens';
 var fontSize = getFontSize();
 var gridSize = getGridSize();
 var disabledRules = {
   light: {
-    backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.light,
+    backgroundColor: componentTokens.disabledBackgroundColor.light,
     backgroundColorHover: componentTokens.disabledBackgroundColor.light,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.light,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.light,
+    borderColor: componentTokens.disabledBackgroundColor.light,
     textColor: componentTokens.disabledTextColor.light
   },
   dark: {
-    backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.dark,
+    backgroundColor: componentTokens.disabledBackgroundColor.dark,
     backgroundColorHover: componentTokens.disabledBackgroundColor.dark,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.dark,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark,
+    borderColor: componentTokens.disabledBackgroundColor.dark,
     textColor: componentTokens.disabledTextColor.dark
   }
 };
 var invalidRules = {
   light: {
+    // ----
     backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
-    borderColor: componentTokens.invalidBorderColor.light,
+    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
+    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
+    borderColor: token('color.iconBorder.danger', R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.light
   },
   dark: {
+    // ----
     backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
-    borderColor: componentTokens.invalidBorderColor.dark,
+    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
+    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
+    borderColor: token('color.iconBorder.danger', R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
   }
 };
@@ -56,7 +56,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -89,24 +89,13 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
       color: disabledRules[mode].textColor,
       cursor: 'not-allowed'
     },
-    '&[data-disabled]:focus-within': {
-      backgroundColor: disabledRules[mode].backgroundColorFocus,
-      borderColor: disabledRules[mode].borderColorFocus
-    },
-    '&[data-disabled]:hover': {
-      backgroundColor: disabledRules[mode].backgroundColorHover
-    },
     '&[data-invalid]': {
-      backgroundColor: invalidRules[mode].backgroundColor,
       borderColor: invalidRules[mode].borderColor
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
       borderColor: invalidRules[mode].borderColorFocus
     },
-    '&[data-invalid]:hover': {
-      backgroundColor: invalidRules[mode].backgroundColorHover
-    },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
         borderColor: 'Highlight'
@@ -202,8 +191,9 @@ export var inputStyles = function inputStyles(mode) {
       }
     }
   };
-};
-export var TextFieldColors = {
+}; // TODO: Remove when removing legacy theming.
+
+export var textFieldColors = {
   backgroundColor: backgroundColor,
   backgroundColorFocus: backgroundColorFocus,
   backgroundColorHover: backgroundColorHover,

package/dist/esm/text-field.js

@@ -11,16 +11,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.0.5"
+  packageVersion: "5.1.3"
 };
-var TextfieldWithMode = /*#__PURE__*/forwardRef(function (props, ref) {
-  var input = useRef(null);
-
+var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
       appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
       _props$isCompact = props.isCompact,
@@ -36,7 +34,6 @@ var TextfieldWithMode = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$isMonospaced = props.isMonospaced,
       isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
       width = props.width,
-      mode = props.mode,
       elemAfterInput = props.elemAfterInput,
       elemBeforeInput = props.elemBeforeInput,
       testId = props.testId,
@@ -44,7 +41,12 @@ var TextfieldWithMode = /*#__PURE__*/forwardRef(function (props, ref) {
       onBlur = props.onBlur,
       onMouseDown = props.onMouseDown,
       className = props.className,
-      otherProps = _objectWithoutProperties(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "mode", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
+      spreadProps = _objectWithoutProperties(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
+
+  var inputRef = useRef(null);
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
 
   var handleOnFocus = usePlatformLeafEventHandler(_objectSpread({
     fn: function fn(event) {
@@ -59,7 +61,7 @@ var TextfieldWithMode = /*#__PURE__*/forwardRef(function (props, ref) {
     action: 'blurred'
   }, analyticsParams));
   var handleOnMouseDown = useCallback(function (event) {
-    /** Running e.preventDefault() on the INPUT prevents double click behaviour */
+    // Running e.preventDefault() on the INPUT prevents double click behaviour
     // Sadly we needed this cast as the target type is being correctly set
     var target = event.target;
 
@@ -67,77 +69,77 @@ var TextfieldWithMode = /*#__PURE__*/forwardRef(function (props, ref) {
       event.preventDefault();
     }
 
-    if (input && input.current && !isDisabled && document.activeElement !== input.current) {
-      input.current.focus();
+    if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
+      inputRef.current.focus();
     }
 
     onMouseDown && onMouseDown(event);
-  }, [onMouseDown, input, isDisabled]); // we want to keep a copy of the ref as well as pass it along
-
+  }, [onMouseDown, isDisabled]);
   var setInputRef = useCallback(function (inputElement) {
-    input.current = inputElement;
-    var forwardedRef = ref;
+    inputRef.current = inputElement;
 
-    if (!forwardedRef) {
+    if (!ref) {
       return;
     }
 
-    if (_typeof(forwardedRef) === 'object') {
+    if (_typeof(ref) === 'object') {
       // This is a blunder on the part of @types/react
       // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
       // .current should be assignable
-      // @ts-ignore
-      forwardedRef.current = inputElement;
+      // @ts-expect-error
+      ref.current = inputElement;
     }
 
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(inputElement);
+    if (typeof ref === 'function') {
+      ref(inputElement);
     }
   }, [ref]);
-  var inputControlProps = {
-    'data-compact': isCompact ? isCompact : undefined,
-    'data-monospaced': isMonospaced ? isMonospaced : undefined,
-    'aria-invalid': isInvalid ? isInvalid : undefined
-  };
-  var containerControlProps = {
-    'data-disabled': isDisabled ? isDisabled : undefined,
-    'data-invalid': isInvalid ? isInvalid : undefined
-  };
   var containerStyles = useMemo(function () {
     return getContainerStyles(appearance, mode, width);
   }, [appearance, mode, width]);
   var inputStyle = useMemo(function () {
     return getInputStyles(mode);
   }, [mode]);
-  return (// https://product-fabric.atlassian.net/browse/DST-1970
+  return (// We use event bubbling here to listen to any child element mouse down event.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("div", _extends({}, containerControlProps, {
-      onMouseDown: handleOnMouseDown,
+    jsx("div", {
+      "data-disabled": isDisabled ? isDisabled : undefined,
+      "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
       "data-testid": testId && "".concat(testId, "-container"),
+      onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: containerStyles,
       className: className
-    }), elemBeforeInput, jsx("input", _extends({}, otherProps, inputControlProps, {
+    }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
+      "data-compact": isCompact ? isCompact : undefined,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
+      "data-ds--text-field--input": true,
+      "data-testid": testId,
+      "aria-invalid": isInvalid ? isInvalid : undefined,
       disabled: isDisabled,
       readOnly: isReadOnly,
       required: isRequired,
       onBlur: handleOnBlur,
       onFocus: handleOnFocus,
-      ref: setInputRef,
-      "data-ds--text-field--input": true,
-      "data-testid": testId,
+      ref: setInputRef // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: inputStyle
     })), elemAfterInput)
   );
 });
-var Textfield = /*#__PURE__*/forwardRef(function Textfield(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref) {
-    var mode = _ref.mode;
-    return jsx(TextfieldWithMode, _extends({}, props, {
-      mode: mode,
-      ref: ref
-    }));
-  });
-});
 Textfield.displayName = 'Textfield';
-export default /*#__PURE__*/memo(Textfield);
+/**
+ * __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 /*#__PURE__*/memo(Textfield); // The above generic is used to let ERTC know what props to extract.
+// See: https://github.com/atlassian/extract-react-types/issues/201

package/dist/esm/version.json

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