@atlaskit/textfield 5.1.13 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/textfield
 
+## 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
+
+- [`acf974e717c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/acf974e717c) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.1.13
 
 ### Patch Changes

package/dist/cjs/text-field.js

@@ -19,7 +19,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -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.13"
+  packageVersion: "5.2.1"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -125,7 +125,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [mode]);
   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
-    (0, _core.jsx)("div", {
+    (0, _react2.jsx)("div", {
       "data-disabled": isDisabled ? isDisabled : undefined,
       "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
@@ -135,7 +135,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ,
       css: containerStyles,
       className: className
-    }, elemBeforeInput, (0, _core.jsx)("input", (0, _extends2.default)({}, spreadProps, {
+    }, elemBeforeInput, (0, _react2.jsx)("input", (0, _extends2.default)({}, spreadProps, {
       "data-compact": isCompact ? isCompact : undefined,
       "data-monospaced": isMonospaced ? isMonospaced : undefined,
       "data-ds--text-field--input": true,

package/dist/cjs/version.json

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

package/dist/es2019/text-field.js

@@ -2,14 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.13"
+  packageVersion: "5.2.1"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

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

package/dist/esm/text-field.js

@@ -10,14 +10,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.13"
+  packageVersion: "5.2.1"
 };
 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.13",
+	"version": "5.2.1",
 	"sideEffects": false
 }

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 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)";
+};
+export declare const defaultBorderColorFocus: {
+    light: "var(--ds-border-focused)";
+    dark: "var(--ds-border-focused)";
+};
+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,208 @@
+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;
+    };
+    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-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)";
+        };
+    };
+};

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.1.13",
+  "version": "5.2.1",
   "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": {
@@ -27,10 +34,10 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -39,20 +46,21 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.0.1",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@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": [