@atlaskit/textfield 5.1.12 → 5.1.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textfield
 
+## 5.1.13
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
 ## 5.1.12
 
 ### Patch Changes

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.1.12"
+  packageVersion: "5.1.13"
 };
 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.1.12",
+	"version": "5.1.13",
 	"sideEffects": false
 }

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.1.12"
+  packageVersion: "5.1.13"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

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

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.1.12"
+  packageVersion: "5.1.13"
 };
 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.1.12",
+	"version": "5.1.13",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.1.12",
+  "version": "5.1.13",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,7 +18,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Text field"
+      "name": "Text field",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -51,7 +52,7 @@
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [
@@ -64,6 +65,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "styling": [
         "static",

package/report.api.md

@@ -0,0 +1,200 @@
+## API Report File for "@atlaskit/textfield"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { AllHTMLAttributes } from 'react';
+import { FormEventHandler } from 'react';
+import { default as React_2 } from 'react';
+
+export declare type Appearance = 'subtle' | 'standard' | 'none';
+
+declare const _default: React_2.NamedExoticComponent<
+  TextFieldProps & React_2.RefAttributes<unknown>
+>;
+export default _default;
+
+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-neutral-subtle-hovered)';
+      dark: 'var(--ds-background-neutral-subtle-hovered)';
+    };
+    none: {
+      light: string;
+      dark: string;
+    };
+  };
+  borderColor: {
+    standard: {
+      light: 'var(--ds-border)';
+      dark: 'var(--ds-border)';
+    };
+    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;
+    };
+  };
+  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)';
+    };
+  };
+};
+
+export declare 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_2.ReactNode;
+  /**
+   * Element before input in text field.
+   */
+  elemBeforeInput?: React_2.ReactNode;
+  /**
+   * Sets maximum width of input.
+   */
+  width?: string | number;
+  /**
+   * Handler called when the mouse down event is triggered on the input element.
+   */
+  onMouseDown?: React_2.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 {};
+```