@dhis2-ui/file-input 8.2.0 → 8.2.1

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

@@ -30,8 +30,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 
 class FileInput extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
 
@@ -121,7 +121,7 @@ class FileInput extends _react.Component {
     }), /*#__PURE__*/_react.default.createElement(_style.default, {
       id: "1746996489",
       dynamic: [_uiConstants.spacers.dp8, _uiConstants.spacers.dp4]
-    }, ["input.__jsx-style-dynamic-selector{display:none;}", `.file-input.__jsx-style-dynamic-selector{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};padding-bottom:${_uiConstants.spacers.dp4};}`]));
+    }, ["input.__jsx-style-dynamic-selector{display:none;}", ".file-input.__jsx-style-dynamic-selector{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(_uiConstants.spacers.dp8, ";padding-bottom:").concat(_uiConstants.spacers.dp4, ";}")]));
   }
 
 }

package/build/cjs/file-input/file-input.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Statuses = exports.Sizes = exports.Disabled = exports.Multiple = exports.Default = exports.default = void 0;
+exports.default = exports.Statuses = exports.Sizes = exports.Multiple = exports.Disabled = exports.Default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -15,14 +15,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 subtitle = `The file input component allows users to select and upload files from their local machine.`;
-const description = `
-Use a file input component in forms and interfaces wherever a user needs to be able to select and upload a file from their local machine.
-
-\`\`\`js
-import { FileInput } from '@dhis2/ui'
-\`\`\`
-`;
+const subtitle = "The file input component allows users to select and upload files from their local machine.";
+const description = "\nUse a file input component in forms and interfaces wherever a user needs to be able to select and upload a file from their local machine.\n\n```js\nimport { FileInput } from '@dhis2/ui'\n```\n";
 
 const onChange = (payload, event) => {
   console.log('onChange payload', payload);
@@ -39,7 +33,7 @@ const {
   statusArgType
 } = _uiConstants.sharedPropTypes;
 var _default = {
-  title: 'Forms/File Input/File Input',
+  title: 'File Input',
   component: _index.FileInput,
   // Default args for each story unless overridden
   args: {

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

@@ -30,60 +30,63 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const FileInputField = ({
-  accept,
-  buttonLabel,
-  children,
-  className,
-  dataTest,
-  disabled,
-  error,
-  helpText,
-  initialFocus,
-  label,
-  large,
-  multiple,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  placeholder,
-  required,
-  small,
-  tabIndex,
-  valid,
-  validationText,
-  warning
-}) => /*#__PURE__*/_react.default.createElement(_field.Field, {
-  className: className,
-  dataTest: dataTest,
-  helpText: helpText,
-  validationText: validationText,
-  error: error,
-  warning: warning,
-  valid: valid
-}, label && /*#__PURE__*/_react.default.createElement(_label.Label, {
-  required: required,
-  disabled: disabled,
-  htmlFor: name
-}, label), /*#__PURE__*/_react.default.createElement(_index.FileInput, {
-  accept: accept,
-  buttonLabel: translate(buttonLabel),
-  className: className,
-  disabled: disabled,
-  error: error,
-  initialFocus: initialFocus,
-  large: large,
-  multiple: multiple,
-  name: name,
-  onBlur: onBlur,
-  onChange: onChange,
-  onFocus: onFocus,
-  small: small,
-  tabIndex: tabIndex,
-  valid: valid,
-  warning: warning
-}), /*#__PURE__*/_react.default.createElement(_index.FileList, null, children ? children : /*#__PURE__*/_react.default.createElement(_index.FileListPlaceholder, null, translate(placeholder))));
+const FileInputField = _ref => {
+  let {
+    accept,
+    buttonLabel,
+    children,
+    className,
+    dataTest,
+    disabled,
+    error,
+    helpText,
+    initialFocus,
+    label,
+    large,
+    multiple,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    required,
+    small,
+    tabIndex,
+    valid,
+    validationText,
+    warning
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_field.Field, {
+    className: className,
+    dataTest: dataTest,
+    helpText: helpText,
+    validationText: validationText,
+    error: error,
+    warning: warning,
+    valid: valid
+  }, label && /*#__PURE__*/_react.default.createElement(_label.Label, {
+    required: required,
+    disabled: disabled,
+    htmlFor: name
+  }, label), /*#__PURE__*/_react.default.createElement(_index.FileInput, {
+    accept: accept,
+    buttonLabel: translate(buttonLabel),
+    className: className,
+    disabled: disabled,
+    error: error,
+    initialFocus: initialFocus,
+    large: large,
+    multiple: multiple,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    small: small,
+    tabIndex: tabIndex,
+    valid: valid,
+    warning: warning
+  }), /*#__PURE__*/_react.default.createElement(_index.FileList, null, children ? children : /*#__PURE__*/_react.default.createElement(_index.FileListPlaceholder, null, translate(placeholder))));
+};
 
 exports.FileInputField = FileInputField;
 FileInputField.defaultProps = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DefaultButtonLabelAndPlaceholder = exports.DesignSystemStackingOrderEmptyFileList = exports.DesignSystemStackingOrder = exports.HelpText = exports.PlaceholderText = exports.FileList = exports.Statuses = exports.Sizes = exports.Disabled = exports.Multiple = exports.Required = exports.WithLabel = exports.Default = exports.default = void 0;
+exports.default = exports.WithLabel = exports.Statuses = exports.Sizes = exports.Required = exports.PlaceholderText = exports.Multiple = exports.HelpText = exports.FileList = exports.Disabled = exports.DesignSystemStackingOrderEmptyFileList = exports.DesignSystemStackingOrder = exports.DefaultButtonLabelAndPlaceholder = exports.Default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -17,13 +17,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 = `
-The \`FileInputField\` component wraps the \`FileInput\` component in a \`Field\` wrapper to add labels, help text, and validation text.
-
-\`\`\`js
-import { FileInputField, FileListItem } from '@dhis2/ui'
-\`\`\`
-`;
+const description = "\nThe `FileInputField` component wraps the `FileInput` component in a `Field` wrapper to add labels, help text, and validation text.\n\n```js\nimport { FileInputField, FileListItem } from '@dhis2/ui'\n```\n";
 
 const onChange = obj => console.log('onChange', obj);
 
@@ -32,7 +26,7 @@ const onRemove = () => console.log('onRemove');
 const onCancel = () => console.log('onCancel');
 
 var _default = {
-  title: 'Forms/File Input/File Input Field',
+  title: 'File Input Field',
   component: _fileInputField.FileInputField,
   parameters: {
     docs: {

package/build/cjs/file-input-field-with-list/file-input-field-with-list.js

@@ -35,12 +35,13 @@ const translate = (prop, interpolationObject) => {
 };
 
 class FileInputFieldWithList extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
-    _defineProperty(this, "handleChange", ({
-      files: fileList
-    }, event) => {
+    _defineProperty(this, "handleChange", (_ref, event) => {
+      let {
+        files: fileList
+      } = _ref;
       const {
         onChange,
         name
@@ -51,9 +52,10 @@ class FileInputFieldWithList extends _react.Component {
       }, event);
     });
 
-    _defineProperty(this, "handleRemove", ({
-      file: fileToRemove
-    }, event) => {
+    _defineProperty(this, "handleRemove", (_ref2, event) => {
+      let {
+        file: fileToRemove
+      } = _ref2;
       const {
         files,
         onChange,

package/build/cjs/file-input-field-with-list/file-input-field-with-list.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DefaultPlaceholder = exports.DefaultButtonLabelAndRemoveText = exports.Default = exports.default = void 0;
+exports.default = exports.DefaultPlaceholder = exports.DefaultButtonLabelAndRemoveText = exports.Default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -13,23 +13,18 @@ var _fileInputFieldWithList = require("./file-input-field-with-list.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const description = `
-A FileInputField with logic for creating a dynamic list of removable files from an array of \`File\` objects.
+const description = "\nA FileInputField with logic for creating a dynamic list of removable files from an array of `File` objects.\n\n```js\nimport { FileInputFieldWithList } from '@dhis2/ui'\n```\n";
+const files = new Array(10).fill('dummy-file-name').map((name, i) => new File([], "".concat(name, "-").concat(i + 1, ".txt")));
 
-\`\`\`js
-import { FileInputFieldWithList } from '@dhis2/ui'
-\`\`\`
-`;
-const files = new Array(10).fill('dummy-file-name').map((name, i) => new File([], `${name}-${i + 1}.txt`));
-
-const onChange = ({
-  files
-}) => {
+const onChange = _ref => {
+  let {
+    files
+  } = _ref;
   console.log('files: ', files);
 };
 
 var _default = {
-  title: 'Forms/File Input/File Input Field With List',
+  title: 'File Input Field With List',
   component: _fileInputFieldWithList.FileInputFieldWithList,
   parameters: {
     docs: {

package/build/cjs/file-input-field-with-list/file-list-item-with-remove.js

@@ -20,8 +20,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 
 class FileListItemWithRemove extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "handleRemove", event => {
       const {

package/build/cjs/file-list/file-list-item.js

@@ -21,40 +21,43 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FileListItem = ({
-  className,
-  label,
-  onRemove,
-  removeText,
-  loading,
-  onCancel,
-  cancelText,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("p", {
-  "data-test": dataTest,
-  className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)('selected-file', className) || "")
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "icon"
-}, loading ? /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
-  extrasmall: true
-}) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconAttachment16, {
-  color: _uiConstants.colors.grey700
-})), /*#__PURE__*/_react.default.createElement("span", {
-  className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "text"
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "label"
-}, label), loading && onCancel && cancelText && /*#__PURE__*/_react.default.createElement("span", {
-  onClick: event => onCancel({}, event),
-  "data-test": `${dataTest}-cancel`,
-  className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
-}, cancelText), !loading && /*#__PURE__*/_react.default.createElement("span", {
-  onClick: event => onRemove({}, event),
-  "data-test": `${dataTest}-remove`,
-  className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
-}, removeText)), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3793849083",
-  dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]
-}, [`p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:${_uiConstants.spacers.dp4};}`, ".icon.__jsx-style-dynamic-selector{margin-right:4px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:1px;}", ".text.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", `.label.__jsx-style-dynamic-selector{font-size:14px;color:${_uiConstants.colors.grey900};word-break:break-all;}`, ".label.__jsx-style-dynamic-selector::after{content:' ';display:inline-block;width:12px;}", `.action.__jsx-style-dynamic-selector{font-size:12px;line-height:12px;margin-top:0;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:${_uiConstants.colors.grey700};}`, `.action.__jsx-style-dynamic-selector:hover{color:${_uiConstants.colors.red700};}`, `.action.__jsx-style-dynamic-selector:active{color:${_uiConstants.colors.red800};}`, `.action.__jsx-style-dynamic-selector:focus{outline:3px solid ${_uiConstants.theme.focus};outline-offset:2px;}`]));
+const FileListItem = _ref => {
+  let {
+    className,
+    label,
+    onRemove,
+    removeText,
+    loading,
+    onCancel,
+    cancelText,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("p", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)('selected-file', className) || "")
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "icon"
+  }, loading ? /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
+    extrasmall: true
+  }) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconAttachment16, {
+    color: _uiConstants.colors.grey700
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "text"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "label"
+  }, label), loading && onCancel && cancelText && /*#__PURE__*/_react.default.createElement("span", {
+    onClick: event => onCancel({}, event),
+    "data-test": "".concat(dataTest, "-cancel"),
+    className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
+  }, cancelText), !loading && /*#__PURE__*/_react.default.createElement("span", {
+    onClick: event => onRemove({}, event),
+    "data-test": "".concat(dataTest, "-remove"),
+    className: _style.default.dynamic([["3793849083", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
+  }, removeText)), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3793849083",
+    dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]
+  }, ["p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:".concat(_uiConstants.spacers.dp4, ";}"), ".icon.__jsx-style-dynamic-selector{margin-right:4px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:1px;}", ".text.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".label.__jsx-style-dynamic-selector{font-size:14px;color:".concat(_uiConstants.colors.grey900, ";word-break:break-all;}"), ".label.__jsx-style-dynamic-selector::after{content:' ';display:inline-block;width:12px;}", ".action.__jsx-style-dynamic-selector{font-size:12px;line-height:12px;margin-top:0;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:".concat(_uiConstants.colors.grey700, ";}"), ".action.__jsx-style-dynamic-selector:hover{color:".concat(_uiConstants.colors.red700, ";}"), ".action.__jsx-style-dynamic-selector:active{color:".concat(_uiConstants.colors.red800, ";}"), ".action.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:2px;}")]));
+};
 
 exports.FileListItem = FileListItem;
 FileListItem.defaultProps = {

package/build/cjs/file-list/file-list-placeholder.js

@@ -15,16 +15,19 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FileListPlaceholder = ({
-  children,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("p", {
-  "data-test": dataTest,
-  className: _style.default.dynamic([["1287857385", [_uiConstants.spacers.dp4, _uiConstants.colors.grey700]]])
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1287857385",
-  dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey700]
-}, [`p.__jsx-style-dynamic-selector{margin:0;padding-top:${_uiConstants.spacers.dp4};font-size:14px;color:${_uiConstants.colors.grey700};}`]));
+const FileListPlaceholder = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("p", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["1287857385", [_uiConstants.spacers.dp4, _uiConstants.colors.grey700]]])
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1287857385",
+    dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey700]
+  }, ["p.__jsx-style-dynamic-selector{margin:0;padding-top:".concat(_uiConstants.spacers.dp4, ";font-size:14px;color:").concat(_uiConstants.colors.grey700, ";}")]));
+};
 
 exports.FileListPlaceholder = FileListPlaceholder;
 FileListPlaceholder.defaultProps = {

package/build/cjs/file-list/file-list.js

@@ -13,16 +13,19 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FileList = ({
-  children,
-  className,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": dataTest,
-  className: "jsx-2770071620" + " " + (className || "")
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2770071620"
-}, ["div.jsx-2770071620{padding-top:4px;}", ".file-input+div.jsx-2770071620{padding-top:0;}"]));
+const FileList = _ref => {
+  let {
+    children,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: "jsx-2770071620" + " " + (className || "")
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2770071620"
+  }, ["div.jsx-2770071620{padding-top:4px;}", ".file-input+div.jsx-2770071620{padding-top:0;}"]));
+};
 
 exports.FileList = FileList;
 FileList.defaultProps = {

package/build/cjs/index.js

@@ -9,34 +9,34 @@ Object.defineProperty(exports, "FileInput", {
     return _index.FileInput;
   }
 });
-Object.defineProperty(exports, "FileList", {
+Object.defineProperty(exports, "FileInputField", {
   enumerable: true,
   get: function () {
-    return _index2.FileList;
+    return _index3.FileInputField;
   }
 });
-Object.defineProperty(exports, "FileListItem", {
+Object.defineProperty(exports, "FileInputFieldWithList", {
   enumerable: true,
   get: function () {
-    return _index2.FileListItem;
+    return _index4.FileInputFieldWithList;
   }
 });
-Object.defineProperty(exports, "FileListPlaceholder", {
+Object.defineProperty(exports, "FileList", {
   enumerable: true,
   get: function () {
-    return _index2.FileListPlaceholder;
+    return _index2.FileList;
   }
 });
-Object.defineProperty(exports, "FileInputField", {
+Object.defineProperty(exports, "FileListItem", {
   enumerable: true,
   get: function () {
-    return _index3.FileInputField;
+    return _index2.FileListItem;
   }
 });
-Object.defineProperty(exports, "FileInputFieldWithList", {
+Object.defineProperty(exports, "FileListPlaceholder", {
   enumerable: true,
   get: function () {
-    return _index4.FileInputFieldWithList;
+    return _index2.FileListPlaceholder;
   }
 });
 

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

@@ -11,8 +11,8 @@ import PropTypes from 'prop-types';
 import React, { createRef, Component } from 'react';
 
 class FileInput extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "ref", /*#__PURE__*/createRef());
 
@@ -102,7 +102,7 @@ class FileInput extends Component {
     }), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "1746996489",
       dynamic: [spacers.dp8, spacers.dp4]
-    }, ["input.__jsx-style-dynamic-selector{display:none;}", `.file-input.__jsx-style-dynamic-selector{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};padding-bottom:${spacers.dp4};}`]));
+    }, ["input.__jsx-style-dynamic-selector{display:none;}", ".file-input.__jsx-style-dynamic-selector{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, ";padding-bottom:").concat(spacers.dp4, ";}")]));
   }
 
 }

package/build/es/file-input/file-input.stories.js

@@ -3,14 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { FileInput } from './index.js';
-const subtitle = `The file input component allows users to select and upload files from their local machine.`;
-const description = `
-Use a file input component in forms and interfaces wherever a user needs to be able to select and upload a file from their local machine.
-
-\`\`\`js
-import { FileInput } from '@dhis2/ui'
-\`\`\`
-`;
+const subtitle = "The file input component allows users to select and upload files from their local machine.";
+const description = "\nUse a file input component in forms and interfaces wherever a user needs to be able to select and upload a file from their local machine.\n\n```js\nimport { FileInput } from '@dhis2/ui'\n```\n";
 
 const onChange = (payload, event) => {
   console.log('onChange payload', payload);
@@ -27,7 +21,7 @@ const {
   statusArgType
 } = sharedPropTypes;
 export default {
-  title: 'Forms/File Input/File Input',
+  title: 'File Input',
   component: FileInput,
   // Default args for each story unless overridden
   args: {

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

@@ -14,60 +14,63 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const FileInputField = ({
-  accept,
-  buttonLabel,
-  children,
-  className,
-  dataTest,
-  disabled,
-  error,
-  helpText,
-  initialFocus,
-  label,
-  large,
-  multiple,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  placeholder,
-  required,
-  small,
-  tabIndex,
-  valid,
-  validationText,
-  warning
-}) => /*#__PURE__*/React.createElement(Field, {
-  className: className,
-  dataTest: dataTest,
-  helpText: helpText,
-  validationText: validationText,
-  error: error,
-  warning: warning,
-  valid: valid
-}, label && /*#__PURE__*/React.createElement(Label, {
-  required: required,
-  disabled: disabled,
-  htmlFor: name
-}, label), /*#__PURE__*/React.createElement(FileInput, {
-  accept: accept,
-  buttonLabel: translate(buttonLabel),
-  className: className,
-  disabled: disabled,
-  error: error,
-  initialFocus: initialFocus,
-  large: large,
-  multiple: multiple,
-  name: name,
-  onBlur: onBlur,
-  onChange: onChange,
-  onFocus: onFocus,
-  small: small,
-  tabIndex: tabIndex,
-  valid: valid,
-  warning: warning
-}), /*#__PURE__*/React.createElement(FileList, null, children ? children : /*#__PURE__*/React.createElement(FileListPlaceholder, null, translate(placeholder))));
+const FileInputField = _ref => {
+  let {
+    accept,
+    buttonLabel,
+    children,
+    className,
+    dataTest,
+    disabled,
+    error,
+    helpText,
+    initialFocus,
+    label,
+    large,
+    multiple,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    required,
+    small,
+    tabIndex,
+    valid,
+    validationText,
+    warning
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Field, {
+    className: className,
+    dataTest: dataTest,
+    helpText: helpText,
+    validationText: validationText,
+    error: error,
+    warning: warning,
+    valid: valid
+  }, label && /*#__PURE__*/React.createElement(Label, {
+    required: required,
+    disabled: disabled,
+    htmlFor: name
+  }, label), /*#__PURE__*/React.createElement(FileInput, {
+    accept: accept,
+    buttonLabel: translate(buttonLabel),
+    className: className,
+    disabled: disabled,
+    error: error,
+    initialFocus: initialFocus,
+    large: large,
+    multiple: multiple,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    small: small,
+    tabIndex: tabIndex,
+    valid: valid,
+    warning: warning
+  }), /*#__PURE__*/React.createElement(FileList, null, children ? children : /*#__PURE__*/React.createElement(FileListPlaceholder, null, translate(placeholder))));
+};
 
 FileInputField.defaultProps = {
   accept: '*',

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

@@ -4,13 +4,7 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { FileListItem } from '../index.js';
 import { FileInputField } from './file-input-field.js';
-const description = `
-The \`FileInputField\` component wraps the \`FileInput\` component in a \`Field\` wrapper to add labels, help text, and validation text.
-
-\`\`\`js
-import { FileInputField, FileListItem } from '@dhis2/ui'
-\`\`\`
-`;
+const description = "\nThe `FileInputField` component wraps the `FileInput` component in a `Field` wrapper to add labels, help text, and validation text.\n\n```js\nimport { FileInputField, FileListItem } from '@dhis2/ui'\n```\n";
 
 const onChange = obj => console.log('onChange', obj);
 
@@ -19,7 +13,7 @@ const onRemove = () => console.log('onRemove');
 const onCancel = () => console.log('onCancel');
 
 export default {
-  title: 'Forms/File Input/File Input Field',
+  title: 'File Input Field',
   component: FileInputField,
   parameters: {
     docs: {

package/build/es/file-input-field-with-list/file-input-field-with-list.js

@@ -16,12 +16,13 @@ const translate = (prop, interpolationObject) => {
 };
 
 class FileInputFieldWithList extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
-    _defineProperty(this, "handleChange", ({
-      files: fileList
-    }, event) => {
+    _defineProperty(this, "handleChange", (_ref, event) => {
+      let {
+        files: fileList
+      } = _ref;
       const {
         onChange,
         name
@@ -32,9 +33,10 @@ class FileInputFieldWithList extends Component {
       }, event);
     });
 
-    _defineProperty(this, "handleRemove", ({
-      file: fileToRemove
-    }, event) => {
+    _defineProperty(this, "handleRemove", (_ref2, event) => {
+      let {
+        file: fileToRemove
+      } = _ref2;
       const {
         files,
         onChange,

package/build/es/file-input-field-with-list/file-input-field-with-list.stories.js

@@ -1,23 +1,18 @@
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { FileInputFieldWithList } from './file-input-field-with-list.js';
-const description = `
-A FileInputField with logic for creating a dynamic list of removable files from an array of \`File\` objects.
+const description = "\nA FileInputField with logic for creating a dynamic list of removable files from an array of `File` objects.\n\n```js\nimport { FileInputFieldWithList } from '@dhis2/ui'\n```\n";
+const files = new Array(10).fill('dummy-file-name').map((name, i) => new File([], "".concat(name, "-").concat(i + 1, ".txt")));
 
-\`\`\`js
-import { FileInputFieldWithList } from '@dhis2/ui'
-\`\`\`
-`;
-const files = new Array(10).fill('dummy-file-name').map((name, i) => new File([], `${name}-${i + 1}.txt`));
-
-const onChange = ({
-  files
-}) => {
+const onChange = _ref => {
+  let {
+    files
+  } = _ref;
   console.log('files: ', files);
 };
 
 export default {
-  title: 'Forms/File Input/File Input Field With List',
+  title: 'File Input Field With List',
   component: FileInputFieldWithList,
   parameters: {
     docs: {

package/build/es/file-input-field-with-list/file-list-item-with-remove.js

@@ -5,8 +5,8 @@ import React, { Component } from 'react';
 import { FileListItem } from '../index.js';
 
 class FileListItemWithRemove extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "handleRemove", event => {
       const {

package/build/es/file-list/file-list-item.js

@@ -6,40 +6,43 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const FileListItem = ({
-  className,
-  label,
-  onRemove,
-  removeText,
-  loading,
-  onCancel,
-  cancelText,
-  dataTest
-}) => /*#__PURE__*/React.createElement("p", {
-  "data-test": dataTest,
-  className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + (cx('selected-file', className) || "")
-}, /*#__PURE__*/React.createElement("span", {
-  className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "icon"
-}, loading ? /*#__PURE__*/React.createElement(CircularLoader, {
-  extrasmall: true
-}) : /*#__PURE__*/React.createElement(IconAttachment16, {
-  color: colors.grey700
-})), /*#__PURE__*/React.createElement("span", {
-  className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "text"
-}, /*#__PURE__*/React.createElement("span", {
-  className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "label"
-}, label), loading && onCancel && cancelText && /*#__PURE__*/React.createElement("span", {
-  onClick: event => onCancel({}, event),
-  "data-test": `${dataTest}-cancel`,
-  className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
-}, cancelText), !loading && /*#__PURE__*/React.createElement("span", {
-  onClick: event => onRemove({}, event),
-  "data-test": `${dataTest}-remove`,
-  className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
-}, removeText)), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3793849083",
-  dynamic: [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]
-}, [`p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:${spacers.dp4};}`, ".icon.__jsx-style-dynamic-selector{margin-right:4px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:1px;}", ".text.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", `.label.__jsx-style-dynamic-selector{font-size:14px;color:${colors.grey900};word-break:break-all;}`, ".label.__jsx-style-dynamic-selector::after{content:' ';display:inline-block;width:12px;}", `.action.__jsx-style-dynamic-selector{font-size:12px;line-height:12px;margin-top:0;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:${colors.grey700};}`, `.action.__jsx-style-dynamic-selector:hover{color:${colors.red700};}`, `.action.__jsx-style-dynamic-selector:active{color:${colors.red800};}`, `.action.__jsx-style-dynamic-selector:focus{outline:3px solid ${theme.focus};outline-offset:2px;}`]));
+const FileListItem = _ref => {
+  let {
+    className,
+    label,
+    onRemove,
+    removeText,
+    loading,
+    onCancel,
+    cancelText,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("p", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + (cx('selected-file', className) || "")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "icon"
+  }, loading ? /*#__PURE__*/React.createElement(CircularLoader, {
+    extrasmall: true
+  }) : /*#__PURE__*/React.createElement(IconAttachment16, {
+    color: colors.grey700
+  })), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "text"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "label"
+  }, label), loading && onCancel && cancelText && /*#__PURE__*/React.createElement("span", {
+    onClick: event => onCancel({}, event),
+    "data-test": "".concat(dataTest, "-cancel"),
+    className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
+  }, cancelText), !loading && /*#__PURE__*/React.createElement("span", {
+    onClick: event => onRemove({}, event),
+    "data-test": "".concat(dataTest, "-remove"),
+    className: _JSXStyle.dynamic([["3793849083", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
+  }, removeText)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3793849083",
+    dynamic: [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]
+  }, ["p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:".concat(spacers.dp4, ";}"), ".icon.__jsx-style-dynamic-selector{margin-right:4px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:1px;}", ".text.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".label.__jsx-style-dynamic-selector{font-size:14px;color:".concat(colors.grey900, ";word-break:break-all;}"), ".label.__jsx-style-dynamic-selector::after{content:' ';display:inline-block;width:12px;}", ".action.__jsx-style-dynamic-selector{font-size:12px;line-height:12px;margin-top:0;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:".concat(colors.grey700, ";}"), ".action.__jsx-style-dynamic-selector:hover{color:".concat(colors.red700, ";}"), ".action.__jsx-style-dynamic-selector:active{color:".concat(colors.red800, ";}"), ".action.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:2px;}")]));
+};
 
 FileListItem.defaultProps = {
   dataTest: 'dhis2-uicore-filelistitem'

package/build/es/file-list/file-list-placeholder.js

@@ -3,16 +3,19 @@ import { colors, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const FileListPlaceholder = ({
-  children,
-  dataTest
-}) => /*#__PURE__*/React.createElement("p", {
-  "data-test": dataTest,
-  className: _JSXStyle.dynamic([["1287857385", [spacers.dp4, colors.grey700]]])
-}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "1287857385",
-  dynamic: [spacers.dp4, colors.grey700]
-}, [`p.__jsx-style-dynamic-selector{margin:0;padding-top:${spacers.dp4};font-size:14px;color:${colors.grey700};}`]));
+const FileListPlaceholder = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("p", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["1287857385", [spacers.dp4, colors.grey700]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1287857385",
+    dynamic: [spacers.dp4, colors.grey700]
+  }, ["p.__jsx-style-dynamic-selector{margin:0;padding-top:".concat(spacers.dp4, ";font-size:14px;color:").concat(colors.grey700, ";}")]));
+};
 
 FileListPlaceholder.defaultProps = {
   dataTest: 'dhis2-uicore-filelistplaceholder'

package/build/es/file-list/file-list.js

@@ -2,16 +2,19 @@ import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const FileList = ({
-  children,
-  className,
-  dataTest
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-test": dataTest,
-  className: "jsx-2770071620" + " " + (className || "")
-}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2770071620"
-}, ["div.jsx-2770071620{padding-top:4px;}", ".file-input+div.jsx-2770071620{padding-top:0;}"]));
+const FileList = _ref => {
+  let {
+    children,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: "jsx-2770071620" + " " + (className || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2770071620"
+  }, ["div.jsx-2770071620{padding-top:4px;}", ".file-input+div.jsx-2770071620{padding-top:0;}"]));
+};
 
 FileList.defaultProps = {
   dataTest: 'dhis2-uicore-filelist'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/file-input",
-    "version": "8.2.0",
+    "version": "8.2.1",
     "description": "UI FileInput",
     "repository": {
         "type": "git",
@@ -33,13 +33,13 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/button": "8.2.0",
-        "@dhis2-ui/field": "8.2.0",
-        "@dhis2-ui/label": "8.2.0",
-        "@dhis2-ui/loader": "8.2.0",
-        "@dhis2-ui/status-icon": "8.2.0",
-        "@dhis2/ui-constants": "8.2.0",
-        "@dhis2/ui-icons": "8.2.0",
+        "@dhis2-ui/button": "8.2.1",
+        "@dhis2-ui/field": "8.2.1",
+        "@dhis2-ui/label": "8.2.1",
+        "@dhis2-ui/loader": "8.2.1",
+        "@dhis2-ui/status-icon": "8.2.1",
+        "@dhis2/ui-constants": "8.2.1",
+        "@dhis2/ui-icons": "8.2.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },