@dhis2-ui/selector-bar 7.10.0

package/README.md

@@ -0,0 +1,6 @@
+> :warning:
+> This is currently considered internal, please use `@dhis2/ui`.
+>
+> See the [Getting started
+> guide](https://github.com/dhis2/ui/blob/master/docs/getting-started.md)
+> for more information.

package/build/cjs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectorBar", {
+  enumerable: true,
+  get: function () {
+    return _index.SelectorBar;
+  }
+});
+Object.defineProperty(exports, "SelectorBarItem", {
+  enumerable: true,
+  get: function () {
+    return _index2.SelectorBarItem;
+  }
+});
+
+var _index = require("./selector-bar/index.js");
+
+var _index2 = require("./selector-bar-item/index.js");

package/build/cjs/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Clear selections"
+}

package/build/cjs/locales/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _translations = _interopRequireDefault(require("./en/translations.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+const namespace = 'default';
+
+_d2I18n.default.addResources('en', namespace, _translations.default);
+
+var _default = _d2I18n.default;
+exports.default = _default;

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

@@ -0,0 +1,252 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrgUnitSelect = exports.MenuSelect = exports.dataSets = exports.workflows = exports.createStatefulDecorator = exports.createDecoratorCustomDataProvider = exports.dataProviderData = exports.getOrganisationUnitData = exports.decoratorCommonStyles = 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 _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 }; }
+
+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:${_uiConstants.colors.grey100};padding:0 !important;}`, "div#root{padding:0;}"]));
+
+exports.decoratorCommonStyles = decoratorCommonStyles;
+
+const getOrganisationUnitData = id => {
+  let data;
+
+  if (id === 'A0000000000') {
+    data = {
+      id: 'A0000000000',
+      path: '/A0000000000',
+      displayName: 'Org Unit 1',
+      children: [{
+        id: 'A0000000001',
+        path: '/A0000000000/A0000000001',
+        children: [{
+          id: 'A0000000003'
+        }, {
+          id: 'A0000000004'
+        }],
+        displayName: 'Org Unit 2'
+      }, {
+        id: 'A0000000002',
+        path: '/A0000000000/A0000000002',
+        children: [],
+        displayName: 'Org Unit 3'
+      }, {
+        id: 'A0000000006',
+        path: '/A0000000000/A0000000006',
+        children: [],
+        displayName: 'Org Unit 7'
+      }]
+    };
+  }
+
+  if (id === 'A0000000001') {
+    data = {
+      id: 'A0000000001',
+      path: '/A0000000000/A0000000001',
+      displayName: 'Org Unit 2',
+      children: [{
+        id: 'A0000000003',
+        path: '/A0000000000/A0000000001/A0000000003',
+        children: [],
+        displayName: 'Org Unit 4'
+      }, {
+        id: 'A0000000004',
+        path: '/A0000000000/A0000000001/A0000000004',
+        children: [],
+        displayName: 'Org Unit 5'
+      }]
+    };
+  }
+
+  if (id === 'A0000000002') {
+    data = {
+      displayName: 'Org Unit 3',
+      id: 'A0000000002',
+      path: '/A0000000000/A0000000002',
+      children: []
+    };
+  }
+
+  if (id === 'A0000000003') {
+    data = {
+      displayName: 'Org Unit 4',
+      id: 'A0000000003',
+      path: '/A0000000000/A0000000001/A0000000003',
+      children: [{
+        id: 'A0000000007',
+        path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+        children: [],
+        displayName: 'Org Unit 8'
+      }]
+    };
+  }
+
+  if (id === 'A0000000004') {
+    data = {
+      displayName: 'Org Unit 5',
+      id: 'A0000000004',
+      path: '/A0000000000/A0000000001/A0000000004',
+      children: []
+    };
+  }
+
+  if (id === 'A0000000006') {
+    data = {
+      displayName: 'Org Unit 7',
+      id: 'A0000000006',
+      path: '/A0000000000/A0000000006',
+      children: []
+    };
+  }
+
+  if (id === 'A0000000007') {
+    data = {
+      displayName: 'Org Unit 8',
+      id: 'A0000000007',
+      path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+      children: []
+    };
+  }
+
+  return data;
+};
+
+exports.getOrganisationUnitData = getOrganisationUnitData;
+const dataProviderData = {
+  organisationUnits: (_, {
+    id
+  }) => {
+    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 => {
+    window.dataProviderData = data;
+    return /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+      data: data
+    }, /*#__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);
+    const [workflowOpen, setWorkflowOpen] = (0, _react.useState)((args === null || args === void 0 ? void 0 : args.workflowOpen) || false);
+    const [dataSet, setDataSet] = (0, _react.useState)((args === null || args === void 0 ? void 0 : args.dataSet) || null);
+    const [dataSetOpen, setDataSetOpen] = (0, _react.useState)((args === null || args === void 0 ? void 0 : args.dataSetOpen) || false);
+    const [orgUnit, setOrgUnit] = (0, _react.useState)((args === null || args === void 0 ? void 0 : args.orgUnit) || null);
+    const [orgUnitOpen, setOrgUnitOpen] = (0, _react.useState)((args === null || args === void 0 ? void 0 : args.orgUnitOpen) || false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fn({
+      workflow,
+      setWorkflow,
+      workflowOpen,
+      setWorkflowOpen,
+      dataSet,
+      setDataSet,
+      dataSetOpen,
+      setDataSetOpen,
+      orgUnit,
+      setOrgUnit,
+      orgUnitOpen,
+      setOrgUnitOpen
+    }));
+  };
+};
+
+exports.createStatefulDecorator = createStatefulDecorator;
+const workflows = [{
+  value: 'm<4y',
+  label: 'Mortality < 4 years'
+}, {
+  value: 'm<5y',
+  label: 'Mortality < 5 years'
+}];
+exports.workflows = workflows;
+const dataSets = [{
+  value: 'data-set-1',
+  label: 'Data set 1'
+}, {
+  value: 'data-set-2',
+  label: 'Data set 2'
+}, {
+  value: 'data-set-3',
+  label: 'Data set 3'
+}];
+exports.dataSets = dataSets;
+
+const MenuSelect = ({
+  values,
+  selected,
+  onChange
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 400
+    }
+  }, /*#__PURE__*/_react.default.createElement(_menu.Menu, null, values.map(({
+    value,
+    label
+  }) => /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
+    key: value,
+    label: label,
+    active: selected === value,
+    onClick: () => onChange({
+      selected: value
+    })
+  }))));
+};
+
+exports.MenuSelect = MenuSelect;
+
+const OrgUnitSelect = ({
+  onChange,
+  selected
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 400,
+      minHeight: 400,
+      maxHeight: '70vh'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+    singleSelection: true,
+    onChange: onChange,
+    roots: ['A0000000000'],
+    selected: selected
+  }));
+};
+
+exports.OrgUnitSelect = OrgUnitSelect;

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

@@ -0,0 +1,71 @@
+"use strict";
+
+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; }
+
+const KeepOrgUnitExpanded = (_, {
+  orgUnit,
+  setOrgUnit,
+  orgUnitOpen,
+  setOrgUnitOpen
+}) => {
+  const [expanded, setExpanded] = (0, _react.useState)([]);
+
+  const handleExpand = ({
+    path
+  }) => setExpanded([...expanded, path]);
+
+  const handleCollapse = ({
+    path
+  }) => 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)
+  }, /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
+    label: "Org unit",
+    value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
+    noValueMessage: "Choose an organisation unit",
+    open: orgUnitOpen,
+    setOpen: setOrgUnitOpen
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 400,
+      minHeight: 400,
+      maxHeight: '70vh'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+    singleSelection: true,
+    roots: ['A0000000000'],
+    selected: orgUnit ? [orgUnit.path] : [],
+    onChange: (nextOrgUnit, evt) => {
+      evt.stopPropagation();
+      setOrgUnit(nextOrgUnit);
+      setOrgUnitOpen(false);
+    },
+    expanded: expanded,
+    handleExpand: handleExpand,
+    handleCollapse: handleCollapse
+  })))), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      padding: '0 16px'
+    }
+  }, "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__/with-multiple-rows.js

@@ -0,0 +1,108 @@
+"use strict";
+
+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 }; }
+
+const WithMultipleRows = (_, {
+  workflow,
+  setWorkflow,
+  workflowOpen,
+  setWorkflowOpen,
+  dataSet,
+  setDataSet,
+  dataSetOpen,
+  setDataSetOpen,
+  orgUnit,
+  setOrgUnit,
+  orgUnitOpen,
+  setOrgUnitOpen
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-3203152640" + " " + "narrow-container"
+  }, /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
+    disableClearSelections: true,
+    onClearSelectionClick: () => null
+  }, /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
+    disabled: false,
+    label: "Workflow",
+    value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
+    noValueMessage: "Choose a workflow",
+    open: workflowOpen,
+    setOpen: setWorkflowOpen
+  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
+    values: _common.workflows,
+    selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
+    onChange: ({
+      selected
+    }) => {
+      setWorkflow(_common.workflows.find(currentWorkflow => selected === currentWorkflow.value));
+      setWorkflowOpen(false);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
+    disabled: !workflow,
+    label: "Data set",
+    value: dataSet === null || dataSet === void 0 ? void 0 : dataSet.label,
+    noValueMessage: "Choose a data set",
+    open: dataSetOpen,
+    setOpen: setDataSetOpen
+  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
+    values: _common.dataSets,
+    selected: dataSet === null || dataSet === void 0 ? void 0 : dataSet.value,
+    onChange: ({
+      selected
+    }) => {
+      setDataSet(_common.dataSets.find(currentWorkflow => selected === currentWorkflow.value));
+      setDataSetOpen(false);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
+    disabled: !workflow && !dataSet,
+    label: "Org unit",
+    value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
+    noValueMessage: "Choose an organisation unit",
+    open: orgUnitOpen,
+    setOpen: setOrgUnitOpen
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 400,
+      minHeight: 400,
+      maxHeight: '70vh'
+    },
+    className: "jsx-3203152640"
+  }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+    singleSelection: true,
+    onChange: (nextOrgUnit, evt) => {
+      evt.stopPropagation();
+      setOrgUnit(nextOrgUnit);
+      setOrgUnitOpen(false);
+    },
+    roots: ['A0000000000'],
+    selected: orgUnit ? [orgUnit.path] : []
+  })))), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      padding: '0 16px',
+      textAlign: 'center'
+    },
+    className: "jsx-3203152640"
+  }, "This story shows the selection bar component with multiple rows when a workflow has been selected."), /*#__PURE__*/_react.default.createElement(_style.default, {
+    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]
+}), (0, _common.createDecoratorCustomDataProvider)()];

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

@@ -0,0 +1,79 @@
+"use strict";
+
+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 }; }
+
+const RHSContent = () => /*#__PURE__*/_react.default.createElement("div", {
+  className: "jsx-876392447" + " " + "rhs-content"
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  small: true
+}, "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 = (_, {
+  workflow,
+  setWorkflow,
+  workflowOpen,
+  setWorkflowOpen,
+  orgUnit,
+  setOrgUnit,
+  orgUnitOpen,
+  setOrgUnitOpen
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
+    disableClearSelections: !workflow || !orgUnit,
+    onClearSelectionClick: () => {
+      setWorkflow(null);
+      setOrgUnit(null);
+    },
+    additionalContent: /*#__PURE__*/_react.default.createElement(RHSContent, null)
+  }, /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
+    disabled: false,
+    label: "Workflow",
+    value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
+    noValueMessage: "Choose a workflow",
+    open: workflowOpen,
+    setOpen: setWorkflowOpen
+  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
+    values: _common.workflows,
+    selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
+    onChange: ({
+      selected
+    }) => {
+      setWorkflow(_common.workflows.find(currentWorkflow => selected === currentWorkflow.value));
+      setWorkflowOpen(false);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
+    disabled: !workflow,
+    label: "Org unit",
+    value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
+    noValueMessage: "Choose an organisation unit",
+    open: orgUnitOpen,
+    setOpen: setOrgUnitOpen
+  }, /*#__PURE__*/_react.default.createElement(_common.OrgUnitSelect, {
+    selected: orgUnit ? [orgUnit.path] : [],
+    onChange: (nextOrgUnit, evt) => {
+      evt.stopPropagation();
+      setOrgUnit(nextOrgUnit);
+      setOrgUnitOpen(false);
+    }
+  })));
+};
+
+exports.WithAdditionalContent = WithAdditionalContent;
+WithAdditionalContent.decorators = [_common.decoratorCommonStyles, (0, _common.createStatefulDecorator)(), (0, _common.createDecoratorCustomDataProvider)()];

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

@@ -0,0 +1,68 @@
+"use strict";
+
+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 }; }
+
+const WithSomeInputs = (_, {
+  workflow,
+  setWorkflow,
+  workflowOpen,
+  setWorkflowOpen,
+  orgUnit,
+  setOrgUnit,
+  orgUnitOpen,
+  setOrgUnitOpen
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
+    disableClearSelections: !workflow && !orgUnit,
+    onClearSelectionClick: () => {
+      setWorkflow(null);
+      setOrgUnit(null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
+    disabled: false,
+    label: "Workflow",
+    value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
+    noValueMessage: "Choose a workflow",
+    open: workflowOpen,
+    setOpen: setWorkflowOpen
+  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
+    values: _common.workflows,
+    selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
+    onChange: ({
+      selected
+    }) => {
+      setWorkflow(_common.workflows.find(currentWorkflow => selected === currentWorkflow.value));
+      setWorkflowOpen(false);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
+    disabled: !workflow,
+    label: "Org unit",
+    value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
+    noValueMessage: "Choose an organisation unit",
+    open: orgUnitOpen,
+    setOpen: setOrgUnitOpen
+  }, /*#__PURE__*/_react.default.createElement(_common.OrgUnitSelect, {
+    selected: orgUnit ? [orgUnit.path] : [],
+    onChange: (nextOrgUnit, evt) => {
+      evt.stopPropagation();
+      setOrgUnit(nextOrgUnit);
+      setOrgUnitOpen(false);
+    }
+  })));
+};
+
+exports.WithSomeInputs = WithSomeInputs;
+WithSomeInputs.decorators = [_common.decoratorCommonStyles, (0, _common.createStatefulDecorator)({
+  workflow: _common.workflows[0]
+}), (0, _common.createDecoratorCustomDataProvider)()];

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectorBar", {
+  enumerable: true,
+  get: function () {
+    return _selectorBar.SelectorBar;
+  }
+});
+
+var _selectorBar = require("./selector-bar.js");