@atlaskit/textarea 4.3.9 → 4.3.10
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 +6 -0
- package/component-tokens/package.json +8 -1
- package/dist/cjs/text-area.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/text-area.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/text-area.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/text-area.d.ts +1 -1
- package/dist/types-ts4.0/component-tokens.d.ts +52 -0
- package/dist/types-ts4.0/index.d.ts +3 -0
- package/dist/types-ts4.0/styles.d.ts +13 -0
- package/dist/types-ts4.0/text-area.d.ts +107 -0
- package/dist/types-ts4.0/theme.d.ts +173 -0
- package/package.json +13 -6
- package/styles/package.json +8 -1
- package/text-area/package.json +8 -1
- package/theme/package.json +8 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,5 +4,12 @@
|
|
|
4
4
|
"module": "../dist/esm/component-tokens.js",
|
|
5
5
|
"module:es2019": "../dist/es2019/component-tokens.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
|
-
"types": "../dist/types/component-tokens.d.ts"
|
|
7
|
+
"types": "../dist/types/component-tokens.d.ts",
|
|
8
|
+
"typesVersions": {
|
|
9
|
+
">=4.0 <4.5": {
|
|
10
|
+
"*": [
|
|
11
|
+
"../dist/types-ts4.0/component-tokens.d.ts"
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
8
15
|
}
|
package/dist/cjs/text-area.js
CHANGED
|
@@ -40,7 +40,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
40
40
|
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) { (0, _defineProperty2.default)(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; }
|
|
41
41
|
|
|
42
42
|
var packageName = "@atlaskit/textarea";
|
|
43
|
-
var packageVersion = "4.3.
|
|
43
|
+
var packageVersion = "4.3.10";
|
|
44
44
|
var analyticsParams = {
|
|
45
45
|
componentName: 'textArea',
|
|
46
46
|
packageName: packageName,
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/text-area.js
CHANGED
|
@@ -8,7 +8,7 @@ import GlobalTheme from '@atlaskit/theme/components';
|
|
|
8
8
|
import { borderWidth, getBaseStyles, themeStyles } from './styles';
|
|
9
9
|
import { Theme } from './theme';
|
|
10
10
|
const packageName = "@atlaskit/textarea";
|
|
11
|
-
const packageVersion = "4.3.
|
|
11
|
+
const packageVersion = "4.3.10";
|
|
12
12
|
const analyticsParams = {
|
|
13
13
|
componentName: 'textArea',
|
|
14
14
|
packageName,
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/text-area.js
CHANGED
|
@@ -16,7 +16,7 @@ import GlobalTheme from '@atlaskit/theme/components';
|
|
|
16
16
|
import { borderWidth, getBaseStyles, themeStyles } from './styles';
|
|
17
17
|
import { Theme } from './theme';
|
|
18
18
|
var packageName = "@atlaskit/textarea";
|
|
19
|
-
var packageVersion = "4.3.
|
|
19
|
+
var packageVersion = "4.3.10";
|
|
20
20
|
var analyticsParams = {
|
|
21
21
|
componentName: 'textArea',
|
|
22
22
|
packageName: packageName,
|
package/dist/esm/version.json
CHANGED
|
@@ -103,5 +103,5 @@ export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HT
|
|
|
103
103
|
* - [Code](https://atlassian.design/components/textarea/code)
|
|
104
104
|
* - [Usage](https://atlassian.design/components/textarea/usage)
|
|
105
105
|
*/
|
|
106
|
-
declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "
|
|
106
|
+
declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
|
|
107
107
|
export default TextArea;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
export declare const disabledBackground: {
|
|
2
|
+
light: "var(--ds-background-disabled)";
|
|
3
|
+
dark: "var(--ds-background-disabled)";
|
|
4
|
+
};
|
|
5
|
+
export declare const disabledBorder: {
|
|
6
|
+
light: "var(--ds-border-disabled)";
|
|
7
|
+
dark: "var(--ds-border-disabled)";
|
|
8
|
+
};
|
|
9
|
+
export declare const invalidBorderColor: {
|
|
10
|
+
light: "var(--ds-border-danger)";
|
|
11
|
+
dark: "var(--ds-border-danger)";
|
|
12
|
+
};
|
|
13
|
+
export declare const defaultBorderColor: {
|
|
14
|
+
light: "var(--ds-border-input)";
|
|
15
|
+
dark: "var(--ds-border-input)";
|
|
16
|
+
};
|
|
17
|
+
export declare const defaultBorderColorFocus: {
|
|
18
|
+
light: "var(--ds-border-focused)";
|
|
19
|
+
dark: "var(--ds-border-focused)";
|
|
20
|
+
};
|
|
21
|
+
export declare const defaultBackgroundColor: {
|
|
22
|
+
light: "var(--ds-background-input)";
|
|
23
|
+
dark: "var(--ds-background-input)";
|
|
24
|
+
};
|
|
25
|
+
export declare const defaultBackgroundColorHover: {
|
|
26
|
+
light: "var(--ds-background-input-hovered)";
|
|
27
|
+
dark: "var(--ds-background-input-hovered)";
|
|
28
|
+
};
|
|
29
|
+
export declare const defaultBackgroundColorFocus: {
|
|
30
|
+
light: "var(--ds-background-input-pressed)";
|
|
31
|
+
dark: "var(--ds-background-input-pressed)";
|
|
32
|
+
};
|
|
33
|
+
export declare const subtleHoverBackgroundColor: {
|
|
34
|
+
light: "var(--ds-background-input-hovered)";
|
|
35
|
+
dark: "var(--ds-background-input-hovered)";
|
|
36
|
+
};
|
|
37
|
+
export declare const placeholderTextColor: {
|
|
38
|
+
light: "var(--ds-text-subtlest)";
|
|
39
|
+
dark: "var(--ds-text-subtlest)";
|
|
40
|
+
};
|
|
41
|
+
export declare const textColor: {
|
|
42
|
+
light: "var(--ds-text)";
|
|
43
|
+
dark: "var(--ds-text)";
|
|
44
|
+
};
|
|
45
|
+
export declare const disabledTextColor: {
|
|
46
|
+
light: "var(--ds-text-disabled)";
|
|
47
|
+
dark: "var(--ds-text-disabled)";
|
|
48
|
+
};
|
|
49
|
+
export declare const transparent: {
|
|
50
|
+
light: string;
|
|
51
|
+
dark: string;
|
|
52
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { CSSObject } from '@emotion/core';
|
|
3
|
+
import { ThemeTokens } from './theme';
|
|
4
|
+
export interface StyleProps {
|
|
5
|
+
minimumRows: number | undefined;
|
|
6
|
+
resize: string | undefined;
|
|
7
|
+
appearance: string | undefined;
|
|
8
|
+
isMonospaced: boolean | undefined;
|
|
9
|
+
maxHeight: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const borderWidth = 2;
|
|
12
|
+
export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => CSSObject;
|
|
13
|
+
export declare const themeStyles: (props: ThemeTokens) => CSSObject;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
4
|
+
export interface OwnProps extends WithAnalyticsEventsProps {
|
|
5
|
+
/**
|
|
6
|
+
* controls the appearance of the field.
|
|
7
|
+
* subtle shows styling on hover.
|
|
8
|
+
* none prevents all field styling.
|
|
9
|
+
*/
|
|
10
|
+
appearance?: 'standard' | 'subtle' | 'none';
|
|
11
|
+
/**
|
|
12
|
+
* Set whether the fields should expand to fill available horizontal space.
|
|
13
|
+
*/
|
|
14
|
+
isCompact?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Sets the field as uneditable, with a changed hover state.
|
|
17
|
+
*/
|
|
18
|
+
isDisabled?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* If true, prevents the value of the input from being edited.
|
|
21
|
+
*/
|
|
22
|
+
isReadOnly?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Set required for form that the field is part of.
|
|
25
|
+
*/
|
|
26
|
+
isRequired?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Sets styling to indicate that the input is invalid.
|
|
29
|
+
*/
|
|
30
|
+
isInvalid?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The minimum number of rows of text to display
|
|
33
|
+
*/
|
|
34
|
+
minimumRows?: number;
|
|
35
|
+
/**
|
|
36
|
+
* The maxheight of the textarea
|
|
37
|
+
*/
|
|
38
|
+
maxHeight?: string;
|
|
39
|
+
/**
|
|
40
|
+
* The value of the text-area.
|
|
41
|
+
*/
|
|
42
|
+
value?: string;
|
|
43
|
+
/**
|
|
44
|
+
* The default value of the textarea
|
|
45
|
+
*/
|
|
46
|
+
defaultValue?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Name of the input form control
|
|
49
|
+
*/
|
|
50
|
+
name?: string;
|
|
51
|
+
/**
|
|
52
|
+
* The placeholder within the textarea
|
|
53
|
+
*/
|
|
54
|
+
placeholder?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Handler to be called when the input is blurred
|
|
57
|
+
*/
|
|
58
|
+
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
59
|
+
/**
|
|
60
|
+
* Handler to be called when the input changes.
|
|
61
|
+
*/
|
|
62
|
+
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
63
|
+
/**
|
|
64
|
+
* Handler to be called when the input is focused
|
|
65
|
+
*/
|
|
66
|
+
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
67
|
+
/**
|
|
68
|
+
* Sets content text value to monospace
|
|
69
|
+
*/
|
|
70
|
+
isMonospaced?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Enables the resizing of the textarea:
|
|
73
|
+
* auto: both directions.
|
|
74
|
+
* horizontal: only along the x axis.
|
|
75
|
+
* vertical: only along the y axis.
|
|
76
|
+
* smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
|
|
77
|
+
* none: explicitly disallow resizing on the textarea.
|
|
78
|
+
*/
|
|
79
|
+
resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
|
|
80
|
+
/**
|
|
81
|
+
* Enables native spell check on the `textarea` element.
|
|
82
|
+
*/
|
|
83
|
+
spellCheck?: boolean;
|
|
84
|
+
/**
|
|
85
|
+
* The theme function TextArea consumes to derive theming constants for use in styling its components
|
|
86
|
+
*/
|
|
87
|
+
theme?: any;
|
|
88
|
+
/**
|
|
89
|
+
* A `testId` prop is provided for specified elements, which is a unique
|
|
90
|
+
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
91
|
+
* serving as a hook for automated tests
|
|
92
|
+
*/
|
|
93
|
+
testId?: string;
|
|
94
|
+
}
|
|
95
|
+
declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
96
|
+
export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
|
|
97
|
+
/**
|
|
98
|
+
* __Text area__
|
|
99
|
+
*
|
|
100
|
+
* A text area lets users enter long form text which spans over multiple lines.
|
|
101
|
+
*
|
|
102
|
+
* - [Examples](https://atlassian.design/components/textarea/examples)
|
|
103
|
+
* - [Code](https://atlassian.design/components/textarea/code)
|
|
104
|
+
* - [Usage](https://atlassian.design/components/textarea/usage)
|
|
105
|
+
*/
|
|
106
|
+
declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
|
|
107
|
+
export default TextArea;
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare type ThemeAppearance = 'standard' | 'subtle' | 'none';
|
|
3
|
+
export declare type ThemeProps = {
|
|
4
|
+
appearance: ThemeAppearance;
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated
|
|
7
|
+
* Mode is deprecated and will be deleted in the future.
|
|
8
|
+
*/
|
|
9
|
+
mode: 'dark' | 'light';
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated
|
|
13
|
+
* Component-level theming is deprecated in the design system.
|
|
14
|
+
* Components should respect the global theme.
|
|
15
|
+
*/
|
|
16
|
+
export declare type ThemeTokens = {
|
|
17
|
+
borderColor: string;
|
|
18
|
+
borderColorFocus: string;
|
|
19
|
+
backgroundColor: string;
|
|
20
|
+
backgroundColorFocus: string;
|
|
21
|
+
backgroundColorHover: string;
|
|
22
|
+
disabledRules: {
|
|
23
|
+
backgroundColor: string;
|
|
24
|
+
backgroundColorFocus: string;
|
|
25
|
+
backgroundColorHover: string;
|
|
26
|
+
borderColor: string;
|
|
27
|
+
borderColorFocus: string;
|
|
28
|
+
textColor: string;
|
|
29
|
+
};
|
|
30
|
+
invalidRules: {
|
|
31
|
+
borderColor: string;
|
|
32
|
+
borderColorFocus: string;
|
|
33
|
+
backgroundColor: string;
|
|
34
|
+
backgroundColorFocus: string;
|
|
35
|
+
backgroundColorHover: string;
|
|
36
|
+
};
|
|
37
|
+
textColor: string;
|
|
38
|
+
placeholderTextColor: string;
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* @deprecated
|
|
42
|
+
* Component-level theming is deprecated in the design system.
|
|
43
|
+
* Components should respect the global theme.
|
|
44
|
+
*/
|
|
45
|
+
export declare const themeTokens: {
|
|
46
|
+
borderColor: {
|
|
47
|
+
standard: {
|
|
48
|
+
light: "var(--ds-border-input)";
|
|
49
|
+
dark: "var(--ds-border-input)";
|
|
50
|
+
};
|
|
51
|
+
subtle: {
|
|
52
|
+
light: string;
|
|
53
|
+
dark: string;
|
|
54
|
+
};
|
|
55
|
+
none: {
|
|
56
|
+
light: string;
|
|
57
|
+
dark: string;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
borderColorFocus: {
|
|
61
|
+
standard: {
|
|
62
|
+
light: "var(--ds-border-focused)";
|
|
63
|
+
dark: "var(--ds-border-focused)";
|
|
64
|
+
};
|
|
65
|
+
subtle: {
|
|
66
|
+
light: "var(--ds-border-focused)";
|
|
67
|
+
dark: "var(--ds-border-focused)";
|
|
68
|
+
};
|
|
69
|
+
none: {
|
|
70
|
+
light: string;
|
|
71
|
+
dark: string;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
backgroundColor: {
|
|
75
|
+
standard: {
|
|
76
|
+
light: "var(--ds-background-input)";
|
|
77
|
+
dark: "var(--ds-background-input)";
|
|
78
|
+
};
|
|
79
|
+
subtle: {
|
|
80
|
+
light: string;
|
|
81
|
+
dark: string;
|
|
82
|
+
};
|
|
83
|
+
none: {
|
|
84
|
+
light: string;
|
|
85
|
+
dark: string;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
backgroundColorFocus: {
|
|
89
|
+
standard: {
|
|
90
|
+
light: "var(--ds-background-input-pressed)";
|
|
91
|
+
dark: "var(--ds-background-input-pressed)";
|
|
92
|
+
};
|
|
93
|
+
subtle: {
|
|
94
|
+
light: "var(--ds-background-input-pressed)";
|
|
95
|
+
dark: "var(--ds-background-input-pressed)";
|
|
96
|
+
};
|
|
97
|
+
none: {
|
|
98
|
+
light: string;
|
|
99
|
+
dark: string;
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
backgroundColorHover: {
|
|
103
|
+
standard: {
|
|
104
|
+
light: "var(--ds-background-input-hovered)";
|
|
105
|
+
dark: "var(--ds-background-input-hovered)";
|
|
106
|
+
};
|
|
107
|
+
subtle: {
|
|
108
|
+
light: "var(--ds-background-input-hovered)";
|
|
109
|
+
dark: "var(--ds-background-input-hovered)";
|
|
110
|
+
};
|
|
111
|
+
none: {
|
|
112
|
+
light: string;
|
|
113
|
+
dark: string;
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
disabledRules: {
|
|
117
|
+
light: {
|
|
118
|
+
backgroundColor: "var(--ds-background-disabled)";
|
|
119
|
+
backgroundColorFocus: "var(--ds-background-disabled)";
|
|
120
|
+
backgroundColorHover: "var(--ds-background-disabled)";
|
|
121
|
+
borderColor: "var(--ds-border-disabled)";
|
|
122
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
123
|
+
textColor: "var(--ds-text-disabled)";
|
|
124
|
+
};
|
|
125
|
+
dark: {
|
|
126
|
+
backgroundColor: "var(--ds-background-disabled)";
|
|
127
|
+
backgroundColorFocus: "var(--ds-background-disabled)";
|
|
128
|
+
backgroundColorHover: "var(--ds-background-disabled)";
|
|
129
|
+
borderColor: "var(--ds-border-disabled)";
|
|
130
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
131
|
+
textColor: "var(--ds-text-disabled)";
|
|
132
|
+
};
|
|
133
|
+
};
|
|
134
|
+
invalidRules: {
|
|
135
|
+
light: {
|
|
136
|
+
borderColor: "var(--ds-border-danger)";
|
|
137
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
138
|
+
backgroundColor: "var(--ds-background-input)";
|
|
139
|
+
backgroundColorFocus: "var(--ds-background-input-pressed)";
|
|
140
|
+
backgroundColorHover: "var(--ds-background-input-hovered)";
|
|
141
|
+
};
|
|
142
|
+
dark: {
|
|
143
|
+
borderColor: "var(--ds-border-danger)";
|
|
144
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
145
|
+
backgroundColor: "var(--ds-background-input)";
|
|
146
|
+
backgroundColorFocus: "var(--ds-background-input-pressed)";
|
|
147
|
+
backgroundColorHover: "var(--ds-background-input-hovered)";
|
|
148
|
+
};
|
|
149
|
+
};
|
|
150
|
+
textColor: {
|
|
151
|
+
light: "var(--ds-text)";
|
|
152
|
+
dark: "var(--ds-text)";
|
|
153
|
+
};
|
|
154
|
+
placeholderTextColor: {
|
|
155
|
+
light: "var(--ds-text-subtlest)";
|
|
156
|
+
dark: "var(--ds-text-subtlest)";
|
|
157
|
+
};
|
|
158
|
+
};
|
|
159
|
+
/**
|
|
160
|
+
* @deprecated
|
|
161
|
+
* Component-level theming is deprecated in the design system.
|
|
162
|
+
* Components should respect the global theme.
|
|
163
|
+
*/
|
|
164
|
+
export declare const Theme: {
|
|
165
|
+
Consumer: import("react").ComponentType<{
|
|
166
|
+
children: (tokens: ThemeTokens) => import("react").ReactNode;
|
|
167
|
+
} & ThemeProps>;
|
|
168
|
+
Provider: import("react").ComponentType<{
|
|
169
|
+
children?: import("react").ReactNode;
|
|
170
|
+
value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
|
|
171
|
+
}>;
|
|
172
|
+
useTheme: (props: ThemeProps) => ThemeTokens;
|
|
173
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/textarea",
|
|
3
|
-
"version": "4.3.
|
|
3
|
+
"version": "4.3.10",
|
|
4
4
|
"description": "A text area lets users enter long form text which spans over multiple lines.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,6 +12,13 @@
|
|
|
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
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
15
22
|
"sideEffects": false,
|
|
16
23
|
"atlaskit:src": "src/index.tsx",
|
|
17
24
|
"homepage": "https://atlassian.design/components/textarea/",
|
|
@@ -32,7 +39,7 @@
|
|
|
32
39
|
},
|
|
33
40
|
"dependencies": {
|
|
34
41
|
"@atlaskit/analytics-next": "^8.0.0",
|
|
35
|
-
"@atlaskit/theme": "^12.
|
|
42
|
+
"@atlaskit/theme": "^12.2.0",
|
|
36
43
|
"@atlaskit/tokens": "^0.10.0",
|
|
37
44
|
"@babel/runtime": "^7.0.0",
|
|
38
45
|
"@emotion/core": "^10.0.9"
|
|
@@ -45,17 +52,17 @@
|
|
|
45
52
|
"@atlaskit/docs": "*",
|
|
46
53
|
"@atlaskit/ds-lib": "^2.1.0",
|
|
47
54
|
"@atlaskit/form": "^8.5.0",
|
|
48
|
-
"@atlaskit/section-message": "^6.
|
|
55
|
+
"@atlaskit/section-message": "^6.2.0",
|
|
49
56
|
"@atlaskit/ssr": "*",
|
|
50
57
|
"@atlaskit/visual-regression": "*",
|
|
51
58
|
"@atlaskit/webdriver-runner": "*",
|
|
52
59
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
53
|
-
"@testing-library/dom": "^
|
|
54
|
-
"@testing-library/react": "^
|
|
60
|
+
"@testing-library/dom": "^8.17.1",
|
|
61
|
+
"@testing-library/react": "^12.1.5",
|
|
55
62
|
"jscodeshift": "^0.13.0",
|
|
56
63
|
"react-dom": "^16.8.0",
|
|
57
64
|
"storybook-addon-performance": "^0.16.0",
|
|
58
|
-
"typescript": "4.
|
|
65
|
+
"typescript": "4.5.5",
|
|
59
66
|
"wait-for-expect": "^1.2.0"
|
|
60
67
|
},
|
|
61
68
|
"keywords": [
|
package/styles/package.json
CHANGED
|
@@ -4,5 +4,12 @@
|
|
|
4
4
|
"module": "../dist/esm/styles.js",
|
|
5
5
|
"module:es2019": "../dist/es2019/styles.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
|
-
"types": "../dist/types/styles.d.ts"
|
|
7
|
+
"types": "../dist/types/styles.d.ts",
|
|
8
|
+
"typesVersions": {
|
|
9
|
+
">=4.0 <4.5": {
|
|
10
|
+
"*": [
|
|
11
|
+
"../dist/types-ts4.0/styles.d.ts"
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
8
15
|
}
|
package/text-area/package.json
CHANGED
|
@@ -4,5 +4,12 @@
|
|
|
4
4
|
"module": "../dist/esm/text-area.js",
|
|
5
5
|
"module:es2019": "../dist/es2019/text-area.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
|
-
"types": "../dist/types/text-area.d.ts"
|
|
7
|
+
"types": "../dist/types/text-area.d.ts",
|
|
8
|
+
"typesVersions": {
|
|
9
|
+
">=4.0 <4.5": {
|
|
10
|
+
"*": [
|
|
11
|
+
"../dist/types-ts4.0/text-area.d.ts"
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
8
15
|
}
|
package/theme/package.json
CHANGED
|
@@ -4,5 +4,12 @@
|
|
|
4
4
|
"module": "../dist/esm/theme.js",
|
|
5
5
|
"module:es2019": "../dist/es2019/theme.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
|
-
"types": "../dist/types/theme.d.ts"
|
|
7
|
+
"types": "../dist/types/theme.d.ts",
|
|
8
|
+
"typesVersions": {
|
|
9
|
+
">=4.0 <4.5": {
|
|
10
|
+
"*": [
|
|
11
|
+
"../dist/types-ts4.0/theme.d.ts"
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
8
15
|
}
|