@dhis2-ui/file-input 9.11.0 → 9.11.1-beta.2

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

@@ -1,13 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _fileInput = require("../file-input.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<FileInput />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
@@ -17,13 +13,9 @@ describe('<FileInput />', () => {
       checked: false,
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('button'), {});
-
     expect(onKeyDown).toHaveBeenCalledTimes(1);
-
     const input = _react.screen.getByTestId('dhis2-uicore-fileinput-input');
-
     expect(onKeyDown).toHaveBeenCalledWith({
       name: 'foo',
       files: input.files

package/build/cjs/file-input/features/accepts_multiple_files/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a FileInput with multiple and onChange handler is rendered', () => {
-  cy.visitStory('FileInput', 'With onChange and multiple');
+  cy.visitStory('FileInput', 'With on change and multiple');
 });
 (0, _cypressCucumberPreprocessor.When)('the user selected multiple files', () => {
   cy.get('[data-test="dhis2-uicore-fileinput"] input').uploadMultipleFiles([{

package/build/cjs/file-input/features/can_be_blurred/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an FileInput with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('FileInput', 'With initialFocus and onBlur');
+  cy.visitStory('FileInput', 'With initial focus and on blur');
 });
 (0, _cypressCucumberPreprocessor.When)('the FileInput is blurred', () => {
   cy.focused();

package/build/cjs/file-input/features/can_be_changed/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a FileInput with onChange handler is rendered', () => {
-  cy.visitStory('FileInput', 'With onChange');
+  cy.visitStory('FileInput', 'With on change');
 });
 (0, _cypressCucumberPreprocessor.When)('a file is selected', () => {
   cy.get('[data-test="dhis2-uicore-fileinput"] input').uploadSingleFile('.md', 'FileInput/file.md');

package/build/cjs/file-input/features/can_be_focused/index.js

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

package/build/cjs/file-input/features/common/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('the FileInput does not have any files', () => {
   cy.get('[data-test="dhis2-uicore-fileinput"] input').then($input => {
     const files = $input[0].files;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithOnFocus = exports.WithOnChangeAndMultiple = exports.WithOnChange = exports.WithInitialFocusAndOnBlur = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onBlur = window.Cypress && window.Cypress.cy.stub();
+window.onFocus = window.Cypress && window.Cypress.cy.stub();
+window.onChange = window.Cypress && window.Cypress.cy.stub();
+const onChange = (payload, event) => {
+  // NOTE: if files is not transformed into an array,
+  // cypress will get an empty file list!
+  window.onChange({
+    ...payload,
+    files: [...payload.files]
+  }, event);
+};
+var _default = exports.default = {
+  title: 'FileInput'
+};
+const WithOnChange = () => /*#__PURE__*/_react.default.createElement(_index.FileInput, {
+  onChange: onChange,
+  buttonLabel: "Upload file",
+  name: "upload"
+});
+exports.WithOnChange = WithOnChange;
+const WithOnChangeAndMultiple = () => /*#__PURE__*/_react.default.createElement(_index.FileInput, {
+  name: "upload",
+  onChange: onChange,
+  buttonLabel: "Upload files",
+  multiple: true
+});
+exports.WithOnChangeAndMultiple = WithOnChangeAndMultiple;
+const WithInitialFocusAndOnBlur = () => /*#__PURE__*/_react.default.createElement(_index.FileInput, {
+  buttonLabel: "Upload file",
+  name: "upload",
+  initialFocus: true,
+  onBlur: window.onBlur
+});
+exports.WithInitialFocusAndOnBlur = WithInitialFocusAndOnBlur;
+const WithOnFocus = () => /*#__PURE__*/_react.default.createElement(_index.FileInput, {
+  buttonLabel: "Upload file",
+  name: "upload",
+  onFocus: window.onFocus
+});
+exports.WithOnFocus = WithOnFocus;

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

@@ -4,77 +4,58 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FileInput = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _button = require("@dhis2-ui/button");
-
-var _statusIcon = require("@dhis2-ui/status-icon");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _uiIcons = require("@dhis2/ui-icons");
-
+var _button = require("@dhis2-ui/button");
+var _statusIcon = require("@dhis2-ui/status-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class FileInput extends _react.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
-
     _defineProperty(this, "handleClick", () => {
       this.ref.current.click();
     });
-
     _defineProperty(this, "handleChange", e => {
       if (this.props.onChange) {
         this.props.onChange(this.createHandlerPayload(), e);
-      } // reset the file input so it won't prevent on-change
-      // if the same file was added in a second attempt
-
+      }
 
+      // reset the file input so it won't prevent on-change
+      // if the same file was added in a second attempt
       this.ref.current.value = '';
     });
-
     _defineProperty(this, "handleBlur", e => {
       if (this.props.onBlur) {
         this.props.onBlur(this.createHandlerPayload(), e);
       }
     });
-
     _defineProperty(this, "handleFocus", e => {
       if (this.props.onFocus) {
         this.props.onFocus(this.createHandlerPayload(), e);
       }
     });
-
     _defineProperty(this, "handleKeyDown", e => {
       if (this.props.onKeyDown) {
         this.props.onKeyDown(this.createHandlerPayload(), e);
       }
     });
   }
-
   createHandlerPayload() {
     return {
       files: this.ref.current.files,
       name: this.props.name
     };
   }
-
   render() {
     const {
       accept,
@@ -106,7 +87,7 @@ class FileInput extends _react.Component {
       accept: accept,
       multiple: multiple,
       disabled: disabled,
-      "data-test": "".concat(dataTest, "-input"),
+      "data-test": `${dataTest}-input`,
       className: _style.default.dynamic([["1746996489", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]])
     }), /*#__PURE__*/_react.default.createElement(_button.Button, {
       disabled: disabled,
@@ -129,11 +110,9 @@ 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:".concat(_uiConstants.spacers.dp8, ";padding-bottom:").concat(_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};}`]));
   }
-
 }
-
 exports.FileInput = FileInput;
 FileInput.defaultProps = {
   accept: '*',
@@ -148,39 +127,29 @@ FileInput.propTypes = {
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool,
-
   /** Input status. Mutually exclusive with `warning` and `valid` */
   error: _uiConstants.sharedPropTypes.statusPropType,
   initialFocus: _propTypes.default.bool,
-
   /** Button size. Mutually exclusive with `small` */
   large: _uiConstants.sharedPropTypes.sizePropType,
-
   /**
    * The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
    */
   multiple: _propTypes.default.bool,
   name: _propTypes.default.string,
-
   /** Button size. Mutually exclusive with `large` */
   small: _uiConstants.sharedPropTypes.sizePropType,
   tabIndex: _propTypes.default.string,
-
   /** Input status. Mutually exclusive with `warning` and `error` */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Input status. Mutually exclusive with `valid` and `error` */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Called with signature `(object, event)` */
   onBlur: _propTypes.default.func,
-
   /** Called with signature `(object, event)` */
   onChange: _propTypes.default.func,
-
   /** Called with signature `(object, event)` */
   onFocus: _propTypes.default.func,
-
   /** Called with signature `(object, event)` */
   onKeyDown: _propTypes.default.func
 };

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

@@ -4,35 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Statuses = exports.Sizes = exports.RTL = exports.Multiple = exports.Disabled = exports.Default = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("./index.js");
-
-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); }
-
-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";
-
+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 = `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 onChange = (payload, event) => {
   console.log('onChange payload', payload);
-  console.log('onChange event', event); // NOTE: if files is not transformed into an array,
-  // cypress will get an empty file list!
+  console.log('onChange event', event);
 
-  window.onChange && window.onChange({ ...payload,
+  // NOTE: if files is not transformed into an array,
+  // cypress will get an empty file list!
+  window.onChange && window.onChange({
+    ...payload,
     files: [...payload.files]
   }, event);
 };
-
 const {
   sizeArgType,
   statusArgType
 } = _uiConstants.sharedPropTypes;
-var _default = {
+var _default = exports.default = {
   title: 'File Input',
   component: _index.FileInput,
   // Default args for each story unless overridden
@@ -42,15 +42,20 @@ var _default = {
     onChange
   },
   argTypes: {
-    valid: { ...statusArgType
+    valid: {
+      ...statusArgType
     },
-    warning: { ...statusArgType
+    warning: {
+      ...statusArgType
     },
-    error: { ...statusArgType
+    error: {
+      ...statusArgType
     },
-    small: { ...sizeArgType
+    small: {
+      ...sizeArgType
     },
-    large: { ...sizeArgType
+    large: {
+      ...sizeArgType
     }
   },
   parameters: {
@@ -62,24 +67,17 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.FileInput, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-const Multiple = Template.bind({});
-exports.Multiple = Multiple;
+const Default = exports.Default = Template.bind({});
+const Multiple = exports.Multiple = Template.bind({});
 Multiple.args = {
   multiple: true,
   buttonLabel: 'Upload files'
 };
-const Disabled = Template.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = Template.bind({});
 Disabled.args = {
   disabled: true
 };
-
 const Sizes = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.FileInput, _extends({}, args, {
   buttonLabel: "Default size",
   name: "default"
@@ -92,9 +90,7 @@ const Sizes = args => /*#__PURE__*/_react.default.createElement(_react.default.F
   buttonLabel: "Large",
   name: "large"
 })));
-
 exports.Sizes = Sizes;
-
 const Statuses = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.FileInput, _extends({}, args, {
   buttonLabel: "Default",
   name: "default"
@@ -111,14 +107,11 @@ const Statuses = args => /*#__PURE__*/_react.default.createElement(_react.defaul
   name: "error",
   error: true
 })));
-
 exports.Statuses = Statuses;
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_index.FileInput, _extends({}, args, {
   buttonLabel: "Default",
   name: "default"
 })));
-
 exports.RTL = RTL;

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "FileInput", {
     return _fileInput.FileInput;
   }
 });
-
 var _fileInput = require("./file-input.js");

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

@@ -1,13 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _fileInputField = require("../file-input-field.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<FileInputField />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
@@ -18,13 +14,9 @@ describe('<FileInputField />', () => {
       checked: false,
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('button'), {});
-
     expect(onKeyDown).toHaveBeenCalledTimes(1);
-
     const input = _react.screen.getByTestId('dhis2-uicore-fileinput-input');
-
     expect(onKeyDown).toHaveBeenCalledWith({
       name: 'foo',
       files: input.files

package/build/cjs/file-input-field/features/can_be_required/index.js

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

package/build/cjs/file-input-field/features/has_default_button_label/index.js

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

package/build/cjs/file-input-field/features/has_default_placeholder/index.js

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

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithLabelAndRequired = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _fileInputField = require("./file-input-field.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'FileInputField'
+};
+const WithLabelAndRequired = () => /*#__PURE__*/_react.default.createElement(_fileInputField.FileInputField, {
+  name: "upload",
+  label: "upload something",
+  buttonLabel: "Upload file",
+  required: true
+});
+exports.WithLabelAndRequired = WithLabelAndRequired;
+const Default = () => /*#__PURE__*/_react.default.createElement(_fileInputField.FileInputField, {
+  name: "upload",
+  label: "upload something"
+});
+exports.Default = Default;

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

@@ -4,32 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FileInputField = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _field = require("@dhis2-ui/field");
-
 var _label = require("@dhis2-ui/label");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index.js");
-
-var _index2 = _interopRequireDefault(require("../locales/index.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var _index = require("../file-input/index.js");
+var _index2 = require("../file-list/index.js");
+var _index3 = _interopRequireDefault(require("../locales/index.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // TODO: i18n
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 const FileInputField = _ref => {
   let {
     accept,
@@ -87,74 +77,56 @@ const FileInputField = _ref => {
     tabIndex: tabIndex,
     valid: valid,
     warning: warning
-  }), /*#__PURE__*/_react.default.createElement(_index.FileList, null, children ? children : /*#__PURE__*/_react.default.createElement(_index.FileListPlaceholder, null, translate(placeholder))));
+  }), /*#__PURE__*/_react.default.createElement(_index2.FileList, null, children ? children : /*#__PURE__*/_react.default.createElement(_index2.FileListPlaceholder, null, translate(placeholder))));
 };
-
 exports.FileInputField = FileInputField;
 FileInputField.defaultProps = {
   accept: '*',
   dataTest: 'dhis2-uiwidgets-fileinputfield',
-  buttonLabel: () => _index2.default.t('Upload a file'),
-  placeholder: () => _index2.default.t('No file uploaded yet')
+  buttonLabel: () => _index3.default.t('Upload a file'),
+  placeholder: () => _index3.default.t('No file uploaded yet')
 };
 FileInputField.propTypes = {
   /** The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */
   accept: _propTypes.default.string,
-
   /** Text on the button */
   buttonLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Disables the button */
   disabled: _propTypes.default.bool,
-
   /** Applies 'error' styling to the validation text. Mutually exclusive with `warning` and `valid` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Useful guiding text for the user */
   helpText: _propTypes.default.string,
   initialFocus: _propTypes.default.bool,
-
   /** A descriptive label above the button */
   label: _propTypes.default.string,
-
   /** Size of the button. Mutually exclusive with the `small` prop */
   large: _uiConstants.sharedPropTypes.sizePropType,
-
   /** The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) */
   multiple: _propTypes.default.bool,
-
   /** Name associated with input. Passed to event handler callbacks */
   name: _propTypes.default.string,
-
   /** Placeholder below the button */
   placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-
   /** Adds an asterisk to indicate this field is required */
   required: _propTypes.default.bool,
-
   /** Size of the button. Mutually exclusive with the `large` prop */
   small: _uiConstants.sharedPropTypes.sizePropType,
   tabIndex: _propTypes.default.string,
-
   /** Applies 'valid' styling to the validation text. Mutually exclusive with `warning` and `error` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Text below the button that provides validation feedback */
   validationText: _propTypes.default.string,
-
   /** Applies 'warning' styling to the validation text. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
   onBlur: _propTypes.default.func,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onChange: _propTypes.default.func,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onFocus: _propTypes.default.func,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onKeyDown: _propTypes.default.func
 };