@dhis2-ui/input 9.11.0 → 9.11.1-beta.1

package/build/cjs/input-field/input-field.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InputFieldProps = exports.InputField = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _box = require("@dhis2-ui/box");
-
 var _field = require("@dhis2-ui/field");
-
 var _input = require("@dhis2-ui/input");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class InputField extends _react.default.Component {
   render() {
     const {
@@ -90,91 +82,64 @@ class InputField extends _react.default.Component {
       autoComplete: autoComplete
     })));
   }
-
 }
-
 exports.InputField = InputField;
 InputField.defaultProps = {
   dataTest: 'dhis2-uiwidgets-inputfield'
 };
-const InputFieldProps = {
+const InputFieldProps = exports.InputFieldProps = {
   /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
   autoComplete: _propTypes.default.string,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Makes the input smaller */
   dense: _propTypes.default.bool,
-
   /** Disables the input */
   disabled: _propTypes.default.bool,
-
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Guiding text for how to use this input */
   helpText: _propTypes.default.string,
-
   /** The input grabs initial focus on the page */
   initialFocus: _propTypes.default.bool,
-
   /** Defines the width of the input. Can be any valid CSS measurement */
   inputWidth: _propTypes.default.string,
-
   /** Label text for the input */
   label: _propTypes.default.string,
-
   /** Adds a loading indicator beside the input */
   loading: _propTypes.default.bool,
-
   /** The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'` */
   max: _propTypes.default.string,
-
   /** The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'` */
   min: _propTypes.default.string,
-
   /** Name associated with the input. Passed to event handler callbacks in object */
   name: _propTypes.default.string,
-
   /** Placeholder text for the input */
   placeholder: _propTypes.default.string,
-
   /** Makes the input read-only */
   readOnly: _propTypes.default.bool,
-
   /** Indicates this input is required */
   required: _propTypes.default.bool,
-
   /** The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'` */
   step: _propTypes.default.string,
   tabIndex: _propTypes.default.string,
-
   /** Type of input */
   type: _input.Input.propTypes.type,
-
   /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Text below input for validation feedback. Receives styles depending on validation status */
   validationText: _propTypes.default.string,
-
   /** Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object */
   value: _propTypes.default.string,
-
   /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** 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
 };
-exports.InputFieldProps = InputFieldProps;
 InputField.propTypes = InputFieldProps;

package/build/cjs/input-field/{input-field.stories.js → input-field.prod.stories.js}

@@ -4,28 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithValue = exports.WithHelpText = exports.ValueTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.Required = exports.ReadOnly = exports.PlaceholderNoValue = exports.NoPlaceholderNoValue = exports.LabelTextOverflow = exports.InputWidth = exports.Focus = exports.Disabled = exports.Dense = exports.Default = 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 subtitle = 'Allows a user to enter data, usually text';
+const description = `
+Inputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
+InputField wraps an Input component with a label, help text, validation text, and some other features.
 
-const subtitle = 'Allows a user to enter data, usually text';
-const description = "\nInputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.\n\nInputField wraps an Input component with a label, help text, validation text, and some other features.\n\nPlease see more about options and features of inputs at [Design System: Input Field](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md#input).\n\n```js\nimport { InputField } from '@dhis2/ui'\n```\n";
+Please see more about options and features of inputs at [Design System: Input Field](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md#input).
 
+\`\`\`js
+import { InputField } from '@dhis2/ui'
+\`\`\`
+`;
 const logger = _ref => {
   let {
     name,
     value
   } = _ref;
-  return console.log("Name: ".concat(name, ", value: ").concat(value));
+  return console.log(`Name: ${name}, value: ${value}`);
 };
-
 const inputTypeArgType = {
   table: {
     type: {
@@ -37,7 +39,7 @@ const inputTypeArgType = {
     options: ['text', 'number', 'password', 'email', 'url', 'tel', 'date', 'datetime', 'datetime-local', 'month', 'week', 'time', 'search']
   }
 };
-var _default = {
+var _default = exports.default = {
   title: 'Input Field',
   component: _index.InputField,
   parameters: {
@@ -55,68 +57,61 @@ var _default = {
     onChange: logger
   },
   argTypes: {
-    type: { ...inputTypeArgType
+    type: {
+      ...inputTypeArgType
     },
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.InputField, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-const NoPlaceholderNoValue = Template.bind({});
-exports.NoPlaceholderNoValue = NoPlaceholderNoValue;
+const Default = exports.Default = Template.bind({});
+const NoPlaceholderNoValue = exports.NoPlaceholderNoValue = Template.bind({});
 NoPlaceholderNoValue.storyName = 'No placeholder, no value';
-const PlaceholderNoValue = Template.bind({});
-exports.PlaceholderNoValue = PlaceholderNoValue;
+const PlaceholderNoValue = exports.PlaceholderNoValue = Template.bind({});
 PlaceholderNoValue.args = {
   placeholder: 'Hold the place'
 };
 PlaceholderNoValue.storyName = 'Placeholder, no value';
-const WithHelpText = Template.bind({});
-exports.WithHelpText = WithHelpText;
-WithHelpText.args = { ...PlaceholderNoValue.args,
+const WithHelpText = exports.WithHelpText = Template.bind({});
+WithHelpText.args = {
+  ...PlaceholderNoValue.args,
   helpText: 'With some helping text to guide the user along'
 };
-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.'
 };
-const Focus = Template.bind({});
-exports.Focus = Focus;
+const Focus = exports.Focus = Template.bind({});
 Focus.args = {
   initialFocus: true
-}; // Disabled initial focus stories on docs page
-
+};
+// Disabled initial focus stories on docs page
 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,32 +119,27 @@ StatusError.args = {
   validationText: 'This validation text 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 loading 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 read-only'
 };
-const Dense = Template.bind({});
-exports.Dense = Dense;
+const Dense = exports.Dense = Template.bind({});
 Dense.args = {
   dense: true,
   value: 'This field is dense'
 };
-
 const InputWidth = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.InputField, _extends({}, args, {
   name: "input1",
   label: "My textarea has a width of 100px",
@@ -159,24 +149,20 @@ const InputWidth = args => /*#__PURE__*/_react.default.createElement(_react.defa
   label: "My textarea has a width of 220px",
   inputWidth: "220px"
 })));
-
 exports.InputWidth = InputWidth;
-const LabelTextOverflow = Template.bind({});
-exports.LabelTextOverflow = LabelTextOverflow;
+const LabelTextOverflow = exports.LabelTextOverflow = Template.bind({});
 LabelTextOverflow.args = {
   dense: true,
   warning: true,
   label: "This label is too long to show on a single line of the input field's label. We just let it flow to the next line so the user can still read it. However, we should always aim to keep it shorter than this!"
 };
-const ValueTextOverflow = Template.bind({});
-exports.ValueTextOverflow = ValueTextOverflow;
+const ValueTextOverflow = exports.ValueTextOverflow = Template.bind({});
 ValueTextOverflow.args = {
   value: "This value is too long in order to show on a single line of the input field. It should stay on one line, not in an extra line and which wouldn't look like a standard input",
   dense: true,
   warning: true
 };
-const Required = Template.bind({});
-exports.Required = Required;
+const Required = exports.Required = Template.bind({});
 Required.args = {
   required: true
 };

package/build/es/input/__tests__/input.test.js

@@ -1,5 +1,4 @@
-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); }
-
+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); }
 import { render, fireEvent, screen } from '@testing-library/react';
 import { shallow } from 'enzyme';
 import React from 'react';

package/build/es/input/features/accepts_initial_focus/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Input with initialFocus is rendered', () => {
-  cy.visitStory('Input', 'With initialFocus');
+  cy.visitStory('Input', 'With initial focus');
 });
 Then('the Input is focused', () => {
   cy.focused().parent('[data-test="dhis2-uicore-input"]').should('exist');

package/build/es/input/features/can_be_blurred/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('an Input with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('Input', 'With initialFocus and onBlur');
+  cy.visitStory('Input', 'With initial focus and on blur');
 });
 When('the Input is blurred', () => {
   cy.get('[data-test="dhis2-uicore-input"] input').blur();

package/build/es/input/features/can_be_changed/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Input with onChange handler is rendered', () => {
-  cy.visitStory('Input', 'With onChange');
+  cy.visitStory('Input', 'With on change');
 });
 When('the Input is filled with a character', () => {
   cy.get('[data-test="dhis2-uicore-input"]').click().type('a');

package/build/es/input/features/can_be_focused/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Input with onFocus handler is rendered', () => {
-  cy.visitStory('Input', 'With onFocus');
+  cy.visitStory('Input', 'With on focus');
 });
 When('the Input is focused', () => {
   cy.get('[data-test="dhis2-uicore-input"] input').focus();

package/build/es/input/{input.stories.e2e.js → input.e2e.stories.js}

@@ -1,33 +1,39 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Input } from './index.js';
 window.onChange = window.Cypress && window.Cypress.cy.stub();
 window.onBlur = window.Cypress && window.Cypress.cy.stub();
 window.onFocus = window.Cypress && window.Cypress.cy.stub();
-storiesOf('Input', module).add('With onChange', () => /*#__PURE__*/React.createElement(Input, {
+export default {
+  title: 'Input'
+};
+export const WithOnChange = () => /*#__PURE__*/React.createElement(Input, {
   label: "Default label",
   name: "Default",
   value: "",
   onChange: window.onChange
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/React.createElement(Input, {
+});
+export const WithInitialFocusAndOnBlur = () => /*#__PURE__*/React.createElement(Input, {
   label: "Default label",
   name: "Default",
   value: "",
   initialFocus: true,
   onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/React.createElement(Input, {
+});
+export const WithOnFocus = () => /*#__PURE__*/React.createElement(Input, {
   label: "Default label",
   name: "Default",
   value: "",
   onFocus: window.onFocus
-})).add('With initialFocus', () => /*#__PURE__*/React.createElement(Input, {
+});
+export const WithInitialFocus = () => /*#__PURE__*/React.createElement(Input, {
   label: "Default label",
   name: "Default",
   value: "",
   initialFocus: true
-})).add('With disabled', () => /*#__PURE__*/React.createElement(Input, {
+});
+export const WithDisabled = () => /*#__PURE__*/React.createElement(Input, {
   label: "Default label",
   name: "Default",
   value: "",
   disabled: true
-}));
+});

package/build/es/input/input.js

@@ -1,58 +1,50 @@
 import _JSXStyle from "styled-jsx/style";
-
-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; }
-
-import { StatusIcon } from '@dhis2-ui/status-icon';
+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); }
 import { theme, colors, spacers, sharedPropTypes } from '@dhis2/ui-constants';
+import { StatusIcon } from '@dhis2-ui/status-icon';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-const styles = [".input.jsx-31445346{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:".concat(spacers.dp8, ";}"), "input.jsx-31445346{box-sizing:border-box;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:".concat(colors.grey900, ";background-color:white;padding:11px 12px;max-height:40px;outline:0;border:1px solid ").concat(colors.grey500, ";border-radius:3px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);text-overflow:ellipsis;}"), "input.dense.jsx-31445346{max-height:32px;padding:7px 8px;}", "input.jsx-31445346:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(theme.focus, ";border-color:").concat(theme.focus, ";}"), "input.jsx-31445346::-webkit-input-placeholder{color:".concat(colors.grey600, ";opacity:1;}"), "input.jsx-31445346::-moz-placeholder{color:".concat(colors.grey600, ";opacity:1;}"), "input.jsx-31445346:-ms-input-placeholder{color:".concat(colors.grey600, ";opacity:1;}"), "input.jsx-31445346::placeholder{color:".concat(colors.grey600, ";opacity:1;}"), "input[type='date'].jsx-31445346::-webkit-inner-spin-button,input[type='date'].jsx-31445346::-webkit-calendar-picker-indicator,input[type='time'].jsx-31445346::-webkit-inner-spin-button,input[type='time'].jsx-31445346::-webkit-calendar-picker-indicator,input[type='datetime-local'].jsx-31445346::-webkit-inner-spin-button,input[type='datetime-local'].jsx-31445346::-webkit-calendar-picker-indicator{height:14px;padding-top:1px;padding-bottom:1px;}", "input[type='date'].jsx-31445346::-webkit-datetime-edit-fields-wrapper,input[type='datetime-local'].jsx-31445346::-webkit-datetime-edit-fields-wrapper,input[type='time'].jsx-31445346::-webkit-datetime-edit-fields-wrapper{padding:0;}", "input.warning.jsx-31445346{border-color:".concat(theme.warning, ";}"), "input.error.jsx-31445346{border-color:".concat(theme.error, ";}"), "input.read-only.jsx-31445346{background-color:".concat(colors.grey050, ";border-color:").concat(colors.grey300, ";box-shadow:none;cursor:text;}"), "input.disabled.jsx-31445346{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";color:").concat(theme.disabled, ";cursor:not-allowed;}")];
+const styles = [`.input.jsx-31445346{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:${spacers.dp8};}`, `input.jsx-31445346{box-sizing:border-box;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:${colors.grey900};background-color:white;padding:11px 12px;max-height:40px;outline:0;border:1px solid ${colors.grey500};border-radius:3px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);text-overflow:ellipsis;}`, "input.dense.jsx-31445346{max-height:32px;padding:7px 8px;}", `input.jsx-31445346:focus{outline:none;box-shadow:inset 0 0 0 2px ${theme.focus};border-color:${theme.focus};}`, `input.jsx-31445346::-webkit-input-placeholder{color:${colors.grey600};opacity:1;}`, `input.jsx-31445346::-moz-placeholder{color:${colors.grey600};opacity:1;}`, `input.jsx-31445346:-ms-input-placeholder{color:${colors.grey600};opacity:1;}`, `input.jsx-31445346::placeholder{color:${colors.grey600};opacity:1;}`, "input[type='date'].jsx-31445346::-webkit-inner-spin-button,input[type='date'].jsx-31445346::-webkit-calendar-picker-indicator,input[type='time'].jsx-31445346::-webkit-inner-spin-button,input[type='time'].jsx-31445346::-webkit-calendar-picker-indicator,input[type='datetime-local'].jsx-31445346::-webkit-inner-spin-button,input[type='datetime-local'].jsx-31445346::-webkit-calendar-picker-indicator{height:14px;padding-top:1px;padding-bottom:1px;}", "input[type='date'].jsx-31445346::-webkit-datetime-edit-fields-wrapper,input[type='datetime-local'].jsx-31445346::-webkit-datetime-edit-fields-wrapper,input[type='time'].jsx-31445346::-webkit-datetime-edit-fields-wrapper{padding:0;}", `input.warning.jsx-31445346{border-color:${theme.warning};}`, `input.error.jsx-31445346{border-color:${theme.error};}`, `input.read-only.jsx-31445346{background-color:${colors.grey050};border-color:${colors.grey300};box-shadow:none;cursor:text;}`, `input.disabled.jsx-31445346{background-color:${colors.grey100};border-color:${colors.grey500};color:${theme.disabled};cursor:not-allowed;}`];
 styles.__hash = "31445346";
 export class Input extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
-
     _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() {
     if (this.props.initialFocus) {
       this.inputRef.current.focus();
     }
   }
-
   createHandlerPayload(e) {
     return {
       value: e.target.value,
       name: this.props.name
     };
   }
-
   render() {
     const {
       role,
@@ -77,7 +69,7 @@ export class Input extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       "data-test": dataTest,
-      className: "jsx-3353877153 " + "jsx-".concat(styles.__hash) + " " + (cx('input', className) || "")
+      className: "jsx-3353877153 " + `jsx-${styles.__hash}` + " " + (cx('input', className) || "")
     }, /*#__PURE__*/React.createElement("input", {
       role: role,
       id: name,
@@ -97,7 +89,7 @@ export class Input extends Component {
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       onKeyDown: this.handleKeyDown,
-      className: "jsx-3353877153 " + "jsx-".concat(styles.__hash) + " " + (cx({
+      className: "jsx-3353877153 " + `jsx-${styles.__hash}` + " " + (cx({
         dense,
         disabled,
         error,
@@ -116,7 +108,6 @@ export class Input extends Component {
       id: "3353877153"
     }, ["input.jsx-3353877153{width:100%;}"]));
   }
-
 }
 Input.defaultProps = {
   type: 'text',
@@ -127,65 +118,45 @@ Input.propTypes = {
   autoComplete: PropTypes.string,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Makes the input smaller */
   dense: PropTypes.bool,
-
   /** Disables the input */
   disabled: PropTypes.bool,
-
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props */
   error: sharedPropTypes.statusPropType,
-
   /** The input grabs initial focus on the page */
   initialFocus: PropTypes.bool,
-
   /** Adds a loading indicator beside the input */
   loading: PropTypes.bool,
-
   /** The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'` */
   max: PropTypes.string,
-
   /** The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'` */
   min: PropTypes.string,
-
   /** Name associated with the input. Passed to event handler callbacks in object */
   name: PropTypes.string,
-
   /** Placeholder text for the input */
   placeholder: PropTypes.string,
-
   /** Makes the input read-only */
   readOnly: PropTypes.bool,
-
   /** Sets a role attribute on the input */
   role: PropTypes.string,
-
   /** The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'` */
   step: PropTypes.string,
   tabIndex: PropTypes.string,
-
   /** The native input `type` attribute */
   type: PropTypes.oneOf(['text', 'number', 'password', 'email', 'url', 'tel', 'date', 'datetime', 'datetime-local', 'month', 'week', 'time', 'search']),
-
   /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object */
   value: PropTypes.string,
-
   /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onBlur: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onChange: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onFocus: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onKeyDown: PropTypes.func
 };

package/build/es/input/{input.stories.js → input.prod.stories.js}

@@ -1,7 +1,19 @@
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { Input } from './index.js';
-const description = "\nAn input allows a user to enter data, usually text.\n\nInputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.\n\nTo use a label and validation text, consider the `InputField` component.\n\nRead more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).\n\n```js\nimport { Input } from '@dhis/ui'\n```\n";
+const description = `
+An input allows a user to enter data, usually text.
+
+Inputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.
+
+To use a label and validation text, consider the \`InputField\` component.
+
+Read more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).
+
+\`\`\`js
+import { Input } from '@dhis/ui'
+\`\`\`
+`;
 const inputTypeArgType = {
   table: {
     type: {
@@ -13,15 +25,13 @@ const inputTypeArgType = {
     options: ['text', 'number', 'password', 'email', 'url', 'tel', 'date', 'datetime', 'datetime-local', 'month', 'week', 'time', 'search']
   }
 };
-
 const logger = _ref => {
   let {
     name,
     value
   } = _ref;
-  return console.log("Name: ".concat(name, ", value: ").concat(value));
+  return console.log(`Name: ${name}, value: ${value}`);
 };
-
 export default {
   title: 'Input',
   component: Input,
@@ -37,19 +47,21 @@ export default {
     onChange: logger
   },
   argTypes: {
-    type: { ...inputTypeArgType
+    type: {
+      ...inputTypeArgType
     },
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(Input, args);
-
 export const Default = Template.bind({});
 export const NoPlaceholderNoValue = Template.bind({});
 NoPlaceholderNoValue.storyName = 'No placeholder, no value';
@@ -72,8 +84,8 @@ NumberMaxMinStep.args = {
 export const Focus = Template.bind({});
 Focus.args = {
   initialFocus: true
-}; // Disabled initial focus stories on docs page
-
+};
+// Disabled initial focus stories on docs page
 Focus.parameters = {
   docs: {
     disable: true