@dhis2-ui/text-area 8.2.0 → 8.2.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.
@@ -28,8 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
28
28
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
29
29
 
30
30
  class TextArea extends _react.Component {
31
- constructor(...args) {
32
- super(...args);
31
+ constructor() {
32
+ super(...arguments);
33
33
 
34
34
  _defineProperty(this, "textareaRef", /*#__PURE__*/_react.default.createRef());
35
35
 
@@ -163,7 +163,7 @@ class TextArea extends _react.Component {
163
163
  } = this.state;
164
164
  return /*#__PURE__*/_react.default.createElement("div", {
165
165
  "data-test": dataTest,
166
- className: `jsx-${_textAreaStyles.styles.__hash}` + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)('textarea', className) || "")
166
+ className: "jsx-".concat(_textAreaStyles.styles.__hash) + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)('textarea', className) || "")
167
167
  }, /*#__PURE__*/_react.default.createElement("textarea", {
168
168
  id: name,
169
169
  name: name,
@@ -177,7 +177,7 @@ class TextArea extends _react.Component {
177
177
  onBlur: this.handleBlur,
178
178
  onChange: this.handleChange,
179
179
  rows: rows,
180
- className: `jsx-${_textAreaStyles.styles.__hash}` + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)({
180
+ className: "jsx-".concat(_textAreaStyles.styles.__hash) + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)({
181
181
  dense,
182
182
  disabled,
183
183
  error,
@@ -195,7 +195,7 @@ class TextArea extends _react.Component {
195
195
  }, _textAreaStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
196
196
  id: "3036048772",
197
197
  dynamic: [width, height, resize]
198
- }, [`textarea.__jsx-style-dynamic-selector{width:${width};height:${height};resize:${resize};}`]));
198
+ }, ["textarea.__jsx-style-dynamic-selector{width:".concat(width, ";height:").concat(height, ";resize:").concat(resize, ";}")]));
199
199
  }
200
200
 
201
201
  }
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Autogrow = exports.Resize = exports.Rows = exports.TextareaTextOverflow = exports.Dense = exports.ReadOnly = exports.Disabled = exports.StatusLoading = exports.StatusError = exports.StatusWarning = exports.StatusValid = exports.Focus = exports.WithValue = exports.PlaceholderNoValue = exports.Default = exports.default = void 0;
6
+ exports.default = exports.WithValue = exports.TextareaTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.Rows = exports.Resize = exports.ReadOnly = exports.PlaceholderNoValue = exports.Focus = exports.Disabled = exports.Dense = exports.Default = exports.Autogrow = void 0;
7
7
 
8
8
  var _uiConstants = require("@dhis2/ui-constants");
9
9
 
@@ -15,19 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
15
15
 
16
16
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
17
 
18
- const description = `
19
- A textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.
20
-
21
- Options for textarea inputs are:
22
-
23
- - Rows: the height of the input, defined by the number of rows of text
24
- - Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.
25
- - Autoheight: if enabled, the texarea will grow in height to adapt to the content.
26
-
27
- \`\`\`js
28
- import { TextArea } from '@dhis2/ui'
29
- \`\`\`
30
- `;
18
+ const description = "\nA textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.\n\nOptions for textarea inputs are:\n\n- Rows: the height of the input, defined by the number of rows of text\n- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.\n- Autoheight: if enabled, the texarea will grow in height to adapt to the content.\n\n```js\nimport { TextArea } from '@dhis2/ui'\n```\n";
31
19
 
32
20
  window.onChange = (payload, event) => {
33
21
  console.log('onChange payload', payload);
@@ -44,14 +32,20 @@ window.onBlur = (payload, event) => {
44
32
  console.log('onBlur event', event);
45
33
  };
46
34
 
47
- const onChange = (...args) => window.onChange(...args);
35
+ const onChange = function () {
36
+ return window.onChange(...arguments);
37
+ };
48
38
 
49
- const onFocus = (...args) => window.onFocus(...args);
39
+ const onFocus = function () {
40
+ return window.onFocus(...arguments);
41
+ };
50
42
 
51
- const onBlur = (...args) => window.onBlur(...args);
43
+ const onBlur = function () {
44
+ return window.onBlur(...arguments);
45
+ };
52
46
 
53
47
  var _default = {
54
- title: 'Forms/Text Area/Text Area',
48
+ title: 'Text Area',
55
49
  component: _index.TextArea,
56
50
  parameters: {
57
51
  docs: {
@@ -7,6 +7,6 @@ exports.styles = void 0;
7
7
 
8
8
  var _uiConstants = require("@dhis2/ui-constants");
9
9
 
10
- const styles = [`.textarea.jsx-1940988187{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${_uiConstants.spacers.dp8};}`, `textarea.jsx-1940988187{box-sizing:border-box;padding:8px 12px;color:${_uiConstants.colors.grey900};background-color:white;border:1px solid ${_uiConstants.colors.grey500};border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}`, "textarea.dense.jsx-1940988187{padding:4px 12px;}", `textarea.jsx-1940988187:focus{outline:none;box-shadow:inset 0 0 0 2px ${_uiConstants.theme.focus};border-color:${_uiConstants.theme.focus};}`, `textarea.valid.jsx-1940988187{border-color:${_uiConstants.theme.valid};}`, `textarea.warning.jsx-1940988187{border-color:${_uiConstants.theme.warning};}`, `textarea.error.jsx-1940988187{border-color:${_uiConstants.theme.error};}`, `textarea.read-only.jsx-1940988187{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};cursor:text;}`, `textarea.disabled.jsx-1940988187{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};color:${_uiConstants.theme.disabled};cursor:not-allowed;}`];
10
+ const styles = [".textarea.jsx-1940988187{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_uiConstants.spacers.dp8, ";}"), "textarea.jsx-1940988187{box-sizing:border-box;padding:8px 12px;color:".concat(_uiConstants.colors.grey900, ";background-color:white;border:1px solid ").concat(_uiConstants.colors.grey500, ";border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}"), "textarea.dense.jsx-1940988187{padding:4px 12px;}", "textarea.jsx-1940988187:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(_uiConstants.theme.focus, ";border-color:").concat(_uiConstants.theme.focus, ";}"), "textarea.valid.jsx-1940988187{border-color:".concat(_uiConstants.theme.valid, ";}"), "textarea.warning.jsx-1940988187{border-color:".concat(_uiConstants.theme.warning, ";}"), "textarea.error.jsx-1940988187{border-color:".concat(_uiConstants.theme.error, ";}"), "textarea.read-only.jsx-1940988187{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";cursor:text;}"), "textarea.disabled.jsx-1940988187{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";color:").concat(_uiConstants.theme.disabled, ";cursor:not-allowed;}")];
11
11
  exports.styles = styles;
12
12
  styles.__hash = "1940988187";
@@ -19,72 +19,74 @@ var _index = require("../index.js");
19
19
 
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
 
22
- const TextAreaField = ({
23
- className,
24
- onChange,
25
- onFocus,
26
- onBlur,
27
- initialFocus,
28
- dense,
29
- required,
30
- label,
31
- disabled,
32
- placeholder,
33
- name,
34
- valid,
35
- error,
36
- warning,
37
- loading,
38
- value,
39
- tabIndex,
40
- helpText,
41
- validationText,
42
- autoGrow,
43
- readOnly,
44
- resize,
45
- rows,
46
- inputWidth,
47
- dataTest
48
- }) => /*#__PURE__*/_react.default.createElement(_field.Field, {
49
- className: className,
50
- dataTest: dataTest,
51
- disabled: disabled,
52
- required: required,
53
- name: name,
54
- helpText: helpText,
55
- validationText: validationText,
56
- error: error,
57
- warning: warning,
58
- valid: valid,
59
- label: label
60
- }, /*#__PURE__*/_react.default.createElement(_box.Box, {
61
- width: inputWidth,
62
- minWidth: "220px"
63
- }, /*#__PURE__*/_react.default.createElement(_index.TextArea, {
64
- onFocus: onFocus,
65
- onBlur: onBlur,
66
- onChange: onChange,
67
- name: name,
68
- value: value || '',
69
- placeholder: placeholder,
70
- disabled: disabled,
71
- valid: valid,
72
- warning: warning,
73
- error: error,
74
- loading: loading,
75
- dense: dense,
76
- tabIndex: tabIndex,
77
- initialFocus: initialFocus,
78
- autoGrow: autoGrow,
79
- readOnly: readOnly,
80
- resize: resize,
81
- rows: rows
82
- })));
22
+ const TextAreaField = _ref => {
23
+ let {
24
+ className,
25
+ onChange,
26
+ onFocus,
27
+ onBlur,
28
+ initialFocus,
29
+ dense,
30
+ required,
31
+ label,
32
+ disabled,
33
+ placeholder,
34
+ name,
35
+ valid,
36
+ error,
37
+ warning,
38
+ loading,
39
+ value,
40
+ tabIndex,
41
+ helpText,
42
+ validationText,
43
+ autoGrow,
44
+ readOnly,
45
+ resize,
46
+ rows,
47
+ inputWidth,
48
+ dataTest
49
+ } = _ref;
50
+ return /*#__PURE__*/_react.default.createElement(_field.Field, {
51
+ className: className,
52
+ dataTest: dataTest,
53
+ disabled: disabled,
54
+ required: required,
55
+ name: name,
56
+ helpText: helpText,
57
+ validationText: validationText,
58
+ error: error,
59
+ warning: warning,
60
+ valid: valid,
61
+ label: label
62
+ }, /*#__PURE__*/_react.default.createElement(_box.Box, {
63
+ width: inputWidth,
64
+ minWidth: "220px"
65
+ }, /*#__PURE__*/_react.default.createElement(_index.TextArea, {
66
+ onFocus: onFocus,
67
+ onBlur: onBlur,
68
+ onChange: onChange,
69
+ name: name,
70
+ value: value || '',
71
+ placeholder: placeholder,
72
+ disabled: disabled,
73
+ valid: valid,
74
+ warning: warning,
75
+ error: error,
76
+ loading: loading,
77
+ dense: dense,
78
+ tabIndex: tabIndex,
79
+ initialFocus: initialFocus,
80
+ autoGrow: autoGrow,
81
+ readOnly: readOnly,
82
+ resize: resize,
83
+ rows: rows
84
+ })));
85
+ };
83
86
 
84
87
  exports.TextAreaField = TextAreaField;
85
88
  TextAreaField.defaultProps = {
86
89
  rows: 4,
87
- width: '100%',
88
90
  resize: 'vertical',
89
91
  dataTest: 'dhis2-uiwidgets-textareafield'
90
92
  };
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Autogrow = exports.Resize = exports.InputWidth = exports.Rows = exports.Required = exports.TextareaTextOverflow = exports.LabelTextOverflow = exports.Dense = exports.ReadOnly = exports.Disabled = exports.StatusLoading = exports.StatusError = exports.StatusWarning = exports.StatusValid = exports.Focus = exports.WithValue = exports.WithHelpText = exports.PlaceholderNoValue = exports.NoPlaceholderNoValue = exports.default = void 0;
6
+ exports.default = exports.WithValue = exports.WithHelpText = exports.TextareaTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.Rows = exports.Resize = exports.Required = exports.ReadOnly = exports.PlaceholderNoValue = exports.NoPlaceholderNoValue = exports.LabelTextOverflow = exports.InputWidth = exports.Focus = exports.Disabled = exports.Dense = exports.Autogrow = void 0;
7
7
 
8
8
  var _uiConstants = require("@dhis2/ui-constants");
9
9
 
@@ -15,17 +15,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
15
15
 
16
16
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
17
 
18
- const description = `
19
- \`TextAreaField\` wraps a \`TextArea\` component with a label, help text, validation text, and other functions.
20
-
21
- See the regular TextArea for usage information and options.
22
-
23
- \`\`\`js
24
- import { TextAreaField } from '@dhis2/ui'
25
- \`\`\`
26
- `;
18
+ const description = "\n`TextAreaField` wraps a `TextArea` component with a label, help text, validation text, and other functions.\n\nSee the regular TextArea for usage information and options.\n\n```js\nimport { TextAreaField } from '@dhis2/ui'\n```\n";
27
19
  var _default = {
28
- title: 'Forms/Text Area/Text Area Field',
20
+ title: 'Text Area Field',
29
21
  component: _index.TextAreaField,
30
22
  parameters: {
31
23
  docs: {
@@ -9,8 +9,8 @@ import PropTypes from 'prop-types';
9
9
  import React, { Component } from 'react';
10
10
  import { styles } from './text-area.styles.js';
11
11
  export class TextArea extends Component {
12
- constructor(...args) {
13
- super(...args);
12
+ constructor() {
13
+ super(...arguments);
14
14
 
15
15
  _defineProperty(this, "textareaRef", /*#__PURE__*/React.createRef());
16
16
 
@@ -144,7 +144,7 @@ export class TextArea extends Component {
144
144
  } = this.state;
145
145
  return /*#__PURE__*/React.createElement("div", {
146
146
  "data-test": dataTest,
147
- className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx('textarea', className) || "")
147
+ className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx('textarea', className) || "")
148
148
  }, /*#__PURE__*/React.createElement("textarea", {
149
149
  id: name,
150
150
  name: name,
@@ -158,7 +158,7 @@ export class TextArea extends Component {
158
158
  onBlur: this.handleBlur,
159
159
  onChange: this.handleChange,
160
160
  rows: rows,
161
- className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx({
161
+ className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx({
162
162
  dense,
163
163
  disabled,
164
164
  error,
@@ -176,7 +176,7 @@ export class TextArea extends Component {
176
176
  }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
177
177
  id: "3036048772",
178
178
  dynamic: [width, height, resize]
179
- }, [`textarea.__jsx-style-dynamic-selector{width:${width};height:${height};resize:${resize};}`]));
179
+ }, ["textarea.__jsx-style-dynamic-selector{width:".concat(width, ";height:").concat(height, ";resize:").concat(resize, ";}")]));
180
180
  }
181
181
 
182
182
  }
@@ -3,19 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
3
3
  import { sharedPropTypes } from '@dhis2/ui-constants';
4
4
  import React from 'react';
5
5
  import { TextArea } from './index.js';
6
- const description = `
7
- A textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.
8
-
9
- Options for textarea inputs are:
10
-
11
- - Rows: the height of the input, defined by the number of rows of text
12
- - Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.
13
- - Autoheight: if enabled, the texarea will grow in height to adapt to the content.
14
-
15
- \`\`\`js
16
- import { TextArea } from '@dhis2/ui'
17
- \`\`\`
18
- `;
6
+ const description = "\nA textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.\n\nOptions for textarea inputs are:\n\n- Rows: the height of the input, defined by the number of rows of text\n- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.\n- Autoheight: if enabled, the texarea will grow in height to adapt to the content.\n\n```js\nimport { TextArea } from '@dhis2/ui'\n```\n";
19
7
 
20
8
  window.onChange = (payload, event) => {
21
9
  console.log('onChange payload', payload);
@@ -32,14 +20,20 @@ window.onBlur = (payload, event) => {
32
20
  console.log('onBlur event', event);
33
21
  };
34
22
 
35
- const onChange = (...args) => window.onChange(...args);
23
+ const onChange = function () {
24
+ return window.onChange(...arguments);
25
+ };
36
26
 
37
- const onFocus = (...args) => window.onFocus(...args);
27
+ const onFocus = function () {
28
+ return window.onFocus(...arguments);
29
+ };
38
30
 
39
- const onBlur = (...args) => window.onBlur(...args);
31
+ const onBlur = function () {
32
+ return window.onBlur(...arguments);
33
+ };
40
34
 
41
35
  export default {
42
- title: 'Forms/Text Area/Text Area',
36
+ title: 'Text Area',
43
37
  component: TextArea,
44
38
  parameters: {
45
39
  docs: {
@@ -1,3 +1,3 @@
1
1
  import { colors, theme, spacers } from '@dhis2/ui-constants';
2
- export const styles = [`.textarea.jsx-1940988187{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp8};}`, `textarea.jsx-1940988187{box-sizing:border-box;padding:8px 12px;color:${colors.grey900};background-color:white;border:1px solid ${colors.grey500};border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}`, "textarea.dense.jsx-1940988187{padding:4px 12px;}", `textarea.jsx-1940988187:focus{outline:none;box-shadow:inset 0 0 0 2px ${theme.focus};border-color:${theme.focus};}`, `textarea.valid.jsx-1940988187{border-color:${theme.valid};}`, `textarea.warning.jsx-1940988187{border-color:${theme.warning};}`, `textarea.error.jsx-1940988187{border-color:${theme.error};}`, `textarea.read-only.jsx-1940988187{background-color:${colors.grey100};border-color:${colors.grey500};cursor:text;}`, `textarea.disabled.jsx-1940988187{background-color:${colors.grey100};border-color:${colors.grey500};color:${theme.disabled};cursor:not-allowed;}`];
2
+ export const styles = [".textarea.jsx-1940988187{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";}"), "textarea.jsx-1940988187{box-sizing:border-box;padding:8px 12px;color:".concat(colors.grey900, ";background-color:white;border:1px solid ").concat(colors.grey500, ";border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}"), "textarea.dense.jsx-1940988187{padding:4px 12px;}", "textarea.jsx-1940988187:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(theme.focus, ";border-color:").concat(theme.focus, ";}"), "textarea.valid.jsx-1940988187{border-color:".concat(theme.valid, ";}"), "textarea.warning.jsx-1940988187{border-color:".concat(theme.warning, ";}"), "textarea.error.jsx-1940988187{border-color:".concat(theme.error, ";}"), "textarea.read-only.jsx-1940988187{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";cursor:text;}"), "textarea.disabled.jsx-1940988187{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";color:").concat(theme.disabled, ";cursor:not-allowed;}")];
3
3
  styles.__hash = "1940988187";
@@ -5,71 +5,73 @@ import PropTypes from 'prop-types';
5
5
  import React from 'react';
6
6
  import { TextArea } from '../index.js';
7
7
 
8
- const TextAreaField = ({
9
- className,
10
- onChange,
11
- onFocus,
12
- onBlur,
13
- initialFocus,
14
- dense,
15
- required,
16
- label,
17
- disabled,
18
- placeholder,
19
- name,
20
- valid,
21
- error,
22
- warning,
23
- loading,
24
- value,
25
- tabIndex,
26
- helpText,
27
- validationText,
28
- autoGrow,
29
- readOnly,
30
- resize,
31
- rows,
32
- inputWidth,
33
- dataTest
34
- }) => /*#__PURE__*/React.createElement(Field, {
35
- className: className,
36
- dataTest: dataTest,
37
- disabled: disabled,
38
- required: required,
39
- name: name,
40
- helpText: helpText,
41
- validationText: validationText,
42
- error: error,
43
- warning: warning,
44
- valid: valid,
45
- label: label
46
- }, /*#__PURE__*/React.createElement(Box, {
47
- width: inputWidth,
48
- minWidth: "220px"
49
- }, /*#__PURE__*/React.createElement(TextArea, {
50
- onFocus: onFocus,
51
- onBlur: onBlur,
52
- onChange: onChange,
53
- name: name,
54
- value: value || '',
55
- placeholder: placeholder,
56
- disabled: disabled,
57
- valid: valid,
58
- warning: warning,
59
- error: error,
60
- loading: loading,
61
- dense: dense,
62
- tabIndex: tabIndex,
63
- initialFocus: initialFocus,
64
- autoGrow: autoGrow,
65
- readOnly: readOnly,
66
- resize: resize,
67
- rows: rows
68
- })));
8
+ const TextAreaField = _ref => {
9
+ let {
10
+ className,
11
+ onChange,
12
+ onFocus,
13
+ onBlur,
14
+ initialFocus,
15
+ dense,
16
+ required,
17
+ label,
18
+ disabled,
19
+ placeholder,
20
+ name,
21
+ valid,
22
+ error,
23
+ warning,
24
+ loading,
25
+ value,
26
+ tabIndex,
27
+ helpText,
28
+ validationText,
29
+ autoGrow,
30
+ readOnly,
31
+ resize,
32
+ rows,
33
+ inputWidth,
34
+ dataTest
35
+ } = _ref;
36
+ return /*#__PURE__*/React.createElement(Field, {
37
+ className: className,
38
+ dataTest: dataTest,
39
+ disabled: disabled,
40
+ required: required,
41
+ name: name,
42
+ helpText: helpText,
43
+ validationText: validationText,
44
+ error: error,
45
+ warning: warning,
46
+ valid: valid,
47
+ label: label
48
+ }, /*#__PURE__*/React.createElement(Box, {
49
+ width: inputWidth,
50
+ minWidth: "220px"
51
+ }, /*#__PURE__*/React.createElement(TextArea, {
52
+ onFocus: onFocus,
53
+ onBlur: onBlur,
54
+ onChange: onChange,
55
+ name: name,
56
+ value: value || '',
57
+ placeholder: placeholder,
58
+ disabled: disabled,
59
+ valid: valid,
60
+ warning: warning,
61
+ error: error,
62
+ loading: loading,
63
+ dense: dense,
64
+ tabIndex: tabIndex,
65
+ initialFocus: initialFocus,
66
+ autoGrow: autoGrow,
67
+ readOnly: readOnly,
68
+ resize: resize,
69
+ rows: rows
70
+ })));
71
+ };
69
72
 
70
73
  TextAreaField.defaultProps = {
71
74
  rows: 4,
72
- width: '100%',
73
75
  resize: 'vertical',
74
76
  dataTest: 'dhis2-uiwidgets-textareafield'
75
77
  };
@@ -3,17 +3,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
3
3
  import { sharedPropTypes } from '@dhis2/ui-constants';
4
4
  import React from 'react';
5
5
  import { TextAreaField } from './index.js';
6
- const description = `
7
- \`TextAreaField\` wraps a \`TextArea\` component with a label, help text, validation text, and other functions.
8
-
9
- See the regular TextArea for usage information and options.
10
-
11
- \`\`\`js
12
- import { TextAreaField } from '@dhis2/ui'
13
- \`\`\`
14
- `;
6
+ const description = "\n`TextAreaField` wraps a `TextArea` component with a label, help text, validation text, and other functions.\n\nSee the regular TextArea for usage information and options.\n\n```js\nimport { TextAreaField } from '@dhis2/ui'\n```\n";
15
7
  export default {
16
- title: 'Forms/Text Area/Text Area Field',
8
+ title: 'Text Area Field',
17
9
  component: TextAreaField,
18
10
  parameters: {
19
11
  docs: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/text-area",
3
- "version": "8.2.0",
3
+ "version": "8.2.3",
4
4
  "description": "UI TextArea",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,12 +32,12 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@dhis2/prop-types": "^3.0.0-beta.1",
35
- "@dhis2-ui/box": "8.2.0",
36
- "@dhis2-ui/field": "8.2.0",
37
- "@dhis2-ui/loader": "8.2.0",
38
- "@dhis2-ui/status-icon": "8.2.0",
39
- "@dhis2/ui-constants": "8.2.0",
40
- "@dhis2/ui-icons": "8.2.0",
35
+ "@dhis2-ui/box": "8.2.3",
36
+ "@dhis2-ui/field": "8.2.3",
37
+ "@dhis2-ui/loader": "8.2.3",
38
+ "@dhis2-ui/status-icon": "8.2.3",
39
+ "@dhis2/ui-constants": "8.2.3",
40
+ "@dhis2/ui-icons": "8.2.3",
41
41
  "classnames": "^2.3.1",
42
42
  "prop-types": "^15.7.2"
43
43
  },