@dhis2-ui/select 9.4.0 → 9.4.3

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 (17) hide show
  1. package/build/cjs/locales/es_419/translations.json +1 -1
  2. package/build/cjs/multi-select/input.js +6 -6
  3. package/build/cjs/multi-select-field/features/has_default_clear_text/index.js +3 -0
  4. package/build/cjs/multi-select-field/features/has_default_clear_text.feature +1 -0
  5. package/build/cjs/select/input-clear-button.js +26 -7
  6. package/build/cjs/single-select/input.js +6 -6
  7. package/build/cjs/single-select-field/features/has_default_clear_text/index.js +3 -0
  8. package/build/cjs/single-select-field/features/has_default_clear_text.feature +1 -0
  9. package/build/es/locales/es_419/translations.json +1 -1
  10. package/build/es/multi-select/input.js +6 -6
  11. package/build/es/multi-select-field/features/has_default_clear_text/index.js +4 -1
  12. package/build/es/multi-select-field/features/has_default_clear_text.feature +1 -0
  13. package/build/es/select/input-clear-button.js +24 -7
  14. package/build/es/single-select/input.js +6 -6
  15. package/build/es/single-select-field/features/has_default_clear_text/index.js +4 -1
  16. package/build/es/single-select-field/features/has_default_clear_text.feature +1 -0
  17. package/package.json +15 -14
package/build/cjs/locales/es_419/translations.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "Clear": "Limpiar",
3
3
  "No data found": "",
4
- "Type to filter options": "",
4
+ "Type to filter options": "Escriba para filtrar opciones",
5
5
  "Loading options": "",
6
6
  "No options found": ""
7
7
  }
package/build/cjs/multi-select/input.js CHANGED
@@ -39,7 +39,7 @@ const Input = _ref => {
39
39
  } = _ref;
40
40
  const hasSelection = selected.length > 0;
41
41
 
42
- const onClear = (_, e) => {
42
+ const onClear = e => {
43
43
  const data = {
44
44
  selected: []
45
45
  };
@@ -48,7 +48,7 @@ const Input = _ref => {
48
48
  };
49
49
 
50
50
  return /*#__PURE__*/_react.default.createElement("div", {
51
- className: _style.default.dynamic([["1209882888", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
51
+ className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
52
52
  }, /*#__PURE__*/_react.default.createElement(_index.InputPrefix, {
53
53
  prefix: prefix,
54
54
  dataTest: "".concat(dataTest, "-prefix")
@@ -56,22 +56,22 @@ const Input = _ref => {
56
56
  placeholder: placeholder,
57
57
  dataTest: "".concat(dataTest, "-placeholder")
58
58
  }), hasSelection && /*#__PURE__*/_react.default.createElement("div", {
59
- className: _style.default.dynamic([["1209882888", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
59
+ className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
60
60
  }, /*#__PURE__*/_react.default.createElement(_selectionList.SelectionList, {
61
61
  selected: selected,
62
62
  onChange: onChange,
63
63
  options: options,
64
64
  disabled: disabled
65
65
  })), hasSelection && clearable && !disabled && /*#__PURE__*/_react.default.createElement("div", {
66
- className: _style.default.dynamic([["1209882888", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
66
+ className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
67
67
  }, /*#__PURE__*/_react.default.createElement(_index.InputClearButton, {
68
68
  onClear: onClear,
69
69
  clearText: clearText,
70
70
  dataTest: "".concat(dataTest, "-clear")
71
71
  })), /*#__PURE__*/_react.default.createElement(_style.default, {
72
- id: "1209882888",
72
+ id: "64009541",
73
73
  dynamic: [_uiConstants.colors.grey900]
74
- }, [".root.__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;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
74
+ }, [".root.__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;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
75
75
  id: "1331770409",
76
76
  dynamic: [inputMaxHeight]
77
77
  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
package/build/cjs/multi-select-field/features/has_default_clear_text/index.js CHANGED
@@ -5,6 +5,9 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
5
5
  (0, _steps.Given)('a clearable MultiSelectField with selected option is rendered', () => {
6
6
  cy.visitStory('MultiSelectField', 'With clearable and selected option');
7
7
  });
8
+ (0, _steps.When)('the clear button is hovered', () => {
9
+ cy.get('[data-test="dhis2-uicore-multiselect-clear"]').trigger('mouseover', 'top');
10
+ });
8
11
  (0, _steps.Then)('the clear text is visible', () => {
9
12
  cy.contains('Clear').should('be.visible');
10
13
  });
package/build/cjs/multi-select-field/features/has_default_clear_text.feature CHANGED
@@ -2,4 +2,5 @@ Feature: Clear text for the MultiSelectField
2
2
 
3
3
  Scenario: Rendering a clearable MultiSelectField
4
4
  Given a clearable MultiSelectField with selected option is rendered
5
+ When the clear button is hovered
5
6
  Then the clear text is visible
package/build/cjs/select/input-clear-button.js CHANGED
@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.InputClearButton = void 0;
7
7
 
8
- var _button = require("@dhis2-ui/button");
8
+ var _style = _interopRequireDefault(require("styled-jsx/style"));
9
+
10
+ var _tooltip = require("@dhis2-ui/tooltip");
11
+
12
+ var _uiConstants = require("@dhis2/ui-constants");
9
13
 
10
14
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
15
 
@@ -20,14 +24,29 @@ const InputClearButton = _ref => {
20
24
  className,
21
25
  dataTest
22
26
  } = _ref;
23
- return /*#__PURE__*/_react.default.createElement(_button.Button, {
24
- small: true,
25
- secondary: true,
26
- dataTest: dataTest,
27
+ return /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
28
+ openDelay: 500,
29
+ content: clearText
30
+ }, /*#__PURE__*/_react.default.createElement("button", {
31
+ "data-test": dataTest,
27
32
  onClick: onClear,
28
33
  type: "button",
29
- className: className
30
- }, clearText);
34
+ className: _style.default.dynamic([["2606883952", [_uiConstants.colors.grey500, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.theme.focus]]]) + " " + (className || "")
35
+ }, /*#__PURE__*/_react.default.createElement("svg", {
36
+ width: "16",
37
+ height: "16",
38
+ viewBox: "0 0 16 16",
39
+ fill: "none",
40
+ xmlns: "http://www.w3.org/2000/svg",
41
+ className: _style.default.dynamic([["2606883952", [_uiConstants.colors.grey500, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.theme.focus]]])
42
+ }, /*#__PURE__*/_react.default.createElement("path", {
43
+ d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z",
44
+ fill: "none",
45
+ className: _style.default.dynamic([["2606883952", [_uiConstants.colors.grey500, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.theme.focus]]])
46
+ })), /*#__PURE__*/_react.default.createElement(_style.default, {
47
+ id: "2606883952",
48
+ dynamic: [_uiConstants.colors.grey500, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.theme.focus]
49
+ }, ["button.__jsx-style-dynamic-selector{background:none;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;height:24px;width:24px;border-radius:3px;}", "button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey500, ";}"), "button.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey800, ";}"), "button.__jsx-style-dynamic-selector:hover{background:".concat(_uiConstants.colors.grey200, ";}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid ".concat(_uiConstants.theme.focus, ";}")])));
31
50
  };
32
51
 
33
52
  exports.InputClearButton = InputClearButton;
package/build/cjs/single-select/input.js CHANGED
@@ -39,7 +39,7 @@ const Input = _ref => {
39
39
  } = _ref;
40
40
  const hasSelection = selected && typeof selected === 'string';
41
41
 
42
- const onClear = (_, e) => {
42
+ const onClear = e => {
43
43
  const data = {
44
44
  selected: ''
45
45
  };
@@ -48,7 +48,7 @@ const Input = _ref => {
48
48
  };
49
49
 
50
50
  return /*#__PURE__*/_react.default.createElement("div", {
51
- className: _style.default.dynamic([["3987817844", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
51
+ className: _style.default.dynamic([["2186325794", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
52
52
  }, /*#__PURE__*/_react.default.createElement(_index.InputPrefix, {
53
53
  prefix: prefix,
54
54
  dataTest: "".concat(dataTest, "-prefix")
@@ -56,20 +56,20 @@ const Input = _ref => {
56
56
  placeholder: placeholder,
57
57
  dataTest: "".concat(dataTest, "-placeholder")
58
58
  }), hasSelection && /*#__PURE__*/_react.default.createElement("div", {
59
- className: _style.default.dynamic([["3987817844", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
59
+ className: _style.default.dynamic([["2186325794", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
60
60
  }, /*#__PURE__*/_react.default.createElement(_selection.Selection, {
61
61
  selected: selected,
62
62
  options: options
63
63
  })), hasSelection && clearable && !disabled && /*#__PURE__*/_react.default.createElement("div", {
64
- className: _style.default.dynamic([["3987817844", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
64
+ className: _style.default.dynamic([["2186325794", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
65
65
  }, /*#__PURE__*/_react.default.createElement(_index.InputClearButton, {
66
66
  onClear: onClear,
67
67
  clearText: clearText,
68
68
  dataTest: "".concat(dataTest, "-clear")
69
69
  })), /*#__PURE__*/_react.default.createElement(_style.default, {
70
- id: "3987817844",
70
+ id: "2186325794",
71
71
  dynamic: [_uiConstants.colors.grey900]
72
- }, [".root.__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;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
72
+ }, [".root.__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;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
73
73
  id: "1331770409",
74
74
  dynamic: [inputMaxHeight]
75
75
  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
package/build/cjs/single-select-field/features/has_default_clear_text/index.js CHANGED
@@ -5,6 +5,9 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
5
5
  (0, _steps.Given)('a clearable SingleSelectField with selected option is rendered', () => {
6
6
  cy.visitStory('SingleSelectField', 'With clearable and selected option');
7
7
  });
8
+ (0, _steps.When)('the clear button is hovered', () => {
9
+ cy.get('[data-test="dhis2-uicore-singleselect-clear"]').trigger('mouseover', 'top');
10
+ });
8
11
  (0, _steps.Then)('the clear text is visible', () => {
9
12
  cy.contains('Clear').should('be.visible');
10
13
  });
package/build/cjs/single-select-field/features/has_default_clear_text.feature CHANGED
@@ -2,4 +2,5 @@ Feature: Clear text for the SingleSelectField
2
2
 
3
3
  Scenario: Rendering a clearable SingleSelectField
4
4
  Given a clearable SingleSelectField with selected option is rendered
5
+ When the clear button is hovered
5
6
  Then the clear text is visible
package/build/es/locales/es_419/translations.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "Clear": "Limpiar",
3
3
  "No data found": "",
4
- "Type to filter options": "",
4
+ "Type to filter options": "Escriba para filtrar opciones",
5
5
  "Loading options": "",
6
6
  "No options found": ""
7
7
  }
package/build/es/multi-select/input.js CHANGED
@@ -23,7 +23,7 @@ const Input = _ref => {
23
23
  } = _ref;
24
24
  const hasSelection = selected.length > 0;
25
25
 
26
- const onClear = (_, e) => {
26
+ const onClear = e => {
27
27
  const data = {
28
28
  selected: []
29
29
  };
@@ -32,7 +32,7 @@ const Input = _ref => {
32
32
  };
33
33
 
34
34
  return /*#__PURE__*/React.createElement("div", {
35
- className: _JSXStyle.dynamic([["1209882888", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
35
+ className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
36
36
  }, /*#__PURE__*/React.createElement(InputPrefix, {
37
37
  prefix: prefix,
38
38
  dataTest: "".concat(dataTest, "-prefix")
@@ -40,22 +40,22 @@ const Input = _ref => {
40
40
  placeholder: placeholder,
41
41
  dataTest: "".concat(dataTest, "-placeholder")
42
42
  }), hasSelection && /*#__PURE__*/React.createElement("div", {
43
- className: _JSXStyle.dynamic([["1209882888", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
43
+ className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
44
44
  }, /*#__PURE__*/React.createElement(SelectionList, {
45
45
  selected: selected,
46
46
  onChange: onChange,
47
47
  options: options,
48
48
  disabled: disabled
49
49
  })), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
50
- className: _JSXStyle.dynamic([["1209882888", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
50
+ className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
51
51
  }, /*#__PURE__*/React.createElement(InputClearButton, {
52
52
  onClear: onClear,
53
53
  clearText: clearText,
54
54
  dataTest: "".concat(dataTest, "-clear")
55
55
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
56
- id: "1209882888",
56
+ id: "64009541",
57
57
  dynamic: [colors.grey900]
58
- }, [".root.__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;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
58
+ }, [".root.__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;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
59
59
  id: "1331770409",
60
60
  dynamic: [inputMaxHeight]
61
61
  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
package/build/es/multi-select-field/features/has_default_clear_text/index.js CHANGED
@@ -1,7 +1,10 @@
1
- import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
1
+ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
2
2
  Given('a clearable MultiSelectField with selected option is rendered', () => {
3
3
  cy.visitStory('MultiSelectField', 'With clearable and selected option');
4
4
  });
5
+ When('the clear button is hovered', () => {
6
+ cy.get('[data-test="dhis2-uicore-multiselect-clear"]').trigger('mouseover', 'top');
7
+ });
5
8
  Then('the clear text is visible', () => {
6
9
  cy.contains('Clear').should('be.visible');
7
10
  });
package/build/es/multi-select-field/features/has_default_clear_text.feature CHANGED
@@ -2,4 +2,5 @@ Feature: Clear text for the MultiSelectField
2
2
 
3
3
  Scenario: Rendering a clearable MultiSelectField
4
4
  Given a clearable MultiSelectField with selected option is rendered
5
+ When the clear button is hovered
5
6
  Then the clear text is visible
package/build/es/select/input-clear-button.js CHANGED
@@ -1,4 +1,6 @@
1
- import { Button } from '@dhis2-ui/button';
1
+ import _JSXStyle from "styled-jsx/style";
2
+ import { Tooltip } from '@dhis2-ui/tooltip';
3
+ import { colors, theme } from '@dhis2/ui-constants';
2
4
  import PropTypes from 'prop-types';
3
5
  import React from 'react';
4
6
 
@@ -9,14 +11,29 @@ const InputClearButton = _ref => {
9
11
  className,
10
12
  dataTest
11
13
  } = _ref;
12
- return /*#__PURE__*/React.createElement(Button, {
13
- small: true,
14
- secondary: true,
15
- dataTest: dataTest,
14
+ return /*#__PURE__*/React.createElement(Tooltip, {
15
+ openDelay: 500,
16
+ content: clearText
17
+ }, /*#__PURE__*/React.createElement("button", {
18
+ "data-test": dataTest,
16
19
  onClick: onClear,
17
20
  type: "button",
18
- className: className
19
- }, clearText);
21
+ className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]]) + " " + (className || "")
22
+ }, /*#__PURE__*/React.createElement("svg", {
23
+ width: "16",
24
+ height: "16",
25
+ viewBox: "0 0 16 16",
26
+ fill: "none",
27
+ xmlns: "http://www.w3.org/2000/svg",
28
+ className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
29
+ }, /*#__PURE__*/React.createElement("path", {
30
+ d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z",
31
+ fill: "none",
32
+ className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
33
+ })), /*#__PURE__*/React.createElement(_JSXStyle, {
34
+ id: "2606883952",
35
+ dynamic: [colors.grey500, colors.grey800, colors.grey200, theme.focus]
36
+ }, ["button.__jsx-style-dynamic-selector{background:none;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;height:24px;width:24px;border-radius:3px;}", "button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), "button.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey800, ";}"), "button.__jsx-style-dynamic-selector:hover{background:".concat(colors.grey200, ";}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid ".concat(theme.focus, ";}")])));
20
37
  };
21
38
 
22
39
  InputClearButton.propTypes = {
package/build/es/single-select/input.js CHANGED
@@ -23,7 +23,7 @@ const Input = _ref => {
23
23
  } = _ref;
24
24
  const hasSelection = selected && typeof selected === 'string';
25
25
 
26
- const onClear = (_, e) => {
26
+ const onClear = e => {
27
27
  const data = {
28
28
  selected: ''
29
29
  };
@@ -32,7 +32,7 @@ const Input = _ref => {
32
32
  };
33
33
 
34
34
  return /*#__PURE__*/React.createElement("div", {
35
- className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
35
+ className: _JSXStyle.dynamic([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
36
36
  }, /*#__PURE__*/React.createElement(InputPrefix, {
37
37
  prefix: prefix,
38
38
  dataTest: "".concat(dataTest, "-prefix")
@@ -40,20 +40,20 @@ const Input = _ref => {
40
40
  placeholder: placeholder,
41
41
  dataTest: "".concat(dataTest, "-placeholder")
42
42
  }), hasSelection && /*#__PURE__*/React.createElement("div", {
43
- className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
43
+ className: _JSXStyle.dynamic([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
44
44
  }, /*#__PURE__*/React.createElement(Selection, {
45
45
  selected: selected,
46
46
  options: options
47
47
  })), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
48
- className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
48
+ className: _JSXStyle.dynamic([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
49
49
  }, /*#__PURE__*/React.createElement(InputClearButton, {
50
50
  onClear: onClear,
51
51
  clearText: clearText,
52
52
  dataTest: "".concat(dataTest, "-clear")
53
53
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
54
- id: "3987817844",
54
+ id: "2186325794",
55
55
  dynamic: [colors.grey900]
56
- }, [".root.__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;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
56
+ }, [".root.__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;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
57
57
  id: "1331770409",
58
58
  dynamic: [inputMaxHeight]
59
59
  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
package/build/es/single-select-field/features/has_default_clear_text/index.js CHANGED
@@ -1,7 +1,10 @@
1
- import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
1
+ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
2
2
  Given('a clearable SingleSelectField with selected option is rendered', () => {
3
3
  cy.visitStory('SingleSelectField', 'With clearable and selected option');
4
4
  });
5
+ When('the clear button is hovered', () => {
6
+ cy.get('[data-test="dhis2-uicore-singleselect-clear"]').trigger('mouseover', 'top');
7
+ });
5
8
  Then('the clear text is visible', () => {
6
9
  cy.contains('Clear').should('be.visible');
7
10
  });
package/build/es/single-select-field/features/has_default_clear_text.feature CHANGED
@@ -2,4 +2,5 @@ Feature: Clear text for the SingleSelectField
2
2
 
3
3
  Scenario: Rendering a clearable SingleSelectField
4
4
  Given a clearable SingleSelectField with selected option is rendered
5
+ When the clear button is hovered
5
6
  Then the clear text is visible
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/select",
3
- "version": "9.4.0",
3
+ "version": "9.4.3",
4
4
  "description": "UI Select",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,20 +33,21 @@
33
33
  "styled-jsx": "^4"
34
34
  },
35
35
  "dependencies": {
36
+ "@dhis2-ui/box": "9.4.3",
37
+ "@dhis2-ui/button": "9.4.3",
38
+ "@dhis2-ui/card": "9.4.3",
39
+ "@dhis2-ui/checkbox": "9.4.3",
40
+ "@dhis2-ui/chip": "9.4.3",
41
+ "@dhis2-ui/field": "9.4.3",
42
+ "@dhis2-ui/input": "9.4.3",
43
+ "@dhis2-ui/layer": "9.4.3",
44
+ "@dhis2-ui/loader": "9.4.3",
45
+ "@dhis2-ui/popper": "9.4.3",
46
+ "@dhis2-ui/status-icon": "9.4.3",
47
+ "@dhis2-ui/tooltip": "9.4.3",
36
48
  "@dhis2/prop-types": "^3.1.2",
37
- "@dhis2-ui/box": "9.4.0",
38
- "@dhis2-ui/button": "9.4.0",
39
- "@dhis2-ui/card": "9.4.0",
40
- "@dhis2-ui/checkbox": "9.4.0",
41
- "@dhis2-ui/chip": "9.4.0",
42
- "@dhis2-ui/field": "9.4.0",
43
- "@dhis2-ui/input": "9.4.0",
44
- "@dhis2-ui/layer": "9.4.0",
45
- "@dhis2-ui/loader": "9.4.0",
46
- "@dhis2-ui/popper": "9.4.0",
47
- "@dhis2-ui/status-icon": "9.4.0",
48
- "@dhis2/ui-constants": "9.4.0",
49
- "@dhis2/ui-icons": "9.4.0",
49
+ "@dhis2/ui-constants": "9.4.3",
50
+ "@dhis2/ui-icons": "9.4.3",
50
51
  "classnames": "^2.3.1",
51
52
  "prop-types": "^15.7.2"
52
53
  },