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

package/build/cjs/index.js

@@ -21,6 +21,18 @@ Object.defineProperty(exports, "MultiSelectOption", {
     return _index3.MultiSelectOption;
   }
 });
+Object.defineProperty(exports, "SimpleSingleSelect", {
+  enumerable: true,
+  get: function () {
+    return _index5.SimpleSingleSelect;
+  }
+});
+Object.defineProperty(exports, "SimpleSingleSelectField", {
+  enumerable: true,
+  get: function () {
+    return _index6.SimpleSingleSelectField;
+  }
+});
 Object.defineProperty(exports, "SingleSelect", {
   enumerable: true,
   get: function () {
@@ -30,18 +42,20 @@ Object.defineProperty(exports, "SingleSelect", {
 Object.defineProperty(exports, "SingleSelectField", {
   enumerable: true,
   get: function () {
-    return _index5.SingleSelectField;
+    return _index7.SingleSelectField;
   }
 });
 Object.defineProperty(exports, "SingleSelectOption", {
   enumerable: true,
   get: function () {
-    return _index6.SingleSelectOption;
+    return _index8.SingleSelectOption;
   }
 });
 var _index = require("./multi-select/index.js");
 var _index2 = require("./multi-select-field/index.js");
 var _index3 = require("./multi-select-option/index.js");
 var _index4 = require("./single-select/index.js");
-var _index5 = require("./single-select-field/index.js");
-var _index6 = require("./single-select-option/index.js");
+var _index5 = require("./simple-single-select/index.js");
+var _index6 = require("./simple-single-select-field/index.js");
+var _index7 = require("./single-select-field/index.js");
+var _index8 = require("./single-select-option/index.js");

package/build/cjs/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/cjs/simple-single-select/__stories__/DefaultPosition.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultPosition = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 DefaultPosition = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'relative',
+      // Accounting for the padding on the body
+      height: 'calc(100vh - 32px)'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: '50%',
+      left: 0,
+      transform: 'translateY(-50%)',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.fiveOptions
+  })));
+};
+exports.DefaultPosition = DefaultPosition;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dense = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 Dense = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    dense: true,
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.fiveOptions
+  });
+};
+exports.Dense = Dense;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Empty = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.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 Empty = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: []
+  });
+};
+exports.Empty = Empty;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyWithEmptyNode = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.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 EmptyWithEmptyNode = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  const emptyNode = /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: 'red',
+      textAlign: 'center',
+      padding: '10px 0'
+    }
+  }, "Custom empty text");
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: [],
+    empty: emptyNode
+  });
+};
+exports.EmptyWithEmptyNode = EmptyWithEmptyNode;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyWithEmptyText = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.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 EmptyWithEmptyText = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: [],
+    empty: "Custom empty text"
+  });
+};
+exports.EmptyWithEmptyText = EmptyWithEmptyText;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlippedPosition = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 FlippedPosition = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'relative',
+      // Accounting for the padding on the body
+      height: 'calc(100vh - 32px)'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.fiveOptions
+  })));
+};
+exports.FlippedPosition = FlippedPosition;

package/build/cjs/simple-single-select/__stories__/InfiniteLoading.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfiniteLoading = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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; }
+// The select displays exactly 9 options per page,
+// using 10 so the user has to scroll to see the effect
+const CHUNK_SIZE = 10;
+const optionChunks = _options.options.reduce((chunks, option, index) => {
+  if (index === 0) {
+    return [[option]];
+  }
+  const prevChunkIndex = chunks.length - 1;
+  const prevChunk = chunks[prevChunkIndex];
+  const prevChunkLength = prevChunk.length;
+  if (prevChunkLength < CHUNK_SIZE) {
+    return [...chunks.slice(0, prevChunkIndex), [...prevChunk, option]];
+  }
+  return [...chunks, [option]];
+}, []);
+const InfiniteLoading = () => {
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [curLoadedPage, setCurLoadedPage] = (0, _react.useState)(0);
+  const [selected, setSelected] = (0, _react.useState)(null);
+  const [loadedOptions, setLoadedOptions] = (0, _react.useState)(optionChunks[0]);
+  const loadNextOptions = (0, _react.useCallback)(() => {
+    const nextPage = curLoadedPage + 1;
+    if (
+    // We're already loading a page
+    loading ||
+    // No need to load anything when already loaded everything
+    nextPage >= optionChunks.length) {
+      return;
+    }
+    setLoading(true);
+    setCurLoadedPage(nextPage);
+
+    // Fake network request to show loader a reasonable amount of time
+    setTimeout(() => {
+      const nextChunk = optionChunks[nextPage];
+      setLoadedOptions(prevOptions => [...prevOptions, ...nextChunk]);
+      setLoading(false);
+    }, 1500);
+  }, [curLoadedPage, loading]);
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    loading: loading,
+    menuLoadingText: "Foo bar baz",
+    onChange: setSelected,
+    options: loadedOptions,
+    onEndReached: loadNextOptions
+  });
+};
+exports.InfiniteLoading = InfiniteLoading;

package/build/cjs/simple-single-select/__stories__/Loading.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loading = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Loading = () => {
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    loading: true,
+    name: "simple",
+    selected: null,
+    onChange: () => null,
+    options: _options.options
+  });
+};
+exports.Loading = Loading;

package/build/cjs/simple-single-select/__stories__/ShiftedIntoView.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShiftedIntoView = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ShiftedIntoView = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.fiveOptions
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "995960636"
+  }, ["html,body,#storybook-root{position:relative;height:300px !important;max-height:300px;}", "#storybook-root{padding-top:130px !important;}"]));
+};
+exports.ShiftedIntoView = ShiftedIntoView;

package/build/cjs/simple-single-select/__stories__/WithClearButton.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithClearButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 WithClearButton = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    clearable: true,
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.fiveOptions
+  });
+};
+exports.WithClearButton = WithClearButton;

package/build/cjs/simple-single-select/__stories__/WithCustomLowMaxHeight.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithCustomLowMaxHeight = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 WithCustomLowMaxHeight = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.options,
+    menuMaxHeight: "100px"
+  });
+};
+exports.WithCustomLowMaxHeight = WithCustomLowMaxHeight;

package/build/cjs/simple-single-select/__stories__/WithCustomOptions.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithCustomOptions = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CustomOption = _ref => {
+  let {
+    label
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-3497546720" + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-3497546720" + " " + "label"
+  }, label), /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    onClick: e => {
+      e.stopPropagation();
+      alert('Custom "button" clicked!');
+    },
+    className: "jsx-3497546720" + " " + "button"
+  }, "x"), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3497546720"
+  }, [".container.jsx-3497546720{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:white;cursor:pointer;height:30px;}", ".label.jsx-3497546720{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:green;padding:5px 10px;}", ".label.jsx-3497546720:hover{background:blue;}", ".button.jsx-3497546720{height:30px;width:30px;padding:0;border:0;background:none;background:white;cursor:pointer;font-size:20px;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:black;}", ".button.jsx-3497546720:hover{background:black;color:white;}"]));
+};
+const WithCustomOptions = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  const optionsWithCustomStyle = (0, _react.useMemo)(() => {
+    return _options.options.slice(0, 3).map(option => ({
+      ...option,
+      component: CustomOption
+    }));
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: optionsWithCustomStyle
+  });
+};
+exports.WithCustomOptions = WithCustomOptions;

package/build/cjs/simple-single-select/__stories__/WithDisabledOption.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithDisabledOption = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 fiveOptionsWithFourthDisabled = [..._options.fiveOptions.slice(0, 3), {
+  ..._options.fiveOptions[3],
+  disabled: true
+}, ..._options.fiveOptions.slice(4)];
+const WithDisabledOption = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptionsWithFourthDisabled
+  });
+};
+exports.WithDisabledOption = WithDisabledOption;

package/build/cjs/simple-single-select/__stories__/WithFilterField.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithFilterField = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 WithFilterField = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  const [filterValue, setFilterValue] = (0, _react.useState)('');
+  const filteredOptions = (0, _react.useMemo)(() => {
+    return filterValue ? _options.options.filter(_ref => {
+      let {
+        label,
+        value
+      } = _ref;
+      return label.match(new RegExp(filterValue), 'i') && value !== '';
+    }) : _options.options;
+  }, [filterValue]);
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    filterable: true,
+    filterPlaceholder: "Filter placeholder",
+    filterValue: filterValue,
+    onFilterChange: setFilterValue,
+    noMatchText: "No results for your filter",
+    options: filteredOptions
+  });
+};
+exports.WithFilterField = WithFilterField;

package/build/cjs/simple-single-select/__stories__/WithInitialFocus.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithInitialFocus = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 WithInitialFocus = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    autoFocus: true,
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.fiveOptions
+  }), /*#__PURE__*/_react.default.createElement("select", {
+    onChange: e => console.log(e)
+  }, /*#__PURE__*/_react.default.createElement("option", {
+    value: ""
+  }, "None"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "1"
+  }, "One"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "2"
+  }, "Two"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "3"
+  }, "Three"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "4"
+  }, "Four"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "5"
+  }, "Five"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "6"
+  }, "Six")));
+};
+exports.WithInitialFocus = WithInitialFocus;

package/build/cjs/simple-single-select/__stories__/WithManyOptions.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithManyOptions = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 WithManyOptions = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    label: 'ART entry point: No PMTCT',
+    value: 'art_entry_point:_no_pmtct'
+  });
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.options
+  });
+};
+exports.WithManyOptions = WithManyOptions;

package/build/cjs/simple-single-select/__stories__/WithNoMatchText.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithNoMatchText = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.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 WithNoMatchText = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    label: 'Foo',
+    value: 'foo'
+  });
+  const [filterValue, setFilterValue] = (0, _react.useState)('Bar');
+  const filteredOptions = (0, _react.useMemo)(() => [], []);
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    filterable: true,
+    filterPlaceholder: "Filter placeholder",
+    filterValue: filterValue,
+    onFilterChange: setFilterValue,
+    noMatchText: "No results for your filter",
+    options: filteredOptions
+  });
+};
+exports.WithNoMatchText = WithNoMatchText;

package/build/cjs/simple-single-select/__stories__/WithOnBlur.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithOnBlur = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleSingleSelect = require("../simple-single-select.js");
+var _options = require("./options.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 WithOnBlur = () => {
+  const [selected, setSelected] = (0, _react.useState)(null);
+  const [blurTime, setBlurTime] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    onBlur: () => setBlurTime(new Date().toISOString()),
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: _options.fiveOptions
+  }), /*#__PURE__*/_react.default.createElement("p", null, "Last time select received blur: ", blurTime || 'never'));
+};
+exports.WithOnBlur = WithOnBlur;