@dhis2-ui/select 9.4.3 → 9.5.0-alpha.1

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 (15) hide show
  1. package/build/cjs/multi-select/input.js +6 -6
  2. package/build/cjs/multi-select-field/features/has_default_clear_text/index.js +0 -3
  3. package/build/cjs/multi-select-field/features/has_default_clear_text.feature +0 -1
  4. package/build/cjs/select/input-clear-button.js +7 -26
  5. package/build/cjs/single-select/input.js +6 -6
  6. package/build/cjs/single-select-field/features/has_default_clear_text/index.js +0 -3
  7. package/build/cjs/single-select-field/features/has_default_clear_text.feature +0 -1
  8. package/build/es/multi-select/input.js +6 -6
  9. package/build/es/multi-select-field/features/has_default_clear_text/index.js +1 -4
  10. package/build/es/multi-select-field/features/has_default_clear_text.feature +0 -1
  11. package/build/es/select/input-clear-button.js +7 -24
  12. package/build/es/single-select/input.js +6 -6
  13. package/build/es/single-select-field/features/has_default_clear_text/index.js +1 -4
  14. package/build/es/single-select-field/features/has_default_clear_text.feature +0 -1
  15. package/package.json +14 -15
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([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
51
+ className: _style.default.dynamic([["1209882888", [_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([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
59
+ className: _style.default.dynamic([["1209882888", [_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([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
66
+ className: _style.default.dynamic([["1209882888", [_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: "64009541",
72
+ id: "1209882888",
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;}"]), /*#__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;margin-inline-end:10px;}"]), /*#__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,9 +5,6 @@ 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
- });
11
8
  (0, _steps.Then)('the clear text is visible', () => {
12
9
  cy.contains('Clear').should('be.visible');
13
10
  });
package/build/cjs/multi-select-field/features/has_default_clear_text.feature CHANGED
@@ -2,5 +2,4 @@ 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
6
5
  Then the clear text is visible
package/build/cjs/select/input-clear-button.js CHANGED
@@ -5,11 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.InputClearButton = void 0;
7
7
 
8
- var _style = _interopRequireDefault(require("styled-jsx/style"));
9
-
10
- var _tooltip = require("@dhis2-ui/tooltip");
11
-
12
- var _uiConstants = require("@dhis2/ui-constants");
8
+ var _button = require("@dhis2-ui/button");
13
9
 
14
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
11
 
@@ -24,29 +20,14 @@ const InputClearButton = _ref => {
24
20
  className,
25
21
  dataTest
26
22
  } = _ref;
27
- return /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
28
- openDelay: 500,
29
- content: clearText
30
- }, /*#__PURE__*/_react.default.createElement("button", {
31
- "data-test": dataTest,
23
+ return /*#__PURE__*/_react.default.createElement(_button.Button, {
24
+ small: true,
25
+ secondary: true,
26
+ dataTest: dataTest,
32
27
  onClick: onClear,
33
28
  type: "button",
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, ";}")])));
29
+ className: className
30
+ }, clearText);
50
31
  };
51
32
 
52
33
  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([["2186325794", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
51
+ className: _style.default.dynamic([["3987817844", [_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([["2186325794", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
59
+ className: _style.default.dynamic([["3987817844", [_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([["2186325794", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
64
+ className: _style.default.dynamic([["3987817844", [_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: "2186325794",
70
+ id: "3987817844",
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;}"]), /*#__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;margin-inline-end:10px;}"]), /*#__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,9 +5,6 @@ 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
- });
11
8
  (0, _steps.Then)('the clear text is visible', () => {
12
9
  cy.contains('Clear').should('be.visible');
13
10
  });
package/build/cjs/single-select-field/features/has_default_clear_text.feature CHANGED
@@ -2,5 +2,4 @@ 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
6
5
  Then the clear text is visible
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([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
35
+ className: _JSXStyle.dynamic([["1209882888", [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([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
43
+ className: _JSXStyle.dynamic([["1209882888", [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([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
50
+ className: _JSXStyle.dynamic([["1209882888", [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: "64009541",
56
+ id: "1209882888",
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;}"]), /*#__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;margin-inline-end:10px;}"]), /*#__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,10 +1,7 @@
1
- import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
1
+ import { Given, 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
- });
8
5
  Then('the clear text is visible', () => {
9
6
  cy.contains('Clear').should('be.visible');
10
7
  });
package/build/es/multi-select-field/features/has_default_clear_text.feature CHANGED
@@ -2,5 +2,4 @@ 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
6
5
  Then the clear text is visible
package/build/es/select/input-clear-button.js CHANGED
@@ -1,6 +1,4 @@
1
- import _JSXStyle from "styled-jsx/style";
2
- import { Tooltip } from '@dhis2-ui/tooltip';
3
- import { colors, theme } from '@dhis2/ui-constants';
1
+ import { Button } from '@dhis2-ui/button';
4
2
  import PropTypes from 'prop-types';
5
3
  import React from 'react';
6
4
 
@@ -11,29 +9,14 @@ const InputClearButton = _ref => {
11
9
  className,
12
10
  dataTest
13
11
  } = _ref;
14
- return /*#__PURE__*/React.createElement(Tooltip, {
15
- openDelay: 500,
16
- content: clearText
17
- }, /*#__PURE__*/React.createElement("button", {
18
- "data-test": dataTest,
12
+ return /*#__PURE__*/React.createElement(Button, {
13
+ small: true,
14
+ secondary: true,
15
+ dataTest: dataTest,
19
16
  onClick: onClear,
20
17
  type: "button",
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, ";}")])));
18
+ className: className
19
+ }, clearText);
37
20
  };
38
21
 
39
22
  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([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
35
+ className: _JSXStyle.dynamic([["3987817844", [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([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
43
+ className: _JSXStyle.dynamic([["3987817844", [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([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
48
+ className: _JSXStyle.dynamic([["3987817844", [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: "2186325794",
54
+ id: "3987817844",
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;}"]), /*#__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;margin-inline-end:10px;}"]), /*#__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,10 +1,7 @@
1
- import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
1
+ import { Given, 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
- });
8
5
  Then('the clear text is visible', () => {
9
6
  cy.contains('Clear').should('be.visible');
10
7
  });
package/build/es/single-select-field/features/has_default_clear_text.feature CHANGED
@@ -2,5 +2,4 @@ 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
6
5
  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.3",
3
+ "version": "9.5.0-alpha.1",
4
4
  "description": "UI Select",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,21 +33,20 @@
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",
48
36
  "@dhis2/prop-types": "^3.1.2",
49
- "@dhis2/ui-constants": "9.4.3",
50
- "@dhis2/ui-icons": "9.4.3",
37
+ "@dhis2-ui/box": "9.5.0-alpha.1",
38
+ "@dhis2-ui/button": "9.5.0-alpha.1",
39
+ "@dhis2-ui/card": "9.5.0-alpha.1",
40
+ "@dhis2-ui/checkbox": "9.5.0-alpha.1",
41
+ "@dhis2-ui/chip": "9.5.0-alpha.1",
42
+ "@dhis2-ui/field": "9.5.0-alpha.1",
43
+ "@dhis2-ui/input": "9.5.0-alpha.1",
44
+ "@dhis2-ui/layer": "9.5.0-alpha.1",
45
+ "@dhis2-ui/loader": "9.5.0-alpha.1",
46
+ "@dhis2-ui/popper": "9.5.0-alpha.1",
47
+ "@dhis2-ui/status-icon": "9.5.0-alpha.1",
48
+ "@dhis2/ui-constants": "9.5.0-alpha.1",
49
+ "@dhis2/ui-icons": "9.5.0-alpha.1",
51
50
  "classnames": "^2.3.1",
52
51
  "prop-types": "^15.7.2"
53
52
  },