@dhis2-ui/text-area 9.11.0 → 9.11.1-beta.2

package/build/cjs/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "TextAreaField", {
     return _index2.TextAreaField;
   }
 });
-
 var _index = require("./text-area/index.js");
-
 var _index2 = require("./text-area-field/index.js");

package/build/cjs/text-area/__tests__/text-area.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _textArea = require("../text-area.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<TextArea>', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
@@ -16,9 +12,7 @@ describe('<TextArea>', () => {
       value: "bar",
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('textbox'), {});
-
     expect(onKeyDown).toHaveBeenCalledWith({
       name: 'foo',
       value: 'bar'

package/build/cjs/text-area/features/accepts_initial_focus/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a TextArea with initialFocus is rendered', () => {
-  cy.visitStory('TextArea', 'With initialFocus');
+  cy.visitStory('TextArea', 'With initial focus');
 });
 (0, _cypressCucumberPreprocessor.Then)('the TextArea is focused', () => {
   cy.focused().parent('[data-test="dhis2-uicore-textarea"]').should('exist');

package/build/cjs/text-area/features/can_be_blurred/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a TextArea with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('TextArea', 'With initialFocus and onBlur');
+  cy.visitStory('TextArea', 'With initial focus and on blur');
 });
 (0, _cypressCucumberPreprocessor.When)('the TextArea is blurred', () => {
   cy.get('[data-test="dhis2-uicore-textarea"] textarea').blur();

package/build/cjs/text-area/features/can_be_changed/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a TextArea with onChange handler is rendered', () => {
-  cy.visitStory('TextArea', 'With onChange');
+  cy.visitStory('TextArea', 'With on change');
 });
 (0, _cypressCucumberPreprocessor.When)('the TextArea is filled with a character', () => {
   cy.get('[data-test="dhis2-uicore-textarea"]').click().type('a');

package/build/cjs/text-area/features/can_be_disabled/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a disabled TextArea is rendered', () => {
   cy.visitStory('TextArea', 'With disabled');
 });

package/build/cjs/text-area/features/can_be_focused/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a TextArea with onFocus handler is rendered', () => {
-  cy.visitStory('TextArea', 'With onFocus');
+  cy.visitStory('TextArea', 'With on focus');
 });
 (0, _cypressCucumberPreprocessor.When)('the TextArea is focused', () => {
   cy.get('[data-test="dhis2-uicore-textarea"] textarea').focus();

package/build/cjs/text-area/features/common/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an empty TextArea is rendered', () => {
   cy.visitStory('TextArea', 'Empty');
 });

package/build/cjs/text-area/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "TextArea", {
     return _textArea.TextArea;
   }
 });
-
 var _textArea = require("./text-area.js");

package/build/cjs/text-area/text-area.e2e.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithOnFocus = exports.WithOnChange = exports.WithInitialFocusAndOnBlur = exports.WithInitialFocus = exports.WithDisabled = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onChange = window.Cypress && window.Cypress.cy.stub();
+window.onBlur = window.Cypress && window.Cypress.cy.stub();
+window.onFocus = window.Cypress && window.Cypress.cy.stub();
+var _default = exports.default = {
+  title: 'TextArea'
+};
+const WithOnChange = () => /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+  onChange: window.onChange,
+  name: "textarea"
+});
+exports.WithOnChange = WithOnChange;
+const WithInitialFocusAndOnBlur = () => /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+  initialFocus: true,
+  name: "textarea",
+  onBlur: window.onBlur
+});
+exports.WithInitialFocusAndOnBlur = WithInitialFocusAndOnBlur;
+const WithOnFocus = () => /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+  name: "textarea",
+  onFocus: window.onFocus
+});
+exports.WithOnFocus = WithOnFocus;
+const WithInitialFocus = () => /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+  name: "textarea",
+  initialFocus: true
+});
+exports.WithInitialFocus = WithInitialFocus;
+const WithDisabled = () => /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+  name: "textarea",
+  disabled: true
+});
+exports.WithDisabled = WithDisabled;

package/build/cjs/text-area/text-area.js

@@ -4,46 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextArea = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _statusIcon = require("@dhis2-ui/status-icon");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _statusIcon = require("@dhis2-ui/status-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _textAreaStyles = require("./text-area.styles.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class TextArea extends _react.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "textareaRef", /*#__PURE__*/_react.default.createRef());
-
     _defineProperty(this, "state", {
       height: 'auto'
     });
-
     _defineProperty(this, "textareaDimensions", {
       width: 0,
       height: 0
     });
-
     _defineProperty(this, "userHasResized", false);
-
     _defineProperty(this, "setTextareaDimensions", () => {
       const textarea = this.textareaRef.current;
       this.textareaDimensions = {
@@ -51,7 +36,6 @@ class TextArea extends _react.Component {
         height: textarea.clientHeight
       };
     });
-
     _defineProperty(this, "hasUserResized", () => {
       const {
         width: oldWidth,
@@ -63,68 +47,56 @@ class TextArea extends _react.Component {
         height: newHeight
       } = this.textareaDimensions;
       const userHasResized = newWidth !== oldWidth || newHeight !== oldHeight;
-
       if (userHasResized) {
         this.userHasResized = true;
         this.removeResizeListener();
       }
     });
-
     _defineProperty(this, "handleChange", e => {
       if (this.props.onChange) {
         this.props.onChange(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleBlur", e => {
       if (this.props.onBlur) {
         this.props.onBlur(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleFocus", e => {
       if (this.props.onFocus) {
         this.props.onFocus(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleKeyDown", e => {
       if (this.props.onKeyDown) {
         this.props.onKeyDown(this.createHandlerPayload(e), e);
       }
     });
   }
-
   componentDidMount() {
     this.attachResizeListener();
-
     if (this.props.initialFocus) {
       this.textareaRef.current.focus();
     }
-
     if (this.shouldDoAutoGrow()) {
       this.setHeight();
     }
   }
-
   componentDidUpdate(prevProps) {
     if (this.shouldDoAutoGrow() && this.props.value !== prevProps.value) {
       this.setHeight();
     }
   }
-
   attachResizeListener() {
     const textarea = this.textareaRef.current;
     textarea.addEventListener('mousedown', this.setTextareaDimensions);
     textarea.addEventListener('mouseup', this.hasUserResized);
   }
-
   removeResizeListener() {
     const textarea = this.textareaRef.current;
     textarea.removeEventListener('mousedown', this.setTextareaDimensions);
     textarea.removeEventListener('mouseup', this.hasUserResized);
   }
-
   setHeight() {
     const textarea = this.textareaRef.current;
     const offset = textarea.offsetHeight - textarea.clientHeight;
@@ -133,18 +105,15 @@ class TextArea extends _react.Component {
       height
     });
   }
-
   shouldDoAutoGrow() {
     return this.props.autoGrow && !this.userHasResized;
   }
-
   createHandlerPayload(e) {
     return {
       value: e.target.value,
       name: this.props.name
     };
   }
-
   render() {
     const {
       className,
@@ -169,7 +138,7 @@ class TextArea extends _react.Component {
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-test": dataTest,
-      className: "jsx-".concat(_textAreaStyles.styles.__hash) + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)('textarea', className) || "")
+      className: `jsx-${_textAreaStyles.styles.__hash}` + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)('textarea', className) || "")
     }, /*#__PURE__*/_react.default.createElement("textarea", {
       id: name,
       name: name,
@@ -184,7 +153,7 @@ class TextArea extends _react.Component {
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       rows: rows,
-      className: "jsx-".concat(_textAreaStyles.styles.__hash) + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)({
+      className: `jsx-${_textAreaStyles.styles.__hash}` + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)({
         dense,
         disabled,
         error,
@@ -202,11 +171,9 @@ class TextArea extends _react.Component {
     }, _textAreaStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
       id: "3036048772",
       dynamic: [width, height, resize]
-    }, ["textarea.__jsx-style-dynamic-selector{width:".concat(width, ";height:").concat(height, ";resize:").concat(resize, ";}")]));
+    }, [`textarea.__jsx-style-dynamic-selector{width:${width};height:${height};resize:${resize};}`]));
   }
-
 }
-
 exports.TextArea = TextArea;
 TextArea.defaultProps = {
   rows: 4,
@@ -219,59 +186,41 @@ TextArea.propTypes = {
   autoGrow: _propTypes.default.bool,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Compact mode */
   dense: _propTypes.default.bool,
-
   /** Disables the textarea and makes in non-interactive */
   disabled: _propTypes.default.bool,
-
   /** Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Grabs initial focus on the page */
   initialFocus: _propTypes.default.bool,
-
   /** Adds a loading spinner */
   loading: _propTypes.default.bool,
-
   /** Name associated with the text area. Passed in object argument to event handlers. */
   name: _propTypes.default.string,
-
   /** Placeholder text for an empty textarea */
   placeholder: _propTypes.default.string,
-
   /** Makes the textarea read-only */
   readOnly: _propTypes.default.bool,
-
   /** [Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element */
   resize: _propTypes.default.oneOf(['none', 'both', 'horizontal', 'vertical']),
-
   /** Initial height of the textarea, in lines of text */
   rows: _propTypes.default.number,
   tabIndex: _propTypes.default.string,
-
   /** Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers. */
   value: _propTypes.default.string,
-
   /** Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Width of the text area. Can be any valid CSS measurement */
   width: _propTypes.default.string,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onBlur: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onChange: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onFocus: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onKeyDown: _propTypes.default.func
 };

package/build/cjs/text-area/{text-area.stories.js → text-area.prod.stories.js}

@@ -4,47 +4,46 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithValue = exports.TextareaTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.Rows = exports.Resize = exports.ReadOnly = exports.RTL = exports.PlaceholderNoValue = exports.Focus = exports.Disabled = exports.Dense = exports.Default = exports.Autogrow = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const description = `
+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.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Options for textarea inputs are:
 
-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); }
-
-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";
+- Rows: the height of the input, defined by the number of rows of text
+- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.
+- Autoheight: if enabled, the texarea will grow in height to adapt to the content.
 
+\`\`\`js
+import { TextArea } from '@dhis2/ui'
+\`\`\`
+`;
 window.onChange = (payload, event) => {
   console.log('onChange payload', payload);
   console.log('onChange event', event);
 };
-
 window.onFocus = (payload, event) => {
   console.log('onFocus payload', payload);
   console.log('onFocus event', event);
 };
-
 window.onBlur = (payload, event) => {
   console.log('onBlur payload', payload);
   console.log('onBlur event', event);
 };
-
 const onChange = function () {
   return window.onChange(...arguments);
 };
-
 const onFocus = function () {
   return window.onFocus(...arguments);
 };
-
 const onBlur = function () {
   return window.onBlur(...arguments);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Text Area',
   component: _index.TextArea,
   parameters: {
@@ -55,11 +54,14 @@ var _default = {
     }
   },
   argTypes: {
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   },
   args: {
@@ -69,54 +71,43 @@ var _default = {
     onBlur
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.TextArea, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-const PlaceholderNoValue = Template.bind({});
-exports.PlaceholderNoValue = PlaceholderNoValue;
+const Default = exports.Default = Template.bind({});
+const PlaceholderNoValue = exports.PlaceholderNoValue = Template.bind({});
 PlaceholderNoValue.args = {
   placeholder: 'Hold the place'
 };
 PlaceholderNoValue.storyName = 'Placeholder, no value';
-const WithValue = Template.bind({});
-exports.WithValue = WithValue;
+const WithValue = exports.WithValue = Template.bind({});
 WithValue.args = {
   value: 'This is set through the value prop, which means the component is controlled.'
 };
 WithValue.storyName = 'With value';
-
 const Focus = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.TextArea, _extends({}, args, {
   initialFocus: true,
   className: "initially-focused"
 })), /*#__PURE__*/_react.default.createElement(_index.TextArea, _extends({}, args, {
   className: "initially-unfocused"
 })));
-
 exports.Focus = Focus;
 Focus.parameters = {
   docs: {
     disable: true
   }
 };
-const StatusValid = Template.bind({});
-exports.StatusValid = StatusValid;
+const StatusValid = exports.StatusValid = Template.bind({});
 StatusValid.args = {
   valid: true,
   value: 'This value is valid'
 };
 StatusValid.storyName = 'Status: Valid';
-const StatusWarning = Template.bind({});
-exports.StatusWarning = StatusWarning;
+const StatusWarning = exports.StatusWarning = Template.bind({});
 StatusWarning.args = {
   warning: true,
   value: 'This value produces a warning'
 };
 StatusWarning.storyName = 'Status: Warning';
-const StatusError = Template.bind({});
-exports.StatusError = StatusError;
+const StatusError = exports.StatusError = Template.bind({});
 StatusError.args = {
   error: true,
   value: 'This value produces an error',
@@ -124,44 +115,37 @@ StatusError.args = {
   validationText: 'This describes the error, if a message is supplied.'
 };
 StatusError.storyName = 'Status: Error';
-const StatusLoading = Template.bind({});
-exports.StatusLoading = StatusLoading;
+const StatusLoading = exports.StatusLoading = Template.bind({});
 StatusLoading.args = {
   loading: true,
   value: 'This value produces a loadingn state'
 };
 StatusLoading.storyName = 'Status: Loading';
-const Disabled = Template.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
   value: 'This field is disabled'
 };
-const ReadOnly = Template.bind({});
-exports.ReadOnly = ReadOnly;
+const ReadOnly = exports.ReadOnly = Template.bind({});
 ReadOnly.args = {
   readOnly: true,
   value: 'This field is readOnly'
 };
-const Dense = Template.bind({});
-exports.Dense = Dense;
+const Dense = exports.Dense = Template.bind({});
 Dense.args = {
   dense: true,
   value: 'This field is dense'
 };
-const TextareaTextOverflow = Template.bind({});
-exports.TextareaTextOverflow = TextareaTextOverflow;
+const TextareaTextOverflow = exports.TextareaTextOverflow = Template.bind({});
 TextareaTextOverflow.args = {
   label: 'I have a scrollbar',
   value: ['A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text'].join('\n')
 };
-const Rows = Template.bind({});
-exports.Rows = Rows;
+const Rows = exports.Rows = Template.bind({});
 Rows.args = {
   rows: 8,
   label: 'You can set the height with the rows prop. I have 8'
 };
-
 const Resize = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.TextArea, _extends({}, args, {
   name: "textarea1",
   label: "Resize: vertical (default)"
@@ -178,9 +162,7 @@ const Resize = args => /*#__PURE__*/_react.default.createElement(_react.default.
   label: "Resize: horizontal",
   resize: "horizontal"
 })));
-
 exports.Resize = Resize;
-
 const Autogrow = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.TextArea, _extends({}, args, {
   name: "textarea1",
   label: "Autogrow step 1",
@@ -204,13 +186,10 @@ const Autogrow = args => /*#__PURE__*/_react.default.createElement(_react.defaul
   label: "Autogrow step 4",
   value: ['This TextArea has a height of two rows', 'it also has autoGrow set to true so it will grow with the content.', 'See: rows is still 2...', 'And now I have 4 lines and still no scroll bar in sight.'].join('\n')
 })));
-
 exports.Autogrow = Autogrow;
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(Template, args));
-
 exports.RTL = RTL;
 RTL.args = {
   valid: true,

package/build/cjs/text-area/text-area.styles.js

@@ -4,9 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.styles = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
-const styles = [".textarea.jsx-1284170182{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_uiConstants.spacers.dp8, ";}"), "textarea.jsx-1284170182{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 1px 0 rgba(48,54,60,0.1);outline:0;font-size:14px;line-height:17px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}"), "textarea.dense.jsx-1284170182{padding:6px 8px;}", "textarea.jsx-1284170182:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(_uiConstants.theme.focus, ";border-color:").concat(_uiConstants.theme.focus, ";}"), "textarea.valid.jsx-1284170182{border-color:".concat(_uiConstants.theme.valid, ";}"), "textarea.warning.jsx-1284170182{border-color:".concat(_uiConstants.theme.warning, ";}"), "textarea.error.jsx-1284170182{border-color:".concat(_uiConstants.theme.error, ";}"), "textarea.read-only.jsx-1284170182{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";cursor:text;}"), "textarea.disabled.jsx-1284170182{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";color:").concat(_uiConstants.theme.disabled, ";cursor:not-allowed;}")];
-exports.styles = styles;
+const styles = exports.styles = [`.textarea.jsx-1284170182{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${_uiConstants.spacers.dp8};}`, `textarea.jsx-1284170182{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 1px 0 rgba(48,54,60,0.1);outline:0;font-size:14px;line-height:17px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}`, "textarea.dense.jsx-1284170182{padding:6px 8px;}", `textarea.jsx-1284170182:focus{outline:none;box-shadow:inset 0 0 0 2px ${_uiConstants.theme.focus};border-color:${_uiConstants.theme.focus};}`, `textarea.valid.jsx-1284170182{border-color:${_uiConstants.theme.valid};}`, `textarea.warning.jsx-1284170182{border-color:${_uiConstants.theme.warning};}`, `textarea.error.jsx-1284170182{border-color:${_uiConstants.theme.error};}`, `textarea.read-only.jsx-1284170182{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};cursor:text;}`, `textarea.disabled.jsx-1284170182{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};color:${_uiConstants.theme.disabled};cursor:not-allowed;}`];
 styles.__hash = "1284170182";

package/build/cjs/text-area-field/__tests__/text-area-field.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _textAreaField = require("../text-area-field.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<TextArea>', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
@@ -16,9 +12,7 @@ describe('<TextArea>', () => {
       value: "bar",
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('textbox'), {});
-
     expect(onKeyDown).toHaveBeenCalledWith({
       name: 'foo',
       value: 'bar'

package/build/cjs/text-area-field/features/can_be_required/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a TextAreaField with label and a required flag is rendered', () => {
   cy.visitStory('TextAreaField', 'With label and required');
 });

package/build/cjs/text-area-field/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "TextAreaField", {
     return _textAreaField.TextAreaField;
   }
 });
-
 var _textAreaField = require("./text-area-field.js");