@dhis2-ui/selector-bar 9.11.0 → 9.11.1-beta.2

package/build/cjs/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "SelectorBarItem", {
     return _index2.SelectorBarItem;
   }
 });
-
 var _index = require("./selector-bar/index.js");
-
 var _index2 = require("./selector-bar-item/index.js");

package/build/cjs/locales/index.js

@@ -4,41 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
-
 var _translations = _interopRequireDefault(require("./ar/translations.json"));
-
 var _translations2 = _interopRequireDefault(require("./cs/translations.json"));
-
 var _translations3 = _interopRequireDefault(require("./en/translations.json"));
-
 var _translations4 = _interopRequireDefault(require("./es/translations.json"));
-
 var _translations5 = _interopRequireDefault(require("./es_419/translations.json"));
-
 var _translations6 = _interopRequireDefault(require("./fr/translations.json"));
-
 var _translations7 = _interopRequireDefault(require("./id/translations.json"));
-
 var _translations8 = _interopRequireDefault(require("./lo/translations.json"));
-
 var _translations9 = _interopRequireDefault(require("./nb/translations.json"));
-
 var _translations10 = _interopRequireDefault(require("./ru/translations.json"));
-
 var _translations11 = _interopRequireDefault(require("./uz_UZ_Cyrl/translations.json"));
-
 var _translations12 = _interopRequireDefault(require("./uz_UZ_Latn/translations.json"));
-
 var _translations13 = _interopRequireDefault(require("./vi/translations.json"));
-
 var _translations14 = _interopRequireDefault(require("./zh/translations.json"));
-
 var _translations15 = _interopRequireDefault(require("./zh_CN/translations.json"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //------------------------------------------------------------------------------
 // <auto-generated>
 // This code was generated by d2-i18n-generate.
@@ -47,37 +29,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // the code is regenerated.
 // </auto-generated>
 //------------------------------------------------------------------------------
-const namespace = 'default';
 
+const namespace = 'default';
 _d2I18n.default.addResources('ar', namespace, _translations.default);
-
 _d2I18n.default.addResources('cs', namespace, _translations2.default);
-
 _d2I18n.default.addResources('en', namespace, _translations3.default);
-
 _d2I18n.default.addResources('es', namespace, _translations4.default);
-
 _d2I18n.default.addResources('es_419', namespace, _translations5.default);
-
 _d2I18n.default.addResources('fr', namespace, _translations6.default);
-
 _d2I18n.default.addResources('id', namespace, _translations7.default);
-
 _d2I18n.default.addResources('lo', namespace, _translations8.default);
-
 _d2I18n.default.addResources('nb', namespace, _translations9.default);
-
 _d2I18n.default.addResources('ru', namespace, _translations10.default);
-
 _d2I18n.default.addResources('uz_UZ_Cyrl', namespace, _translations11.default);
-
 _d2I18n.default.addResources('uz_UZ_Latn', namespace, _translations12.default);
-
 _d2I18n.default.addResources('vi', namespace, _translations13.default);
-
 _d2I18n.default.addResources('zh', namespace, _translations14.default);
-
 _d2I18n.default.addResources('zh_CN', namespace, _translations15.default);
-
-var _default = _d2I18n.default;
-exports.default = _default;
+var _default = exports.default = _d2I18n.default;

package/build/cjs/selector-bar/__stories__/common.js

@@ -4,35 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.workflows = exports.getOrganisationUnitData = exports.decoratorCommonStyles = exports.dataSets = exports.dataProviderData = exports.createStatefulDecorator = exports.createDecoratorCustomDataProvider = exports.OrgUnitSelect = exports.MenuSelect = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _menu = require("@dhis2-ui/menu");
-
-var _organisationUnitTree = require("@dhis2-ui/organisation-unit-tree");
-
 var _appRuntime = require("@dhis2/app-runtime");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _menu = require("@dhis2-ui/menu");
+var _organisationUnitTree = require("@dhis2-ui/organisation-unit-tree");
 var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const decoratorCommonStyles = fn => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fn(), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "3746816729",
   dynamic: [_uiConstants.colors.grey100]
-}, ["body{background:".concat(_uiConstants.colors.grey100, ";padding:0 !important;}"), "div#root{padding:0;}"]));
-
+}, [`body{background:${_uiConstants.colors.grey100};padding:0 !important;}`, "div#root{padding:0;}"]));
 exports.decoratorCommonStyles = decoratorCommonStyles;
-
 const getOrganisationUnitData = id => {
   let data;
-
   if (id === 'A0000000000') {
     data = {
       id: 'A0000000000',
@@ -60,7 +47,6 @@ const getOrganisationUnitData = id => {
       }]
     };
   }
-
   if (id === 'A0000000001') {
     data = {
       id: 'A0000000001',
@@ -79,7 +65,6 @@ const getOrganisationUnitData = id => {
       }]
     };
   }
-
   if (id === 'A0000000002') {
     data = {
       displayName: 'Org Unit 3',
@@ -88,7 +73,6 @@ const getOrganisationUnitData = id => {
       children: []
     };
   }
-
   if (id === 'A0000000003') {
     data = {
       displayName: 'Org Unit 4',
@@ -102,7 +86,6 @@ const getOrganisationUnitData = id => {
       }]
     };
   }
-
   if (id === 'A0000000004') {
     data = {
       displayName: 'Org Unit 5',
@@ -111,7 +94,6 @@ const getOrganisationUnitData = id => {
       children: []
     };
   }
-
   if (id === 'A0000000006') {
     data = {
       displayName: 'Org Unit 7',
@@ -120,7 +102,6 @@ const getOrganisationUnitData = id => {
       children: []
     };
   }
-
   if (id === 'A0000000007') {
     data = {
       displayName: 'Org Unit 8',
@@ -129,27 +110,21 @@ const getOrganisationUnitData = id => {
       children: []
     };
   }
-
   return data;
 };
-
 exports.getOrganisationUnitData = getOrganisationUnitData;
-const dataProviderData = {
+const dataProviderData = exports.dataProviderData = {
   organisationUnits: (_, _ref) => {
     let {
       id
     } = _ref;
     const data = getOrganisationUnitData(id);
-
     if (!data) {
       return Promise.reject(new Error('404 - Org unit not found'));
     }
-
     return Promise.resolve(data);
   }
 };
-exports.dataProviderData = dataProviderData;
-
 const createDecoratorCustomDataProvider = args => {
   const data = (args === null || args === void 0 ? void 0 : args.data) || dataProviderData;
   return Story => {
@@ -159,9 +134,7 @@ const createDecoratorCustomDataProvider = args => {
     }, /*#__PURE__*/_react.default.createElement(Story, null));
   };
 };
-
 exports.createDecoratorCustomDataProvider = createDecoratorCustomDataProvider;
-
 const createStatefulDecorator = args => {
   return fn => {
     const [workflow, setWorkflow] = (0, _react.useState)((args === null || args === void 0 ? void 0 : args.workflow) || null);
@@ -186,17 +159,15 @@ const createStatefulDecorator = args => {
     }));
   };
 };
-
 exports.createStatefulDecorator = createStatefulDecorator;
-const workflows = [{
+const workflows = exports.workflows = [{
   value: 'm<4y',
   label: 'Mortality < 4 years'
 }, {
   value: 'm<5y',
   label: 'Mortality < 5 years'
 }];
-exports.workflows = workflows;
-const dataSets = [{
+const dataSets = exports.dataSets = [{
   value: 'data-set-1',
   label: 'Data set 1'
 }, {
@@ -206,8 +177,6 @@ const dataSets = [{
   value: 'data-set-3',
   label: 'Data set 3'
 }];
-exports.dataSets = dataSets;
-
 const MenuSelect = _ref2 => {
   let {
     values,
@@ -233,9 +202,7 @@ const MenuSelect = _ref2 => {
     });
   })));
 };
-
 exports.MenuSelect = MenuSelect;
-
 const OrgUnitSelect = _ref4 => {
   let {
     onChange,
@@ -254,5 +221,4 @@ const OrgUnitSelect = _ref4 => {
     selected: selected
   }));
 };
-
 exports.OrgUnitSelect = OrgUnitSelect;

package/build/cjs/selector-bar/__stories__/keep-org-unit-expanded.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.KeepOrgUnitExpanded = void 0;
-
 var _organisationUnitTree = require("@dhis2-ui/organisation-unit-tree");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _index = require("../../index.js");
-
 var _common = require("./common.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const KeepOrgUnitExpanded = (_, _ref) => {
   let {
     orgUnit,
@@ -25,21 +18,18 @@ const KeepOrgUnitExpanded = (_, _ref) => {
     setOrgUnitOpen
   } = _ref;
   const [expanded, setExpanded] = (0, _react.useState)([]);
-
   const handleExpand = _ref2 => {
     let {
       path
     } = _ref2;
     return setExpanded([...expanded, path]);
   };
-
   const handleCollapse = _ref3 => {
     let {
       path
     } = _ref3;
     return setExpanded(expanded.filter(p => p !== path));
   };
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
     disableClearSelections: !orgUnit,
     onClearSelectionClick: () => setOrgUnit(null)
@@ -76,6 +66,5 @@ const KeepOrgUnitExpanded = (_, _ref) => {
     }
   }, "This story illustrates how to keep states between mount/unmount cycles of the component rendered inside the selector bar icon"));
 };
-
 exports.KeepOrgUnitExpanded = KeepOrgUnitExpanded;
 KeepOrgUnitExpanded.decorators = [_common.decoratorCommonStyles, (0, _common.createStatefulDecorator)(), (0, _common.createDecoratorCustomDataProvider)()];

package/build/cjs/selector-bar/__stories__/rtl.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RTL = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _button = require("@dhis2-ui/button");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../../index.js");
-
 var _common = require("./common.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RHSContent = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "jsx-876392447" + " " + "rhs-content"
 }, /*#__PURE__*/_react.default.createElement(_button.Button, {
@@ -24,7 +17,6 @@ const RHSContent = () => /*#__PURE__*/_react.default.createElement("div", {
 }, "Options"), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "876392447"
 }, [".rhs-content.jsx-876392447{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;padding:0 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]));
-
 const RTL = (_, _ref) => {
   let {
     workflow,
@@ -84,6 +76,5 @@ const RTL = (_, _ref) => {
     }
   }))));
 };
-
 exports.RTL = RTL;
 RTL.decorators = [_common.decoratorCommonStyles, (0, _common.createStatefulDecorator)(), (0, _common.createDecoratorCustomDataProvider)()];

package/build/cjs/selector-bar/__stories__/with-multiple-rows.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WithMultipleRows = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _organisationUnitTree = require("@dhis2-ui/organisation-unit-tree");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../../index.js");
-
 var _common = require("./common.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const WithMultipleRows = (_, _ref) => {
   let {
     workflow,
@@ -104,7 +97,6 @@ const WithMultipleRows = (_, _ref) => {
     id: "3203152640"
   }, [".narrow-container.jsx-3203152640{margin:0 auto;width:100%;max-width:600px;}"]));
 };
-
 exports.WithMultipleRows = WithMultipleRows;
 WithMultipleRows.decorators = [_common.decoratorCommonStyles, (0, _common.createStatefulDecorator)({
   workflow: _common.workflows[0]

package/build/cjs/selector-bar/__stories__/with-right-hand-side-content.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WithAdditionalContent = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _button = require("@dhis2-ui/button");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../../index.js");
-
 var _common = require("./common.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RHSContent = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "jsx-876392447" + " " + "rhs-content"
 }, /*#__PURE__*/_react.default.createElement(_button.Button, {
@@ -24,7 +17,6 @@ const RHSContent = () => /*#__PURE__*/_react.default.createElement("div", {
 }, "Options"), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "876392447"
 }, [".rhs-content.jsx-876392447{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;padding:0 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]));
-
 const WithAdditionalContent = (_, _ref) => {
   let {
     workflow,
@@ -82,6 +74,5 @@ const WithAdditionalContent = (_, _ref) => {
     }
   })));
 };
-
 exports.WithAdditionalContent = WithAdditionalContent;
 WithAdditionalContent.decorators = [_common.decoratorCommonStyles, (0, _common.createStatefulDecorator)(), (0, _common.createDecoratorCustomDataProvider)()];

package/build/cjs/selector-bar/__stories__/with-some-inputs.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WithSomeInputs = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../../index.js");
-
 var _common = require("./common.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const WithSomeInputs = (_, _ref) => {
   let {
     workflow,
@@ -76,7 +71,6 @@ const WithSomeInputs = (_, _ref) => {
     }
   }));
 };
-
 exports.WithSomeInputs = WithSomeInputs;
 WithSomeInputs.decorators = [_common.decoratorCommonStyles, (0, _common.createStatefulDecorator)({
   workflow: _common.workflows[0]

package/build/cjs/selector-bar/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "SelectorBar", {
     return _selectorBar.SelectorBar;
   }
 });
-
 var _selectorBar = require("./selector-bar.js");

package/build/cjs/selector-bar/selector-bar.js

@@ -4,27 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectorBar = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _button = require("@dhis2-ui/button");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _button = require("@dhis2-ui/button");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _index = _interopRequireDefault(require("../locales/index.js"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ClearSelection = _ref => {
   let {
     disabled,
@@ -40,14 +29,12 @@ const ClearSelection = _ref => {
   }, _index.default.t('Clear selections')), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3676026375",
     dynamic: [_uiConstants.spacers.dp8]
-  }, [".clear-selections.__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;height:40px;padding:0 ".concat(_uiConstants.spacers.dp8, ";}")]));
+  }, [`.clear-selections.__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;height:40px;padding:0 ${_uiConstants.spacers.dp8};}`]));
 };
-
 ClearSelection.propTypes = {
   disabled: _propTypes.default.bool,
   onClick: _propTypes.default.func
 };
-
 const SelectorBar = _ref2 => {
   let {
     className,
@@ -63,7 +50,6 @@ const SelectorBar = _ref2 => {
   (0, _react.useEffect)(() => {
     if (container.current) {
       const controlsDiv = container.current.querySelector('.controls');
-
       if (controlsDiv) {
         const childElements = Array.from(controlsDiv.children);
         childElements.forEach(child => {
@@ -73,41 +59,32 @@ const SelectorBar = _ref2 => {
       }
     }
   }, [children]);
-
   const handleKeyDown = event => {
     const currentFocus = document.activeElement;
-
     if (container.current && container.current === currentFocus) {
       if (childrenToFocus.length > 0 && childrenToFocus[0]) {
         childrenToFocus[0].focus();
       }
-
       return;
     }
-
     if (!childrenToFocus.length) {
       return;
     }
-
     const currentIndex = childrenToFocus.findIndex(element => element === currentFocus);
-
     if (currentIndex === -1) {
       return;
     }
-
     if (event.key === 'ArrowRight') {
       event.preventDefault();
       const nextIndex = (currentIndex + 1) % childrenToFocus.length;
       childrenToFocus[nextIndex].focus();
     }
-
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
       const prevIndex = (currentIndex - 1 + childrenToFocus.length) % childrenToFocus.length;
       childrenToFocus[prevIndex].focus();
     }
   };
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
     onKeyDown: handleKeyDown,
@@ -133,9 +110,8 @@ const SelectorBar = _ref2 => {
   }, additionalContent), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "2030607490",
     dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, '']
-  }, [".container.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.white, ";box-shadow:inset 0 -1px 0 0 ").concat(_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{".concat(" padding-inline-start:4px;}")])));
+  }, [`.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-inline-start:4px;}`])));
 };
-
 exports.SelectorBar = SelectorBar;
 SelectorBar.defaultProps = {
   dataTest: 'dhis2-ui-selectorbar'

package/build/cjs/selector-bar/{selector-bar.stories.js → selector-bar.prod.stories.js}

@@ -34,18 +34,11 @@ Object.defineProperty(exports, "WithSomeInputs", {
   }
 });
 exports.default = void 0;
-
 var _withSomeInputs = require("./__stories__/with-some-inputs.js");
-
 var _withRightHandSideContent = require("./__stories__/with-right-hand-side-content.js");
-
 var _keepOrgUnitExpanded = require("./__stories__/keep-org-unit-expanded.js");
-
 var _withMultipleRows = require("./__stories__/with-multiple-rows.js");
-
 var _rtl = require("./__stories__/rtl.js");
-
-var _default = {
+var _default = exports.default = {
   title: 'SelectionBar'
-};
-exports.default = _default;
+};

package/build/cjs/selector-bar/selector-bar.test.js

@@ -1,19 +1,12 @@
 "use strict";
 
 require("@testing-library/jest-dom");
-
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _index = require("../selector-bar-item/index.js");
-
 var _selectorBar = require("./selector-bar.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const noop = () => null;
-
 describe('SelectorBar', () => {
   it('should render the selection bar items', () => {
     (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectorBar.SelectorBar, null, /*#__PURE__*/_react2.default.createElement(_index.SelectorBarItem, {
@@ -39,9 +32,7 @@ describe('SelectorBar', () => {
       open: false,
       setOpen: noop
     }, "Content")));
-
     const clearBtn = _react.screen.getByText('Clear selections');
-
     expect(clearBtn).not.toBeNull();
     expect(clearBtn).not.toBeDisabled();
   });
@@ -55,9 +46,7 @@ describe('SelectorBar', () => {
       open: false,
       setOpen: noop
     }, "Content")));
-
     const clearBtn = _react.screen.getByText('Clear selections');
-
     expect(clearBtn).not.toBeNull();
     expect(clearBtn).toBeDisabled();
   });
@@ -70,9 +59,7 @@ describe('SelectorBar', () => {
       open: false,
       setOpen: noop
     }, "Content")));
-
     const extraContent = _react.screen.getByText('Foobar');
-
     expect(extraContent).not.toBeNull();
   });
   it('should render the displayOnly value', () => {
@@ -81,9 +68,7 @@ describe('SelectorBar', () => {
       label: "Person",
       value: "John doe"
     })));
-
     const value = _react.screen.getByText('John doe');
-
     expect(value).not.toBeNull();
   });
   it('should render the cross icon', () => {
@@ -92,9 +77,7 @@ describe('SelectorBar', () => {
       value: "selected value",
       onClearSelectionClick: noop
     })));
-
     const clearIcon = _react.screen.getByTestId('dhis2-ui-selectorbaritem-clear-icon');
-
     expect(clearIcon).not.toBeNull();
   });
 });

package/build/cjs/selector-bar-item/features/toggle-children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('the selector bar item is closed', () => {
   cy.visitStory('SelectorBarItem', 'closed no value');
 });

package/build/cjs/selector-bar-item/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "SelectorBarItem", {
     return _selectorBarItem.SelectorBarItem;
   }
 });
-
 var _selectorBarItem = require("./selector-bar-item.js");

package/build/cjs/selector-bar-item/{selector-bar-item.stories.e2e.js → selector-bar-item.e2e.stories.js}

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.OpenWithValue = exports.OpenNoValue = exports.ClosedWithValue = exports.ClosedNoValue = void 0;
-
 var _select = require("@dhis2-ui/select");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _selectorBarItem = require("./selector-bar-item.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const options = [{
   value: 'value 1',
   label: 'label 1'
@@ -25,7 +19,6 @@ const options = [{
   value: 'value 3',
   label: 'label 3'
 }];
-
 const createStateDecorator = args => {
   return fn => {
     const [selected, setSelected] = (0, _react.useState)((args === null || args === void 0 ? void 0 : args.selected) || '');
@@ -38,10 +31,8 @@ const createStateDecorator = args => {
     });
   };
 };
-
 const createStory = () => (_, _ref) => {
   var _options$find;
-
   let {
     open,
     setOpen,
@@ -80,26 +71,20 @@ const createStory = () => (_, _ref) => {
     });
   })));
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'SelectorBarItem'
 };
-exports.default = _default;
-const ClosedNoValue = createStory();
-exports.ClosedNoValue = ClosedNoValue;
+const ClosedNoValue = exports.ClosedNoValue = createStory();
 ClosedNoValue.decorators = [createStateDecorator()];
-const OpenNoValue = createStory();
-exports.OpenNoValue = OpenNoValue;
+const OpenNoValue = exports.OpenNoValue = createStory();
 OpenNoValue.decorators = [createStateDecorator({
   open: true
 })];
-const ClosedWithValue = createStory();
-exports.ClosedWithValue = ClosedWithValue;
+const ClosedWithValue = exports.ClosedWithValue = createStory();
 ClosedWithValue.decorators = [createStateDecorator({
   selected: 'value 1'
 })];
-const OpenWithValue = createStory();
-exports.OpenWithValue = OpenWithValue;
+const OpenWithValue = exports.OpenWithValue = createStory();
 OpenWithValue.decorators = [createStateDecorator({
   open: true,
   selected: 'value 1'

package/build/cjs/selector-bar-item/selector-bar-item.js

@@ -4,37 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectorBarItem = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
+var _uiConstants = require("@dhis2/ui-constants");
+var _uiIcons = require("@dhis2/ui-icons");
 var _card = require("@dhis2-ui/card");
-
 var _layer = require("@dhis2-ui/layer");
-
 var _popper = require("@dhis2-ui/popper");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
-var _uiIcons = require("@dhis2/ui-icons");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const offsetModifier = {
   name: 'offset',
   options: {
     offset: [0, 2]
   }
 };
+
 /**
  * The reason this component expects the "open" state and "setOpen" function is
  * because certain actions inside the props.children might have to set "open"
@@ -45,7 +33,6 @@ const offsetModifier = {
  * "multiple" selections, this would be more or less impossible to predict
  * inside this component
  */
-
 const SelectorBarItem = _ref => {
   let {
     children,
@@ -82,7 +69,7 @@ const SelectorBarItem = _ref => {
       evt.stopPropagation();
       onClearSelectionClick();
     },
-    "data-test": "".concat(dataTest, "-clear-icon"),
+    "data-test": `${dataTest}-clear-icon`,
     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"
   }, /*#__PURE__*/_react.default.createElement("svg", {
     width: "14",
@@ -110,9 +97,8 @@ const SelectorBarItem = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_card.Card, null, children))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "4226485334",
     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]
-  }, [".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;}")]));
+  }, [`.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;${''} padding-block:0;padding-inline-start:${_uiConstants.spacers.dp8};padding-inline-end:${_uiConstants.spacers.dp12};font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ${_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:${_uiConstants.colors.grey600};}`, `.value.__jsx-style-dynamic-selector{padding-inline-start:${_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:${_uiConstants.spacers.dp4};padding:${_uiConstants.spacers.dp4};cursor:pointer;}`, `.clear-icon.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey500};}`, `.clear-icon.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey700};}`, `.toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-inline-start:${_uiConstants.spacers.dp4};height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`]));
 };
-
 exports.SelectorBarItem = SelectorBarItem;
 SelectorBarItem.defaultProps = {
   dataTest: 'dhis2-ui-selectorbaritem'

package/build/es/selector-bar/__stories__/common.js

@@ -1,16 +1,15 @@
 import _JSXStyle from "styled-jsx/style";
-import { Menu, MenuItem } from '@dhis2-ui/menu';
-import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree';
 import { CustomDataProvider } from '@dhis2/app-runtime';
 import { colors } from '@dhis2/ui-constants';
+import { Menu, MenuItem } from '@dhis2-ui/menu';
+import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree';
 import React, { useState } from 'react';
 export const decoratorCommonStyles = fn => /*#__PURE__*/React.createElement(React.Fragment, null, fn(), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "3746816729",
   dynamic: [colors.grey100]
-}, ["body{background:".concat(colors.grey100, ";padding:0 !important;}"), "div#root{padding:0;}"]));
+}, [`body{background:${colors.grey100};padding:0 !important;}`, "div#root{padding:0;}"]));
 export const getOrganisationUnitData = id => {
   let data;
-
   if (id === 'A0000000000') {
     data = {
       id: 'A0000000000',
@@ -38,7 +37,6 @@ export const getOrganisationUnitData = id => {
       }]
     };
   }
-
   if (id === 'A0000000001') {
     data = {
       id: 'A0000000001',
@@ -57,7 +55,6 @@ export const getOrganisationUnitData = id => {
       }]
     };
   }
-
   if (id === 'A0000000002') {
     data = {
       displayName: 'Org Unit 3',
@@ -66,7 +63,6 @@ export const getOrganisationUnitData = id => {
       children: []
     };
   }
-
   if (id === 'A0000000003') {
     data = {
       displayName: 'Org Unit 4',
@@ -80,7 +76,6 @@ export const getOrganisationUnitData = id => {
       }]
     };
   }
-
   if (id === 'A0000000004') {
     data = {
       displayName: 'Org Unit 5',
@@ -89,7 +84,6 @@ export const getOrganisationUnitData = id => {
       children: []
     };
   }
-
   if (id === 'A0000000006') {
     data = {
       displayName: 'Org Unit 7',
@@ -98,7 +92,6 @@ export const getOrganisationUnitData = id => {
       children: []
     };
   }
-
   if (id === 'A0000000007') {
     data = {
       displayName: 'Org Unit 8',
@@ -107,7 +100,6 @@ export const getOrganisationUnitData = id => {
       children: []
     };
   }
-
   return data;
 };
 export const dataProviderData = {
@@ -116,11 +108,9 @@ export const dataProviderData = {
       id
     } = _ref;
     const data = getOrganisationUnitData(id);
-
     if (!data) {
       return Promise.reject(new Error('404 - Org unit not found'));
     }
-
     return Promise.resolve(data);
   }
 };

package/build/es/selector-bar/__stories__/keep-org-unit-expanded.js

@@ -10,21 +10,18 @@ export const KeepOrgUnitExpanded = (_, _ref) => {
     setOrgUnitOpen
   } = _ref;
   const [expanded, setExpanded] = useState([]);
-
   const handleExpand = _ref2 => {
     let {
       path
     } = _ref2;
     return setExpanded([...expanded, path]);
   };
-
   const handleCollapse = _ref3 => {
     let {
       path
     } = _ref3;
     return setExpanded(expanded.filter(p => p !== path));
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectorBar, {
     disableClearSelections: !orgUnit,
     onClearSelectionClick: () => setOrgUnit(null)

package/build/es/selector-bar/__stories__/rtl.js

@@ -3,7 +3,6 @@ import { Button } from '@dhis2-ui/button';
 import React from 'react';
 import { SelectorBar, SelectorBarItem } from '../../index.js';
 import { OrgUnitSelect, MenuSelect, createDecoratorCustomDataProvider, createStatefulDecorator, decoratorCommonStyles, workflows } from './common.js';
-
 const RHSContent = () => /*#__PURE__*/React.createElement("div", {
   className: "jsx-876392447" + " " + "rhs-content"
 }, /*#__PURE__*/React.createElement(Button, {
@@ -11,7 +10,6 @@ const RHSContent = () => /*#__PURE__*/React.createElement("div", {
 }, "Options"), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "876392447"
 }, [".rhs-content.jsx-876392447{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;padding:0 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]));
-
 export const RTL = (_, _ref) => {
   let {
     workflow,

package/build/es/selector-bar/__stories__/with-right-hand-side-content.js

@@ -3,7 +3,6 @@ import { Button } from '@dhis2-ui/button';
 import React from 'react';
 import { SelectorBar, SelectorBarItem } from '../../index.js';
 import { OrgUnitSelect, MenuSelect, createDecoratorCustomDataProvider, createStatefulDecorator, decoratorCommonStyles, workflows } from './common.js';
-
 const RHSContent = () => /*#__PURE__*/React.createElement("div", {
   className: "jsx-876392447" + " " + "rhs-content"
 }, /*#__PURE__*/React.createElement(Button, {
@@ -11,7 +10,6 @@ const RHSContent = () => /*#__PURE__*/React.createElement("div", {
 }, "Options"), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "876392447"
 }, [".rhs-content.jsx-876392447{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;padding:0 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]));
-
 export const WithAdditionalContent = (_, _ref) => {
   let {
     workflow,

package/build/es/selector-bar/selector-bar.js

@@ -1,11 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
-import { Button } from '@dhis2-ui/button';
 import { colors, spacers } from '@dhis2/ui-constants';
+import { Button } from '@dhis2-ui/button';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useRef, useState, useEffect } from 'react';
 import i18n from '../locales/index.js';
-
 const ClearSelection = _ref => {
   let {
     disabled,
@@ -21,9 +20,8 @@ const ClearSelection = _ref => {
   }, i18n.t('Clear selections')), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3676026375",
     dynamic: [spacers.dp8]
-  }, [".clear-selections.__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;height:40px;padding:0 ".concat(spacers.dp8, ";}")]));
+  }, [`.clear-selections.__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;height:40px;padding:0 ${spacers.dp8};}`]));
 };
-
 ClearSelection.propTypes = {
   disabled: PropTypes.bool,
   onClick: PropTypes.func
@@ -43,7 +41,6 @@ export const SelectorBar = _ref2 => {
   useEffect(() => {
     if (container.current) {
       const controlsDiv = container.current.querySelector('.controls');
-
       if (controlsDiv) {
         const childElements = Array.from(controlsDiv.children);
         childElements.forEach(child => {
@@ -53,41 +50,32 @@ export const SelectorBar = _ref2 => {
       }
     }
   }, [children]);
-
   const handleKeyDown = event => {
     const currentFocus = document.activeElement;
-
     if (container.current && container.current === currentFocus) {
       if (childrenToFocus.length > 0 && childrenToFocus[0]) {
         childrenToFocus[0].focus();
       }
-
       return;
     }
-
     if (!childrenToFocus.length) {
       return;
     }
-
     const currentIndex = childrenToFocus.findIndex(element => element === currentFocus);
-
     if (currentIndex === -1) {
       return;
     }
-
     if (event.key === 'ArrowRight') {
       event.preventDefault();
       const nextIndex = (currentIndex + 1) % childrenToFocus.length;
       childrenToFocus[nextIndex].focus();
     }
-
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
       const prevIndex = (currentIndex - 1 + childrenToFocus.length) % childrenToFocus.length;
       childrenToFocus[prevIndex].focus();
     }
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     onKeyDown: handleKeyDown,
@@ -113,7 +101,7 @@ export const SelectorBar = _ref2 => {
   }, additionalContent), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2030607490",
     dynamic: [colors.white, colors.grey400, '']
-  }, [".container.__jsx-style-dynamic-selector{background:".concat(colors.white, ";box-shadow:inset 0 -1px 0 0 ").concat(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{".concat(" padding-inline-start:4px;}")])));
+  }, [`.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-inline-start:4px;}`])));
 };
 SelectorBar.defaultProps = {
   dataTest: 'dhis2-ui-selectorbar'

package/build/es/selector-bar/selector-bar.test.js

@@ -3,9 +3,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { SelectorBarItem } from '../selector-bar-item/index.js';
 import { SelectorBar } from './selector-bar.js';
-
 const noop = () => null;
-
 describe('SelectorBar', () => {
   it('should render the selection bar items', () => {
     render( /*#__PURE__*/React.createElement(SelectorBar, null, /*#__PURE__*/React.createElement(SelectorBarItem, {

package/build/es/selector-bar-item/{selector-bar-item.stories.e2e.js → selector-bar-item.e2e.stories.js}

@@ -11,7 +11,6 @@ const options = [{
   value: 'value 3',
   label: 'label 3'
 }];
-
 const createStateDecorator = args => {
   return fn => {
     const [selected, setSelected] = useState((args === null || args === void 0 ? void 0 : args.selected) || '');
@@ -24,10 +23,8 @@ const createStateDecorator = args => {
     });
   };
 };
-
 const createStory = () => (_, _ref) => {
   var _options$find;
-
   let {
     open,
     setOpen,
@@ -66,7 +63,6 @@ const createStory = () => (_, _ref) => {
     });
   })));
 };
-
 export default {
   title: 'SelectorBarItem'
 };

package/build/es/selector-bar-item/selector-bar-item.js

@@ -1,9 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
+import { colors, spacers } from '@dhis2/ui-constants';
+import { IconChevronUp24, IconChevronDown24 } from '@dhis2/ui-icons';
 import { Card } from '@dhis2-ui/card';
 import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
-import { colors, spacers } from '@dhis2/ui-constants';
-import { IconChevronUp24, IconChevronDown24 } from '@dhis2/ui-icons';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
@@ -13,6 +13,7 @@ const offsetModifier = {
     offset: [0, 2]
   }
 };
+
 /**
  * The reason this component expects the "open" state and "setOpen" function is
  * because certain actions inside the props.children might have to set "open"
@@ -23,7 +24,6 @@ const offsetModifier = {
  * "multiple" selections, this would be more or less impossible to predict
  * inside this component
  */
-
 export const SelectorBarItem = _ref => {
   let {
     children,
@@ -60,7 +60,7 @@ export const SelectorBarItem = _ref => {
       evt.stopPropagation();
       onClearSelectionClick();
     },
-    "data-test": "".concat(dataTest, "-clear-icon"),
+    "data-test": `${dataTest}-clear-icon`,
     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"
   }, /*#__PURE__*/React.createElement("svg", {
     width: "14",
@@ -88,7 +88,7 @@ export const SelectorBarItem = _ref => {
   }, /*#__PURE__*/React.createElement(Card, null, children))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4226485334",
     dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]
-  }, [".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;}")]));
+  }, [`.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;${''} padding-block:0;padding-inline-start:${spacers.dp8};padding-inline-end:${spacers.dp12};font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ${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:${colors.grey600};}`, `.value.__jsx-style-dynamic-selector{padding-inline-start:${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:${spacers.dp4};padding:${spacers.dp4};cursor:pointer;}`, `.clear-icon.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${colors.grey500};}`, `.clear-icon.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${colors.grey700};}`, `.toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-inline-start:${spacers.dp4};height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`]));
 };
 SelectorBarItem.defaultProps = {
   dataTest: 'dhis2-ui-selectorbaritem'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/selector-bar",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.2",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -22,32 +22,32 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
         "@dhis2/d2-i18n": "^1",
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "9.11.0",
-        "@dhis2-ui/card": "9.11.0",
-        "@dhis2-ui/popper": "9.11.0",
-        "@dhis2-ui/layer": "9.11.0",
-        "@dhis2/ui-constants": "9.11.0",
-        "@dhis2/ui-icons": "9.11.0",
+        "@dhis2-ui/button": "9.11.1-beta.2",
+        "@dhis2-ui/card": "9.11.1-beta.2",
+        "@dhis2-ui/popper": "9.11.1-beta.2",
+        "@dhis2-ui/layer": "9.11.1-beta.2",
+        "@dhis2/ui-constants": "9.11.1-beta.2",
+        "@dhis2/ui-icons": "9.11.1-beta.2",
         "@testing-library/react": "^12.1.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "devDependencies": {
-        "@dhis2-ui/css": "9.11.0",
-        "@dhis2-ui/menu": "9.11.0",
-        "@dhis2-ui/organisation-unit-tree": "9.11.0",
-        "@dhis2-ui/select": "9.11.0",
+        "@dhis2-ui/css": "9.11.1-beta.2",
+        "@dhis2-ui/menu": "9.11.1-beta.2",
+        "@dhis2-ui/organisation-unit-tree": "9.11.1-beta.2",
+        "@dhis2-ui/select": "9.11.1-beta.2",
         "@dhis2/d2-i18n": "^1.1.0",
         "@testing-library/jest-dom": "^5.16.1",
         "react": "16.13",