@atlaskit/textfield 8.3.1 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/textfield
 
+## 9.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.3.1
 
 ### Patch Changes

package/dist/cjs/text-field.compiled.css

@@ -7,9 +7,9 @@
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqoglyw{border-style:none}
 ._1dqonqa1{border-style:solid}
+._1h6d187o{border-color:var(--ds-background-disabled,#0515240f)}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
-._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
 ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}
 ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
 ._1p9x1v1w._1p9x1v1w:has(input:focus){border-color:var(--ds-border-focused,#4688ec)}
@@ -45,9 +45,9 @@
 ._80om1kdv{cursor:text}
 ._80om1kw7{cursor:inherit}
 ._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bozgidpf{padding-inline-start:0}
 ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
 ._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}

package/dist/cjs/text-field.js

@@ -28,10 +28,10 @@ var inputMediaDisabled = null;
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "8.3.0"
+  packageVersion: "8.3.2"
 };
 var disabledStyle = {
-  standard: "_1h6dby5v _bfhkby5v _syaz1gmx _80om13gf",
+  standard: "_1h6d187o _bfhk187o _syaz1gmx _80om13gf",
   subtle: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf",
   none: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf"
 };

package/dist/es2019/text-field.compiled.css

@@ -7,9 +7,9 @@
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqoglyw{border-style:none}
 ._1dqonqa1{border-style:solid}
+._1h6d187o{border-color:var(--ds-background-disabled,#0515240f)}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
-._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
 ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}
 ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
 ._1p9x1v1w._1p9x1v1w:has(input:focus){border-color:var(--ds-border-focused,#4688ec)}
@@ -45,9 +45,9 @@
 ._80om1kdv{cursor:text}
 ._80om1kw7{cursor:inherit}
 ._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bozgidpf{padding-inline-start:0}
 ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
 ._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}

package/dist/es2019/text-field.js

@@ -13,10 +13,10 @@ const inputMediaDisabled = null;
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "8.3.0"
+  packageVersion: "8.3.2"
 };
 const disabledStyle = {
-  standard: "_1h6dby5v _bfhkby5v _syaz1gmx _80om13gf",
+  standard: "_1h6d187o _bfhk187o _syaz1gmx _80om13gf",
   subtle: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf",
   none: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf"
 };

package/dist/esm/text-field.compiled.css

@@ -7,9 +7,9 @@
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqoglyw{border-style:none}
 ._1dqonqa1{border-style:solid}
+._1h6d187o{border-color:var(--ds-background-disabled,#0515240f)}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
-._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
 ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}
 ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
 ._1p9x1v1w._1p9x1v1w:has(input:focus){border-color:var(--ds-border-focused,#4688ec)}
@@ -45,9 +45,9 @@
 ._80om1kdv{cursor:text}
 ._80om1kw7{cursor:inherit}
 ._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bozgidpf{padding-inline-start:0}
 ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
 ._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}

package/dist/esm/text-field.js

@@ -19,10 +19,10 @@ var inputMediaDisabled = null;
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "8.3.0"
+  packageVersion: "8.3.2"
 };
 var disabledStyle = {
-  standard: "_1h6dby5v _bfhkby5v _syaz1gmx _80om13gf",
+  standard: "_1h6d187o _bfhk187o _syaz1gmx _80om13gf",
   subtle: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf",
   none: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "8.3.1",
+	"version": "9.0.0",
 	"description": "A text field is an input that allows a user to write or edit text.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,9 +31,9 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^12.0.0",
+		"@atlaskit/analytics-next": "^12.0.0",
+		"@atlaskit/platform-feature-flags": "^2.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -44,20 +44,21 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.11.0",
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/docs": "^11.7.0",
-		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/icon": "^34.0.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/section-message": "^8.12.0",
+		"@atlaskit/avatar": "^26.0.0",
+		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
+		"@atlaskit/form": "^16.0.0",
+		"@atlaskit/icon": "^36.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/section-message": "^9.0.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"keywords": [
@@ -85,14 +86,6 @@
 			"deprecation": "no-deprecated-imports"
 		}
 	},
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"platform-feature-flags": {
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"

package/text-field/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/text-field.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/text-field.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/text-field.d.ts"
 }

package/textfield.docs.tsx

@@ -1,50 +1,52 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'TextField',
-		description: 'A single-line text input component.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'TextField',
-			package: '@atlaskit/textfield',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for single-line text in forms, modals, search, cards',
-			'Label is required (above input); helper text optional',
-			'Do not use placeholder for critical info—use label or helper text (search exception: search icon + accessible label)',
-			'Consider character limits and validation',
-		],
-		contentGuidelines: [
-			'Write clear, short labels',
-			'Use helper text for examples/formatting; keep helper visible after input',
-			'Provide appropriate error messages',
-			'Consider content length and formatting',
-		],
-		accessibilityGuidelines: [
-			'Use visible label or proper association; do not use placeholder for critical info—use label or helper (search is exception with icon + accessible label)',
-			'Do not nest interactive elements (causes focus issues)',
-			'Custom validation: validate onBlur; use error container with aria-live="polite" and aria-relevant/aria-atomic for dynamic announcements',
-			'Provide clear labels for all textfields',
-			'Provide keyboard navigation support',
-			'Indicate required fields clearly',
-			'Use appropriate error states and messaging',
-		],
-		examples: [
-			{
-				name: 'Textfield',
-				description: 'Textfield example',
-				source: path.resolve(__dirname, './examples/ai/textfield.tsx'),
+			description: 'A single-line text input component.',
+			status: 'general-availability',
+			import: {
+				name: 'TextField',
+				package: '@atlaskit/textfield',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['textfield', 'input', 'form', 'text', 'field', 'single-line'],
-		categories: ['form'],
-	},
-];
+			usageGuidelines: [
+				'Use for single-line text in forms, modals, search, cards',
+				'Label is required (above input); helper text optional',
+				'Do not use placeholder for critical info—use label or helper text (search exception: search icon + accessible label)',
+				'Consider character limits and validation',
+			],
+			contentGuidelines: [
+				'Write clear, short labels',
+				'Use helper text for examples/formatting; keep helper visible after input',
+				'Provide appropriate error messages',
+				'Consider content length and formatting',
+			],
+			accessibilityGuidelines: [
+				'Use visible label or proper association; do not use placeholder for critical info—use label or helper (search is exception with icon + accessible label)',
+				'Do not nest interactive elements (causes focus issues)',
+				'Custom validation: validate onBlur; use error container with aria-live="polite" and aria-relevant/aria-atomic for dynamic announcements',
+				'Provide clear labels for all textfields',
+				'Provide keyboard navigation support',
+				'Indicate required fields clearly',
+				'Use appropriate error states and messaging',
+			],
+			examples: [
+				{
+					name: 'Textfield',
+					description: 'Textfield example',
+					source: path.resolve(__dirname, './examples/ai/textfield.tsx'),
+				},
+			],
+			keywords: ['textfield', 'input', 'form', 'text', 'field', 'single-line'],
+			categories: ['form'],
+		},
+	],
+};
 
 export default documentation;

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

package/dist/types-ts4.5/entry-points/text-field.d.ts

@@ -1 +0,0 @@
-export { default } from '../text-field';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { Appearance, TextfieldProps } from '../types';

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './text-field';
-export type { TextfieldProps as TextFieldProps, Appearance } from './types';

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

@@ -1,17 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { type 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 Textfield: React.ForwardRefExoticComponent<React.PropsWithoutRef<TextfieldProps> & React.RefAttributes<unknown>>;
-export default Textfield;

package/dist/types-ts4.5/types.d.ts

@@ -1,74 +0,0 @@
-import { type AllHTMLAttributes, type FormEventHandler, type default as React } from 'react';
-export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
-    /**
-     * Controls the appearance of the field.
-     * Subtle shows styling on hover.
-     * None prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions.
-     */
-    appearance?: Appearance;
-    /**
-     * Applies compact styling, making the field smaller.
-     */
-    isCompact?: boolean;
-    /**
-     * Sets the field as to appear disabled,
-     * people will not be able to interact with the text field and it won't appear in the focus order.
-     * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience.
-     */
-    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/offerings.json

@@ -1,37 +0,0 @@
-[
-	{
-		"name": "TextField",
-		"package": "@atlaskit/textfield",
-		"import": {
-			"name": "TextField",
-			"package": "@atlaskit/textfield",
-			"type": "default"
-		},
-		"keywords": ["textfield", "input", "form", "text", "field", "single-line"],
-		"categories": ["form"],
-		"shortDescription": "A single-line text input component.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Provide clear labels for all textfields",
-			"Use appropriate placeholder text that doesn't replace labels",
-			"Provide keyboard navigation support",
-			"Indicate required fields clearly",
-			"Use appropriate error states and messaging"
-		],
-		"usageGuidelines": [
-			"Use for single-line text input needs",
-			"Provide appropriate sizing for content type",
-			"Use clear, descriptive labels",
-			"Consider character limits and validation",
-			"Use appropriate placeholder text"
-		],
-		"contentGuidelines": [
-			"Write clear, descriptive labels",
-			"Use helpful placeholder text",
-			"Provide appropriate error messages",
-			"Consider content length and formatting"
-		],
-		"generativeInstructions": "./docs/ai/textfield-instructions.md",
-		"examples": ["./examples/ai/textfield.tsx"]
-	}
-]