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

package/build/cjs/simple-single-select/selected-value/container.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+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 Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function Container(_ref, ref) {
+  let {
+    children,
+    comboBoxId,
+    autoFocus,
+    dataTest,
+    dense,
+    disabled,
+    error,
+    expanded,
+    labelledBy,
+    name,
+    placeholder,
+    tabIndex,
+    valid,
+    warning,
+    onBlur,
+    onClick: _onClick,
+    onFocus,
+    onKeyDown
+  } = _ref;
+  // Using useEffect so we have access to the ref, which will be set before
+  // the first call to the useEffect's callback
+  (0, _react.useEffect)(() => {
+    if (autoFocus) {
+      ref.current.focus();
+    }
+  },
+  // We want to run this only once:
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const onClick = (0, _react.useCallback)(function () {
+    if (!disabled) {
+      _onClick(...arguments);
+    }
+  }, [disabled, _onClick]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    ref: ref,
+    "aria-controls": `${name}-listbox`,
+    "aria-expanded": expanded.toString(),
+    "aria-haspopup": "listbox",
+    "aria-labelledby": labelledBy,
+    "aria-placeholder": placeholder,
+    id: comboBoxId,
+    role: "combobox",
+    tabIndex: tabIndex,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onClick: onClick,
+    onKeyDown: e => {
+      e.stopPropagation();
+      onKeyDown(e);
+    },
+    className: _style.default.dynamic([["2391216206", [_uiConstants.colors.grey500, _uiConstants.colors.grey900, _uiConstants.theme.focus, _uiConstants.theme.focus, _uiConstants.theme.valid, _uiConstants.theme.warning, _uiConstants.theme.error, _uiConstants.colors.grey100, _uiConstants.colors.grey500, _uiConstants.theme.disabled]]]) + " " + ((0, _classnames.default)({
+      error,
+      warning,
+      valid,
+      disabled,
+      dense
+    }) || "")
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2391216206",
+    dynamic: [_uiConstants.colors.grey500, _uiConstants.colors.grey900, _uiConstants.theme.focus, _uiConstants.theme.focus, _uiConstants.theme.valid, _uiConstants.theme.warning, _uiConstants.theme.error, _uiConstants.colors.grey100, _uiConstants.colors.grey500, _uiConstants.theme.disabled]
+  }, [`div.__jsx-style-dynamic-selector{background-color:white;border-radius:3px;border:1px solid ${_uiConstants.colors.grey500};box-sizing:border-box;min-height:40px;padding-block:6px;padding-inline:12px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);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;color:${_uiConstants.colors.grey900};font-size:14px;line-height:16px;}`, `div.__jsx-style-dynamic-selector:not(.disabled):focus,div.__jsx-style-dynamic-selector:not(.disabled):active{outline:none;box-shadow:inset 0 0 0 2px ${_uiConstants.theme.focus};border-color:${_uiConstants.theme.focus};}`, `div.valid.__jsx-style-dynamic-selector{border-color:${_uiConstants.theme.valid};}`, `div.warning.__jsx-style-dynamic-selector{border-color:${_uiConstants.theme.warning};}`, `div.error.__jsx-style-dynamic-selector{border-color:${_uiConstants.theme.error};}`, `div.disabled.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};color:${_uiConstants.theme.disabled};cursor:not-allowed;}`, "div.dense.__jsx-style-dynamic-selector{padding-block:2px;padding-inline:8px;min-height:32px;}"]));
+});
+Container.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  comboBoxId: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string.isRequired,
+  onKeyDown: _propTypes.default.func.isRequired,
+  autoFocus: _propTypes.default.bool,
+  dataTest: _propTypes.default.string,
+  dense: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  expanded: _propTypes.default.bool,
+  labelledBy: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  tabIndex: _propTypes.default.string,
+  valid: _propTypes.default.bool,
+  warning: _propTypes.default.bool,
+  onBlur: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  onFocus: _propTypes.default.func
+};

package/build/cjs/simple-single-select/selected-value/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectedValue", {
+  enumerable: true,
+  get: function () {
+    return _selectedValue.SelectedValue;
+  }
+});
+var _selectedValue = require("./selected-value.js");

package/build/cjs/simple-single-select/selected-value/placeholder.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Placeholder = Placeholder;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Placeholder(_ref) {
+  let {
+    placeholder,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["1027033961", [_uiConstants.colors.grey600]]]) + " " + (className || "")
+  }, placeholder, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1027033961",
+    dynamic: [_uiConstants.colors.grey600]
+  }, [`div.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey600};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`]));
+}
+Placeholder.propTypes = {
+  dataTest: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string,
+  placeholder: _propTypes.default.string
+};

package/build/cjs/simple-single-select/selected-value/prefix.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Prefix = Prefix;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Prefix(_ref) {
+  let {
+    prefix,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["1343055987", [_uiConstants.colors.grey600, _uiConstants.spacers.dp12]]]) + " " + (className || "")
+  }, prefix, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1343055987",
+    dynamic: [_uiConstants.colors.grey600, _uiConstants.spacers.dp12]
+  }, [`div.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey600};padding-inline-end:${_uiConstants.spacers.dp12};font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`]));
+}
+Prefix.propTypes = {
+  dataTest: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string,
+  prefix: _propTypes.default.string
+};

package/build/cjs/simple-single-select/selected-value/selected-value.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedValue = SelectedValue;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiIcons = require("@dhis2/ui-icons");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _clearButton = require("./clear-button.js");
+var _container = require("./container.js");
+var _placeholder = require("./placeholder.js");
+var _prefix = require("./prefix.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SelectedValue(_ref) {
+  let {
+    clearText,
+    comboBoxId,
+    name,
+    selectedLabel,
+    onKeyDown,
+    autoFocus,
+    clearable,
+    comboBoxRef,
+    dataTest,
+    dense,
+    disabled,
+    error,
+    expanded,
+    hasSelection,
+    inputMaxHeight,
+    labelledBy,
+    placeholder,
+    prefix,
+    tabIndex,
+    valid,
+    warning,
+    onBlur,
+    onClear,
+    onClick,
+    onFocus
+  } = _ref;
+  const dataTestPrefix = `${dataTest}-selectedvalue`;
+  return /*#__PURE__*/_react.default.createElement(_container.Container, {
+    dataTest: `${dataTestPrefix}-container`,
+    ref: comboBoxRef,
+    comboBoxId: comboBoxId,
+    autoFocus: autoFocus,
+    dense: dense,
+    disabled: disabled,
+    error: error,
+    expanded: expanded,
+    labelledBy: labelledBy,
+    name: name,
+    placeholder: placeholder,
+    tabIndex: tabIndex,
+    valid: valid,
+    warning: warning,
+    onBlur: onBlur,
+    onClick: onClick,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  }, prefix && /*#__PURE__*/_react.default.createElement(_prefix.Prefix, {
+    dataTest: `${dataTestPrefix}-prefix`,
+    prefix: prefix
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    tabIndex: "-1",
+    className: _style.default.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "selected-option-label"
+  }, !selectedLabel && !prefix && placeholder && /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, {
+    dataTest: `${dataTestPrefix}-placeholder`,
+    placeholder: placeholder
+  }), selectedLabel), hasSelection && clearable && !disabled && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "clear-button-container"
+  }, /*#__PURE__*/_react.default.createElement(_clearButton.ClearButton, {
+    clearText: clearText,
+    dataTest: `${dataTestPrefix}-clear`,
+    onClear: onClear
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    "aria-label": "Open select",
+    onClick: () => {
+      comboBoxRef.current.focus();
+      onClick();
+    },
+    className: _style.default.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "toggle-icon"
+  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronDown16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3226769786",
+    dynamic: [inputMaxHeight]
+  }, [`.selected-option-label.__jsx-style-dynamic-selector{overflow-y:auto;max-height:${inputMaxHeight};-webkit-flex:1;-ms-flex:1;flex:1;}`, ".clear-button-container.__jsx-style-dynamic-selector{margin-inline-start:auto;}", ".toggle-icon.__jsx-style-dynamic-selector{display:block;background:none;padding:0;border:0;}"]));
+}
+SelectedValue.propTypes = {
+  clearText: _propTypes.default.string.isRequired,
+  comboBoxId: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string.isRequired,
+  selectedLabel: _propTypes.default.string.isRequired,
+  onKeyDown: _propTypes.default.func.isRequired,
+  autoFocus: _propTypes.default.bool,
+  clearable: _propTypes.default.bool,
+  comboBoxRef: _propTypes.default.shape({
+    current: _propTypes.default.instanceOf(HTMLElement)
+  }),
+  dataTest: _propTypes.default.string,
+  dense: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  expanded: _propTypes.default.bool,
+  hasSelection: _propTypes.default.bool,
+  inputMaxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  labelledBy: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  prefix: _propTypes.default.string,
+  tabIndex: _propTypes.default.string,
+  valid: _propTypes.default.bool,
+  warning: _propTypes.default.bool,
+  onBlur: _propTypes.default.func,
+  onClear: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  onFocus: _propTypes.default.func
+};

package/build/cjs/simple-single-select/shared-prop-types.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optionProp = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const optionProp = exports.optionProp = _propTypes.default.shape({
+  label: _propTypes.default.string.isRequired,
+  value: _propTypes.default.string.isRequired,
+  component: _propTypes.default.elementType,
+  disabled: _propTypes.default.bool
+});

package/build/cjs/simple-single-select/simple-single-select.e2e.stories.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ShiftedIntoView = exports.HundretOptionsWithDisabled = exports.HundretOptions = exports.FlippedPosition = exports.DefaultPosition = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Simple Single Select',
+  component: _simpleSingleSelect.SimpleSingleSelect
+};
+const options = [{
+  label: 'ANC 1st visit',
+  value: 'anc_1st_visit'
+}, {
+  label: 'ANC 2nd visit',
+  value: 'anc_2nd_visit'
+}, {
+  label: 'ANC 3rd visit',
+  value: 'anc_3rd_visit'
+}, {
+  label: 'ANC 4th or more visits',
+  value: 'anc_4th_or_more_visits'
+}, {
+  label: 'ARI treated with antibiotics (pneumonia) follow-up',
+  value: 'ari_treated_with_antibiotics_(pneumonia)_follow-up'
+}, {
+  label: 'ARI treated with antibiotics (pneumonia) new',
+  value: 'ari_treated_with_antibiotics_(pneumonia)_new'
+}, {
+  label: 'ARI treated with antibiotics (pneumonia) referrals',
+  value: 'ari_treated_with_antibiotics_(pneumonia)_referrals'
+}, {
+  label: 'ARI treated without antibiotics (cough) follow-up',
+  value: 'ari_treated_without_antibiotics_(cough)_follow-up'
+}, {
+  label: 'ARI treated without antibiotics (cough) new',
+  value: 'ari_treated_without_antibiotics_(cough)_new'
+}, {
+  label: 'ARI treated without antibiotics (cough) referrals',
+  value: 'ari_treated_without_antibiotics_(cough)_referrals'
+}, {
+  label: 'ART No clients who stopped TRT due to TRT failure',
+  value: 'art_no_clients_who_stopped_trt_due_to_trt_failure'
+}, {
+  label: 'ART No clients who stopped TRT due to adverse clinical status/event',
+  value: 'art_no_clients_who_stopped_trt_due_to_adverse_clinical_status/event'
+}, {
+  label: 'ART No clients with change of regimen due to drug toxicity',
+  value: 'art_no_clients_with_change_of_regimen_due_to_drug_toxicity'
+}, {
+  label: 'ART No clients with new adverse drug reaction',
+  value: 'art_no_clients_with_new_adverse_drug_reaction'
+}, {
+  label: 'ART No started Opportunist Infection prophylaxis',
+  value: 'art_no_started_opportunist_infection_prophylaxis'
+}, {
+  label: 'ART clients with new adverse clinical event',
+  value: 'art_clients_with_new_adverse_clinical_event'
+}, {
+  label: 'ART defaulters',
+  value: 'art_defaulters'
+}, {
+  label: 'ART enrollment stage 1',
+  value: 'art_enrollment_stage_1'
+}, {
+  label: 'ART enrollment stage 2',
+  value: 'art_enrollment_stage_2'
+}, {
+  label: 'ART enrollment stage 3',
+  value: 'art_enrollment_stage_3'
+}, {
+  label: 'ART enrollment stage 4',
+  value: 'art_enrollment_stage_4'
+}, {
+  label: 'ART entry point: No PMTCT',
+  value: 'art_entry_point:_no_pmtct'
+}];
+const fiveOptions = options.slice(0, 5);
+const DefaultPosition = () => /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+  name: "Simple",
+  selected: {
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  },
+  onChange: () => null,
+  options: fiveOptions
+});
+exports.DefaultPosition = DefaultPosition;
+const FlippedPosition = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+  name: "Simple",
+  selected: {
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  },
+  onChange: () => null,
+  options: options
+}), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "979451016"
+}, ["html,body,#storybook-root{position:relative;height:500px;max-height:500px;}", "#storybook-root{padding-top:400px !important;}"]));
+exports.FlippedPosition = FlippedPosition;
+const ShiftedIntoView = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+  name: "Simple",
+  selected: {
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  },
+  onChange: () => null,
+  options: options
+}), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "438540012"
+}, ["html,body,#storybook-root{position:relative;height:300px !important;max-height:300px;}", "#storybook-root{padding-top:130px !important;}"]));
+exports.ShiftedIntoView = ShiftedIntoView;
+const HundretOptions = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    value: '0',
+    label: `Select option 0`
+  });
+  const [hundretOptions] = (0, _react.useState)(Array.apply(null, Array(100)).map((x, i) => ({
+    value: `${i}`,
+    label: `Select option ${i}`
+  })));
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "Simple",
+    selected: selected,
+    onChange: setSelected,
+    options: hundretOptions
+  });
+};
+exports.HundretOptions = HundretOptions;
+const HundretOptionsWithDisabled = () => {
+  const [selected, setSelected] = (0, _react.useState)({
+    value: '10',
+    label: `Select option 10`
+  });
+  const [hundretOptions] = (0, _react.useState)(Array.apply(null, Array(100)).map((x, i) => ({
+    value: `${i}`,
+    label: `Select option ${i}`,
+    disabled: [0,
+    // first otpion
+    17, 18, 99 // last otpion
+    ].includes(i)
+  })));
+  return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
+    name: "Simple",
+    selected: selected,
+    onChange: setSelected,
+    options: hundretOptions
+  });
+};
+exports.HundretOptionsWithDisabled = HundretOptionsWithDisabled;