@dhis2-ui/selector-bar 7.10.0

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

@@ -0,0 +1,213 @@
+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 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:${colors.grey100};padding:0 !important;}`, "div#root{padding:0;}"]));
+export 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;
+};
+export const dataProviderData = {
+  organisationUnits: (_, {
+    id
+  }) => {
+    const data = getOrganisationUnitData(id);
+
+    if (!data) {
+      return Promise.reject(new Error('404 - Org unit not found'));
+    }
+
+    return Promise.resolve(data);
+  }
+};
+export const createDecoratorCustomDataProvider = args => {
+  const data = (args === null || args === void 0 ? void 0 : args.data) || dataProviderData;
+  return Story => {
+    window.dataProviderData = data;
+    return /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: data
+    }, /*#__PURE__*/React.createElement(Story, null));
+  };
+};
+export const createStatefulDecorator = args => {
+  return fn => {
+    const [workflow, setWorkflow] = useState((args === null || args === void 0 ? void 0 : args.workflow) || null);
+    const [workflowOpen, setWorkflowOpen] = useState((args === null || args === void 0 ? void 0 : args.workflowOpen) || false);
+    const [dataSet, setDataSet] = useState((args === null || args === void 0 ? void 0 : args.dataSet) || null);
+    const [dataSetOpen, setDataSetOpen] = useState((args === null || args === void 0 ? void 0 : args.dataSetOpen) || false);
+    const [orgUnit, setOrgUnit] = useState((args === null || args === void 0 ? void 0 : args.orgUnit) || null);
+    const [orgUnitOpen, setOrgUnitOpen] = useState((args === null || args === void 0 ? void 0 : args.orgUnitOpen) || false);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, fn({
+      workflow,
+      setWorkflow,
+      workflowOpen,
+      setWorkflowOpen,
+      dataSet,
+      setDataSet,
+      dataSetOpen,
+      setDataSetOpen,
+      orgUnit,
+      setOrgUnit,
+      orgUnitOpen,
+      setOrgUnitOpen
+    }));
+  };
+};
+export const workflows = [{
+  value: 'm<4y',
+  label: 'Mortality < 4 years'
+}, {
+  value: 'm<5y',
+  label: 'Mortality < 5 years'
+}];
+export 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'
+}];
+export const MenuSelect = ({
+  values,
+  selected,
+  onChange
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 400
+    }
+  }, /*#__PURE__*/React.createElement(Menu, null, values.map(({
+    value,
+    label
+  }) => /*#__PURE__*/React.createElement(MenuItem, {
+    key: value,
+    label: label,
+    active: selected === value,
+    onClick: () => onChange({
+      selected: value
+    })
+  }))));
+};
+export const OrgUnitSelect = ({
+  onChange,
+  selected
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 400,
+      minHeight: 400,
+      maxHeight: '70vh'
+    }
+  }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+    singleSelection: true,
+    onChange: onChange,
+    roots: ['A0000000000'],
+    selected: selected
+  }));
+};

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

@@ -0,0 +1,54 @@
+import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree';
+import React, { useState } from 'react';
+import { SelectorBar, SelectorBarItem } from '../../index.js';
+import { createStatefulDecorator, decoratorCommonStyles, createDecoratorCustomDataProvider } from './common.js';
+export const KeepOrgUnitExpanded = (_, {
+  orgUnit,
+  setOrgUnit,
+  orgUnitOpen,
+  setOrgUnitOpen
+}) => {
+  const [expanded, setExpanded] = useState([]);
+
+  const handleExpand = ({
+    path
+  }) => setExpanded([...expanded, path]);
+
+  const handleCollapse = ({
+    path
+  }) => setExpanded(expanded.filter(p => p !== path));
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectorBar, {
+    disableClearSelections: !orgUnit,
+    onClearSelectionClick: () => setOrgUnit(null)
+  }, /*#__PURE__*/React.createElement(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.createElement("div", {
+    style: {
+      width: 400,
+      minHeight: 400,
+      maxHeight: '70vh'
+    }
+  }, /*#__PURE__*/React.createElement(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.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"));
+};
+KeepOrgUnitExpanded.decorators = [decoratorCommonStyles, createStatefulDecorator(), createDecoratorCustomDataProvider()];

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

@@ -0,0 +1,92 @@
+import _JSXStyle from "styled-jsx/style";
+import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree';
+import React from 'react';
+import { SelectorBar, SelectorBarItem } from '../../index.js';
+import { MenuSelect, createDecoratorCustomDataProvider, createStatefulDecorator, dataSets, decoratorCommonStyles, workflows } from './common.js';
+export const WithMultipleRows = (_, {
+  workflow,
+  setWorkflow,
+  workflowOpen,
+  setWorkflowOpen,
+  dataSet,
+  setDataSet,
+  dataSetOpen,
+  setDataSetOpen,
+  orgUnit,
+  setOrgUnit,
+  orgUnitOpen,
+  setOrgUnitOpen
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-3203152640" + " " + "narrow-container"
+  }, /*#__PURE__*/React.createElement(SelectorBar, {
+    disableClearSelections: true,
+    onClearSelectionClick: () => null
+  }, /*#__PURE__*/React.createElement(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.createElement(MenuSelect, {
+    values: workflows,
+    selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
+    onChange: ({
+      selected
+    }) => {
+      setWorkflow(workflows.find(currentWorkflow => selected === currentWorkflow.value));
+      setWorkflowOpen(false);
+    }
+  })), /*#__PURE__*/React.createElement(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.createElement(MenuSelect, {
+    values: dataSets,
+    selected: dataSet === null || dataSet === void 0 ? void 0 : dataSet.value,
+    onChange: ({
+      selected
+    }) => {
+      setDataSet(dataSets.find(currentWorkflow => selected === currentWorkflow.value));
+      setDataSetOpen(false);
+    }
+  })), /*#__PURE__*/React.createElement(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.createElement("div", {
+    style: {
+      width: 400,
+      minHeight: 400,
+      maxHeight: '70vh'
+    },
+    className: "jsx-3203152640"
+  }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+    singleSelection: true,
+    onChange: (nextOrgUnit, evt) => {
+      evt.stopPropagation();
+      setOrgUnit(nextOrgUnit);
+      setOrgUnitOpen(false);
+    },
+    roots: ['A0000000000'],
+    selected: orgUnit ? [orgUnit.path] : []
+  })))), /*#__PURE__*/React.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.createElement(_JSXStyle, {
+    id: "3203152640"
+  }, [".narrow-container.jsx-3203152640{margin:0 auto;width:100%;max-width:600px;}"]));
+};
+WithMultipleRows.decorators = [decoratorCommonStyles, createStatefulDecorator({
+  workflow: workflows[0]
+}), createDecoratorCustomDataProvider()];

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

@@ -0,0 +1,64 @@
+import _JSXStyle from "styled-jsx/style";
+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, {
+  small: true
+}, "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 = (_, {
+  workflow,
+  setWorkflow,
+  workflowOpen,
+  setWorkflowOpen,
+  orgUnit,
+  setOrgUnit,
+  orgUnitOpen,
+  setOrgUnitOpen
+}) => {
+  return /*#__PURE__*/React.createElement(SelectorBar, {
+    disableClearSelections: !workflow || !orgUnit,
+    onClearSelectionClick: () => {
+      setWorkflow(null);
+      setOrgUnit(null);
+    },
+    additionalContent: /*#__PURE__*/React.createElement(RHSContent, null)
+  }, /*#__PURE__*/React.createElement(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.createElement(MenuSelect, {
+    values: workflows,
+    selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
+    onChange: ({
+      selected
+    }) => {
+      setWorkflow(workflows.find(currentWorkflow => selected === currentWorkflow.value));
+      setWorkflowOpen(false);
+    }
+  })), /*#__PURE__*/React.createElement(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.createElement(OrgUnitSelect, {
+    selected: orgUnit ? [orgUnit.path] : [],
+    onChange: (nextOrgUnit, evt) => {
+      evt.stopPropagation();
+      setOrgUnit(nextOrgUnit);
+      setOrgUnitOpen(false);
+    }
+  })));
+};
+WithAdditionalContent.decorators = [decoratorCommonStyles, createStatefulDecorator(), createDecoratorCustomDataProvider()];

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { SelectorBar, SelectorBarItem } from '../../index.js';
+import { OrgUnitSelect, MenuSelect, createDecoratorCustomDataProvider, createStatefulDecorator, decoratorCommonStyles, workflows } from './common.js';
+export const WithSomeInputs = (_, {
+  workflow,
+  setWorkflow,
+  workflowOpen,
+  setWorkflowOpen,
+  orgUnit,
+  setOrgUnit,
+  orgUnitOpen,
+  setOrgUnitOpen
+}) => {
+  return /*#__PURE__*/React.createElement(SelectorBar, {
+    disableClearSelections: !workflow && !orgUnit,
+    onClearSelectionClick: () => {
+      setWorkflow(null);
+      setOrgUnit(null);
+    }
+  }, /*#__PURE__*/React.createElement(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.createElement(MenuSelect, {
+    values: workflows,
+    selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
+    onChange: ({
+      selected
+    }) => {
+      setWorkflow(workflows.find(currentWorkflow => selected === currentWorkflow.value));
+      setWorkflowOpen(false);
+    }
+  })), /*#__PURE__*/React.createElement(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.createElement(OrgUnitSelect, {
+    selected: orgUnit ? [orgUnit.path] : [],
+    onChange: (nextOrgUnit, evt) => {
+      evt.stopPropagation();
+      setOrgUnit(nextOrgUnit);
+      setOrgUnitOpen(false);
+    }
+  })));
+};
+WithSomeInputs.decorators = [decoratorCommonStyles, createStatefulDecorator({
+  workflow: workflows[0]
+}), createDecoratorCustomDataProvider()];

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

@@ -0,0 +1 @@
+export { SelectorBar } from './selector-bar.js';

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

@@ -0,0 +1,60 @@
+import _JSXStyle from "styled-jsx/style";
+import { Button } from '@dhis2-ui/button';
+import i18n from '@dhis2/d2-i18n';
+import { colors, spacers } from '@dhis2/ui-constants';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const ClearSelection = ({
+  disabled,
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3676026375", [spacers.dp8]]]) + " " + "clear-selections"
+  }, /*#__PURE__*/React.createElement(Button, {
+    small: true,
+    secondary: true,
+    disabled: disabled,
+    onClick: onClick
+  }, 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 ${spacers.dp8};}`]));
+};
+
+ClearSelection.propTypes = {
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func
+};
+export const SelectorBar = ({
+  children,
+  onClearSelectionClick,
+  disableClearSelections,
+  additionalContent
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400,
+  /*
+   * Specs define the space to be 12px.
+   * 8px already come from the clear selection component
+   */
+  '']]]) + " " + (cx('container', {
+    withRHSContents: additionalContent
+  }) || "")
+}, /*#__PURE__*/React.createElement("div", {
+  className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "controls"
+}, children, onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
+  disabled: disableClearSelections,
+  onClick: onClearSelectionClick
+})), additionalContent && /*#__PURE__*/React.createElement("div", {
+  className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "additional-contents"
+}, additionalContent), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "720742913",
+  dynamic: [colors.white, colors.grey400, '']
+}, [`.container.__jsx-style-dynamic-selector{background:${colors.white};box-shadow:inset 0 -1px 0 0 ${colors.grey400};padding-bottom:1px;}`, ".withRHSContents.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".controls.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:1px;}", `.additional-contents.__jsx-style-dynamic-selector{${''} padding-left:4px;}`])));
+SelectorBar.propTypes = {
+  children: PropTypes.any.isRequired,
+  additionalContent: PropTypes.any,
+  disableClearSelections: PropTypes.bool,
+  onClearSelectionClick: PropTypes.func
+};

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

@@ -0,0 +1,7 @@
+export default {
+  title: 'Actions/SelectionBar'
+};
+export { WithSomeInputs } from './__stories__/with-some-inputs.js';
+export { WithAdditionalContent } from './__stories__/with-right-hand-side-content.js';
+export { KeepOrgUnitExpanded } from './__stories__/keep-org-unit-expanded.js';
+export { WithMultipleRows } from './__stories__/with-multiple-rows.js';

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

@@ -0,0 +1,64 @@
+import '@testing-library/jest-dom';
+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, {
+      label: "Selection bar item 1",
+      noValueMessage: "No value message 1",
+      open: false,
+      setOpen: noop
+    }, "Content"), /*#__PURE__*/React.createElement(SelectorBarItem, {
+      label: "Selection bar item 2",
+      noValueMessage: "No value message 2",
+      open: false,
+      setOpen: noop
+    }, "Content")));
+    expect(screen.getByText('Selection bar item 1')).not.toBeNull();
+    expect(screen.getByText('Selection bar item 2')).not.toBeNull();
+  });
+  it('should not disable the clear selection button by default', () => {
+    render( /*#__PURE__*/React.createElement(SelectorBar, {
+      onClearSelectionClick: noop
+    }, /*#__PURE__*/React.createElement(SelectorBarItem, {
+      label: "label",
+      noValueMessage: "msg",
+      open: false,
+      setOpen: noop
+    }, "Content")));
+    const clearBtn = screen.getByText('Clear selections');
+    expect(clearBtn).not.toBeNull();
+    expect(clearBtn).not.toBeDisabled();
+  });
+  it('should disable the clear selection button', () => {
+    render( /*#__PURE__*/React.createElement(SelectorBar, {
+      disableClearSelections: true,
+      onClearSelectionClick: noop
+    }, /*#__PURE__*/React.createElement(SelectorBarItem, {
+      label: "label",
+      noValueMessage: "msg",
+      open: false,
+      setOpen: noop
+    }, "Content")));
+    const clearBtn = screen.getByText('Clear selections');
+    expect(clearBtn).not.toBeNull();
+    expect(clearBtn).toBeDisabled();
+  });
+  it('should render the optional content', () => {
+    render( /*#__PURE__*/React.createElement(SelectorBar, {
+      additionalContent: /*#__PURE__*/React.createElement("div", null, "Foobar")
+    }, /*#__PURE__*/React.createElement(SelectorBarItem, {
+      label: "label",
+      noValueMessage: "msg",
+      open: false,
+      setOpen: noop
+    }, "Content")));
+    const extraContent = screen.getByText('Foobar');
+    expect(extraContent).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+Given('the selector bar item is closed', () => {
+  cy.visitStory('SelectorBarItem', 'closed no value');
+});
+Given('the selector bar item is open', () => {
+  cy.visitStory('SelectorBarItem', 'open no value');
+});
+When('the user opens the selector bar item', () => {
+  cy.contains('Selection bar item', {
+    selector: 'button'
+  }).click();
+});
+When('the user closes the selector bar item', () => {
+  cy.get('body').click('topLeft');
+});
+Then('the children should be displayed', () => {
+  cy.get('[data-test="dhis2-uiwidgets-singleselectfield"]').should('exist');
+});
+Then('the children should not be displayed', () => {
+  cy.get('[data-test="dhis2-uiwidgets-singleselectfield"]').should('not.exist');
+});

package/build/es/selector-bar-item/features/toggle-children.feature

@@ -0,0 +1,11 @@
+Feature: The display of the children can be toggled
+
+    Scenario: The children are being opened
+        Given the selector bar item is closed
+        When the user opens the selector bar item
+        Then the children should be displayed
+
+    Scenario: The children are being closed
+        Given the selector bar item is open
+        When the user closes the selector bar item
+        Then the children should not be displayed

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

@@ -0,0 +1 @@
+export { SelectorBarItem } from './selector-bar-item.js';