@dhis2-ui/selector-bar 7.10.0

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectorBar = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _button = require("@dhis2-ui/button");
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ClearSelection = ({
+  disabled,
+  onClick
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3676026375", [_uiConstants.spacers.dp8]]]) + " " + "clear-selections"
+  }, /*#__PURE__*/_react.default.createElement(_button.Button, {
+    small: true,
+    secondary: true,
+    disabled: disabled,
+    onClick: onClick
+  }, _d2I18n.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 ${_uiConstants.spacers.dp8};}`]));
+};
+
+ClearSelection.propTypes = {
+  disabled: _propTypes.default.bool,
+  onClick: _propTypes.default.func
+};
+
+const SelectorBar = ({
+  children,
+  onClearSelectionClick,
+  disableClearSelections,
+  additionalContent
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400,
+  /*
+   * Specs define the space to be 12px.
+   * 8px already come from the clear selection component
+   */
+  '']]]) + " " + ((0, _classnames.default)('container', {
+    withRHSContents: additionalContent
+  }) || "")
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
+}, children, onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
+  disabled: disableClearSelections,
+  onClick: onClearSelectionClick
+})), additionalContent && /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "additional-contents"
+}, additionalContent), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "720742913",
+  dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, '']
+}, [`.container.__jsx-style-dynamic-selector{background:${_uiConstants.colors.white};box-shadow:inset 0 -1px 0 0 ${_uiConstants.colors.grey400};padding-bottom:1px;}`, ".withRHSContents.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".controls.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:1px;}", `.additional-contents.__jsx-style-dynamic-selector{${''} padding-left:4px;}`])));
+
+exports.SelectorBar = SelectorBar;
+SelectorBar.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  additionalContent: _propTypes.default.any,
+  disableClearSelections: _propTypes.default.bool,
+  onClearSelectionClick: _propTypes.default.func
+};

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "WithSomeInputs", {
+  enumerable: true,
+  get: function () {
+    return _withSomeInputs.WithSomeInputs;
+  }
+});
+Object.defineProperty(exports, "WithAdditionalContent", {
+  enumerable: true,
+  get: function () {
+    return _withRightHandSideContent.WithAdditionalContent;
+  }
+});
+Object.defineProperty(exports, "KeepOrgUnitExpanded", {
+  enumerable: true,
+  get: function () {
+    return _keepOrgUnitExpanded.KeepOrgUnitExpanded;
+  }
+});
+Object.defineProperty(exports, "WithMultipleRows", {
+  enumerable: true,
+  get: function () {
+    return _withMultipleRows.WithMultipleRows;
+  }
+});
+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 _default = {
+  title: 'Actions/SelectionBar'
+};
+exports.default = _default;

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

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

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

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

package/build/cjs/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/cjs/selector-bar-item/index.js

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

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectorBarItem = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+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 _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 }; }
+
+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"
+ * to false as well.
+ * A good example is selecting a value (which is not a click outside) and this
+ * component neither has any control over that component nor does it have a way
+ * to "observe" that behavior. Especially for selection bar items that allow
+ * "multiple" selections, this would be more or less impossible to predict
+ * inside this component
+ */
+
+const SelectorBarItem = ({
+  open,
+  setOpen,
+  children,
+  disabled,
+  label,
+  value,
+  noValueMessage
+}) => {
+  const buttonRef = (0, _react.useRef)();
+  const Icon = open ? _uiIcons.IconChevronUp24 : _uiIcons.IconChevronDown24;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    ref: buttonRef,
+    disabled: disabled,
+    onClick: () => setOpen(true),
+    className: _style.default.dynamic([["3065814091", [
+    /*
+     * The arrow icon has ~4px empty space on the sides,
+     * that's why the padding on the right is only 8px.
+     */
+    '', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "selector-bar-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "label"
+  }, label), !disabled && /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "value"
+  }, value || noValueMessage), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "toggle-icon"
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]])
+  })), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
+    onClick: (_, evt) => {
+      evt.stopPropagation();
+      setOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    reference: buttonRef,
+    placement: "bottom-end",
+    modifiers: [offsetModifier]
+  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, children))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3065814091",
+    dynamic: ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]
+  }, [`.selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;${''} padding:0 ${_uiConstants.spacers.dp8} 0 ${_uiConstants.spacers.dp12};font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ${_uiConstants.colors.grey400};}`, ".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-left:${_uiConstants.spacers.dp8};}`, `.toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:${_uiConstants.spacers.dp4};height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`]));
+};
+
+exports.SelectorBarItem = SelectorBarItem;
+SelectorBarItem.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  label: _propTypes.default.string.isRequired,
+  noValueMessage: _propTypes.default.string.isRequired,
+  open: _propTypes.default.bool.isRequired,
+  setOpen: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
+  value: _propTypes.default.string
+};

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

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OpenWithValue = exports.ClosedWithValue = exports.OpenNoValue = exports.ClosedNoValue = exports.default = 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; }
+
+const options = [{
+  value: 'value 1',
+  label: 'label 1'
+}, {
+  value: 'value 2',
+  label: 'label 2'
+}, {
+  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) || '');
+    const [open, setOpen] = (0, _react.useState)((args === null || args === void 0 ? void 0 : args.open) || false);
+    return fn({
+      selected,
+      open,
+      setSelected,
+      setOpen
+    });
+  };
+};
+
+const createStory = () => (_, {
+  open,
+  setOpen,
+  selected,
+  setSelected
+}) => {
+  var _options$find;
+
+  return /*#__PURE__*/_react.default.createElement(_selectorBarItem.SelectorBarItem, {
+    label: "Selection bar item",
+    noValueMessage: "No value message",
+    open: open,
+    setOpen: setOpen,
+    value: ((_options$find = options.find(({
+      value
+    }) => value === selected)) === null || _options$find === void 0 ? void 0 : _options$find.label) || ''
+  }, /*#__PURE__*/_react.default.createElement(_select.SingleSelectField, {
+    selected: selected,
+    onChange: ({
+      selected: nextSelected
+    }) => {
+      setSelected(nextSelected);
+      setOpen(false);
+    }
+  }, options.map(({
+    value,
+    label
+  }) => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
+    key: value,
+    value: value,
+    label: label
+  }))));
+};
+
+var _default = {
+  title: 'SelectorBarItem'
+};
+exports.default = _default;
+const ClosedNoValue = createStory();
+exports.ClosedNoValue = ClosedNoValue;
+ClosedNoValue.decorators = [createStateDecorator()];
+const OpenNoValue = createStory();
+exports.OpenNoValue = OpenNoValue;
+OpenNoValue.decorators = [createStateDecorator({
+  open: true
+})];
+const ClosedWithValue = createStory();
+exports.ClosedWithValue = ClosedWithValue;
+ClosedWithValue.decorators = [createStateDecorator({
+  selected: 'value 1'
+})];
+const OpenWithValue = createStory();
+exports.OpenWithValue = OpenWithValue;
+OpenWithValue.decorators = [createStateDecorator({
+  open: true,
+  selected: 'value 1'
+})];

package/build/es/index.js

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

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

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

package/build/es/locales/index.js

@@ -0,0 +1,13 @@
+//------------------------------------------------------------------------------
+// <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>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n';
+import enTranslations from './en/translations.json';
+const namespace = 'default';
+i18n.addResources('en', namespace, enTranslations);
+export default i18n;