@dhis2-ui/selector-bar 7.12.1 → 7.14.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 (5) hide show
  1. package/build/cjs/selector-bar/selector-bar.js +9 -1
  2. package/build/cjs/selector-bar-item/selector-bar-item.js +15 -5
  3. package/build/es/selector-bar/selector-bar.js +9 -1
  4. package/build/es/selector-bar-item/selector-bar-item.js +14 -5
  5. package/package.json +11 -11
package/build/cjs/selector-bar/selector-bar.js CHANGED
@@ -44,11 +44,14 @@ ClearSelection.propTypes = {
44
44
  };
45
45
 
46
46
  const SelectorBar = ({
47
+ className,
47
48
  children,
48
49
  onClearSelectionClick,
50
+ dataTest,
49
51
  disableClearSelections,
50
52
  additionalContent
51
53
  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
54
+ "data-test": dataTest,
52
55
  className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400,
53
56
  /*
54
57
  * Specs define the space to be 12px.
@@ -56,7 +59,7 @@ const SelectorBar = ({
56
59
  */
57
60
  '']]]) + " " + ((0, _classnames.default)('container', {
58
61
  withRHSContents: additionalContent
59
- }) || "")
62
+ }, className) || "")
60
63
  }, /*#__PURE__*/_react.default.createElement("div", {
61
64
  className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
62
65
  }, children, onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
@@ -70,9 +73,14 @@ const SelectorBar = ({
70
73
  }, [`.container.__jsx-style-dynamic-selector{background:${_uiConstants.colors.white};box-shadow:inset 0 -1px 0 0 ${_uiConstants.colors.grey400};padding-bottom:1px;}`, ".withRHSContents.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".controls.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:1px;}", `.additional-contents.__jsx-style-dynamic-selector{${''} padding-left:4px;}`])));
71
74
 
72
75
  exports.SelectorBar = SelectorBar;
76
+ SelectorBar.defaultProps = {
77
+ dataTest: 'dhis2-ui-selectorbar'
78
+ };
73
79
  SelectorBar.propTypes = {
74
80
  children: _propTypes.default.any.isRequired,
75
81
  additionalContent: _propTypes.default.any,
82
+ className: _propTypes.default.string,
83
+ dataTest: _propTypes.default.string,
76
84
  disableClearSelections: _propTypes.default.bool,
77
85
  onClearSelectionClick: _propTypes.default.func
78
86
  };
package/build/cjs/selector-bar-item/selector-bar-item.js CHANGED
@@ -17,6 +17,8 @@ var _uiConstants = require("@dhis2/ui-constants");
17
17
 
18
18
  var _uiIcons = require("@dhis2/ui-icons");
19
19
 
20
+ var _classnames = _interopRequireDefault(require("classnames"));
21
+
20
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
21
23
 
22
24
  var _react = _interopRequireWildcard(require("react"));
@@ -45,13 +47,15 @@ const offsetModifier = {
45
47
  */
46
48
 
47
49
  const SelectorBarItem = ({
48
- open,
49
- setOpen,
50
50
  children,
51
+ className,
52
+ dataTest,
51
53
  disabled,
52
54
  label,
53
- value,
54
- noValueMessage
55
+ noValueMessage,
56
+ open,
57
+ setOpen,
58
+ value
55
59
  }) => {
56
60
  const buttonRef = (0, _react.useRef)();
57
61
  const Icon = open ? _uiIcons.IconChevronUp24 : _uiIcons.IconChevronDown24;
@@ -59,12 +63,13 @@ const SelectorBarItem = ({
59
63
  ref: buttonRef,
60
64
  disabled: disabled,
61
65
  onClick: () => setOpen(true),
66
+ "data-test": dataTest,
62
67
  className: _style.default.dynamic([["3065814091", [
63
68
  /*
64
69
  * The arrow icon has ~4px empty space on the sides,
65
70
  * that's why the padding on the right is only 8px.
66
71
  */
67
- '', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "selector-bar-item"
72
+ '', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + ((0, _classnames.default)('selector-bar-item', className) || "")
68
73
  }, /*#__PURE__*/_react.default.createElement("span", {
69
74
  className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "label"
70
75
  }, label), !disabled && /*#__PURE__*/_react.default.createElement("span", {
@@ -89,12 +94,17 @@ const SelectorBarItem = ({
89
94
  };
90
95
 
91
96
  exports.SelectorBarItem = SelectorBarItem;
97
+ SelectorBarItem.defaultProps = {
98
+ dataTest: 'dhis2-ui-selectorbaritem'
99
+ };
92
100
  SelectorBarItem.propTypes = {
93
101
  children: _propTypes.default.any.isRequired,
94
102
  label: _propTypes.default.string.isRequired,
95
103
  noValueMessage: _propTypes.default.string.isRequired,
96
104
  open: _propTypes.default.bool.isRequired,
97
105
  setOpen: _propTypes.default.func.isRequired,
106
+ className: _propTypes.default.string,
107
+ dataTest: _propTypes.default.string,
98
108
  disabled: _propTypes.default.bool,
99
109
  value: _propTypes.default.string
100
110
  };
package/build/es/selector-bar/selector-bar.js CHANGED
@@ -28,11 +28,14 @@ ClearSelection.propTypes = {
28
28
  onClick: PropTypes.func
29
29
  };
30
30
  export const SelectorBar = ({
31
+ className,
31
32
  children,
32
33
  onClearSelectionClick,
34
+ dataTest,
33
35
  disableClearSelections,
34
36
  additionalContent
35
37
  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
38
+ "data-test": dataTest,
36
39
  className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400,
37
40
  /*
38
41
  * Specs define the space to be 12px.
@@ -40,7 +43,7 @@ export const SelectorBar = ({
40
43
  */
41
44
  '']]]) + " " + (cx('container', {
42
45
  withRHSContents: additionalContent
43
- }) || "")
46
+ }, className) || "")
44
47
  }, /*#__PURE__*/React.createElement("div", {
45
48
  className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "controls"
46
49
  }, children, onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
@@ -52,9 +55,14 @@ export const SelectorBar = ({
52
55
  id: "720742913",
53
56
  dynamic: [colors.white, colors.grey400, '']
54
57
  }, [`.container.__jsx-style-dynamic-selector{background:${colors.white};box-shadow:inset 0 -1px 0 0 ${colors.grey400};padding-bottom:1px;}`, ".withRHSContents.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".controls.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:1px;}", `.additional-contents.__jsx-style-dynamic-selector{${''} padding-left:4px;}`])));
58
+ SelectorBar.defaultProps = {
59
+ dataTest: 'dhis2-ui-selectorbar'
60
+ };
55
61
  SelectorBar.propTypes = {
56
62
  children: PropTypes.any.isRequired,
57
63
  additionalContent: PropTypes.any,
64
+ className: PropTypes.string,
65
+ dataTest: PropTypes.string,
58
66
  disableClearSelections: PropTypes.bool,
59
67
  onClearSelectionClick: PropTypes.func
60
68
  };
package/build/es/selector-bar-item/selector-bar-item.js CHANGED
@@ -4,6 +4,7 @@ import { Layer } from '@dhis2-ui/layer';
4
4
  import { Popper } from '@dhis2-ui/popper';
5
5
  import { colors, spacers } from '@dhis2/ui-constants';
6
6
  import { IconChevronUp24, IconChevronDown24 } from '@dhis2/ui-icons';
7
+ import cx from 'classnames';
7
8
  import PropTypes from 'prop-types';
8
9
  import React, { useRef } from 'react';
9
10
  const offsetModifier = {
@@ -24,13 +25,15 @@ const offsetModifier = {
24
25
  */
25
26
 
26
27
  export const SelectorBarItem = ({
27
- open,
28
- setOpen,
29
28
  children,
29
+ className,
30
+ dataTest,
30
31
  disabled,
31
32
  label,
32
- value,
33
- noValueMessage
33
+ noValueMessage,
34
+ open,
35
+ setOpen,
36
+ value
34
37
  }) => {
35
38
  const buttonRef = useRef();
36
39
  const Icon = open ? IconChevronUp24 : IconChevronDown24;
@@ -38,12 +41,13 @@ export const SelectorBarItem = ({
38
41
  ref: buttonRef,
39
42
  disabled: disabled,
40
43
  onClick: () => setOpen(true),
44
+ "data-test": dataTest,
41
45
  className: _JSXStyle.dynamic([["3065814091", [
42
46
  /*
43
47
  * The arrow icon has ~4px empty space on the sides,
44
48
  * that's why the padding on the right is only 8px.
45
49
  */
46
- '', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "selector-bar-item"
50
+ '', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + (cx('selector-bar-item', className) || "")
47
51
  }, /*#__PURE__*/React.createElement("span", {
48
52
  className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "label"
49
53
  }, label), !disabled && /*#__PURE__*/React.createElement("span", {
@@ -66,12 +70,17 @@ export const SelectorBarItem = ({
66
70
  dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]
67
71
  }, [`.selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;${''} padding:0 ${spacers.dp8} 0 ${spacers.dp12};font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ${colors.grey400};}`, ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", `.label.__jsx-style-dynamic-selector{color:${colors.grey600};}`, `.value.__jsx-style-dynamic-selector{padding-left:${spacers.dp8};}`, `.toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:${spacers.dp4};height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`]));
68
72
  };
73
+ SelectorBarItem.defaultProps = {
74
+ dataTest: 'dhis2-ui-selectorbaritem'
75
+ };
69
76
  SelectorBarItem.propTypes = {
70
77
  children: PropTypes.any.isRequired,
71
78
  label: PropTypes.string.isRequired,
72
79
  noValueMessage: PropTypes.string.isRequired,
73
80
  open: PropTypes.bool.isRequired,
74
81
  setOpen: PropTypes.func.isRequired,
82
+ className: PropTypes.string,
83
+ dataTest: PropTypes.string,
75
84
  disabled: PropTypes.bool,
76
85
  value: PropTypes.string
77
86
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/selector-bar",
3
- "version": "7.12.1",
3
+ "version": "7.14.1",
4
4
  "description": "UI Select",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,21 +32,21 @@
32
32
  "styled-jsx": "^4"
33
33
  },
34
34
  "dependencies": {
35
- "@dhis2-ui/button": "7.12.1",
36
- "@dhis2-ui/card": "7.12.1",
37
- "@dhis2-ui/popper": "7.12.1",
38
- "@dhis2-ui/layer": "7.12.1",
39
- "@dhis2/ui-constants": "7.12.1",
40
- "@dhis2/ui-icons": "7.12.1",
35
+ "@dhis2-ui/button": "7.14.1",
36
+ "@dhis2-ui/card": "7.14.1",
37
+ "@dhis2-ui/popper": "7.14.1",
38
+ "@dhis2-ui/layer": "7.14.1",
39
+ "@dhis2/ui-constants": "7.14.1",
40
+ "@dhis2/ui-icons": "7.14.1",
41
41
  "@testing-library/react": "^12.1.2",
42
42
  "classnames": "^2.3.1",
43
43
  "prop-types": "^15.7.2"
44
44
  },
45
45
  "devDependencies": {
46
- "@dhis2-ui/css": "7.12.1",
47
- "@dhis2-ui/menu": "7.12.1",
48
- "@dhis2-ui/organisation-unit-tree": "7.12.1",
49
- "@dhis2-ui/select": "7.12.1",
46
+ "@dhis2-ui/css": "7.14.1",
47
+ "@dhis2-ui/menu": "7.14.1",
48
+ "@dhis2-ui/organisation-unit-tree": "7.14.1",
49
+ "@dhis2-ui/select": "7.14.1",
50
50
  "@dhis2/d2-i18n": "^1.1.0",
51
51
  "@testing-library/jest-dom": "^5.16.1",
52
52
  "react": "16.13",