@dhis2-ui/select 9.11.0 → 9.11.1-beta.10

package/build/es/single-select/features/position/index.js

@@ -29,7 +29,7 @@ Then('the top of the menu is aligned with the bottom of the input', () => {
     const $menu = menus[0];
     const selectRect = $select.getBoundingClientRect();
     const menuRect = $menu.getBoundingClientRect();
-    expect(menuRect.top).to.equal(selectRect.bottom);
+    expect(menuRect.top).to.be.closeTo(selectRect.bottom, 1);
   });
 });
 Then('the bottom of the menu is aligned with the top of the input', () => {
@@ -43,7 +43,7 @@ Then('the bottom of the menu is aligned with the top of the input', () => {
     const $menu = menus[0];
     const selectRect = $select.getBoundingClientRect();
     const menuRect = $menu.getBoundingClientRect();
-    expect(selectRect.top).to.equal(menuRect.bottom);
+    expect(selectRect.top).to.be.closeTo(menuRect.bottom, 1);
   });
 });
 Then('it is rendered on top of the SingleSelect', () => {
@@ -72,6 +72,6 @@ Then('the left of the SingleSelect is aligned with the left of the anchor', () =
     const $menu = menus[0];
     const selectRect = $select.getBoundingClientRect();
     const menuRect = $menu.getBoundingClientRect();
-    expect(selectRect.left).to.equal(menuRect.left);
+    expect(selectRect.left).to.be.closeTo(menuRect.left, 1);
   });
 });

package/build/es/single-select/input.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { InputClearButton, InputPlaceholder, InputPrefix } from '../select/index.js';
 import { Selection } from './selection.js';
-
 const Input = _ref => {
   let {
     selected,
@@ -22,7 +21,6 @@ const Input = _ref => {
     inputMaxHeight
   } = _ref;
   const hasSelection = selected && typeof selected === 'string';
-
   const onClear = e => {
     const data = {
       selected: ''
@@ -30,15 +28,14 @@ const Input = _ref => {
     e.stopPropagation();
     onChange(data, e);
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
   }, /*#__PURE__*/React.createElement(InputPrefix, {
     prefix: prefix,
-    dataTest: "".concat(dataTest, "-prefix")
+    dataTest: `${dataTest}-prefix`
   }), !hasSelection && !prefix && /*#__PURE__*/React.createElement(InputPlaceholder, {
     placeholder: placeholder,
-    dataTest: "".concat(dataTest, "-placeholder")
+    dataTest: `${dataTest}-placeholder`
   }), hasSelection && /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(Selection, {
@@ -49,16 +46,15 @@ const Input = _ref => {
   }, /*#__PURE__*/React.createElement(InputClearButton, {
     onClear: onClear,
     clearText: clearText,
-    dataTest: "".concat(dataTest, "-clear")
+    dataTest: `${dataTest}-clear`
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2186325794",
     dynamic: [colors.grey900]
-  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [`.root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${colors.grey900};font-size:14px;line-height:16px;}`, ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
-  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
+  }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
 };
-
 Input.defaultProps = {
   inputMaxHeight: '100px'
 };

package/build/es/single-select/menu.js

@@ -1,12 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Empty, filterIgnored, checkIfValidOption } from '../select/index.js';
-
 const onIgnoredClick = (_, e) => {
   e.stopPropagation();
   e.preventDefault();
 };
-
 const Menu = _ref => {
   let {
     options,
@@ -18,34 +16,32 @@ const Menu = _ref => {
     dataTest
   } = _ref;
   const renderedOptions = filterIgnored(options);
-
   if (React.Children.count(renderedOptions) === 0) {
     // If it's a string, supply it to our <Empty> component so it looks better
     if (typeof empty === 'string') {
       return /*#__PURE__*/React.createElement(Empty, {
         message: empty,
-        dataTest: "".concat(dataTest, "-empty")
+        dataTest: `${dataTest}-empty`
       });
-    } // Otherwise just render the supplied markup
-
+    }
 
+    // Otherwise just render the supplied markup
     return empty;
   }
-
   const children = React.Children.map(options, child => {
-    const isValidOption = checkIfValidOption(child); // Return early if the child isn't an option, to prevent attaching handlers etc.
+    const isValidOption = checkIfValidOption(child);
 
+    // Return early if the child isn't an option, to prevent attaching handlers etc.
     if (!isValidOption) {
       return child;
     }
-
     const {
       value,
       disabled: isDisabled
-    } = child.props; // Active means the option is currently selected
+    } = child.props;
 
+    // Active means the option is currently selected
     const isActive = value === selected;
-
     const onClick = (_, e) => {
       const data = {
         selected: value
@@ -54,18 +50,18 @@ const Menu = _ref => {
       onChange(data, e);
       handleClose();
       handleFocusInput();
-    }; // Clicks on active options or disabled options should be ignored for the single select
-
+    };
 
+    // Clicks on active options or disabled options should be ignored for the single select
     const isIgnored = isActive || isDisabled;
-    return /*#__PURE__*/React.cloneElement(child, { ...child.props,
+    return /*#__PURE__*/React.cloneElement(child, {
+      ...child.props,
       onClick: isIgnored ? onIgnoredClick : onClick,
       active: isActive
     });
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
-
 Menu.defaultProps = {
   empty: ''
 };

package/build/es/single-select/selection.js

@@ -4,7 +4,6 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { findOptionChild } from '../select/index.js';
-
 const Selection = _ref => {
   let {
     options,
@@ -13,10 +12,8 @@ const Selection = _ref => {
   } = _ref;
   const isProduction = process.env.NODE_ENV === 'production';
   const selectedOption = findOptionChild(selected, options);
-
   if (!selectedOption) {
-    const message = "There is no option with the value: \"".concat(selected, "\". ") + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
-
+    const message = `There is no option with the value: "${selected}". ` + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
     if (isProduction) {
       // Don't crash the app if in production
       console.error(message);
@@ -25,9 +22,8 @@ const Selection = _ref => {
       throw new Error(message);
     }
   }
-
-  const icon = selectedOption && selectedOption.props.icon; // Use the selected value if we do not have a label
-
+  const icon = selectedOption && selectedOption.props.icon;
+  // Use the selected value if we do not have a label
   const label = selectedOption ? selectedOption.props.label : selected;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["1914911415", [spacers.dp8, spacers.dp16, spacers.dp16]]]) + " " + (cx(className, 'root') || "")
@@ -36,9 +32,8 @@ const Selection = _ref => {
   }, icon), label, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1914911415",
     dynamic: [spacers.dp8, spacers.dp16, spacers.dp16]
-  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".root-icon.__jsx-style-dynamic-selector{margin-inline-end:".concat(spacers.dp8, ";width:").concat(spacers.dp16, ";height:").concat(spacers.dp16, ";overflow:hidden;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}")]));
+  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", `.root-icon.__jsx-style-dynamic-selector{margin-inline-end:${spacers.dp8};width:${spacers.dp16};height:${spacers.dp16};overflow:hidden;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}`]));
 };
-
 Selection.propTypes = {
   className: PropTypes.string,
   options: PropTypes.node,

package/build/es/single-select/{single-select.stories.e2e.js → single-select.e2e.stories.js}

@@ -1,7 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import { Button } from '@dhis2-ui/button';
 import { Modal, ModalTitle, ModalContent } from '@dhis2-ui/modal';
-import { storiesOf } from '@storybook/react';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { SingleSelectOption } from '../index.js';
@@ -9,7 +8,6 @@ import { SingleSelect } from './index.js';
 window.onChange = window.Cypress && window.Cypress.cy.stub();
 window.onFocus = window.Cypress && window.Cypress.cy.stub();
 window.onBlur = window.Cypress && window.Cypress.cy.stub();
-
 const CustomSingleSelectOption = _ref => {
   let {
     label,
@@ -19,7 +17,6 @@ const CustomSingleSelectOption = _ref => {
     onClick: e => onClick({}, e)
   }, label);
 };
-
 CustomSingleSelectOption.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func
@@ -37,7 +34,10 @@ const options = [{
   name: 'bar',
   id: '4'
 }];
-storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.createElement(SingleSelect, {
+export default {
+  title: 'SingleSelect'
+};
+export const WithOptions = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "1",
@@ -48,7 +48,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options and onChange', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithOptionsAndOnChange = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   onChange: window.onChange
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -60,7 +61,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With onFocus', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithOnFocus = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   onFocus: window.onFocus
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -72,7 +74,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With onBlur', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithOnBlur = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   onBlur: window.onBlur
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -84,7 +87,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With custom options and onChange', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithCustomOptionsAndOnChange = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   onChange: window.onChange
 }, /*#__PURE__*/React.createElement(CustomSingleSelectOption, {
@@ -96,7 +100,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(CustomSingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With invalid options', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithInvalidOptions = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement("div", null, "invalid one"), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "1",
@@ -107,7 +112,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement("div", null, "invalid three"), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}), null, undefined, false)).add('With invalid filterable options', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}), null, undefined, false);
+export const WithInvalidFilterableOptions = () => /*#__PURE__*/React.createElement(SingleSelect, {
   filterable: true,
   className: "select",
   noMatchText: "No match"
@@ -120,20 +126,25 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement("div", null, "invalid three"), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With initialFocus', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithInitialFocus = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   initialFocus: true
-})).add('Empty', () => /*#__PURE__*/React.createElement(SingleSelect, {
+});
+export const Empty = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select"
-})).add('Empty with empty text', () => /*#__PURE__*/React.createElement(SingleSelect, {
+});
+export const EmptyWithEmptyText = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   empty: "Custom empty text"
-})).add('Empty with empty component', () => /*#__PURE__*/React.createElement(SingleSelect, {
+});
+export const EmptyWithEmptyComponent = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   empty: /*#__PURE__*/React.createElement("div", {
     className: "custom-empty"
   }, "Custom empty component")
-})).add('With options and loading', () => /*#__PURE__*/React.createElement(SingleSelect, {
+});
+export const WithOptionsAndLoading = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   loading: true
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -145,7 +156,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options, loading and loading text', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithOptionsLoadingAndLoadingText = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   loadingText: "Loading options",
   loading: true
@@ -158,7 +170,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With more than ten options', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithMoreThanTenOptions = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "1",
@@ -196,7 +209,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "12",
   label: "option twelve"
-}))).add('With more than three options and a 100px max-height', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   maxHeight: "100px"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -235,7 +249,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "12",
   label: "option twelve"
-}))).add('With options, a selection and disabled', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithOptionsASelectionAndDisabled = () => /*#__PURE__*/React.createElement(SingleSelect, {
   disabled: true,
   className: "select",
   selected: "1"
@@ -248,7 +263,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options and disabled', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithOptionsAndDisabled = () => /*#__PURE__*/React.createElement(SingleSelect, {
   disabled: true,
   className: "select"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -260,7 +276,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With prefix', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithPrefix = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   prefix: "Prefix text"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -272,7 +289,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With prefix and selection', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithPrefixAndSelection = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   prefix: "Prefix text",
   selected: "1"
@@ -285,7 +303,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With placeholder', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithPlaceholder = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   placeholder: "Placeholder text"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -297,7 +316,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With placeholder and selection', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithPlaceholderAndSelection = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   selected: "1",
   placeholder: "Placeholder text"
@@ -310,7 +330,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With disabled option and onChange', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithDisabledOptionAndOnChange = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   onChange: window.onChange
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -326,7 +347,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
   value: "4",
   label: "disabled option",
   disabled: true
-}))).add('With options and a selection', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithOptionsAndASelection = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   selected: "1"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -338,7 +360,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options, a selection and onChange', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithOptionsASelectionAndOnChange = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   selected: "1",
   onChange: window.onChange
@@ -351,7 +374,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With clear button, selection and onChange', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithClearButtonSelectionAndOnChange = () => /*#__PURE__*/React.createElement(SingleSelect, {
   clearable: true,
   clearText: "Clear",
   className: "select",
@@ -366,7 +390,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With filter field', () => /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const WithFilterField = () => /*#__PURE__*/React.createElement(SingleSelect, {
   filterable: true,
   noMatchText: "No match found",
   className: "select"
@@ -379,7 +404,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('Default position', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleSelect, {
+}));
+export const DefaultPosition = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "1",
@@ -418,8 +444,9 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
   value: "12",
   label: "option twelve"
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "166602725"
-}, ["#root{margin-bottom:2000px;}"]))).add('Flipped position', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleSelect, {
+  id: "1438642817"
+}, ["#storybook-root{margin-bottom:2000px;}"]));
+export const FlippedPosition = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "1",
@@ -458,8 +485,9 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
   value: "12",
   label: "option twelve"
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3289429748"
-}, ["html,body,#root{position:relative;height:500px;max-height:500px;}", "#root{padding-top:400px !important;}"]))).add('Shifted into view', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleSelect, {
+  id: "979451016"
+}, ["html,body,#storybook-root{position:relative;height:500px;max-height:500px;}", "#storybook-root{padding-top:400px !important;}"]));
+export const ShiftedIntoView = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "1",
@@ -498,8 +526,9 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
   value: "12",
   label: "option twelve"
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "4250794773"
-}, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]))).add('With duplicate selected option values', () => /*#__PURE__*/React.createElement(SingleSelect, {
+  id: "438540012"
+}, ["html,body,#storybook-root{position:relative;height:300px !important;max-height:300px;}", "#storybook-root{padding-top:130px !important;}"]));
+export const WithDuplicateSelectedOptionValues = () => /*#__PURE__*/React.createElement(SingleSelect, {
   className: "select",
   selected: "1"
 }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -514,7 +543,8 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
 }), /*#__PURE__*/React.createElement(SingleSelectOption, {
   value: "3",
   label: "option three"
-}))).add('Menu width changing', () => {
+}));
+export const MenuWidthChanging = () => {
   const [toggle, setToggle] = useState(false);
   return /*#__PURE__*/React.createElement("div", {
     className: "App"
@@ -560,4 +590,4 @@ storiesOf('SingleSelect', module).add('With options', () => /*#__PURE__*/React.c
   }, "Stuff")), /*#__PURE__*/React.createElement(Button, {
     onClick: () => setToggle(!toggle)
   }, "Toggle"))));
-});
+};

package/build/es/single-select/single-select.js

@@ -1,14 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
-import { StatusIcon } from '@dhis2-ui/status-icon';
 import { requiredIf } from '@dhis2/prop-types';
 import { spacers, sharedPropTypes } from '@dhis2/ui-constants';
+import { StatusIcon } from '@dhis2-ui/status-icon';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Loading as CommonLoading, Select } from '../select/index.js';
 import { FilterableMenu } from './filterable-menu.js';
 import { Input } from './input.js';
 import { Menu } from './menu.js';
-
 const SingleSelect = _ref => {
   let {
     className,
@@ -80,7 +79,7 @@ const SingleSelect = _ref => {
     dense: dense
   }, children, loading && /*#__PURE__*/React.createElement(CommonLoading, {
     message: loadingText,
-    dataTest: "".concat(dataTest, "-loading")
+    dataTest: `${dataTest}-loading`
   }))), /*#__PURE__*/React.createElement(StatusIcon, {
     error: error,
     valid: valid,
@@ -88,9 +87,8 @@ const SingleSelect = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2180377457",
     dynamic: [spacers.dp8]
-  }, [".root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";}"), ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
+  }, [`.root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
-
 SingleSelect.defaultProps = {
   selected: '',
   dataTest: 'dhis2-uicore-singleselect'
@@ -98,23 +96,18 @@ SingleSelect.defaultProps = {
 SingleSelect.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-
   /** Text on button that clears selection. Required if `clearable` prop is true */
   clearText: requiredIf(props => props.clearable, PropTypes.string),
-
   /** Adds a button to clear selection */
   clearable: PropTypes.bool,
   dataTest: PropTypes.string,
   dense: PropTypes.bool,
   disabled: PropTypes.bool,
-
   /** Text or component to display when there are no options */
   empty: PropTypes.node,
-
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props */
   error: sharedPropTypes.statusPropType,
   filterPlaceholder: PropTypes.string,
-
   /** Adds a filter field to add text to filter options */
   filterable: PropTypes.bool,
   initialFocus: PropTypes.bool,
@@ -122,17 +115,14 @@ SingleSelect.propTypes = {
   loading: PropTypes.bool,
   loadingText: PropTypes.string,
   maxHeight: PropTypes.string,
-
   /** Text to show when filter returns no results. Required if `filterable` prop is true */
   noMatchText: requiredIf(props => props.filterable, PropTypes.string),
   placeholder: PropTypes.string,
   prefix: PropTypes.string,
   selected: PropTypes.string,
   tabIndex: PropTypes.string,
-
   /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `error` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
   onBlur: PropTypes.func,