@atlaskit/textarea 4.6.1 → 4.6.3
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 +12 -0
- package/dist/cjs/styles.js +1 -1
- package/dist/cjs/text-area.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/styles.js +4 -2
- package/dist/es2019/text-area.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/styles.js +4 -2
- package/dist/esm/text-area.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types-ts4.5/component-tokens.d.ts +52 -0
- package/dist/types-ts4.5/index.d.ts +4 -0
- package/dist/types-ts4.5/styles.d.ts +12 -0
- package/dist/types-ts4.5/text-area.d.ts +14 -0
- package/dist/types-ts4.5/theme.d.ts +174 -0
- package/dist/types-ts4.5/types.d.ts +96 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/textarea
|
|
2
2
|
|
|
3
|
+
## 4.6.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`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.
|
|
8
|
+
|
|
9
|
+
## 4.6.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
|
|
14
|
+
|
|
3
15
|
## 4.6.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/cjs/styles.js
CHANGED
|
@@ -148,7 +148,7 @@ var staticStyles = (0, _react.css)({
|
|
|
148
148
|
fontSize: fontSize,
|
|
149
149
|
outline: 'none',
|
|
150
150
|
overflow: 'auto',
|
|
151
|
-
transition: "background-color ".concat(transitionDuration, " ease-in-out
|
|
151
|
+
transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
|
|
152
152
|
wordWrap: 'break-word',
|
|
153
153
|
'&:disabled': _objectSpread({
|
|
154
154
|
cursor: 'not-allowed'
|
package/dist/cjs/text-area.js
CHANGED
|
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
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; }
|
|
24
24
|
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; }
|
|
25
25
|
var packageName = "@atlaskit/textarea";
|
|
26
|
-
var packageVersion = "4.6.
|
|
26
|
+
var packageVersion = "4.6.3";
|
|
27
27
|
var analyticsParams = {
|
|
28
28
|
componentName: 'textArea',
|
|
29
29
|
packageName: packageName,
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/styles.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
|
-
import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
|
|
3
|
+
import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
|
|
4
|
+
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
5
|
+
gridSize } from '@atlaskit/theme/constants';
|
|
4
6
|
const grid = gridSize();
|
|
5
7
|
const borderRadius = 3;
|
|
6
8
|
const lineHeightBase = grid * 2.5;
|
|
@@ -130,7 +132,7 @@ const staticStyles = css({
|
|
|
130
132
|
fontSize: fontSize,
|
|
131
133
|
outline: 'none',
|
|
132
134
|
overflow: 'auto',
|
|
133
|
-
transition: `background-color ${transitionDuration} ease-in-out,
|
|
135
|
+
transition: `background-color ${transitionDuration} ease-in-out,
|
|
134
136
|
border-color ${transitionDuration} ease-in-out`,
|
|
135
137
|
wordWrap: 'break-word',
|
|
136
138
|
'&:disabled': {
|
package/dist/es2019/text-area.js
CHANGED
|
@@ -7,7 +7,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
|
7
7
|
import { borderWidth, getBaseStyles, themeStyles } from './styles';
|
|
8
8
|
import { Theme } from './theme';
|
|
9
9
|
const packageName = "@atlaskit/textarea";
|
|
10
|
-
const packageVersion = "4.6.
|
|
10
|
+
const packageVersion = "4.6.3";
|
|
11
11
|
const analyticsParams = {
|
|
12
12
|
componentName: 'textArea',
|
|
13
13
|
packageName,
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/styles.js
CHANGED
|
@@ -3,7 +3,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
3
3
|
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; }
|
|
4
4
|
/** @jsx jsx */
|
|
5
5
|
import { css } from '@emotion/react';
|
|
6
|
-
import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
|
|
6
|
+
import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
|
|
7
|
+
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
8
|
+
gridSize } from '@atlaskit/theme/constants';
|
|
7
9
|
var grid = gridSize();
|
|
8
10
|
var borderRadius = 3;
|
|
9
11
|
var lineHeightBase = grid * 2.5;
|
|
@@ -141,7 +143,7 @@ var staticStyles = css({
|
|
|
141
143
|
fontSize: fontSize,
|
|
142
144
|
outline: 'none',
|
|
143
145
|
overflow: 'auto',
|
|
144
|
-
transition: "background-color ".concat(transitionDuration, " ease-in-out
|
|
146
|
+
transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
|
|
145
147
|
wordWrap: 'break-word',
|
|
146
148
|
'&:disabled': _objectSpread({
|
|
147
149
|
cursor: 'not-allowed'
|
package/dist/esm/text-area.js
CHANGED
|
@@ -13,7 +13,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
|
13
13
|
import { borderWidth, getBaseStyles, themeStyles } from './styles';
|
|
14
14
|
import { Theme } from './theme';
|
|
15
15
|
var packageName = "@atlaskit/textarea";
|
|
16
|
-
var packageVersion = "4.6.
|
|
16
|
+
var packageVersion = "4.6.3";
|
|
17
17
|
var analyticsParams = {
|
|
18
18
|
componentName: 'textArea',
|
|
19
19
|
packageName: packageName,
|
package/dist/esm/version.json
CHANGED
|
@@ -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 subtleBorderColorHover: {
|
|
34
|
+
light: "var(--ds-border-input)";
|
|
35
|
+
dark: "var(--ds-border-input)";
|
|
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,12 @@
|
|
|
1
|
+
import { ThemeTokens } from './theme';
|
|
2
|
+
import { TextAreaProps } from './types';
|
|
3
|
+
export interface StyleProps {
|
|
4
|
+
minimumRows: number | undefined;
|
|
5
|
+
resize: string | undefined;
|
|
6
|
+
appearance: string | undefined;
|
|
7
|
+
isMonospaced: boolean | undefined;
|
|
8
|
+
maxHeight: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const borderWidth = 2;
|
|
11
|
+
export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => import("@emotion/react").SerializedStyles;
|
|
12
|
+
export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => import("@emotion/react").SerializedStyles;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { TextAreaProps } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* __Text area__
|
|
6
|
+
*
|
|
7
|
+
* A text area lets users enter long form text which spans over multiple lines.
|
|
8
|
+
*
|
|
9
|
+
* - [Examples](https://atlassian.design/components/textarea/examples)
|
|
10
|
+
* - [Code](https://atlassian.design/components/textarea/code)
|
|
11
|
+
* - [Usage](https://atlassian.design/components/textarea/usage)
|
|
12
|
+
*/
|
|
13
|
+
declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "minimumRows" | "maxHeight" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "isMonospaced" | "resize" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
|
|
14
|
+
export default TextArea;
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type ThemeAppearance = 'standard' | 'subtle' | 'none';
|
|
3
|
+
export 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 type ThemeTokens = {
|
|
17
|
+
borderColor: string;
|
|
18
|
+
borderColorFocus: string;
|
|
19
|
+
borderColorHover: string;
|
|
20
|
+
backgroundColor: string;
|
|
21
|
+
backgroundColorFocus: string;
|
|
22
|
+
backgroundColorHover: string;
|
|
23
|
+
disabledRules: {
|
|
24
|
+
backgroundColor: string;
|
|
25
|
+
backgroundColorFocus: string;
|
|
26
|
+
backgroundColorHover: string;
|
|
27
|
+
borderColor: string;
|
|
28
|
+
borderColorFocus: string;
|
|
29
|
+
textColor: string;
|
|
30
|
+
};
|
|
31
|
+
invalidRules: {
|
|
32
|
+
borderColor: string;
|
|
33
|
+
borderColorFocus: string;
|
|
34
|
+
backgroundColor: string;
|
|
35
|
+
backgroundColorFocus: string;
|
|
36
|
+
backgroundColorHover: string;
|
|
37
|
+
};
|
|
38
|
+
textColor: string;
|
|
39
|
+
placeholderTextColor: string;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* @deprecated
|
|
43
|
+
* Component-level theming is deprecated in the design system.
|
|
44
|
+
* Components should respect the global theme.
|
|
45
|
+
*/
|
|
46
|
+
export declare const themeTokens: {
|
|
47
|
+
borderColor: {
|
|
48
|
+
standard: {
|
|
49
|
+
light: "var(--ds-border-input)";
|
|
50
|
+
dark: "var(--ds-border-input)";
|
|
51
|
+
};
|
|
52
|
+
subtle: {
|
|
53
|
+
light: string;
|
|
54
|
+
dark: string;
|
|
55
|
+
};
|
|
56
|
+
none: {
|
|
57
|
+
light: string;
|
|
58
|
+
dark: string;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
borderColorFocus: {
|
|
62
|
+
standard: {
|
|
63
|
+
light: "var(--ds-border-focused)";
|
|
64
|
+
dark: "var(--ds-border-focused)";
|
|
65
|
+
};
|
|
66
|
+
subtle: {
|
|
67
|
+
light: "var(--ds-border-focused)";
|
|
68
|
+
dark: "var(--ds-border-focused)";
|
|
69
|
+
};
|
|
70
|
+
none: {
|
|
71
|
+
light: string;
|
|
72
|
+
dark: string;
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
backgroundColor: {
|
|
76
|
+
standard: {
|
|
77
|
+
light: "var(--ds-background-input)";
|
|
78
|
+
dark: "var(--ds-background-input)";
|
|
79
|
+
};
|
|
80
|
+
subtle: {
|
|
81
|
+
light: string;
|
|
82
|
+
dark: string;
|
|
83
|
+
};
|
|
84
|
+
none: {
|
|
85
|
+
light: string;
|
|
86
|
+
dark: string;
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
backgroundColorFocus: {
|
|
90
|
+
standard: {
|
|
91
|
+
light: "var(--ds-background-input-pressed)";
|
|
92
|
+
dark: "var(--ds-background-input-pressed)";
|
|
93
|
+
};
|
|
94
|
+
subtle: {
|
|
95
|
+
light: "var(--ds-background-input-pressed)";
|
|
96
|
+
dark: "var(--ds-background-input-pressed)";
|
|
97
|
+
};
|
|
98
|
+
none: {
|
|
99
|
+
light: string;
|
|
100
|
+
dark: string;
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
backgroundColorHover: {
|
|
104
|
+
standard: {
|
|
105
|
+
light: "var(--ds-background-input-hovered)";
|
|
106
|
+
dark: "var(--ds-background-input-hovered)";
|
|
107
|
+
};
|
|
108
|
+
subtle: {
|
|
109
|
+
light: "var(--ds-background-input-hovered)";
|
|
110
|
+
dark: "var(--ds-background-input-hovered)";
|
|
111
|
+
};
|
|
112
|
+
none: {
|
|
113
|
+
light: string;
|
|
114
|
+
dark: string;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
disabledRules: {
|
|
118
|
+
light: {
|
|
119
|
+
backgroundColor: "var(--ds-background-disabled)";
|
|
120
|
+
backgroundColorFocus: "var(--ds-background-disabled)";
|
|
121
|
+
backgroundColorHover: "var(--ds-background-disabled)";
|
|
122
|
+
borderColor: "var(--ds-border-disabled)";
|
|
123
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
124
|
+
textColor: "var(--ds-text-disabled)";
|
|
125
|
+
};
|
|
126
|
+
dark: {
|
|
127
|
+
backgroundColor: "var(--ds-background-disabled)";
|
|
128
|
+
backgroundColorFocus: "var(--ds-background-disabled)";
|
|
129
|
+
backgroundColorHover: "var(--ds-background-disabled)";
|
|
130
|
+
borderColor: "var(--ds-border-disabled)";
|
|
131
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
132
|
+
textColor: "var(--ds-text-disabled)";
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
invalidRules: {
|
|
136
|
+
light: {
|
|
137
|
+
borderColor: "var(--ds-border-danger)";
|
|
138
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
139
|
+
backgroundColor: "var(--ds-background-input)";
|
|
140
|
+
backgroundColorFocus: "var(--ds-background-input-pressed)";
|
|
141
|
+
backgroundColorHover: "var(--ds-background-input-hovered)";
|
|
142
|
+
};
|
|
143
|
+
dark: {
|
|
144
|
+
borderColor: "var(--ds-border-danger)";
|
|
145
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
146
|
+
backgroundColor: "var(--ds-background-input)";
|
|
147
|
+
backgroundColorFocus: "var(--ds-background-input-pressed)";
|
|
148
|
+
backgroundColorHover: "var(--ds-background-input-hovered)";
|
|
149
|
+
};
|
|
150
|
+
};
|
|
151
|
+
textColor: {
|
|
152
|
+
light: "var(--ds-text)";
|
|
153
|
+
dark: "var(--ds-text)";
|
|
154
|
+
};
|
|
155
|
+
placeholderTextColor: {
|
|
156
|
+
light: "var(--ds-text-subtlest)";
|
|
157
|
+
dark: "var(--ds-text-subtlest)";
|
|
158
|
+
};
|
|
159
|
+
};
|
|
160
|
+
/**
|
|
161
|
+
* @deprecated
|
|
162
|
+
* Component-level theming is deprecated in the design system.
|
|
163
|
+
* Components should respect the global theme.
|
|
164
|
+
*/
|
|
165
|
+
export declare const Theme: {
|
|
166
|
+
Consumer: import("react").ComponentType<{
|
|
167
|
+
children: (tokens: ThemeTokens) => import("react").ReactNode;
|
|
168
|
+
} & ThemeProps>;
|
|
169
|
+
Provider: import("react").ComponentType<{
|
|
170
|
+
children?: import("react").ReactNode;
|
|
171
|
+
value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
|
|
172
|
+
}>;
|
|
173
|
+
useTheme: (props: ThemeProps) => ThemeTokens;
|
|
174
|
+
};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
+
export interface OwnProps extends WithAnalyticsEventsProps {
|
|
4
|
+
/**
|
|
5
|
+
* controls the appearance of the field.
|
|
6
|
+
* subtle shows styling on hover.
|
|
7
|
+
* none prevents all field styling.
|
|
8
|
+
*/
|
|
9
|
+
appearance?: 'standard' | 'subtle' | 'none';
|
|
10
|
+
/**
|
|
11
|
+
* Set whether the fields should expand to fill available horizontal space.
|
|
12
|
+
*/
|
|
13
|
+
isCompact?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Sets the field as uneditable, with a changed hover state.
|
|
16
|
+
*/
|
|
17
|
+
isDisabled?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* If true, prevents the value of the input from being edited.
|
|
20
|
+
*/
|
|
21
|
+
isReadOnly?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Set required for form that the field is part of.
|
|
24
|
+
*/
|
|
25
|
+
isRequired?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Sets styling to indicate that the input is invalid.
|
|
28
|
+
*/
|
|
29
|
+
isInvalid?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* The minimum number of rows of text to display
|
|
32
|
+
*/
|
|
33
|
+
minimumRows?: number;
|
|
34
|
+
/**
|
|
35
|
+
* The maxheight of the textarea
|
|
36
|
+
*/
|
|
37
|
+
maxHeight?: string;
|
|
38
|
+
/**
|
|
39
|
+
* The value of the text-area.
|
|
40
|
+
*/
|
|
41
|
+
value?: string;
|
|
42
|
+
/**
|
|
43
|
+
* The default value of the textarea
|
|
44
|
+
*/
|
|
45
|
+
defaultValue?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Name of the input form control
|
|
48
|
+
*/
|
|
49
|
+
name?: string;
|
|
50
|
+
/**
|
|
51
|
+
* The placeholder within the textarea
|
|
52
|
+
*/
|
|
53
|
+
placeholder?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Handler to be called when the input is blurred
|
|
56
|
+
*/
|
|
57
|
+
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
58
|
+
/**
|
|
59
|
+
* Handler to be called when the input changes.
|
|
60
|
+
*/
|
|
61
|
+
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
62
|
+
/**
|
|
63
|
+
* Handler to be called when the input is focused
|
|
64
|
+
*/
|
|
65
|
+
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
66
|
+
/**
|
|
67
|
+
* Sets content text value to monospace
|
|
68
|
+
*/
|
|
69
|
+
isMonospaced?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Enables the resizing of the textarea:
|
|
72
|
+
* auto: both directions.
|
|
73
|
+
* horizontal: only along the x axis.
|
|
74
|
+
* vertical: only along the y axis.
|
|
75
|
+
* smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
|
|
76
|
+
* none: explicitly disallow resizing on the textarea.
|
|
77
|
+
*/
|
|
78
|
+
resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
|
|
79
|
+
/**
|
|
80
|
+
* Enables native spell check on the `textarea` element.
|
|
81
|
+
*/
|
|
82
|
+
spellCheck?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* The theme function TextArea consumes to derive theming constants for use in styling its components
|
|
85
|
+
*/
|
|
86
|
+
theme?: any;
|
|
87
|
+
/**
|
|
88
|
+
* A `testId` prop is provided for specified elements, which is a unique
|
|
89
|
+
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
90
|
+
* serving as a hook for automated tests
|
|
91
|
+
*/
|
|
92
|
+
testId?: string;
|
|
93
|
+
}
|
|
94
|
+
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
95
|
+
export type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
|
|
96
|
+
export {};
|
package/package.json
CHANGED