@dhis2-ui/file-input 9.4.9 → 9.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/build/cjs/file-list/file-list-item.js +20 -7
  2. package/build/es/file-list/file-list-item.js +20 -7
  3. package/package.json +8 -8
package/build/cjs/file-list/file-list-item.js CHANGED
@@ -32,29 +32,42 @@ const FileListItem = _ref => {
32
32
  cancelText,
33
33
  dataTest
34
34
  } = _ref;
35
+
36
+ const handleKeyDown = event => {
37
+ if (!onRemove) {
38
+ return;
39
+ }
40
+
41
+ if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
42
+ onRemove({}, event);
43
+ }
44
+ };
45
+
35
46
  return /*#__PURE__*/_react.default.createElement("p", {
36
47
  "data-test": dataTest,
37
- 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) || "")
48
+ 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) || "")
38
49
  }, /*#__PURE__*/_react.default.createElement("span", {
39
- className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "icon"
50
+ className: _style.default.dynamic([["513536609", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "icon"
40
51
  }, loading ? /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
41
52
  extrasmall: true
42
53
  }) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconAttachment16, {
43
54
  color: _uiConstants.colors.grey700
44
55
  })), /*#__PURE__*/_react.default.createElement("span", {
45
- className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "text"
56
+ className: _style.default.dynamic([["513536609", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "text"
46
57
  }, /*#__PURE__*/_react.default.createElement("span", {
47
- className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "label"
58
+ className: _style.default.dynamic([["513536609", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "label"
48
59
  }, label), loading && onCancel && cancelText && /*#__PURE__*/_react.default.createElement("span", {
49
60
  onClick: event => onCancel({}, event),
50
61
  "data-test": "".concat(dataTest, "-cancel"),
51
- className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
62
+ className: _style.default.dynamic([["513536609", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
52
63
  }, cancelText), !loading && /*#__PURE__*/_react.default.createElement("span", {
53
64
  onClick: event => onRemove({}, event),
54
65
  "data-test": "".concat(dataTest, "-remove"),
55
- className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
66
+ tabIndex: 0,
67
+ onKeyDown: handleKeyDown,
68
+ className: _style.default.dynamic([["513536609", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
56
69
  }, removeText)), /*#__PURE__*/_react.default.createElement(_style.default, {
57
- id: "3865269319",
70
+ id: "513536609",
58
71
  dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]
59
72
  }, ["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;}")]));
60
73
  };
package/build/es/file-list/file-list-item.js CHANGED
@@ -17,29 +17,42 @@ const FileListItem = _ref => {
17
17
  cancelText,
18
18
  dataTest
19
19
  } = _ref;
20
+
21
+ const handleKeyDown = event => {
22
+ if (!onRemove) {
23
+ return;
24
+ }
25
+
26
+ if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
27
+ onRemove({}, event);
28
+ }
29
+ };
30
+
20
31
  return /*#__PURE__*/React.createElement("p", {
21
32
  "data-test": dataTest,
22
- className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + (cx('selected-file', className) || "")
33
+ className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + (cx('selected-file', className) || "")
23
34
  }, /*#__PURE__*/React.createElement("span", {
24
- className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "icon"
35
+ className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "icon"
25
36
  }, loading ? /*#__PURE__*/React.createElement(CircularLoader, {
26
37
  extrasmall: true
27
38
  }) : /*#__PURE__*/React.createElement(IconAttachment16, {
28
39
  color: colors.grey700
29
40
  })), /*#__PURE__*/React.createElement("span", {
30
- className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "text"
41
+ className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "text"
31
42
  }, /*#__PURE__*/React.createElement("span", {
32
- className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "label"
43
+ className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "label"
33
44
  }, label), loading && onCancel && cancelText && /*#__PURE__*/React.createElement("span", {
34
45
  onClick: event => onCancel({}, event),
35
46
  "data-test": "".concat(dataTest, "-cancel"),
36
- className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
47
+ className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
37
48
  }, cancelText), !loading && /*#__PURE__*/React.createElement("span", {
38
49
  onClick: event => onRemove({}, event),
39
50
  "data-test": "".concat(dataTest, "-remove"),
40
- className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
51
+ tabIndex: 0,
52
+ onKeyDown: handleKeyDown,
53
+ className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
41
54
  }, removeText)), /*#__PURE__*/React.createElement(_JSXStyle, {
42
- id: "3865269319",
55
+ id: "513536609",
43
56
  dynamic: [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]
44
57
  }, ["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;}")]));
45
58
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/file-input",
3
- "version": "9.4.9",
3
+ "version": "9.5.0",
4
4
  "description": "UI FileInput",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,13 +34,13 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@dhis2/prop-types": "^3.1.2",
37
- "@dhis2-ui/button": "9.4.9",
38
- "@dhis2-ui/field": "9.4.9",
39
- "@dhis2-ui/label": "9.4.9",
40
- "@dhis2-ui/loader": "9.4.9",
41
- "@dhis2-ui/status-icon": "9.4.9",
42
- "@dhis2/ui-constants": "9.4.9",
43
- "@dhis2/ui-icons": "9.4.9",
37
+ "@dhis2-ui/button": "9.5.0",
38
+ "@dhis2-ui/field": "9.5.0",
39
+ "@dhis2-ui/label": "9.5.0",
40
+ "@dhis2-ui/loader": "9.5.0",
41
+ "@dhis2-ui/status-icon": "9.5.0",
42
+ "@dhis2/ui-constants": "9.5.0",
43
+ "@dhis2/ui-icons": "9.5.0",
44
44
  "classnames": "^2.3.1",
45
45
  "prop-types": "^15.7.2"
46
46
  },