@dhis2-ui/selector-bar 9.9.1 → 9.10.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 +29 -14
  2. package/build/cjs/selector-bar-item/selector-bar-item.js +12 -19
  3. package/build/es/selector-bar/selector-bar.js +30 -15
  4. package/build/es/selector-bar-item/selector-bar-item.js +12 -19
  5. package/package.json +11 -11
package/build/cjs/selector-bar/selector-bar.js CHANGED
@@ -58,21 +58,38 @@ const SelectorBar = _ref2 => {
58
58
  additionalContent,
59
59
  ariaLabel
60
60
  } = _ref2;
61
- const chipContainer = (0, _react.useRef)(null);
62
- const childrenRefs = (0, _react.useMemo)(() => _react.default.Children.map(children, () => /*#__PURE__*/_react.default.createRef()), [children]);
61
+ const container = (0, _react.useRef)(null);
62
+ const [childrenToFocus, setChildrenToFocus] = (0, _react.useState)([]);
63
+ (0, _react.useEffect)(() => {
64
+ if (container.current) {
65
+ const controlsDiv = container.current.querySelector('.controls');
66
+
67
+ if (controlsDiv) {
68
+ const childElements = Array.from(controlsDiv.children);
69
+ childElements.forEach(child => {
70
+ child.tabIndex = -1;
71
+ });
72
+ setChildrenToFocus(childElements);
73
+ }
74
+ }
75
+ }, [children]);
63
76
 
64
77
  const handleKeyDown = event => {
65
78
  const currentFocus = document.activeElement;
66
79
 
67
- if (chipContainer.current && chipContainer.current === currentFocus) {
68
- if (childrenRefs.length > 0 && childrenRefs[0].current) {
69
- childrenRefs[0].current.focus();
80
+ if (container.current && container.current === currentFocus) {
81
+ if (childrenToFocus.length > 0 && childrenToFocus[0]) {
82
+ childrenToFocus[0].focus();
70
83
  }
71
84
 
72
85
  return;
73
86
  }
74
87
 
75
- const currentIndex = childrenRefs.findIndex(ref => ref.current === currentFocus);
88
+ if (!childrenToFocus.length) {
89
+ return;
90
+ }
91
+
92
+ const currentIndex = childrenToFocus.findIndex(element => element === currentFocus);
76
93
 
77
94
  if (currentIndex === -1) {
78
95
  return;
@@ -80,14 +97,14 @@ const SelectorBar = _ref2 => {
80
97
 
81
98
  if (event.key === 'ArrowRight') {
82
99
  event.preventDefault();
83
- const nextIndex = (currentIndex + 1) % childrenRefs.length;
84
- childrenRefs[nextIndex].current.focus();
100
+ const nextIndex = (currentIndex + 1) % childrenToFocus.length;
101
+ childrenToFocus[nextIndex].focus();
85
102
  }
86
103
 
87
104
  if (event.key === 'ArrowLeft') {
88
105
  event.preventDefault();
89
- const prevIndex = (currentIndex - 1 + childrenRefs.length) % childrenRefs.length;
90
- childrenRefs[prevIndex].current.focus();
106
+ const prevIndex = (currentIndex - 1 + childrenToFocus.length) % childrenToFocus.length;
107
+ childrenToFocus[prevIndex].focus();
91
108
  }
92
109
  };
93
110
 
@@ -95,7 +112,7 @@ const SelectorBar = _ref2 => {
95
112
  "data-test": dataTest,
96
113
  onKeyDown: handleKeyDown,
97
114
  tabIndex: 0,
98
- ref: chipContainer,
115
+ ref: container,
99
116
  role: "toolbar",
100
117
  "aria-label": ariaLabel,
101
118
  className: _style.default.dynamic([["2030607490", [_uiConstants.colors.white, _uiConstants.colors.grey400,
@@ -108,9 +125,7 @@ const SelectorBar = _ref2 => {
108
125
  }, className) || "")
109
126
  }, /*#__PURE__*/_react.default.createElement("div", {
110
127
  className: _style.default.dynamic([["2030607490", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
111
- }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
112
- ref: childrenRefs[index]
113
- })), onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
128
+ }, children, onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
114
129
  disabled: disableClearSelections,
115
130
  onClick: onClearSelectionClick
116
131
  })), additionalContent && /*#__PURE__*/_react.default.createElement("div", {
package/build/cjs/selector-bar-item/selector-bar-item.js CHANGED
@@ -46,7 +46,7 @@ const offsetModifier = {
46
46
  * inside this component
47
47
  */
48
48
 
49
- const SelectorBarItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
49
+ const SelectorBarItem = _ref => {
50
50
  let {
51
51
  children,
52
52
  className,
@@ -60,50 +60,44 @@ const SelectorBarItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
60
60
  value,
61
61
  onClearSelectionClick
62
62
  } = _ref;
63
- let buttonRef = (0, _react.useRef)();
64
-
65
- if (ref) {
66
- buttonRef = ref;
67
- }
68
-
63
+ const buttonRef = (0, _react.useRef)();
69
64
  const Icon = open ? _uiIcons.IconChevronUp24 : _uiIcons.IconChevronDown24;
70
65
  return /*#__PURE__*/_react.default.createElement("button", {
71
66
  ref: buttonRef,
72
67
  disabled: disabled,
73
68
  onClick: () => setOpen && setOpen(true),
74
69
  "data-test": dataTest,
75
- tabIndex: -1,
76
- className: _style.default.dynamic([["2616571335", [
70
+ className: _style.default.dynamic([["4226485334", [
77
71
  /*
78
72
  * The arrow icon has ~4px empty space on the sides,
79
73
  * that's why the padding on the right is only 8px.
80
74
  */
81
75
  '', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + ((0, _classnames.default)('selector-bar-item', className, !displayOnly ? 'openable' : '') || "")
82
76
  }, /*#__PURE__*/_react.default.createElement("span", {
83
- className: _style.default.dynamic([["2616571335", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "label"
77
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "label"
84
78
  }, label), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
85
- className: _style.default.dynamic([["2616571335", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "value"
79
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "value"
86
80
  }, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/_react.default.createElement("span", {
87
81
  onClick: evt => {
88
82
  evt.stopPropagation();
89
83
  onClearSelectionClick();
90
84
  },
91
85
  "data-test": "".concat(dataTest, "-clear-icon"),
92
- className: _style.default.dynamic([["2616571335", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "clear-icon"
86
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "clear-icon"
93
87
  }, /*#__PURE__*/_react.default.createElement("svg", {
94
88
  width: "14",
95
89
  height: "14",
96
90
  viewBox: "0 0 14 14",
97
91
  fill: "none",
98
92
  xmlns: "http://www.w3.org/2000/svg",
99
- className: _style.default.dynamic([["2616571335", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
93
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
100
94
  }, /*#__PURE__*/_react.default.createElement("path", {
101
95
  d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L7 5.58579L8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289C10.0976 4.68342 10.0976 5.31658 9.70711 5.70711L8.41421 7L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L7 8.41421L5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289L5.58579 7L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z",
102
- className: _style.default.dynamic([["2616571335", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
96
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
103
97
  })))), !displayOnly && /*#__PURE__*/_react.default.createElement("span", {
104
- className: _style.default.dynamic([["2616571335", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "toggle-icon"
98
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "toggle-icon"
105
99
  }, /*#__PURE__*/_react.default.createElement(Icon, {
106
- className: _style.default.dynamic([["2616571335", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
100
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
107
101
  })), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
108
102
  onBackdropClick: (_, evt) => {
109
103
  evt.stopPropagation();
@@ -114,13 +108,12 @@ const SelectorBarItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
114
108
  placement: "bottom-start",
115
109
  modifiers: [offsetModifier]
116
110
  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, children))), /*#__PURE__*/_react.default.createElement(_style.default, {
117
- id: "2616571335",
111
+ id: "4226485334",
118
112
  dynamic: ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]
119
113
  }, [".selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;".concat(" padding-block:0;padding-inline-start:", _uiConstants.spacers.dp8, ";padding-inline-end:").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ").concat(_uiConstants.colors.grey400, ";}"), ".selector-bar-item.openable.__jsx-style-dynamic-selector{cursor:pointer;}", ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", ".label.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";}"), ".value.__jsx-style-dynamic-selector{padding-inline-start:".concat(_uiConstants.spacers.dp8, ";}"), ".clear-icon.__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;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";padding:").concat(_uiConstants.spacers.dp4, ";cursor:pointer;}"), ".clear-icon.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey500, ";}"), ".clear-icon.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey700, ";}"), ".toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
120
- });
114
+ };
121
115
 
122
116
  exports.SelectorBarItem = SelectorBarItem;
123
- SelectorBarItem.displayName = 'SelectorBarItem';
124
117
  SelectorBarItem.defaultProps = {
125
118
  dataTest: 'dhis2-ui-selectorbaritem'
126
119
  };
package/build/es/selector-bar/selector-bar.js CHANGED
@@ -3,7 +3,7 @@ import { Button } from '@dhis2-ui/button';
3
3
  import { colors, spacers } from '@dhis2/ui-constants';
4
4
  import cx from 'classnames';
5
5
  import PropTypes from 'prop-types';
6
- import React, { useRef, useMemo } from 'react';
6
+ import React, { useRef, useState, useEffect } from 'react';
7
7
  import i18n from '../locales/index.js';
8
8
 
9
9
  const ClearSelection = _ref => {
@@ -38,21 +38,38 @@ export const SelectorBar = _ref2 => {
38
38
  additionalContent,
39
39
  ariaLabel
40
40
  } = _ref2;
41
- const chipContainer = useRef(null);
42
- const childrenRefs = useMemo(() => React.Children.map(children, () => /*#__PURE__*/React.createRef()), [children]);
41
+ const container = useRef(null);
42
+ const [childrenToFocus, setChildrenToFocus] = useState([]);
43
+ useEffect(() => {
44
+ if (container.current) {
45
+ const controlsDiv = container.current.querySelector('.controls');
46
+
47
+ if (controlsDiv) {
48
+ const childElements = Array.from(controlsDiv.children);
49
+ childElements.forEach(child => {
50
+ child.tabIndex = -1;
51
+ });
52
+ setChildrenToFocus(childElements);
53
+ }
54
+ }
55
+ }, [children]);
43
56
 
44
57
  const handleKeyDown = event => {
45
58
  const currentFocus = document.activeElement;
46
59
 
47
- if (chipContainer.current && chipContainer.current === currentFocus) {
48
- if (childrenRefs.length > 0 && childrenRefs[0].current) {
49
- childrenRefs[0].current.focus();
60
+ if (container.current && container.current === currentFocus) {
61
+ if (childrenToFocus.length > 0 && childrenToFocus[0]) {
62
+ childrenToFocus[0].focus();
50
63
  }
51
64
 
52
65
  return;
53
66
  }
54
67
 
55
- const currentIndex = childrenRefs.findIndex(ref => ref.current === currentFocus);
68
+ if (!childrenToFocus.length) {
69
+ return;
70
+ }
71
+
72
+ const currentIndex = childrenToFocus.findIndex(element => element === currentFocus);
56
73
 
57
74
  if (currentIndex === -1) {
58
75
  return;
@@ -60,14 +77,14 @@ export const SelectorBar = _ref2 => {
60
77
 
61
78
  if (event.key === 'ArrowRight') {
62
79
  event.preventDefault();
63
- const nextIndex = (currentIndex + 1) % childrenRefs.length;
64
- childrenRefs[nextIndex].current.focus();
80
+ const nextIndex = (currentIndex + 1) % childrenToFocus.length;
81
+ childrenToFocus[nextIndex].focus();
65
82
  }
66
83
 
67
84
  if (event.key === 'ArrowLeft') {
68
85
  event.preventDefault();
69
- const prevIndex = (currentIndex - 1 + childrenRefs.length) % childrenRefs.length;
70
- childrenRefs[prevIndex].current.focus();
86
+ const prevIndex = (currentIndex - 1 + childrenToFocus.length) % childrenToFocus.length;
87
+ childrenToFocus[prevIndex].focus();
71
88
  }
72
89
  };
73
90
 
@@ -75,7 +92,7 @@ export const SelectorBar = _ref2 => {
75
92
  "data-test": dataTest,
76
93
  onKeyDown: handleKeyDown,
77
94
  tabIndex: 0,
78
- ref: chipContainer,
95
+ ref: container,
79
96
  role: "toolbar",
80
97
  "aria-label": ariaLabel,
81
98
  className: _JSXStyle.dynamic([["2030607490", [colors.white, colors.grey400,
@@ -88,9 +105,7 @@ export const SelectorBar = _ref2 => {
88
105
  }, className) || "")
89
106
  }, /*#__PURE__*/React.createElement("div", {
90
107
  className: _JSXStyle.dynamic([["2030607490", [colors.white, colors.grey400, '']]]) + " " + "controls"
91
- }, React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
92
- ref: childrenRefs[index]
93
- })), onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
108
+ }, children, onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
94
109
  disabled: disableClearSelections,
95
110
  onClick: onClearSelectionClick
96
111
  })), additionalContent && /*#__PURE__*/React.createElement("div", {
package/build/es/selector-bar-item/selector-bar-item.js CHANGED
@@ -24,7 +24,7 @@ const offsetModifier = {
24
24
  * inside this component
25
25
  */
26
26
 
27
- export const SelectorBarItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
27
+ export const SelectorBarItem = _ref => {
28
28
  let {
29
29
  children,
30
30
  className,
@@ -38,50 +38,44 @@ export const SelectorBarItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
38
38
  value,
39
39
  onClearSelectionClick
40
40
  } = _ref;
41
- let buttonRef = useRef();
42
-
43
- if (ref) {
44
- buttonRef = ref;
45
- }
46
-
41
+ const buttonRef = useRef();
47
42
  const Icon = open ? IconChevronUp24 : IconChevronDown24;
48
43
  return /*#__PURE__*/React.createElement("button", {
49
44
  ref: buttonRef,
50
45
  disabled: disabled,
51
46
  onClick: () => setOpen && setOpen(true),
52
47
  "data-test": dataTest,
53
- tabIndex: -1,
54
- className: _JSXStyle.dynamic([["2616571335", [
48
+ className: _JSXStyle.dynamic([["4226485334", [
55
49
  /*
56
50
  * The arrow icon has ~4px empty space on the sides,
57
51
  * that's why the padding on the right is only 8px.
58
52
  */
59
53
  '', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + (cx('selector-bar-item', className, !displayOnly ? 'openable' : '') || "")
60
54
  }, /*#__PURE__*/React.createElement("span", {
61
- className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "label"
55
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "label"
62
56
  }, label), !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
63
- className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "value"
57
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "value"
64
58
  }, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/React.createElement("span", {
65
59
  onClick: evt => {
66
60
  evt.stopPropagation();
67
61
  onClearSelectionClick();
68
62
  },
69
63
  "data-test": "".concat(dataTest, "-clear-icon"),
70
- className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "clear-icon"
64
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "clear-icon"
71
65
  }, /*#__PURE__*/React.createElement("svg", {
72
66
  width: "14",
73
67
  height: "14",
74
68
  viewBox: "0 0 14 14",
75
69
  fill: "none",
76
70
  xmlns: "http://www.w3.org/2000/svg",
77
- className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
71
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
78
72
  }, /*#__PURE__*/React.createElement("path", {
79
73
  d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L7 5.58579L8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289C10.0976 4.68342 10.0976 5.31658 9.70711 5.70711L8.41421 7L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L7 8.41421L5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289L5.58579 7L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z",
80
- className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
74
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
81
75
  })))), !displayOnly && /*#__PURE__*/React.createElement("span", {
82
- className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "toggle-icon"
76
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "toggle-icon"
83
77
  }, /*#__PURE__*/React.createElement(Icon, {
84
- className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
78
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
85
79
  })), open && /*#__PURE__*/React.createElement(Layer, {
86
80
  onBackdropClick: (_, evt) => {
87
81
  evt.stopPropagation();
@@ -92,11 +86,10 @@ export const SelectorBarItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
92
86
  placement: "bottom-start",
93
87
  modifiers: [offsetModifier]
94
88
  }, /*#__PURE__*/React.createElement(Card, null, children))), /*#__PURE__*/React.createElement(_JSXStyle, {
95
- id: "2616571335",
89
+ id: "4226485334",
96
90
  dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]
97
91
  }, [".selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;".concat(" padding-block:0;padding-inline-start:", spacers.dp8, ";padding-inline-end:").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ").concat(colors.grey400, ";}"), ".selector-bar-item.openable.__jsx-style-dynamic-selector{cursor:pointer;}", ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", ".label.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";}"), ".value.__jsx-style-dynamic-selector{padding-inline-start:".concat(spacers.dp8, ";}"), ".clear-icon.__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;margin-inline-start:".concat(spacers.dp4, ";padding:").concat(spacers.dp4, ";cursor:pointer;}"), ".clear-icon.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), ".clear-icon.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey700, ";}"), ".toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-inline-start:".concat(spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
98
- });
99
- SelectorBarItem.displayName = 'SelectorBarItem';
92
+ };
100
93
  SelectorBarItem.defaultProps = {
101
94
  dataTest: 'dhis2-ui-selectorbaritem'
102
95
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/selector-bar",
3
- "version": "9.9.1",
3
+ "version": "9.10.1",
4
4
  "description": "UI Select",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,21 +33,21 @@
33
33
  "styled-jsx": "^4"
34
34
  },
35
35
  "dependencies": {
36
- "@dhis2-ui/button": "9.9.1",
37
- "@dhis2-ui/card": "9.9.1",
38
- "@dhis2-ui/popper": "9.9.1",
39
- "@dhis2-ui/layer": "9.9.1",
40
- "@dhis2/ui-constants": "9.9.1",
41
- "@dhis2/ui-icons": "9.9.1",
36
+ "@dhis2-ui/button": "9.10.1",
37
+ "@dhis2-ui/card": "9.10.1",
38
+ "@dhis2-ui/popper": "9.10.1",
39
+ "@dhis2-ui/layer": "9.10.1",
40
+ "@dhis2/ui-constants": "9.10.1",
41
+ "@dhis2/ui-icons": "9.10.1",
42
42
  "@testing-library/react": "^12.1.2",
43
43
  "classnames": "^2.3.1",
44
44
  "prop-types": "^15.7.2"
45
45
  },
46
46
  "devDependencies": {
47
- "@dhis2-ui/css": "9.9.1",
48
- "@dhis2-ui/menu": "9.9.1",
49
- "@dhis2-ui/organisation-unit-tree": "9.9.1",
50
- "@dhis2-ui/select": "9.9.1",
47
+ "@dhis2-ui/css": "9.10.1",
48
+ "@dhis2-ui/menu": "9.10.1",
49
+ "@dhis2-ui/organisation-unit-tree": "9.10.1",
50
+ "@dhis2-ui/select": "9.10.1",
51
51
  "@dhis2/d2-i18n": "^1.1.0",
52
52
  "@testing-library/jest-dom": "^5.16.1",
53
53
  "react": "16.13",