@dhis2-ui/select 10.9.2 → 10.10.0-alpha.2

package/build/cjs/simple-single-select/use-handle-key-press/utils.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findFirstOptionIndex = findFirstOptionIndex;
+exports.findLastOptionIndex = findLastOptionIndex;
+exports.findNextOptionIndex = findNextOptionIndex;
+exports.findPrevOptionIndex = findPrevOptionIndex;
+exports.isEnabled = isEnabled;
+function isEnabled(_ref) {
+  let {
+    disabled
+  } = _ref;
+  return !disabled;
+}
+function findNextOptionIndex(_ref2) {
+  let {
+    options,
+    activeIndex
+  } = _ref2;
+  const startIndex = activeIndex + 1;
+  const optionsToSearch = options.slice(startIndex);
+
+  // Need to add back the count we removed by slicing the options array
+  return startIndex + optionsToSearch.findIndex(isEnabled);
+}
+function findPrevOptionIndex(_ref3) {
+  let {
+    options,
+    activeIndex
+  } = _ref3;
+  return options.slice(0, activeIndex).findLastIndex(isEnabled);
+}
+function findFirstOptionIndex(_ref4) {
+  let {
+    options
+  } = _ref4;
+  return options.findIndex(isEnabled);
+}
+function findLastOptionIndex(_ref5) {
+  let {
+    options
+  } = _ref5;
+  return options.findLastIndex(isEnabled);
+}

package/build/cjs/simple-single-select-field/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SimpleSingleSelectField", {
+  enumerable: true,
+  get: function () {
+    return _simpleSingleSelectField.SimpleSingleSelectField;
+  }
+});
+var _simpleSingleSelectField = require("./simple-single-select-field.js");

package/build/cjs/simple-single-select-field/simple-single-select-field.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleSingleSelectField = SimpleSingleSelectField;
+var _propTypes = require("@dhis2/prop-types");
+var _uiConstants = require("@dhis2/ui-constants");
+var _field = require("@dhis2-ui/field");
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../simple-single-select/index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SimpleSingleSelectField(props) {
+  const {
+    className,
+    dataTest,
+    disabled,
+    error,
+    helpText,
+    label,
+    name,
+    required,
+    valid,
+    validationText,
+    warning
+  } = props;
+  const labelId = `${name}-label`;
+  return /*#__PURE__*/_react.default.createElement(_field.Field, {
+    className: className,
+    dataTest: dataTest,
+    disabled: disabled,
+    required: required,
+    labelId: labelId,
+    label: label,
+    helpText: helpText,
+    validationText: validationText,
+    error: error,
+    warning: warning,
+    valid: valid
+  }, /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelect, _extends({}, props, {
+    labelledBy: labelId
+  })));
+}
+SimpleSingleSelectField.propTypes = {
+  /** Label displayed above the input **/
+  label: _propTypes2.default.string.isRequired,
+  /** necessary for IDs that are required for accessibility **/
+  name: _propTypes2.default.string.isRequired,
+  /** An array of options **/
+  options: _propTypes2.default.arrayOf(_index.optionProp).isRequired,
+  /** A callback that will be called with the new value or an empty string **/
+  onChange: _propTypes2.default.func.isRequired,
+  /** Will focus the select initially **/
+  autoFocus: _propTypes2.default.bool,
+  /** Additional class names that will be applied to the root element **/
+  className: _propTypes2.default.string,
+  /** This will allow us to put an aria-label on the clear button **/
+  clearText: (0, _propTypes.requiredIf)(props => props.clearable, _propTypes2.default.string),
+  /** Whether a clear button should be displayed or not **/
+  clearable: _propTypes2.default.bool,
+  /** A value for a `data-test` attribute on the root element **/
+  dataTest: _propTypes2.default.string,
+  /** Renders a select with lower height **/
+  dense: _propTypes2.default.bool,
+  /** Disables all interactions with the select (except focussing) **/
+  disabled: _propTypes2.default.bool,
+  /** Text or component to display when there are no options **/
+  empty: _propTypes2.default.node,
+  /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  error: _uiConstants.sharedPropTypes.statusPropType,
+  /** Help text that will be displayed below the input **/
+  filterHelpText: _propTypes2.default.string,
+  /** Value will be used as aria-label attribute on the filter input **/
+  filterLabel: _propTypes2.default.string,
+  /** Placeholder for the filter input **/
+  filterPlaceholder: _propTypes2.default.string,
+  /** Value of the filter input **/
+  filterValue: _propTypes2.default.string,
+  /** Whether the select should display a filter input **/
+  filterable: _propTypes2.default.bool,
+  /** Help text, displayed below the input **/
+  helpText: _propTypes2.default.string,
+  /** Will show a loading indicator at the end of the options-list **/
+  loading: _propTypes2.default.bool,
+  /** Text that will be displayed next to the loading indicator **/
+  menuLoadingText: _propTypes2.default.string,
+  /** Allows to modify the max height of the menu **/
+  menuMaxHeight: _propTypes2.default.string,
+  /** String that will be displayed when the select is being filtered but the options array is empty **/
+  noMatchText: (0, _propTypes.requiredIf)(props => props.filterable, _propTypes2.default.string),
+  /** Allows to override what's rendered inside the `button[role="option"]`.
+   * Can be overriden on an individual option basis **/
+  optionComponent: _propTypes2.default.elementType,
+  /** For a11y: How aggressively the user should be updated about changes in options **/
+  optionUpdateStrategy: _propTypes2.default.oneOf(['off', 'polite', 'assertive']),
+  /** String to show when there's no value and no valueLabel **/
+  placeholder: _propTypes2.default.string,
+  /** String that will be displayed before the label of the selected option **/
+  prefix: _propTypes2.default.string,
+  /** Whether a value is required or not **/
+  required: _propTypes2.default.bool,
+  /** Standard HTML tab-index attribute that will be put on the combobox's root element **/
+  tabIndex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  valid: _uiConstants.sharedPropTypes.statusPropType,
+  /** Text shown below input when `props.error` is true **/
+  validationText: _propTypes2.default.string,
+  /** As of now, this component does not support being uncontrolled **/
+  value: _propTypes2.default.string,
+  /**
+   * When the option is not in the options list (e.g. not loaded or list is
+   * filtered), but a selected value needs to be displayed, then this prop can
+   * be used to supply the text to be shown.
+   **/
+  valueLabel: (0, _propTypes.requiredIf)(props => {
+    if (props.options.find(_ref => {
+      let {
+        value
+      } = _ref;
+      return props.value === value;
+    })) {
+      return false;
+    }
+    return props.value;
+  }, _propTypes2.default.string),
+  /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  warning: _uiConstants.sharedPropTypes.statusPropType,
+  /** Will be called when the combobox is loses focus **/
+  onBlur: _propTypes2.default.func,
+  /** Will be called when the last option is scrolled into the visible area **/
+  onEndReached: _propTypes2.default.func,
+  /** Will be called when the filter value changes **/
+  onFilterChange: _propTypes2.default.func,
+  /** Will be called when the combobox is being focused **/
+  onFocus: _propTypes2.default.func
+};

package/build/cjs/simple-single-select-field/simple-single-select-field.prod.stories.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.StatusDisabled = exports.Required = exports.InputWidth = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("./index.js");
+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 description = `
+\`SimpleSingleSelectField\` is a wrapper around a \`SimpleSingleSelect\` component that adds a label, help text, validation text, and other features.
+
+See the SimpleSingleSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
+
+\`\`\`js
+import { SimpleSingleSelectField, SingleSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._
+`;
+const options = [{
+  value: '1',
+  label: 'one'
+}, {
+  value: '2',
+  label: 'two'
+}, {
+  value: '3',
+  label: 'three'
+}, {
+  value: '4',
+  label: 'four'
+}, {
+  value: '5',
+  label: 'five'
+}, {
+  value: '6',
+  label: 'six'
+}, {
+  value: '7',
+  label: 'seven'
+}, {
+  value: '8',
+  label: 'eight'
+}, {
+  value: '9',
+  label: 'nine'
+}, {
+  value: '10',
+  label: 'ten'
+}];
+var _default = exports.default = {
+  title: 'SimpleSingleSelectField',
+  component: _index.SimpleSingleSelectField,
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+const Default = () => {
+  var _options$find;
+  const [value, setValue] = (0, _react.useState)('3');
+  const valueLabel = value ? (_options$find = options.find(option => option.value === value)) === null || _options$find === void 0 ? void 0 : _options$find.label : '';
+  return /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+exports.Default = Default;
+const WithHelpText = () => {
+  var _options$find2;
+  const [value, setValue] = (0, _react.useState)('3');
+  const valueLabel = value ? (_options$find2 = options.find(option => option.value === value)) === null || _options$find2 === void 0 ? void 0 : _options$find2.label : '';
+  return /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    name: "simple",
+    label: "This is the label",
+    helpText: "This is the help text",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+exports.WithHelpText = WithHelpText;
+const StatusValid = () => {
+  var _options$find3;
+  const [value, setValue] = (0, _react.useState)('3');
+  const valueLabel = value ? (_options$find3 = options.find(option => option.value === value)) === null || _options$find3 === void 0 ? void 0 : _options$find3.label : '';
+  return /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    valid: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    validationText: "Totally valid!",
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+exports.StatusValid = StatusValid;
+const StatusWarning = () => {
+  var _options$find4;
+  const [value, setValue] = (0, _react.useState)('3');
+  const valueLabel = value ? (_options$find4 = options.find(option => option.value === value)) === null || _options$find4 === void 0 ? void 0 : _options$find4.label : '';
+  return /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    warning: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    validationText: "Hm, not quite, I warn thee!",
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+exports.StatusWarning = StatusWarning;
+const StatusError = () => {
+  var _options$find5;
+  const [value, setValue] = (0, _react.useState)('3');
+  const valueLabel = value ? (_options$find5 = options.find(option => option.value === value)) === null || _options$find5 === void 0 ? void 0 : _options$find5.label : '';
+  return /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    error: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    validationText: "That value is wrong. Sorry!",
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+exports.StatusError = StatusError;
+const StatusDisabled = () => {
+  var _options$find6;
+  const [value, setValue] = (0, _react.useState)('3');
+  const valueLabel = value ? (_options$find6 = options.find(option => option.value === value)) === null || _options$find6 === void 0 ? void 0 : _options$find6.label : '';
+  return /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    disabled: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+exports.StatusDisabled = StatusDisabled;
+const Required = () => {
+  var _options$find7;
+  const [value, setValue] = (0, _react.useState)('3');
+  const valueLabel = value ? (_options$find7 = options.find(option => option.value === value)) === null || _options$find7 === void 0 ? void 0 : _options$find7.label : '';
+  return /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    required: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+exports.Required = Required;
+const InputWidth = () => {
+  var _options$find8;
+  const [value, setValue] = (0, _react.useState)('3');
+  const valueLabel = value ? (_options$find8 = options.find(option => option.value === value)) === null || _options$find8 === void 0 ? void 0 : _options$find8.label : '';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 200
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelectField, {
+    name: "simple",
+    label: "A very long label indeed, well at least longer than the input field to show how it looks and works and stuff",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  }));
+};
+exports.InputWidth = InputWidth;

package/build/cjs/simple-single-select-field/simple-single-select-field.test.js

@@ -0,0 +1,133 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _field = require("@dhis2-ui/field");
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _simpleSingleSelect = require("../simple-single-select/simple-single-select.js");
+var _simpleSingleSelectField = require("./simple-single-select-field.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+jest.mock('../simple-single-select/simple-single-select.js', () => ({
+  SimpleSingleSelect: jest.fn(() => /*#__PURE__*/_react2.default.createElement("div", null))
+}));
+jest.mock('@dhis2-ui/field', () => ({
+  Field: jest.fn(_ref => {
+    let {
+      children
+    } = _ref;
+    return children;
+  })
+}));
+describe('<SimpleSingleSelectField />', () => {
+  afterEach(() => {
+    _field.Field.mockClear();
+    _simpleSingleSelect.SimpleSingleSelect.mockClear();
+  });
+  it('should forward props to the SimpleSingleSelect component', () => {
+    const options = [];
+    const optionComponent = () => null;
+    const onChange = () => null;
+    const onBlur = () => null;
+    const onEndReached = () => null;
+    const onFilterChange = () => null;
+    const onFocus = () => null;
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_simpleSingleSelectField.SimpleSingleSelectField, {
+      label: "Label text"
+      // Props that'll be passed to SimpleSingleSelect
+      ,
+      name: "foo",
+      options: options,
+      onChange: onChange,
+      autoFocus: false,
+      className: "",
+      clearText: "",
+      clearable: false,
+      optionComponent: optionComponent,
+      dataTest: "",
+      dense: false,
+      disabled: false,
+      empty: "",
+      filterHelpText: "",
+      filterLabel: "",
+      filterPlaceholder: "",
+      filterValue: "",
+      filterable: false,
+      loading: false,
+      menuLoadingText: "",
+      menuMaxHeight: "",
+      noMatchText: "",
+      optionUpdateStrategy: "off",
+      placeholder: "",
+      prefix: "",
+      tabIndex: "",
+      valid: true,
+      value: "",
+      valueLabel: "",
+      onBlur: onBlur,
+      onEndReached: onEndReached,
+      onFilterChange: onFilterChange,
+      onFocus: onFocus
+    }));
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].name).toBe('foo');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].options).toBe(options);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onChange).toBe(onChange);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].autoFocus).toBe(false);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].className).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].clearText).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].clearable).toBe(false);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].optionComponent).toBe(optionComponent);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].dataTest).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].dense).toBe(false);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].disabled).toBe(false);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].empty).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].filterHelpText).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].filterLabel).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].filterPlaceholder).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].filterValue).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].filterable).toBe(false);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].labelledBy).toBe('foo-label');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].loading).toBe(false);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].menuLoadingText).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].menuMaxHeight).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].noMatchText).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].optionUpdateStrategy).toBe('off');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].placeholder).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].prefix).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].tabIndex).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].valid).toBe(true);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].value).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].valueLabel).toBe('');
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onBlur).toBe(onBlur);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onEndReached).toBe(onEndReached);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onFilterChange).toBe(onFilterChange);
+    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onFocus).toBe(onFocus);
+  });
+  it('should pass the right props to the Field component', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_simpleSingleSelectField.SimpleSingleSelectField, {
+      label: "Label text",
+      className: "class name",
+      dataTest: "data test",
+      disabled: true,
+      required: true,
+      helpText: "Help text",
+      validationText: "Validation text",
+      valid: true
+      // Props required by SimpleSingleSelect
+      ,
+      name: "foo",
+      options: [],
+      onChange: () => null
+    }));
+    expect(_field.Field.mock.calls[0][0].className).toBe('class name');
+    expect(_field.Field.mock.calls[0][0].dataTest).toBe('data test');
+    expect(_field.Field.mock.calls[0][0].disabled).toBe(true);
+    expect(_field.Field.mock.calls[0][0].required).toBe(true);
+    expect(_field.Field.mock.calls[0][0].labelId).toBe('foo-label');
+    expect(_field.Field.mock.calls[0][0].label).toBe('Label text');
+    expect(_field.Field.mock.calls[0][0].helpText).toBe('Help text');
+    expect(_field.Field.mock.calls[0][0].validationText).toBe('Validation text');
+    expect(_field.Field.mock.calls[0][0].error).toBe(undefined);
+    expect(_field.Field.mock.calls[0][0].warning).toBe(undefined);
+    expect(_field.Field.mock.calls[0][0].valid).toBe(true);
+  });
+});

package/build/es/index.js

@@ -2,5 +2,7 @@ export { MultiSelect } from './multi-select/index.js';
 export { MultiSelectField } from './multi-select-field/index.js';
 export { MultiSelectOption } from './multi-select-option/index.js';
 export { SingleSelect } from './single-select/index.js';
+export { SimpleSingleSelect } from './simple-single-select/index.js';
+export { SimpleSingleSelectField } from './simple-single-select-field/index.js';
 export { SingleSelectField } from './single-select-field/index.js';
 export { SingleSelectOption } from './single-select-option/index.js';

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

@@ -1,7 +1,9 @@
 {
-    "Clear": "",
-    "No data found": "",
-    "Type to filter options": "",
-    "Loading options": "",
-    "No options found": ""
+    "Clear": "Clear",
+    "No data found": "No data found",
+    "Type to filter options": "Type to filter options",
+    "Loading options": "Loading options",
+    "No options found": "No options found",
+    "Search options": "Search options",
+    "{{clearText}}": "{{clearText}}"
 }

package/build/es/simple-single-select/__stories__/DefaultPosition.js

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const DefaultPosition = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      // Accounting for the padding on the body
+      height: 'calc(100vh - 32px)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: '50%',
+      left: 0,
+      transform: 'translateY(-50%)',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  })));
+};

package/build/es/simple-single-select/__stories__/Dense.js

@@ -0,0 +1,13 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const Dense = () => {
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    dense: true,
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  });
+};

package/build/es/simple-single-select/__stories__/Empty.js

@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+export const Empty = () => {
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: []
+  });
+};

package/build/es/simple-single-select/__stories__/EmptyWithEmptyNode.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+export const EmptyWithEmptyNode = () => {
+  const [selected, setSelected] = useState(null);
+  const emptyNode = /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: 'red',
+      textAlign: 'center',
+      padding: '10px 0'
+    }
+  }, "Custom empty text");
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: [],
+    empty: emptyNode
+  });
+};

package/build/es/simple-single-select/__stories__/EmptyWithEmptyText.js

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+export const EmptyWithEmptyText = () => {
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: [],
+    empty: "Custom empty text"
+  });
+};

package/build/es/simple-single-select/__stories__/FlippedPosition.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const FlippedPosition = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      // Accounting for the padding on the body
+      height: 'calc(100vh - 32px)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  })));
+};