@dhis2-ui/input 10.0.0-alpha.7 → 10.0.0-alpha.8

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

@@ -13,7 +13,7 @@ describe('<Input>', () => {
       max: '10',
       step: '0.5'
     };
-    const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react2.default.createElement(_input.Input, _extends({
+    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_input.Input, _extends({
       type: "number"
     }, testProps)));
     const inputEl = wrapper.find('input');
@@ -21,7 +21,7 @@ describe('<Input>', () => {
   });
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_input.Input, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_input.Input, {
       name: "foo",
       value: "bar",
       onKeyDown: onKeyDown

package/build/cjs/input/input.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Input = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
+var _uiIcons = require("@dhis2/ui-icons");
 var _statusIcon = require("@dhis2-ui/status-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,8 +18,8 @@ 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); }
-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:${_uiConstants.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:${_uiConstants.colors.grey900};background-color:white;padding:11px 12px;max-height:40px;outline:0;border:1px solid ${_uiConstants.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 ${_uiConstants.theme.focus};border-color:${_uiConstants.theme.focus};}`, `input.jsx-31445346::-webkit-input-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-31445346::-moz-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-31445346:-ms-input-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-31445346::placeholder{color:${_uiConstants.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:${_uiConstants.theme.warning};}`, `input.error.jsx-31445346{border-color:${_uiConstants.theme.error};}`, `input.read-only.jsx-31445346{background-color:${_uiConstants.colors.grey050};border-color:${_uiConstants.colors.grey300};box-shadow:none;cursor:text;}`, `input.disabled.jsx-31445346{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};color:${_uiConstants.theme.disabled};cursor:not-allowed;}`];
-styles.__hash = "31445346";
+const styles = [`.input.jsx-4253951613{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;gap:${_uiConstants.spacers.dp8};}`, `input.jsx-4253951613{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:${_uiConstants.colors.grey900};background-color:white;padding:11px 12px;max-height:40px;outline:0;border:1px solid ${_uiConstants.colors.grey500};border-radius:3px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);text-overflow:ellipsis;}`, "input.dense.jsx-4253951613{max-height:32px;padding:7px 8px;}", `input.jsx-4253951613:focus{outline:none;box-shadow:inset 0 0 0 2px ${_uiConstants.theme.focus};border-color:${_uiConstants.theme.focus};}`, `input.jsx-4253951613::-webkit-input-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-4253951613::-moz-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-4253951613:-ms-input-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-4253951613::placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, "input[type='date'].jsx-4253951613::-webkit-inner-spin-button,input[type='date'].jsx-4253951613::-webkit-calendar-picker-indicator,input[type='time'].jsx-4253951613::-webkit-inner-spin-button,input[type='time'].jsx-4253951613::-webkit-calendar-picker-indicator,input[type='datetime-local'].jsx-4253951613::-webkit-inner-spin-button,input[type='datetime-local'].jsx-4253951613::-webkit-calendar-picker-indicator{height:14px;padding-top:1px;padding-bottom:1px;}", "input[type='date'].jsx-4253951613::-webkit-datetime-edit-fields-wrapper,input[type='datetime-local'].jsx-4253951613::-webkit-datetime-edit-fields-wrapper,input[type='time'].jsx-4253951613::-webkit-datetime-edit-fields-wrapper{padding:0;}", `input.warning.jsx-4253951613{border-color:${_uiConstants.theme.warning};}`, `input.error.jsx-4253951613{border-color:${_uiConstants.theme.error};}`, `input.read-only.jsx-4253951613{background-color:${_uiConstants.colors.grey050};border-color:${_uiConstants.colors.grey300};box-shadow:none;cursor:text;}`, `input.disabled.jsx-4253951613{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};color:${_uiConstants.theme.disabled};cursor:not-allowed;}`];
+styles.__hash = "4253951613";
 class Input extends _react.Component {
   constructor() {
     super(...arguments);
@@ -43,6 +44,14 @@ class Input extends _react.Component {
         this.props.onKeyDown(this.createHandlerPayload(e), e);
       }
     });
+    _defineProperty(this, "handleClear", () => {
+      if (this.props.onChange) {
+        this.props.onChange({
+          value: '',
+          name: this.props.name
+        });
+      }
+    });
   }
   componentDidMount() {
     if (this.props.initialFocus) {
@@ -75,12 +84,21 @@ class Input extends _react.Component {
       min,
       step,
       autoComplete,
-      dataTest = 'dhis2-uicore-input'
+      dataTest = 'dhis2-uicore-input',
+      clearable,
+      prefixIcon,
+      width
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-test": dataTest,
-      className: "jsx-3353877153 " + `jsx-${styles.__hash}` + " " + ((0, _classnames.default)('input', className) || "")
-    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: `jsx-${styles.__hash}` + " " + _style.default.dynamic([["3324859945", [width ? width : `100%`, _uiConstants.colors.grey600, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)('input', className, {
+        'input-prefix-icon': prefixIcon
+      }, {
+        'input-clearable': clearable
+      }) || "")
+    }, prefixIcon && /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${styles.__hash}` + " " + _style.default.dynamic([["3324859945", [width ? width : `100%`, _uiConstants.colors.grey600, _uiConstants.colors.grey500]]]) + " " + "prefix"
+    }, prefixIcon), /*#__PURE__*/_react.default.createElement("input", {
       role: role,
       id: name,
       name: name,
@@ -99,7 +117,7 @@ class Input extends _react.Component {
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       onKeyDown: this.handleKeyDown,
-      className: "jsx-3353877153 " + `jsx-${styles.__hash}` + " " + ((0, _classnames.default)({
+      className: `jsx-${styles.__hash}` + " " + _style.default.dynamic([["3324859945", [width ? width : `100%`, _uiConstants.colors.grey600, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)({
         dense,
         disabled,
         error,
@@ -107,7 +125,13 @@ class Input extends _react.Component {
         warning,
         'read-only': readOnly
       }) || "")
-    }), /*#__PURE__*/_react.default.createElement(_statusIcon.StatusIcon, {
+    }), clearable && value !== null && value !== void 0 && value.length ? /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      onClick: this.handleClear,
+      className: `jsx-${styles.__hash}` + " " + _style.default.dynamic([["3324859945", [width ? width : `100%`, _uiConstants.colors.grey600, _uiConstants.colors.grey500]]]) + " " + "clear-button"
+    }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross16, {
+      color: _uiConstants.colors.white
+    })) : null, /*#__PURE__*/_react.default.createElement(_statusIcon.StatusIcon, {
       error: error,
       valid: valid,
       loading: loading,
@@ -115,8 +139,9 @@ class Input extends _react.Component {
     }), /*#__PURE__*/_react.default.createElement(_style.default, {
       id: styles.__hash
     }, styles), /*#__PURE__*/_react.default.createElement(_style.default, {
-      id: "3353877153"
-    }, ["input.jsx-3353877153{width:100%;}"]));
+      id: "3324859945",
+      dynamic: [width ? width : `100%`, _uiConstants.colors.grey600, _uiConstants.colors.grey500]
+    }, [`.input.__jsx-style-dynamic-selector{width:${width ? width : `100%`};}`, "input.__jsx-style-dynamic-selector{width:100%;}", ".input-prefix-icon.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{padding-inline-start:30px;}", ".input-clearable.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{padding-inline-end:30px;}", `.prefix.__jsx-style-dynamic-selector{position:absolute;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;pointer-events:none;left:10px;padding:0;color:${_uiConstants.colors.grey600};}`, `.clear-button.__jsx-style-dynamic-selector{position:absolute;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;cursor:pointer;height:16px;width:16px;border-radius:50%;right:10px;background:${_uiConstants.colors.grey500};padding:1px;}`]));
   }
 }
 exports.Input = Input;
@@ -128,6 +153,8 @@ Input.propTypes = {
   /** 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,
+  /** Makes the input field clearable */
+  clearable: _propTypes.default.bool,
   dataTest: _propTypes.default.string,
   /** Makes the input smaller */
   dense: _propTypes.default.bool,
@@ -147,6 +174,8 @@ Input.propTypes = {
   name: _propTypes.default.string,
   /** Placeholder text for the input */
   placeholder: _propTypes.default.string,
+  /** Add prefix icon */
+  prefixIcon: _propTypes.default.element,
   /** Makes the input read-only */
   readOnly: _propTypes.default.bool,
   /** Sets a role attribute on the input */
@@ -162,6 +191,8 @@ Input.propTypes = {
   value: _propTypes.default.string,
   /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
+  /** Defines the width of the input. 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)` */

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

@@ -7,7 +7,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 describe('<Input>', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_inputField.InputField, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_inputField.InputField, {
       label: "label",
       name: "foo",
       value: "bar",

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

@@ -44,6 +44,8 @@ class InputField extends _react.default.Component {
       validationText,
       inputWidth,
       autoComplete,
+      clearable,
+      prefixIcon,
       dataTest = 'dhis2-uiwidgets-inputfield'
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(_field.Field, {
@@ -82,7 +84,10 @@ class InputField extends _react.default.Component {
       tabIndex: tabIndex,
       initialFocus: initialFocus,
       readOnly: readOnly,
-      autoComplete: autoComplete
+      autoComplete: autoComplete,
+      clearable: clearable,
+      prefixIcon: prefixIcon,
+      width: inputWidth
     })));
   }
 }
@@ -94,6 +99,8 @@ 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,
+  /** Makes the input field clearable */
+  clearable: _propTypes.default.bool,
   dataTest: _propTypes.default.string,
   /** Makes the input smaller */
   dense: _propTypes.default.bool,
@@ -119,6 +126,8 @@ const InputFieldProps = exports.InputFieldProps = {
   name: _propTypes.default.string,
   /** Placeholder text for the input */
   placeholder: _propTypes.default.string,
+  /** Add prefix icon */
+  prefixIcon: _propTypes.default.element,
   /** Makes the input read-only */
   readOnly: _propTypes.default.bool,
   /** Indicates this input is required */

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

@@ -3,11 +3,13 @@
 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;
+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.InputWithPrefixIcon = exports.InputWidth = exports.Focus = exports.Disabled = exports.Dense = exports.Default = exports.ClearableInput = void 0;
 var _uiConstants = require("@dhis2/ui-constants");
-var _react = _interopRequireDefault(require("react"));
+var _uiIcons = require("@dhis2/ui-icons");
+var _react = _interopRequireWildcard(require("react"));
 var _index = require("./index.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _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 = `
@@ -165,4 +167,30 @@ ValueTextOverflow.args = {
 const Required = exports.Required = Template.bind({});
 Required.args = {
   required: true
-};
+};
+const InputWithPrefixIcon = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.InputField, _extends({}, args, {
+  name: "prefix-icon-input",
+  label: "Search",
+  placeholder: 'Search',
+  prefixIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconSearch16, null)
+})), /*#__PURE__*/_react.default.createElement(_index.InputField, _extends({}, args, {
+  name: "prefix-icon-input",
+  label: "Location",
+  placeholder: 'Enter Location',
+  prefixIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconLocation16, null),
+  inputWidth: '200px'
+})));
+exports.InputWithPrefixIcon = InputWithPrefixIcon;
+const ClearableInput = args => {
+  const [value, setValue] = (0, _react.useState)('value');
+  return /*#__PURE__*/_react.default.createElement(_index.InputField, _extends({}, args, {
+    name: "clearable-input",
+    label: "This field can be cleared",
+    placeholder: '',
+    onChange: e => setValue(e.value),
+    clearable: true,
+    clearText: () => setValue(''),
+    value: value
+  }));
+};
+exports.ClearableInput = ClearableInput;

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

@@ -10,7 +10,7 @@ describe('<Input>', () => {
       max: '10',
       step: '0.5'
     };
-    const wrapper = shallow( /*#__PURE__*/React.createElement(Input, _extends({
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Input, _extends({
       type: "number"
     }, testProps)));
     const inputEl = wrapper.find('input');
@@ -18,7 +18,7 @@ describe('<Input>', () => {
   });
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    render( /*#__PURE__*/React.createElement(Input, {
+    render(/*#__PURE__*/React.createElement(Input, {
       name: "foo",
       value: "bar",
       onKeyDown: onKeyDown

package/build/es/input/input.js

@@ -3,13 +3,14 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 { IconCross16 } from '@dhis2/ui-icons';
 import { StatusIcon } from '@dhis2-ui/status-icon';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { inputTypes } from './inputTypes.js';
-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";
+const styles = [`.input.jsx-4253951613{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;gap:${spacers.dp8};}`, `input.jsx-4253951613{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-4253951613{max-height:32px;padding:7px 8px;}", `input.jsx-4253951613:focus{outline:none;box-shadow:inset 0 0 0 2px ${theme.focus};border-color:${theme.focus};}`, `input.jsx-4253951613::-webkit-input-placeholder{color:${colors.grey600};opacity:1;}`, `input.jsx-4253951613::-moz-placeholder{color:${colors.grey600};opacity:1;}`, `input.jsx-4253951613:-ms-input-placeholder{color:${colors.grey600};opacity:1;}`, `input.jsx-4253951613::placeholder{color:${colors.grey600};opacity:1;}`, "input[type='date'].jsx-4253951613::-webkit-inner-spin-button,input[type='date'].jsx-4253951613::-webkit-calendar-picker-indicator,input[type='time'].jsx-4253951613::-webkit-inner-spin-button,input[type='time'].jsx-4253951613::-webkit-calendar-picker-indicator,input[type='datetime-local'].jsx-4253951613::-webkit-inner-spin-button,input[type='datetime-local'].jsx-4253951613::-webkit-calendar-picker-indicator{height:14px;padding-top:1px;padding-bottom:1px;}", "input[type='date'].jsx-4253951613::-webkit-datetime-edit-fields-wrapper,input[type='datetime-local'].jsx-4253951613::-webkit-datetime-edit-fields-wrapper,input[type='time'].jsx-4253951613::-webkit-datetime-edit-fields-wrapper{padding:0;}", `input.warning.jsx-4253951613{border-color:${theme.warning};}`, `input.error.jsx-4253951613{border-color:${theme.error};}`, `input.read-only.jsx-4253951613{background-color:${colors.grey050};border-color:${colors.grey300};box-shadow:none;cursor:text;}`, `input.disabled.jsx-4253951613{background-color:${colors.grey100};border-color:${colors.grey500};color:${theme.disabled};cursor:not-allowed;}`];
+styles.__hash = "4253951613";
 export class Input extends Component {
   constructor() {
     super(...arguments);
@@ -34,6 +35,14 @@ export class Input extends Component {
         this.props.onKeyDown(this.createHandlerPayload(e), e);
       }
     });
+    _defineProperty(this, "handleClear", () => {
+      if (this.props.onChange) {
+        this.props.onChange({
+          value: '',
+          name: this.props.name
+        });
+      }
+    });
   }
   componentDidMount() {
     if (this.props.initialFocus) {
@@ -66,12 +75,21 @@ export class Input extends Component {
       min,
       step,
       autoComplete,
-      dataTest = 'dhis2-uicore-input'
+      dataTest = 'dhis2-uicore-input',
+      clearable,
+      prefixIcon,
+      width
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       "data-test": dataTest,
-      className: "jsx-3353877153 " + `jsx-${styles.__hash}` + " " + (cx('input', className) || "")
-    }, /*#__PURE__*/React.createElement("input", {
+      className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["3324859945", [width ? width : `100%`, colors.grey600, colors.grey500]]]) + " " + (cx('input', className, {
+        'input-prefix-icon': prefixIcon
+      }, {
+        'input-clearable': clearable
+      }) || "")
+    }, prefixIcon && /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["3324859945", [width ? width : `100%`, colors.grey600, colors.grey500]]]) + " " + "prefix"
+    }, prefixIcon), /*#__PURE__*/React.createElement("input", {
       role: role,
       id: name,
       name: name,
@@ -90,7 +108,7 @@ export class Input extends Component {
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       onKeyDown: this.handleKeyDown,
-      className: "jsx-3353877153 " + `jsx-${styles.__hash}` + " " + (cx({
+      className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["3324859945", [width ? width : `100%`, colors.grey600, colors.grey500]]]) + " " + (cx({
         dense,
         disabled,
         error,
@@ -98,7 +116,13 @@ export class Input extends Component {
         warning,
         'read-only': readOnly
       }) || "")
-    }), /*#__PURE__*/React.createElement(StatusIcon, {
+    }), clearable && value !== null && value !== void 0 && value.length ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: this.handleClear,
+      className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["3324859945", [width ? width : `100%`, colors.grey600, colors.grey500]]]) + " " + "clear-button"
+    }, /*#__PURE__*/React.createElement(IconCross16, {
+      color: colors.white
+    })) : null, /*#__PURE__*/React.createElement(StatusIcon, {
       error: error,
       valid: valid,
       loading: loading,
@@ -106,8 +130,9 @@ export class Input extends Component {
     }), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: styles.__hash
     }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "3353877153"
-    }, ["input.jsx-3353877153{width:100%;}"]));
+      id: "3324859945",
+      dynamic: [width ? width : `100%`, colors.grey600, colors.grey500]
+    }, [`.input.__jsx-style-dynamic-selector{width:${width ? width : `100%`};}`, "input.__jsx-style-dynamic-selector{width:100%;}", ".input-prefix-icon.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{padding-inline-start:30px;}", ".input-clearable.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{padding-inline-end:30px;}", `.prefix.__jsx-style-dynamic-selector{position:absolute;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;pointer-events:none;left:10px;padding:0;color:${colors.grey600};}`, `.clear-button.__jsx-style-dynamic-selector{position:absolute;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;cursor:pointer;height:16px;width:16px;border-radius:50%;right:10px;background:${colors.grey500};padding:1px;}`]));
   }
 }
 _defineProperty(Input, "defaultProps", {
@@ -118,6 +143,8 @@ Input.propTypes = {
   /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
   autoComplete: PropTypes.string,
   className: PropTypes.string,
+  /** Makes the input field clearable */
+  clearable: PropTypes.bool,
   dataTest: PropTypes.string,
   /** Makes the input smaller */
   dense: PropTypes.bool,
@@ -137,6 +164,8 @@ Input.propTypes = {
   name: PropTypes.string,
   /** Placeholder text for the input */
   placeholder: PropTypes.string,
+  /** Add prefix icon */
+  prefixIcon: PropTypes.element,
   /** Makes the input read-only */
   readOnly: PropTypes.bool,
   /** Sets a role attribute on the input */
@@ -152,6 +181,8 @@ Input.propTypes = {
   value: PropTypes.string,
   /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
+  /** Defines the width of the input. Can be any valid CSS measurement */
+  width: PropTypes.string,
   /** Called with signature `({ name: string, value: string }, event)` */
   onBlur: PropTypes.func,
   /** Called with signature `({ name: string, value: string }, event)` */

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

@@ -4,7 +4,7 @@ import { InputField } from '../input-field.js';
 describe('<Input>', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    render( /*#__PURE__*/React.createElement(InputField, {
+    render(/*#__PURE__*/React.createElement(InputField, {
       label: "label",
       name: "foo",
       value: "bar",

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

@@ -37,6 +37,8 @@ class InputField extends React.Component {
       validationText,
       inputWidth,
       autoComplete,
+      clearable,
+      prefixIcon,
       dataTest = 'dhis2-uiwidgets-inputfield'
     } = this.props;
     return /*#__PURE__*/React.createElement(Field, {
@@ -75,7 +77,10 @@ class InputField extends React.Component {
       tabIndex: tabIndex,
       initialFocus: initialFocus,
       readOnly: readOnly,
-      autoComplete: autoComplete
+      autoComplete: autoComplete,
+      clearable: clearable,
+      prefixIcon: prefixIcon,
+      width: inputWidth
     })));
   }
 }
@@ -86,6 +91,8 @@ const InputFieldProps = {
   /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
   autoComplete: PropTypes.string,
   className: PropTypes.string,
+  /** Makes the input field clearable */
+  clearable: PropTypes.bool,
   dataTest: PropTypes.string,
   /** Makes the input smaller */
   dense: PropTypes.bool,
@@ -111,6 +118,8 @@ const InputFieldProps = {
   name: PropTypes.string,
   /** Placeholder text for the input */
   placeholder: PropTypes.string,
+  /** Add prefix icon */
+  prefixIcon: PropTypes.element,
   /** Makes the input read-only */
   readOnly: PropTypes.bool,
   /** Indicates this input is required */

package/build/es/input-field/input-field.prod.stories.js

@@ -1,6 +1,7 @@
 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 { sharedPropTypes } from '@dhis2/ui-constants';
-import React from 'react';
+import { IconLocation16, IconSearch16 } from '@dhis2/ui-icons';
+import React, { useState } from 'react';
 import { InputField } from './index.js';
 const subtitle = 'Allows a user to enter data, usually text';
 const description = `
@@ -157,4 +158,28 @@ ValueTextOverflow.args = {
 export const Required = Template.bind({});
 Required.args = {
   required: true
+};
+export const InputWithPrefixIcon = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputField, _extends({}, args, {
+  name: "prefix-icon-input",
+  label: "Search",
+  placeholder: 'Search',
+  prefixIcon: /*#__PURE__*/React.createElement(IconSearch16, null)
+})), /*#__PURE__*/React.createElement(InputField, _extends({}, args, {
+  name: "prefix-icon-input",
+  label: "Location",
+  placeholder: 'Enter Location',
+  prefixIcon: /*#__PURE__*/React.createElement(IconLocation16, null),
+  inputWidth: '200px'
+})));
+export const ClearableInput = args => {
+  const [value, setValue] = useState('value');
+  return /*#__PURE__*/React.createElement(InputField, _extends({}, args, {
+    name: "clearable-input",
+    label: "This field can be cleared",
+    placeholder: '',
+    onChange: e => setValue(e.value),
+    clearable: true,
+    clearText: () => setValue(''),
+    value: value
+  }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/input",
-    "version": "10.0.0-alpha.7",
+    "version": "10.0.0-alpha.8",
     "description": "UI Input",
     "repository": {
         "type": "git",
@@ -27,19 +27,19 @@
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.13",
-        "react-dom": "^16.13",
+        "react": "^16.13 || ^18",
+        "react-dom": "^16.13 || ^18",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "10.0.0-alpha.7",
-        "@dhis2-ui/field": "10.0.0-alpha.7",
-        "@dhis2-ui/input": "10.0.0-alpha.7",
-        "@dhis2-ui/loader": "10.0.0-alpha.7",
-        "@dhis2-ui/status-icon": "10.0.0-alpha.7",
-        "@dhis2/ui-constants": "10.0.0-alpha.7",
-        "@dhis2/ui-icons": "10.0.0-alpha.7",
+        "@dhis2-ui/box": "10.0.0-alpha.8",
+        "@dhis2-ui/field": "10.0.0-alpha.8",
+        "@dhis2-ui/input": "10.0.0-alpha.8",
+        "@dhis2-ui/loader": "10.0.0-alpha.8",
+        "@dhis2-ui/status-icon": "10.0.0-alpha.8",
+        "@dhis2/ui-constants": "10.0.0-alpha.8",
+        "@dhis2/ui-icons": "10.0.0-alpha.8",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
@@ -48,8 +48,8 @@
         "types"
     ],
     "devDependencies": {
-        "react": "16.13",
-        "react-dom": "16.13",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "styled-jsx": "^4.0.1"
     },
     "types": "types"

package/types/index.d.ts

@@ -41,6 +41,10 @@ export interface InputProps {
      */
     autoComplete?: string
     className?: string
+    /**
+     * Makes the input clearable
+     */
+    clearable?: boolean
     dataTest?: string
     /**
      * Makes the input smaller
@@ -78,6 +82,10 @@ export interface InputProps {
      * Placeholder text for the input
      */
     placeholder?: string
+    /**
+     * Add prefix icon
+     */
+    prefixIcon?: Element
     /**
      * Makes the input read-only
      */
@@ -135,6 +143,10 @@ export interface InputFieldProps {
      */
     autoComplete?: string
     className?: string
+    /**
+     * Makes the input field clearable
+     */
+    clearable?: boolean
     dataTest?: string
     /**
      * Makes the input smaller
@@ -184,6 +196,10 @@ export interface InputFieldProps {
      * Placeholder text for the input
      */
     placeholder?: string
+    /**
+     * Add prefix icon to input
+     */
+    prefixIcon?: Element
     /**
      * Makes the input read-only
      */