@dhis2-ui/file-input 9.5.0-alpha.1 → 9.6.0

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

@@ -1,13 +1,11 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Given)('a FileInput with multiple and onChange handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileInput with multiple and onChange handler is rendered', () => {
   cy.visitStory('FileInput', 'With onChange and multiple');
 });
-(0, _steps.When)('the user selected multiple files', () => {
+(0, _cypressCucumberPreprocessor.When)('the user selected multiple files', () => {
   cy.get('[data-test="dhis2-uicore-fileinput"] input').uploadMultipleFiles([{
     fileType: 'md',
     fixture: 'FileInput/file.md'
@@ -16,7 +14,7 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
     fixture: 'FileInput/file.txt'
   }], true);
 });
-(0, _steps.Then)("the onChange handler's payload contains multiple files", () => {
+(0, _cypressCucumberPreprocessor.Then)("the onChange handler's payload contains multiple files", () => {
   cy.window().should(win => {
     const calls = win.onChange.getCalls();
     const callArgs = calls[0].args;

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

@@ -1,15 +1,15 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('an FileInput with initialFocus and onBlur handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('an FileInput with initialFocus and onBlur handler is rendered', () => {
   cy.visitStory('FileInput', 'With initialFocus and onBlur');
 });
-(0, _steps.When)('the FileInput is blurred', () => {
+(0, _cypressCucumberPreprocessor.When)('the FileInput is blurred', () => {
   cy.focused();
   cy.get('[data-test="dhis2-uicore-fileinput"] button').blur();
 });
-(0, _steps.Then)('the onBlur handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onBlur handler is called', () => {
   cy.window().then(win => {
     cy.get('[data-test="dhis2-uicore-fileinput"] input').should(fileInput => {
       expect(win.onBlur).to.be.calledWith({

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

@@ -1,16 +1,14 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Given)('a FileInput with onChange handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileInput with onChange handler is rendered', () => {
   cy.visitStory('FileInput', 'With onChange');
 });
-(0, _steps.When)('a file is selected', () => {
+(0, _cypressCucumberPreprocessor.When)('a file is selected', () => {
   cy.get('[data-test="dhis2-uicore-fileinput"] input').uploadSingleFile('.md', 'FileInput/file.md');
 });
-(0, _steps.Then)("the onChange handler's payload contains the file", () => {
+(0, _cypressCucumberPreprocessor.Then)("the onChange handler's payload contains the file", () => {
   cy.window().should(win => {
     const calls = win.onChange.getCalls();
     const callArgs = calls[0].args;

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

@@ -1,14 +1,14 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileInput with onFocus handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileInput with onFocus handler is rendered', () => {
   cy.visitStory('FileInput', 'With onFocus');
 });
-(0, _steps.When)('the FileInput is focused', () => {
+(0, _cypressCucumberPreprocessor.When)('the FileInput is focused', () => {
   cy.get('[data-test="dhis2-uicore-fileinput"] button').focus();
 });
-(0, _steps.Then)('the onFocus handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onFocus handler is called', () => {
   cy.window().then(win => {
     cy.get('[data-test="dhis2-uicore-fileinput"] input').should(fileInput => {
       expect(win.onFocus).to.be.calledWith({

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

@@ -1,14 +1,14 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('the FileInput does not have any files', () => {
+(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;
     expect(files).to.have.lengthOf(0);
   });
 });
-(0, _steps.Then)('the onChange handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onChange handler is called', () => {
   cy.window().should(win => {
     const calls = win.onChange.getCalls();
     expect(calls).to.have.lengthOf(1);

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

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileInputField with label and a required flag is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileInputField with label and a required flag is rendered', () => {
   cy.visitStory('FileInputField', 'With label and required');
 });
-(0, _steps.Then)('the required indicator is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the required indicator is visible', () => {
   cy.get('[data-test="dhis2-uicore-label-required"]').should('be.visible');
 });

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

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a default FileInputField is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a default FileInputField is rendered', () => {
   cy.visitStory('FileInputField', 'Default');
 });
-(0, _steps.Then)('the default button label is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the default button label is visible', () => {
   cy.contains('Upload a file').should('be.visible');
 });

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

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a default FileInputField is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a default FileInputField is rendered', () => {
   cy.visitStory('FileInputField', 'Default');
 });
-(0, _steps.Then)('the default placeholder is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the default placeholder is visible', () => {
   cy.contains('No file uploaded yet').should('be.visible');
 });

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

@@ -1,11 +1,11 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileInputFieldWithList with multiple files is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileInputFieldWithList with multiple files is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'Multiple files - with files');
 });
-(0, _steps.Then)('the onChange handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onChange handler is called', () => {
   cy.window().should(win => {
     const calls = win.onChange.getCalls();
     expect(calls).to.have.lengthOf(1);

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

@@ -1,13 +1,11 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Given)('the list contains the file duplicate.md', () => {
+(0, _cypressCucumberPreprocessor.Given)('the list contains the file duplicate.md', () => {
   cy.contains('duplicate.md').should('have.lengthOf', 1).should('have.class', 'label').closest('[data-test="dhis2-uicore-filelistitem"]').should('have.lengthOf', 1);
 });
-(0, _steps.When)('the file duplicate.md is selected', () => {
+(0, _cypressCucumberPreprocessor.When)('the file duplicate.md is selected', () => {
   cy.window().then(win => {
     cy.get('[data-test="dhis2-uicore-fileinput"] input').then($input => {
       // name, lastModified, size and type are equal to the file created in the story
@@ -20,7 +18,7 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
     });
   });
 });
-(0, _steps.Then)("the onChange handler's payload contains a single entry for file.md", () => {
+(0, _cypressCucumberPreprocessor.Then)("the onChange handler's payload contains a single entry for file.md", () => {
   cy.window().should(win => {
     const calls = win.onChange.getCalls();
     const callArgs = calls[0].args;

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

@@ -1,13 +1,13 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileInputFieldWithList without multiple is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileInputFieldWithList without multiple is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'Single file - with file');
 });
-(0, _steps.Given)('the FileInputFieldWithList holds a file', () => {
+(0, _cypressCucumberPreprocessor.Given)('the FileInputFieldWithList holds a file', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem"]').should('have.lengthOf', 1);
 });
-(0, _steps.Then)('the button is disabled', () => {
+(0, _cypressCucumberPreprocessor.Then)('the button is disabled', () => {
   cy.get('[data-test="dhis2-uicore-button"]').should('have.attr', 'disabled');
 });

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

@@ -1,9 +1,7 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Then)('the files are displayed in a list', () => {
+(0, _cypressCucumberPreprocessor.Then)('the files are displayed in a list', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem"] .label').then($labels => $labels.map((_, el) => el.innerHTML).toArray()).should('deep.equal', ['test1.md', 'duplicate.md', 'test2.md']);
 });

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

@@ -1,13 +1,11 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.When)('the remove handle behind a file is clicked', () => {
+(0, _cypressCucumberPreprocessor.When)('the remove handle behind a file is clicked', () => {
   cy.contains('test1.md').siblings('[data-test="dhis2-uicore-filelistitem-remove"]').click();
 });
-(0, _steps.Then)("the onChange handler's payload does not contain an entry for that file", () => {
+(0, _cypressCucumberPreprocessor.Then)("the onChange handler's payload does not contain an entry for that file", () => {
   cy.window().should(win => {
     const calls = win.onChange.getCalls();
     const callArgs = calls[0].args;

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

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a default FileInputFieldWithList is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a default FileInputFieldWithList is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'With default texts');
 });
-(0, _steps.Then)('the default button label is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the default button label is visible', () => {
   cy.contains('Upload a file').should('be.visible');
 });

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

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a default FileInputFieldWithList is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a default FileInputFieldWithList is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'With default texts');
 });
-(0, _steps.Then)('the default placeholder is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the default placeholder is visible', () => {
   cy.contains('No file uploaded yet').should('be.visible');
 });

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

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a default FileInputFieldWithList is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a default FileInputFieldWithList is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'With file and default texts');
 });
-(0, _steps.Then)('the default remove text is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the default remove text is visible', () => {
   cy.contains('Remove').should('be.visible');
 });

package/build/cjs/file-list/features/accepts_cancel_text/index.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a loading FileListItem with onCancel handler and cancelText is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a loading FileListItem with onCancel handler and cancelText is rendered', () => {
   cy.visitStory('FileListItem', 'Loading with onCancel and cancelText');
 });
-(0, _steps.Then)('the cancelText will be visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the cancelText will be visible', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem-cancel"]').contains('Cancel').should('be.visible');
 });

package/build/cjs/file-list/features/accepts_label/index.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileListItem with label is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileListItem with label is rendered', () => {
   cy.visitStory('FileListItem', 'With label');
 });
-(0, _steps.Then)('the label will be visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the label will be visible', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem"]').contains('Label').should('be.visible');
 });

package/build/cjs/file-list/features/accepts_remove_text/index.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileListItem with removeText is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileListItem with removeText is rendered', () => {
   cy.visitStory('FileListItem', 'With removeText');
 });
-(0, _steps.Then)('the removeText will be visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the removeText will be visible', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem-remove"]').contains('Remove').should('be.visible');
 });

package/build/cjs/file-list/features/can_be_removed/index.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileListItem with Onremove handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileListItem with Onremove handler is rendered', () => {
   cy.visitStory('FileListItem', 'With onRemove');
 });
-(0, _steps.When)('the user clicks on the remove text', () => {
+(0, _cypressCucumberPreprocessor.When)('the user clicks on the remove text', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem-remove"]').click();
 });
-(0, _steps.Then)('the onRemove handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onRemove handler is called', () => {
   cy.window().should(win => {
     expect(win.onRemove).to.be.calledWith({});
   });

package/build/cjs/file-list/features/file-list-item-accepts_children/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileList with children is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileList with children is rendered', () => {
   cy.visitStory('FileList', 'With children');
   cy.get('[data-test="dhis2-uicore-filelist"]').should('be.visible');
 });
-(0, _steps.Then)('the children are visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the children are visible', () => {
   cy.contains('I am a child').should('be.visible');
 });

package/build/cjs/file-list/features/file-list-placeholder-accepts_children/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a FileListPlaceholder with children is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a FileListPlaceholder with children is rendered', () => {
   cy.visitStory('FileListPlaceholder', 'With children');
   cy.get('[data-test="dhis2-uicore-filelistplaceholder"]').should('be.visible');
 });
-(0, _steps.Then)('the children are visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the children are visible', () => {
   cy.contains('I am a child').should('be.visible');
 });

package/build/cjs/file-list/features/loading_can_be_cancelled/index.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a loading FileListItem with onCancel handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a loading FileListItem with onCancel handler is rendered', () => {
   cy.visitStory('FileListItem', 'Loading with onCancel');
 });
-(0, _steps.When)('the user clicks on the cancel text', () => {
+(0, _cypressCucumberPreprocessor.When)('the user clicks on the cancel text', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem-cancel"]').click();
 });
-(0, _steps.Then)('the onCancel handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onCancel handler is called', () => {
   cy.window().should(win => {
     expect(win.onCancel).to.be.calledWith({});
   });

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

@@ -32,29 +32,42 @@ const FileListItem = _ref => {
     cancelText,
     dataTest
   } = _ref;
+
+  const handleKeyDown = event => {
+    if (!onRemove) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
+      onRemove({}, event);
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement("p", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)('selected-file', className) || "")
+    className: _style.default.dynamic([["513536609", [_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([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "icon"
+    className: _style.default.dynamic([["513536609", [_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([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "text"
+    className: _style.default.dynamic([["513536609", [_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([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "label"
+    className: _style.default.dynamic([["513536609", [_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([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
+    className: _style.default.dynamic([["513536609", [_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([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    className: _style.default.dynamic([["513536609", [_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: "3865269319",
+    id: "513536609",
     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, ";}"), "span.__jsx-style-dynamic-selector{display:inline-block;}", ".icon.__jsx-style-dynamic-selector{margin-inline-end: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;}")]));
 };

package/build/cjs/locales/lo/translations.json

@@ -1,5 +1,5 @@
 {
-    "Upload a file": "",
-    "No file uploaded yet": "",
+    "Upload a file": "ອັບໂຫຼດເອກະສານ",
+    "No file uploaded yet": "ຍັງບໍ່ມີເອກະສານອັບໂຫຼດເທື່ອ",
     "Remove": "ລົບອອກ"
 }

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileInput with multiple and onChange handler is rendered', () => {
   cy.visitStory('FileInput', 'With onChange and multiple');
 });

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

@@ -1,4 +1,4 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('an FileInput with initialFocus and onBlur handler is rendered', () => {
   cy.visitStory('FileInput', 'With initialFocus and onBlur');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileInput with onChange handler is rendered', () => {
   cy.visitStory('FileInput', 'With onChange');
 });

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

@@ -1,4 +1,4 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileInput with onFocus handler is rendered', () => {
   cy.visitStory('FileInput', 'With onFocus');
 });

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

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 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/es/file-input-field/features/can_be_required/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileInputField with label and a required flag is rendered', () => {
   cy.visitStory('FileInputField', 'With label and required');
 });

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

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a default FileInputField is rendered', () => {
   cy.visitStory('FileInputField', 'Default');
 });

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

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a default FileInputField is rendered', () => {
   cy.visitStory('FileInputField', 'Default');
 });

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

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileInputFieldWithList with multiple files is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'Multiple files - with files');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('the list contains the file duplicate.md', () => {
   cy.contains('duplicate.md').should('have.lengthOf', 1).should('have.class', 'label').closest('[data-test="dhis2-uicore-filelistitem"]').should('have.lengthOf', 1);
 });

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

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileInputFieldWithList without multiple is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'Single file - with file');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Then } from 'cypress-cucumber-preprocessor/steps';
+import { Then } from '@badeball/cypress-cucumber-preprocessor';
 Then('the files are displayed in a list', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem"] .label').then($labels => $labels.map((_, el) => el.innerHTML).toArray()).should('deep.equal', ['test1.md', 'duplicate.md', 'test2.md']);
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor';
 When('the remove handle behind a file is clicked', () => {
   cy.contains('test1.md').siblings('[data-test="dhis2-uicore-filelistitem-remove"]').click();
 });

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

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a default FileInputFieldWithList is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'With default texts');
 });

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

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a default FileInputFieldWithList is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'With default texts');
 });

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

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a default FileInputFieldWithList is rendered', () => {
   cy.visitStory('FileInputFieldWithList', 'With file and default texts');
 });

package/build/es/file-list/features/accepts_cancel_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a loading FileListItem with onCancel handler and cancelText is rendered', () => {
   cy.visitStory('FileListItem', 'Loading with onCancel and cancelText');
 });

package/build/es/file-list/features/accepts_label/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileListItem with label is rendered', () => {
   cy.visitStory('FileListItem', 'With label');
 });

package/build/es/file-list/features/accepts_remove_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileListItem with removeText is rendered', () => {
   cy.visitStory('FileListItem', 'With removeText');
 });

package/build/es/file-list/features/can_be_removed/index.js

@@ -1,4 +1,4 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileListItem with Onremove handler is rendered', () => {
   cy.visitStory('FileListItem', 'With onRemove');
 });

package/build/es/file-list/features/file-list-item-accepts_children/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileList with children is rendered', () => {
   cy.visitStory('FileList', 'With children');
   cy.get('[data-test="dhis2-uicore-filelist"]').should('be.visible');

package/build/es/file-list/features/file-list-placeholder-accepts_children/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileListPlaceholder with children is rendered', () => {
   cy.visitStory('FileListPlaceholder', 'With children');
   cy.get('[data-test="dhis2-uicore-filelistplaceholder"]').should('be.visible');

package/build/es/file-list/features/loading_can_be_cancelled/index.js

@@ -1,4 +1,4 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a loading FileListItem with onCancel handler is rendered', () => {
   cy.visitStory('FileListItem', 'Loading with onCancel');
 });

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

@@ -17,29 +17,42 @@ const FileListItem = _ref => {
     cancelText,
     dataTest
   } = _ref;
+
+  const handleKeyDown = event => {
+    if (!onRemove) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
+      onRemove({}, event);
+    }
+  };
+
   return /*#__PURE__*/React.createElement("p", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + (cx('selected-file', className) || "")
+    className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + (cx('selected-file', className) || "")
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "icon"
+    className: _JSXStyle.dynamic([["513536609", [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([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "text"
+    className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "text"
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "label"
+    className: _JSXStyle.dynamic([["513536609", [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([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
+    className: _JSXStyle.dynamic([["513536609", [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([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
   }, removeText)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3865269319",
+    id: "513536609",
     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, ";}"), "span.__jsx-style-dynamic-selector{display:inline-block;}", ".icon.__jsx-style-dynamic-selector{margin-inline-end: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;}")]));
 };

package/build/es/locales/lo/translations.json

@@ -1,5 +1,5 @@
 {
-    "Upload a file": "",
-    "No file uploaded yet": "",
+    "Upload a file": "ອັບໂຫຼດເອກະສານ",
+    "No file uploaded yet": "ຍັງບໍ່ມີເອກະສານອັບໂຫຼດເທື່ອ",
     "Remove": "ລົບອອກ"
 }

package/package.json

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