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

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

@@ -0,0 +1,53 @@
+import React, { useCallback, useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { options } from './options.js';
+
+// 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.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]];
+}, []);
+export const InfiniteLoading = () => {
+  const [loading, setLoading] = useState(false);
+  const [curLoadedPage, setCurLoadedPage] = useState(0);
+  const [selected, setSelected] = useState(null);
+  const [loadedOptions, setLoadedOptions] = useState(optionChunks[0]);
+  const loadNextOptions = 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.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    loading: loading,
+    menuLoadingText: "Foo bar baz",
+    onChange: setSelected,
+    options: loadedOptions,
+    onEndReached: loadNextOptions
+  });
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { options } from './options.js';
+export const Loading = () => {
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    loading: true,
+    name: "simple",
+    selected: null,
+    onChange: () => null,
+    options: options
+  });
+};

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

@@ -0,0 +1,18 @@
+import _JSXStyle from "styled-jsx/style";
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const ShiftedIntoView = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "995960636"
+  }, ["html,body,#storybook-root{position:relative;height:300px !important;max-height:300px;}", "#storybook-root{padding-top:130px !important;}"]));
+};

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

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithClearButton = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    clearable: true,
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  });
+};

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

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

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

@@ -0,0 +1,38 @@
+import _JSXStyle from "styled-jsx/style";
+import React, { useState, useMemo } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { options } from './options.js';
+const CustomOption = _ref => {
+  let {
+    label
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "jsx-3497546720" + " " + "container"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "jsx-3497546720" + " " + "label"
+  }, label), /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    onClick: e => {
+      e.stopPropagation();
+      alert('Custom "button" clicked!');
+    },
+    className: "jsx-3497546720" + " " + "button"
+  }, "x"), /*#__PURE__*/React.createElement(_JSXStyle, {
+    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;}"]));
+};
+export const WithCustomOptions = () => {
+  const [selected, setSelected] = useState(null);
+  const optionsWithCustomStyle = useMemo(() => {
+    return options.slice(0, 3).map(option => ({
+      ...option,
+      component: CustomOption
+    }));
+  }, []);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: optionsWithCustomStyle
+  });
+};

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

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+const fiveOptionsWithFourthDisabled = [...fiveOptions.slice(0, 3), {
+  ...fiveOptions[3],
+  disabled: true
+}, ...fiveOptions.slice(4)];
+export const WithDisabledOption = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptionsWithFourthDisabled
+  });
+};

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

@@ -0,0 +1,27 @@
+import React, { useMemo, useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { options } from './options.js';
+export const WithFilterField = () => {
+  const [selected, setSelected] = useState(null);
+  const [filterValue, setFilterValue] = useState('');
+  const filteredOptions = useMemo(() => {
+    return filterValue ? options.filter(_ref => {
+      let {
+        label,
+        value
+      } = _ref;
+      return label.match(new RegExp(filterValue), 'i') && value !== '';
+    }) : options;
+  }, [filterValue]);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    filterable: true,
+    filterPlaceholder: "Filter placeholder",
+    filterValue: filterValue,
+    onFilterChange: setFilterValue,
+    noMatchText: "No results for your filter",
+    options: filteredOptions
+  });
+};

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithInitialFocus = () => {
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    autoFocus: true,
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  }), /*#__PURE__*/React.createElement("select", {
+    onChange: e => console.log(e)
+  }, /*#__PURE__*/React.createElement("option", {
+    value: ""
+  }, "None"), /*#__PURE__*/React.createElement("option", {
+    value: "1"
+  }, "One"), /*#__PURE__*/React.createElement("option", {
+    value: "2"
+  }, "Two"), /*#__PURE__*/React.createElement("option", {
+    value: "3"
+  }, "Three"), /*#__PURE__*/React.createElement("option", {
+    value: "4"
+  }, "Four"), /*#__PURE__*/React.createElement("option", {
+    value: "5"
+  }, "Five"), /*#__PURE__*/React.createElement("option", {
+    value: "6"
+  }, "Six")));
+};

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

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { options } from './options.js';
+export const WithManyOptions = () => {
+  const [selected, setSelected] = useState({
+    label: 'ART entry point: No PMTCT',
+    value: 'art_entry_point:_no_pmtct'
+  });
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: options
+  });
+};

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

@@ -0,0 +1,21 @@
+import React, { useMemo, useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+export const WithNoMatchText = () => {
+  const [selected, setSelected] = useState({
+    label: 'Foo',
+    value: 'foo'
+  });
+  const [filterValue, setFilterValue] = useState('Bar');
+  const filteredOptions = useMemo(() => [], []);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    filterable: true,
+    filterPlaceholder: "Filter placeholder",
+    filterValue: filterValue,
+    onFilterChange: setFilterValue,
+    noMatchText: "No results for your filter",
+    options: filteredOptions
+  });
+};

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

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithOnBlur = () => {
+  const [selected, setSelected] = useState(null);
+  const [blurTime, setBlurTime] = useState('');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    onBlur: () => setBlurTime(new Date().toISOString()),
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  }), /*#__PURE__*/React.createElement("p", null, "Last time select received blur: ", blurTime || 'never'));
+};

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

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithOnFocus = () => {
+  const [selected, setSelected] = useState(null);
+  const [focusTime, setFocusTime] = useState('');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    onFocus: () => setFocusTime(new Date().toISOString()),
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  }), /*#__PURE__*/React.createElement("p", null, "Last time select received focus: ", focusTime || 'never'));
+};

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

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

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

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+const options = [{
+  label: 'None',
+  value: ''
+}, {
+  value: '1',
+  label: 'Option 1'
+}, {
+  value: '2',
+  label: 'Option 2'
+}, {
+  value: '3',
+  label: 'Option 3'
+}];
+export const WithOptionsAndLoading = () => {
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    loading: true,
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: options
+  });
+};

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

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+const options = [{
+  label: 'None',
+  value: ''
+}, {
+  value: '1',
+  label: 'Option 1'
+}, {
+  value: '2',
+  label: 'Option 2'
+}, {
+  value: '3',
+  label: 'Option 3'
+}];
+export const WithOptionsAndLoadingText = () => {
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    loading: true,
+    menuLoadingText: "Loading options",
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: options
+  });
+};

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

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

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

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithPlaceholderAndSelection = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    placeholder: "Placeholder text",
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  });
+};

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

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

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

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithPrefixAndSelection = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    prefix: "Prefix text",
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  });
+};

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

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithRTL = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+
+  // as options are rendered in Portal, the body dir (of the iframe) needs to be set to 'rtl'
+  useEffect(() => {
+    document.body.dir = 'rtl';
+    return () => {
+      document.body.dir = 'ltr';
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    dir: "rtl"
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  }));
+};

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

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithSelection = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  });
+};

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

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { fiveOptions } from './options.js';
+export const WithSelectionAndDisabled = () => {
+  const [selected, setSelected] = useState({
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  });
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    disabled: true,
+    name: "simple",
+    selected: selected,
+    onChange: setSelected,
+    options: fiveOptions
+  });
+};

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

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

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

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

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

@@ -0,0 +1,71 @@
+export const options = [{
+  label: 'None',
+  value: ''
+}, {
+  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'
+}];
+export const fiveOptions = options.slice(0, 5);