@atlaskit/textfield 5.3.1 → 5.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 5.3.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 5.3.1
4
10
 
5
11
  ### Patch Changes
@@ -180,52 +180,51 @@ export function getSafeImportName({
180
180
  return isUsed ? fallbackName : desiredName;
181
181
  }
182
182
 
183
- export const createRemoveFuncFor = (
184
- component: string,
185
- prop: string,
186
- comment?: string,
187
- ) => (j: core.JSCodeshift, source: Collection<Node>) => {
188
- const defaultSpecifier = getDefaultSpecifier(j, source, component);
189
-
190
- if (!defaultSpecifier) {
191
- return;
192
- }
183
+ export const createRemoveFuncFor =
184
+ (component: string, prop: string, comment?: string) =>
185
+ (j: core.JSCodeshift, source: Collection<Node>) => {
186
+ const defaultSpecifier = getDefaultSpecifier(j, source, component);
193
187
 
194
- source.findJSXElements(defaultSpecifier).forEach((element) => {
195
- getJSXAttributesByName(j, element, prop).forEach((attribute) => {
196
- j(attribute).remove();
197
- if (comment) {
198
- addCommentToStartOfFile({ j, base: source, message: comment });
199
- }
200
- });
201
- });
202
- };
188
+ if (!defaultSpecifier) {
189
+ return;
190
+ }
203
191
 
204
- export const createRemoveImportsFor = ({
205
- importsToRemove,
206
- packagePath,
207
- comment,
208
- }: {
209
- importsToRemove: string[];
210
- packagePath: string;
211
- comment: string;
212
- }) => (j: core.JSCodeshift, source: Collection<Node>) => {
213
- const isUsingName: boolean =
214
- source
215
- .find(j.ImportDeclaration)
216
- .filter((path) => path.node.source.value === packagePath).length > 0;
217
- if (!isUsingName) {
218
- return;
219
- }
192
+ source.findJSXElements(defaultSpecifier).forEach((element) => {
193
+ getJSXAttributesByName(j, element, prop).forEach((attribute) => {
194
+ j(attribute).remove();
195
+ if (comment) {
196
+ addCommentToStartOfFile({ j, base: source, message: comment });
197
+ }
198
+ });
199
+ });
200
+ };
201
+
202
+ export const createRemoveImportsFor =
203
+ ({
204
+ importsToRemove,
205
+ packagePath,
206
+ comment,
207
+ }: {
208
+ importsToRemove: string[];
209
+ packagePath: string;
210
+ comment: string;
211
+ }) =>
212
+ (j: core.JSCodeshift, source: Collection<Node>) => {
213
+ const isUsingName: boolean =
214
+ source
215
+ .find(j.ImportDeclaration)
216
+ .filter((path) => path.node.source.value === packagePath).length > 0;
217
+ if (!isUsingName) {
218
+ return;
219
+ }
220
220
 
221
- const existingAliases: Nullable<string>[] =
222
- source
223
- .find(j.ImportDeclaration)
224
- .filter((path) => path.node.source.value === packagePath)
225
- .find(j.ImportSpecifier)
226
- .nodes()
227
- .map(
228
- (specifier): Nullable<string> => {
221
+ const existingAliases: Nullable<string>[] =
222
+ source
223
+ .find(j.ImportDeclaration)
224
+ .filter((path) => path.node.source.value === packagePath)
225
+ .find(j.ImportSpecifier)
226
+ .nodes()
227
+ .map((specifier): Nullable<string> => {
229
228
  if (!importsToRemove.includes(specifier.imported.name)) {
230
229
  return null;
231
230
  }
@@ -238,86 +237,86 @@ export const createRemoveImportsFor = ({
238
237
  }
239
238
 
240
239
  return null;
241
- },
242
- )
243
- .filter(Boolean) || null;
240
+ })
241
+ .filter(Boolean) || null;
244
242
 
245
- // Add comments
246
- source
247
- .find(j.ImportDeclaration)
248
- .filter((path) => path.node.source.value === packagePath)
249
- .find(j.ImportSpecifier)
250
- .filter((importSpecifier) => {
251
- const identifier = j(importSpecifier).find(j.Identifier).get();
252
- if (
253
- importsToRemove.includes(identifier.value.name) ||
254
- existingAliases.includes(identifier.value.name)
255
- ) {
256
- addCommentToStartOfFile({ j, base: source, message: comment });
257
- return true;
258
- }
259
- return false;
260
- })
261
- .remove();
262
-
263
- // Remove entire import if it is empty
264
- const isEmptyNamedImport =
243
+ // Add comments
265
244
  source
266
245
  .find(j.ImportDeclaration)
267
246
  .filter((path) => path.node.source.value === packagePath)
268
247
  .find(j.ImportSpecifier)
269
- .find(j.Identifier).length === 0;
248
+ .filter((importSpecifier) => {
249
+ const identifier = j(importSpecifier).find(j.Identifier).get();
250
+ if (
251
+ importsToRemove.includes(identifier.value.name) ||
252
+ existingAliases.includes(identifier.value.name)
253
+ ) {
254
+ addCommentToStartOfFile({ j, base: source, message: comment });
255
+ return true;
256
+ }
257
+ return false;
258
+ })
259
+ .remove();
270
260
 
271
- if (isEmptyNamedImport) {
272
- const isEmptyDefaultImport =
261
+ // Remove entire import if it is empty
262
+ const isEmptyNamedImport =
273
263
  source
274
264
  .find(j.ImportDeclaration)
275
265
  .filter((path) => path.node.source.value === packagePath)
276
- .find(j.ImportDefaultSpecifier)
266
+ .find(j.ImportSpecifier)
277
267
  .find(j.Identifier).length === 0;
278
268
 
279
- isEmptyDefaultImport
280
- ? source
281
- .find(j.ImportDeclaration)
282
- .filter((path) => path.node.source.value === packagePath)
283
- .remove()
284
- : source
269
+ if (isEmptyNamedImport) {
270
+ const isEmptyDefaultImport =
271
+ source
285
272
  .find(j.ImportDeclaration)
286
273
  .filter((path) => path.node.source.value === packagePath)
287
- .find(j.ImportSpecifier)
288
- .remove();
289
- }
290
- };
291
-
292
- export const createRenameJSXFunc = (
293
- packagePath: string,
294
- from: string,
295
- to: string,
296
- fallback: string | undefined = undefined,
297
- ) => (j: core.JSCodeshift, source: any) => {
298
- const namedSpecifier = getNamedSpecifier(j, source, packagePath, from);
299
-
300
- const toName = fallback
301
- ? getSafeImportName({
302
- j,
303
- base: source,
304
- currentDefaultSpecifierName: namedSpecifier,
305
- desiredName: to,
306
- fallbackName: fallback,
307
- })
308
- : to;
309
-
310
- const existingAlias: Nullable<string> =
311
- source
312
- .find(j.ImportDeclaration)
313
- .filter(
314
- (path: ASTPath<ImportDeclaration>) =>
315
- path.node.source.value === packagePath,
316
- )
317
- .find(j.ImportSpecifier)
318
- .nodes()
319
- .map(
320
- (specifier: ImportSpecifier): Nullable<string> => {
274
+ .find(j.ImportDefaultSpecifier)
275
+ .find(j.Identifier).length === 0;
276
+
277
+ isEmptyDefaultImport
278
+ ? source
279
+ .find(j.ImportDeclaration)
280
+ .filter((path) => path.node.source.value === packagePath)
281
+ .remove()
282
+ : source
283
+ .find(j.ImportDeclaration)
284
+ .filter((path) => path.node.source.value === packagePath)
285
+ .find(j.ImportSpecifier)
286
+ .remove();
287
+ }
288
+ };
289
+
290
+ export const createRenameJSXFunc =
291
+ (
292
+ packagePath: string,
293
+ from: string,
294
+ to: string,
295
+ fallback: string | undefined = undefined,
296
+ ) =>
297
+ (j: core.JSCodeshift, source: any) => {
298
+ const namedSpecifier = getNamedSpecifier(j, source, packagePath, from);
299
+
300
+ const toName = fallback
301
+ ? getSafeImportName({
302
+ j,
303
+ base: source,
304
+ currentDefaultSpecifierName: namedSpecifier,
305
+ desiredName: to,
306
+ fallbackName: fallback,
307
+ })
308
+ : to;
309
+
310
+ const existingAlias: Nullable<string> =
311
+ source
312
+ .find(j.ImportDeclaration)
313
+ .filter(
314
+ (path: ASTPath<ImportDeclaration>) =>
315
+ path.node.source.value === packagePath,
316
+ )
317
+ .find(j.ImportSpecifier)
318
+ .nodes()
319
+ .map((specifier: ImportSpecifier): Nullable<string> => {
321
320
  if (from !== specifier.imported.name) {
322
321
  return null;
323
322
  }
@@ -327,49 +326,50 @@ export const createRenameJSXFunc = (
327
326
  }
328
327
 
329
328
  return null;
330
- },
331
- )
332
- .filter(Boolean)[0] || null;
329
+ })
330
+ .filter(Boolean)[0] || null;
333
331
 
334
- source
335
- .find(j.ImportDeclaration)
336
- .filter(
337
- (path: ASTPath<ImportDeclaration>) =>
338
- path.node.source.value === packagePath,
339
- )
340
- .find(j.ImportSpecifier)
341
- .filter((importSpecifier: ImportSpecifier) => {
342
- const identifier = j(importSpecifier).find(j.Identifier).get();
343
- if (
344
- from === identifier.value.name ||
345
- existingAlias === identifier.value.name
346
- ) {
347
- return true;
348
- }
349
- return false;
350
- })
351
- .replaceWith(
352
- [
353
- j.importSpecifier(
354
- j.identifier(toName),
355
- existingAlias ? j.identifier(existingAlias) : null,
356
- ),
357
- ],
358
- j.literal(packagePath),
359
- );
360
- };
361
-
362
- export const createTransformer = (
363
- component: string,
364
- migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[],
365
- ) => (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
366
- const source: Collection<Node> = j(fileInfo.source);
367
-
368
- if (!hasImportDeclaration(j, source, component)) {
369
- return fileInfo.source;
370
- }
332
+ source
333
+ .find(j.ImportDeclaration)
334
+ .filter(
335
+ (path: ASTPath<ImportDeclaration>) =>
336
+ path.node.source.value === packagePath,
337
+ )
338
+ .find(j.ImportSpecifier)
339
+ .filter((importSpecifier: ImportSpecifier) => {
340
+ const identifier = j(importSpecifier).find(j.Identifier).get();
341
+ if (
342
+ from === identifier.value.name ||
343
+ existingAlias === identifier.value.name
344
+ ) {
345
+ return true;
346
+ }
347
+ return false;
348
+ })
349
+ .replaceWith(
350
+ [
351
+ j.importSpecifier(
352
+ j.identifier(toName),
353
+ existingAlias ? j.identifier(existingAlias) : null,
354
+ ),
355
+ ],
356
+ j.literal(packagePath),
357
+ );
358
+ };
359
+
360
+ export const createTransformer =
361
+ (
362
+ component: string,
363
+ migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[],
364
+ ) =>
365
+ (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
366
+ const source: Collection<Node> = j(fileInfo.source);
367
+
368
+ if (!hasImportDeclaration(j, source, component)) {
369
+ return fileInfo.source;
370
+ }
371
371
 
372
- migrates.forEach((tf) => tf(j, source));
372
+ migrates.forEach((tf) => tf(j, source));
373
373
 
374
- return source.toSource(options.printOptions || { quote: 'single' });
375
- };
374
+ return source.toSource(options.printOptions || { quote: 'single' });
375
+ };
@@ -40,7 +40,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
40
40
  var analyticsParams = {
41
41
  componentName: 'textField',
42
42
  packageName: "@atlaskit/textfield",
43
- packageVersion: "5.3.1"
43
+ packageVersion: "5.3.2"
44
44
  };
45
45
  var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
46
46
  var _props$appearance = props.appearance,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.3.1",
3
+ "version": "5.3.2",
4
4
  "sideEffects": false
5
5
  }
@@ -9,7 +9,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
9
9
  const analyticsParams = {
10
10
  componentName: 'textField',
11
11
  packageName: "@atlaskit/textfield",
12
- packageVersion: "5.3.1"
12
+ packageVersion: "5.3.2"
13
13
  };
14
14
  const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
15
15
  const {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.3.1",
3
+ "version": "5.3.2",
4
4
  "sideEffects": false
5
5
  }
@@ -17,7 +17,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
17
17
  var analyticsParams = {
18
18
  componentName: 'textField',
19
19
  packageName: "@atlaskit/textfield",
20
- packageVersion: "5.3.1"
20
+ packageVersion: "5.3.2"
21
21
  };
22
22
  var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
23
23
  var _props$appearance = props.appearance,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.3.1",
3
+ "version": "5.3.2",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.3.1",
3
+ "version": "5.3.2",
4
4
  "description": "A text field is an input that allows a user to write or edit text.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "typesVersions": {
16
- ">=4.0 <4.5": {
17
- "*": [
18
- "dist/types-ts4.0/*",
19
- "dist/types-ts4.0/index.d.ts"
20
- ]
21
- }
22
- },
23
15
  "sideEffects": false,
24
16
  "atlaskit:src": "src/index.tsx",
25
17
  "atlassian": {
@@ -37,7 +29,7 @@
37
29
  "dependencies": {
38
30
  "@atlaskit/analytics-next": "^8.2.0",
39
31
  "@atlaskit/theme": "^12.2.0",
40
- "@atlaskit/tokens": "^0.10.0",
32
+ "@atlaskit/tokens": "^0.11.0",
41
33
  "@babel/runtime": "^7.0.0",
42
34
  "@emotion/react": "^11.7.1"
43
35
  },
@@ -46,10 +38,10 @@
46
38
  },
47
39
  "devDependencies": {
48
40
  "@atlaskit/avatar": "^21.1.0",
49
- "@atlaskit/button": "^16.3.0",
41
+ "@atlaskit/button": "^16.4.0",
50
42
  "@atlaskit/docs": "*",
51
43
  "@atlaskit/ds-lib": "^2.0.1",
52
- "@atlaskit/form": "^8.6.0",
44
+ "@atlaskit/form": "^8.7.0",
53
45
  "@atlaskit/icon": "^21.11.0",
54
46
  "@atlaskit/section-message": "^6.3.0",
55
47
  "@atlaskit/ssr": "*",
package/report.api.md CHANGED
@@ -1,6 +1,10 @@
1
- ## API Report File for "@atlaskit/textfield".
1
+ ## API Report File for "@atlaskit/textfield"
2
2
 
3
- > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
3
+ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
+
5
+ <!--
6
+ Generated API Report version: 2.0
7
+ -->
4
8
 
5
9
  [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
6
10
 
@@ -9,14 +13,17 @@ import { AllHTMLAttributes } from 'react';
9
13
  import { FormEventHandler } from 'react';
10
14
  import { default as React_2 } from 'react';
11
15
 
12
- export declare type Appearance = 'subtle' | 'standard' | 'none';
16
+ // @public (undocumented)
17
+ export type Appearance = 'subtle' | 'standard' | 'none';
13
18
 
14
- declare const _default: React_2.NamedExoticComponent<
19
+ // @public (undocumented)
20
+ const _default: React_2.NamedExoticComponent<
15
21
  TextFieldProps & React_2.RefAttributes<unknown>
16
22
  >;
17
23
  export default _default;
18
24
 
19
- export declare const TextFieldColors: {
25
+ // @public (undocumented)
26
+ export const TextFieldColors: {
20
27
  backgroundColor: {
21
28
  standard: {
22
29
  light: 'var(--ds-background-input)';
@@ -127,76 +134,25 @@ export declare const TextFieldColors: {
127
134
  };
128
135
  };
129
136
 
130
- export declare interface TextFieldProps
131
- extends AllHTMLAttributes<HTMLInputElement> {
132
- /**
133
- * Affects the visual style of the text field.
134
- */
137
+ // @public (undocumented)
138
+ export interface TextFieldProps extends AllHTMLAttributes<HTMLInputElement> {
135
139
  appearance?: 'standard' | 'none' | 'subtle';
136
- /**
137
- * Applies compact styling, making the field smaller.
138
- */
140
+ className?: string;
141
+ elemAfterInput?: React_2.ReactNode;
142
+ elemBeforeInput?: React_2.ReactNode;
139
143
  isCompact?: boolean;
140
- /**
141
- * Sets the field as to appear disabled,
142
- * users will not be able to interact with the text field.
143
- */
144
144
  isDisabled?: boolean;
145
- /**
146
- * Changes the text field to have a border indicating that its value is invalid.
147
- */
148
145
  isInvalid?: boolean;
149
- /**
150
- * Sets content text value to appear monospaced.
151
- */
152
146
  isMonospaced?: boolean;
153
- /**
154
- * If true, prevents the value of the input from being edited.
155
- */
156
147
  isReadOnly?: boolean;
157
- /**
158
- * Set required for form that the field is part of.
159
- */
160
148
  isRequired?: boolean;
161
- /**
162
- * Element after input in text field.
163
- */
164
- elemAfterInput?: React_2.ReactNode;
165
- /**
166
- * Element before input in text field.
167
- */
168
- elemBeforeInput?: React_2.ReactNode;
169
- /**
170
- * Sets maximum width of input.
171
- */
172
- width?: string | number;
173
- /**
174
- * Handler called when the mouse down event is triggered on the input element.
175
- */
176
- onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
177
- /**
178
- * A `testId` prop is provided for specified elements, which is a unique
179
- * string that appears as a data attribute `data-testid` in the rendered code,
180
- * serving as a hook for automated tests.
181
- */
182
- testId?: string;
183
- /**
184
- * Name of the input element.
185
- */
186
149
  name?: string;
187
- /**
188
- * Class name to apply to the input element.
189
- */
190
- className?: string;
191
- /**
192
- * Placeholder text to display in the text field whenever it is empty.
193
- */
194
- placeholder?: string;
195
- /**
196
- * Handler called when the inputs value changes.
197
- */
198
150
  onChange?: FormEventHandler<HTMLInputElement>;
151
+ onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
152
+ placeholder?: string;
153
+ testId?: string;
154
+ width?: string | number;
199
155
  }
200
156
 
201
- export {};
157
+ // (No @packageDocumentation comment for this package)
202
158
  ```
@@ -1,44 +0,0 @@
1
- export declare const disabledBackgroundColor: {
2
- light: "var(--ds-background-disabled)";
3
- dark: "var(--ds-background-disabled)";
4
- };
5
- export declare const defaultBackgroundColor: {
6
- light: "var(--ds-background-input)";
7
- dark: "var(--ds-background-input)";
8
- };
9
- export declare const defaultBackgroundColorFocus: {
10
- light: "var(--ds-background-input-pressed)";
11
- dark: "var(--ds-background-input-pressed)";
12
- };
13
- export declare const defaultBackgroundColorHover: {
14
- light: "var(--ds-background-input-hovered)";
15
- dark: "var(--ds-background-input-hovered)";
16
- };
17
- export declare const defaultBorderColor: {
18
- light: "var(--ds-border-input)";
19
- dark: "var(--ds-border-input)";
20
- };
21
- export declare const defaultBorderColorFocus: {
22
- light: "var(--ds-border-focused)";
23
- dark: "var(--ds-border-focused)";
24
- };
25
- export declare const subtleBorderColorHover: {
26
- light: "var(--ds-border-input)";
27
- dark: "var(--ds-border-input)";
28
- };
29
- export declare const transparent: {
30
- light: string;
31
- dark: string;
32
- };
33
- export declare const textColor: {
34
- light: "var(--ds-text)";
35
- dark: "var(--ds-text)";
36
- };
37
- export declare const disabledTextColor: {
38
- light: "var(--ds-text-disabled)";
39
- dark: "var(--ds-text-disabled)";
40
- };
41
- export declare const placeholderTextColor: {
42
- light: "var(--ds-text-subtlest)";
43
- dark: "var(--ds-text-subtlest)";
44
- };
@@ -1,3 +0,0 @@
1
- export { default } from './text-field';
2
- export { textFieldColors as TextFieldColors } from './styles';
3
- export type { TextfieldProps as TextFieldProps, Appearance } from './types';
@@ -1,223 +0,0 @@
1
- import { ThemeModes } from '@atlaskit/theme/types';
2
- import { Appearance } from './types';
3
- export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => {
4
- readonly borderRadius: 3;
5
- readonly borderWidth: 2;
6
- readonly borderStyle: "none" | "solid";
7
- readonly boxSizing: "border-box";
8
- readonly display: "flex";
9
- readonly flex: "1 1 100%";
10
- readonly fontSize: number;
11
- readonly justifyContent: "space-between";
12
- readonly maxWidth: string | number;
13
- readonly overflow: "hidden";
14
- readonly transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out";
15
- readonly wordWrap: "break-word";
16
- readonly verticalAlign: "top";
17
- readonly pointerEvents: "auto";
18
- readonly backgroundColor: string;
19
- readonly borderColor: string;
20
- readonly color: "var(--ds-text)";
21
- readonly cursor: string;
22
- readonly '&:hover:not([data-disabled])': {
23
- backgroundColor: string;
24
- borderColor: string;
25
- };
26
- readonly '&:focus-within:not([data-disabled])': {
27
- backgroundColor: string;
28
- borderColor: string;
29
- };
30
- readonly '&[data-disabled]': {
31
- backgroundColor?: "var(--ds-background-disabled)" | undefined;
32
- borderColor?: "var(--ds-background-disabled)" | undefined;
33
- color: "var(--ds-text-disabled)";
34
- cursor: string;
35
- };
36
- readonly '&[data-invalid], &[data-invalid]:hover': {
37
- borderColor: "var(--ds-border-danger)";
38
- };
39
- readonly '&[data-invalid]:focus-within': {
40
- backgroundColor: "var(--ds-background-input-pressed)";
41
- borderColor: "var(--ds-border-focused)";
42
- };
43
- readonly '@media screen and (-ms-high-contrast: active)': {
44
- '&[data-invalid]:focus-within': {
45
- borderColor: string;
46
- };
47
- '&:focus-within': {
48
- borderColor: string;
49
- };
50
- '&[data-disabled]': {
51
- borderColor: string;
52
- };
53
- };
54
- readonly alignItems: "center";
55
- };
56
- export declare const inputStyles: (mode: ThemeModes) => {
57
- readonly backgroundColor: "transparent";
58
- readonly border: 0;
59
- readonly boxSizing: "border-box";
60
- readonly color: "inherit";
61
- readonly cursor: "inherit";
62
- readonly fontSize: number;
63
- readonly minWidth: "0";
64
- readonly outline: "none";
65
- readonly width: "100%";
66
- readonly lineHeight: number;
67
- readonly fontFamily: string;
68
- readonly '&[data-monospaced]': {
69
- readonly fontFamily: string;
70
- };
71
- readonly '&[data-compact]': {
72
- readonly padding: `${number}px ${number}px`;
73
- readonly height: `${string}em`;
74
- };
75
- readonly '&:not([data-compact])': {
76
- readonly padding: `${number}px ${number}px`;
77
- readonly height: `${string}em`;
78
- };
79
- readonly '&[disabled]': {
80
- readonly WebkitTextFillColor: "var(--ds-text-disabled)";
81
- };
82
- readonly '&::-ms-clear': {
83
- readonly display: "none";
84
- };
85
- readonly '&:invalid': {
86
- readonly boxShadow: "none";
87
- };
88
- readonly '&::placeholder': {
89
- readonly color: "var(--ds-text-subtlest)";
90
- readonly '&:disabled': {
91
- readonly color: "var(--ds-text-disabled)";
92
- };
93
- };
94
- readonly '@media screen and (-ms-high-contrast: active)': {
95
- readonly '&[disabled]': {
96
- readonly color: "GrayText";
97
- };
98
- };
99
- };
100
- export declare const textFieldColors: {
101
- backgroundColor: {
102
- standard: {
103
- light: "var(--ds-background-input)";
104
- dark: "var(--ds-background-input)";
105
- };
106
- subtle: {
107
- light: string;
108
- dark: string;
109
- };
110
- none: {
111
- light: string;
112
- dark: string;
113
- };
114
- };
115
- backgroundColorFocus: {
116
- standard: {
117
- light: "var(--ds-background-input-pressed)";
118
- dark: "var(--ds-background-input-pressed)";
119
- };
120
- subtle: {
121
- light: "var(--ds-background-input-pressed)";
122
- dark: "var(--ds-background-input-pressed)";
123
- };
124
- none: {
125
- light: string;
126
- dark: string;
127
- };
128
- };
129
- backgroundColorHover: {
130
- standard: {
131
- light: "var(--ds-background-input-hovered)";
132
- dark: "var(--ds-background-input-hovered)";
133
- };
134
- subtle: {
135
- light: "var(--ds-background-input-hovered)";
136
- dark: "var(--ds-background-input-hovered)";
137
- };
138
- none: {
139
- light: string;
140
- dark: string;
141
- };
142
- };
143
- borderColor: {
144
- standard: {
145
- light: "var(--ds-border-input)";
146
- dark: "var(--ds-border-input)";
147
- };
148
- subtle: {
149
- light: string;
150
- dark: string;
151
- };
152
- none: {
153
- light: string;
154
- dark: string;
155
- };
156
- };
157
- borderColorFocus: {
158
- standard: {
159
- light: "var(--ds-border-focused)";
160
- dark: "var(--ds-border-focused)";
161
- };
162
- subtle: {
163
- light: "var(--ds-border-focused)";
164
- dark: "var(--ds-border-focused)";
165
- };
166
- none: {
167
- light: string;
168
- dark: string;
169
- };
170
- };
171
- borderColorHover: {
172
- standard: {
173
- light: "var(--ds-border-input)";
174
- dark: "var(--ds-border-input)";
175
- };
176
- subtle: {
177
- light: "var(--ds-border-input)";
178
- dark: "var(--ds-border-input)";
179
- };
180
- none: {
181
- light: string;
182
- dark: string;
183
- };
184
- };
185
- placeholderTextColor: {
186
- light: "var(--ds-text-subtlest)";
187
- dark: "var(--ds-text-subtlest)";
188
- };
189
- textColor: {
190
- light: "var(--ds-text)";
191
- dark: "var(--ds-text)";
192
- };
193
- invalidRules: {
194
- light: {
195
- backgroundColor: "var(--ds-background-input)";
196
- backgroundColorHover: "var(--ds-background-input-hovered)";
197
- backgroundColorFocus: "var(--ds-background-input-pressed)";
198
- borderColor: "var(--ds-border-danger)";
199
- borderColorFocus: "var(--ds-border-focused)";
200
- };
201
- dark: {
202
- backgroundColor: "var(--ds-background-input)";
203
- backgroundColorHover: "var(--ds-background-input-hovered)";
204
- backgroundColorFocus: "var(--ds-background-input-pressed)";
205
- borderColor: "var(--ds-border-danger)";
206
- borderColorFocus: "var(--ds-border-focused)";
207
- };
208
- };
209
- disabledRules: {
210
- light: {
211
- backgroundColor: "var(--ds-background-disabled)";
212
- backgroundColorHover: "var(--ds-background-disabled)";
213
- borderColor: "var(--ds-background-disabled)";
214
- textColor: "var(--ds-text-disabled)";
215
- };
216
- dark: {
217
- backgroundColor: "var(--ds-background-disabled)";
218
- backgroundColorHover: "var(--ds-background-disabled)";
219
- borderColor: "var(--ds-background-disabled)";
220
- textColor: "var(--ds-text-disabled)";
221
- };
222
- };
223
- };
@@ -1,14 +0,0 @@
1
- /** @jsx jsx */
2
- import React from 'react';
3
- import { TextfieldProps } from './types';
4
- declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
5
- /**
6
- * __Textfield__
7
- *
8
- * A text field is an input that allows a user to write or edit text.
9
- *
10
- * - [Examples](https://atlassian.design/components/textfield/examples)
11
- * - [Code](https://atlassian.design/components/textfield/code)
12
- * - [Usage](https://atlassian.design/components/textfield/usage)
13
- */
14
- export default _default;
@@ -1,71 +0,0 @@
1
- import React, { AllHTMLAttributes, FormEventHandler } from 'react';
2
- export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
3
- /**
4
- * Affects the visual style of the text field.
5
- */
6
- appearance?: Appearance;
7
- /**
8
- * Applies compact styling, making the field smaller.
9
- */
10
- isCompact?: boolean;
11
- /**
12
- * Sets the field as to appear disabled,
13
- * users will not be able to interact with the text field.
14
- */
15
- isDisabled?: boolean;
16
- /**
17
- * Changes the text field to have a border indicating that its value is invalid.
18
- */
19
- isInvalid?: boolean;
20
- /**
21
- * Sets content text value to appear monospaced.
22
- */
23
- isMonospaced?: boolean;
24
- /**
25
- * If true, prevents the value of the input from being edited.
26
- */
27
- isReadOnly?: boolean;
28
- /**
29
- * Set required for form that the field is part of.
30
- */
31
- isRequired?: boolean;
32
- /**
33
- * Element after input in text field.
34
- */
35
- elemAfterInput?: React.ReactNode;
36
- /**
37
- * Element before input in text field.
38
- */
39
- elemBeforeInput?: React.ReactNode;
40
- /**
41
- * Sets maximum width of input.
42
- */
43
- width?: string | number;
44
- /**
45
- * Handler called when the mouse down event is triggered on the input element.
46
- */
47
- onMouseDown?: React.MouseEventHandler<HTMLElement>;
48
- /**
49
- * A `testId` prop is provided for specified elements, which is a unique
50
- * string that appears as a data attribute `data-testid` in the rendered code,
51
- * serving as a hook for automated tests.
52
- */
53
- testId?: string;
54
- /**
55
- * Name of the input element.
56
- */
57
- name?: string;
58
- /**
59
- * Class name to apply to the input element.
60
- */
61
- className?: string;
62
- /**
63
- * Placeholder text to display in the text field whenever it is empty.
64
- */
65
- placeholder?: string;
66
- /**
67
- * Handler called when the inputs value changes.
68
- */
69
- onChange?: FormEventHandler<HTMLInputElement>;
70
- }
71
- export declare type Appearance = 'subtle' | 'standard' | 'none';