@atlaskit/textfield 5.4.0 → 5.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textfield
 
+## 5.4.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
+## 5.4.1
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
 ## 5.4.0
 
 ### Minor Changes

package/dist/cjs/text-field.js

@@ -24,7 +24,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.4.0"
+  packageVersion: "5.4.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.4.0",
+	"version": "5.4.2",
 	"sideEffects": false
 }

package/dist/es2019/text-field.js

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

package/dist/es2019/version.json

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

package/dist/esm/text-field.js

@@ -14,7 +14,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.4.0"
+  packageVersion: "5.4.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.4.0",
+	"version": "5.4.2",
 	"sideEffects": false
 }

package/dist/types/styles.d.ts

@@ -1,6 +1,6 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => {
+export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number) => {
     readonly borderRadius: 3;
     readonly borderWidth: 2;
     readonly borderStyle: "none" | "solid";

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
 import { TextfieldProps } from './types';
-declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
 /**
  * __Textfield__
  *
@@ -11,4 +10,5 @@ declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAtt
  * - [Code](https://atlassian.design/components/textfield/code)
  * - [Usage](https://atlassian.design/components/textfield/usage)
  */
+declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
 export default _default;

package/dist/types/types.d.ts

@@ -68,4 +68,4 @@ export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
      */
     onChange?: FormEventHandler<HTMLInputElement>;
 }
-export declare type Appearance = 'subtle' | 'standard' | 'none';
+export type Appearance = 'subtle' | 'standard' | 'none';

package/dist/types-ts4.5/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.5/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.5/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) => {
+    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:not([data-disabled])': {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    readonly '&:focus-within:not([data-disabled])': {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    readonly '&[data-disabled]': {
+        backgroundColor?: "var(--ds-background-disabled)" | undefined;
+        borderColor?: "var(--ds-background-disabled)" | undefined;
+        color: "var(--ds-text-disabled)";
+        cursor: string;
+    };
+    readonly '&[data-invalid], &[data-invalid]:hover': {
+        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.5/text-field.d.ts

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import React from 'react';
+import { TextfieldProps } from './types';
+/**
+ * __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)
+ */
+declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
+export default _default;

package/dist/types-ts4.5/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?: Appearance;
+    /**
+     * 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 type Appearance = 'subtle' | 'standard' | 'none';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.4.0",
+  "version": "5.4.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,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -28,7 +36,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -53,7 +61,7 @@
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.5.5",
+    "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [