@atlaskit/textfield 5.4.1 → 5.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textfield
 
+## 5.4.3
+
+### Patch Changes
+
+- [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
+## 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

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

package/dist/es2019/styles.js

@@ -1,5 +1,7 @@
 import { R400 } from '@atlaskit/theme/colors';
-import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { codeFontFamily, fontFamily, fontSize as getFontSize,
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+gridSize as getGridSize } from '@atlaskit/theme/constants';
 import * as componentTokens from './component-tokens';
 const fontSize = getFontSize();
 const gridSize = getGridSize();

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

package/dist/es2019/version.json

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

package/dist/esm/styles.js

@@ -2,7 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 { codeFontFamily, fontFamily, fontSize as getFontSize,
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+gridSize as getGridSize } from '@atlaskit/theme/constants';
 import * as componentTokens from './component-tokens';
 var fontSize = getFontSize();
 var gridSize = getGridSize();

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

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.1",
+  "version": "5.4.3",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"