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

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

@@ -1,7 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { FilterInput } from './filter-input.js';
@@ -10,11 +10,9 @@ import { filterIgnored, checkIfValidOption } from './option-helpers.js';
 export class FilterableMenu extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {
       filter: ''
     });
-
     _defineProperty(this, "onFilterChange", _ref => {
       let {
         value
@@ -24,7 +22,6 @@ export class FilterableMenu extends Component {
       });
     });
   }
-
   render() {
     const {
       dataTest,
@@ -49,11 +46,12 @@ export class FilterableMenu extends Component {
       handleFocusInput,
       dataTest
     };
-    const renderedOptions = filterIgnored(options); // If there are no options or there's no filter, just pass everything through
+    const renderedOptions = filterIgnored(options);
 
+    // If there are no options or there's no filter, just pass everything through
     if (React.Children.count(renderedOptions) === 0 || !filter) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterInput, {
-        dataTest: "".concat(dataTest, "-filterinput"),
+        dataTest: `${dataTest}-filterinput`,
         placeholder: placeholder,
         value: filter,
         onChange: this.onFilterChange
@@ -61,24 +59,24 @@ export class FilterableMenu extends Component {
         options: options
       })));
     }
-
     const filtered = React.Children.map(options, child => {
-      const isValidOption = checkIfValidOption(child); // Filter it out if it's an invalid option
+      const isValidOption = checkIfValidOption(child);
 
+      // Filter it out if it's an invalid option
       if (!isValidOption) {
         return null;
       }
-
       const {
         label
-      } = child.props; // Filter by label, because that's the part of an option that's displayed to the user
+      } = child.props;
 
+      // Filter by label, because that's the part of an option that's displayed to the user
       const match = label.toLowerCase().includes(filter.toLowerCase());
       return match ? child : null;
     });
     const hasMatch = React.Children.count(filtered) > 0;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterInput, {
-      dataTest: "".concat(dataTest, "-filterinput"),
+      dataTest: `${dataTest}-filterinput`,
       placeholder: placeholder,
       value: filter,
       onChange: this.onFilterChange
@@ -88,7 +86,6 @@ export class FilterableMenu extends Component {
       message: noMatchText
     }));
   }
-
 }
 FilterableMenu.propTypes = {
   Menu: PropTypes.elementType.isRequired,

package/build/es/select/input-clear-button.js

@@ -1,9 +1,8 @@
 import _JSXStyle from "styled-jsx/style";
-import { Tooltip } from '@dhis2-ui/tooltip';
 import { colors, theme } from '@dhis2/ui-constants';
+import { Tooltip } from '@dhis2-ui/tooltip';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const InputClearButton = _ref => {
   let {
     onClear,
@@ -33,9 +32,8 @@ const InputClearButton = _ref => {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2606883952",
     dynamic: [colors.grey500, colors.grey800, colors.grey200, theme.focus]
-  }, ["button.__jsx-style-dynamic-selector{background:none;border:none;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;cursor:pointer;height:24px;width:24px;border-radius:3px;}", "button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), "button.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey800, ";}"), "button.__jsx-style-dynamic-selector:hover{background:".concat(colors.grey200, ";}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid ".concat(theme.focus, ";}")])));
+  }, ["button.__jsx-style-dynamic-selector{background:none;border:none;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;cursor:pointer;height:24px;width:24px;border-radius:3px;}", `button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${colors.grey500};}`, `button.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${colors.grey800};}`, `button.__jsx-style-dynamic-selector:hover{background:${colors.grey200};}`, `button.__jsx-style-dynamic-selector:focus{outline:2px solid ${theme.focus};}`])));
 };
-
 InputClearButton.propTypes = {
   clearText: PropTypes.string.isRequired,
   dataTest: PropTypes.string.isRequired,

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

@@ -2,27 +2,23 @@ import _JSXStyle from "styled-jsx/style";
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const InputPlaceholder = _ref => {
   let {
     placeholder,
     className,
     dataTest
   } = _ref;
-
   if (!placeholder) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["1027033961", [colors.grey600]]]) + " " + (className || "")
   }, placeholder, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1027033961",
     dynamic: [colors.grey600]
-  }, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")]));
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey600};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`]));
 };
-
 InputPlaceholder.propTypes = {
   dataTest: PropTypes.string.isRequired,
   className: PropTypes.string,

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

@@ -2,27 +2,23 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const InputPrefix = _ref => {
   let {
     prefix,
     className,
     dataTest
   } = _ref;
-
   if (!prefix) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["1343055987", [colors.grey600, spacers.dp12]]]) + " " + (className || "")
   }, prefix, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1343055987",
     dynamic: [colors.grey600, spacers.dp12]
-  }, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";padding-inline-end:").concat(spacers.dp12, ";font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")]));
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey600};padding-inline-end:${spacers.dp12};font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`]));
 };
-
 InputPrefix.propTypes = {
   dataTest: PropTypes.string.isRequired,
   className: PropTypes.string,

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

@@ -4,7 +4,6 @@ import { IconChevronDown16 } from '@dhis2/ui-icons';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const InputWrapper = _ref => {
   let {
     dataTest,
@@ -39,9 +38,8 @@ const InputWrapper = _ref => {
   }, /*#__PURE__*/React.createElement(IconChevronDown16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1568723238",
     dynamic: [colors.grey500, theme.focus, theme.focus, theme.valid, theme.warning, theme.error, colors.grey100, colors.grey500, theme.disabled]
-  }, [".root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;border-radius:3px;border:1px solid ".concat(colors.grey500, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:40px;padding-block:6px;padding-inline:12px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);}"), ".root.__jsx-style-dynamic-selector:not(.disabled):focus,.root.__jsx-style-dynamic-selector:not(.disabled):active{outline:none;box-shadow:inset 0 0 0 2px ".concat(theme.focus, ";border-color:").concat(theme.focus, ";}"), ".root.valid.__jsx-style-dynamic-selector{border-color:".concat(theme.valid, ";}"), ".root.warning.__jsx-style-dynamic-selector{border-color:".concat(theme.warning, ";}"), ".root.error.__jsx-style-dynamic-selector{border-color:".concat(theme.error, ";}"), ".root.disabled.__jsx-style-dynamic-selector{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";color:").concat(theme.disabled, ";cursor:not-allowed;}"), ".root.dense.__jsx-style-dynamic-selector{padding-block:2px;padding-inline:8px;min-height:32px;}", ".root-children.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".root-right.__jsx-style-dynamic-selector{margin-block-start:4px;margin-inline-start:8px;}"]));
+  }, [`.root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;border-radius:3px;border:1px solid ${colors.grey500};box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:40px;padding-block:6px;padding-inline:12px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);}`, `.root.__jsx-style-dynamic-selector:not(.disabled):focus,.root.__jsx-style-dynamic-selector:not(.disabled):active{outline:none;box-shadow:inset 0 0 0 2px ${theme.focus};border-color:${theme.focus};}`, `.root.valid.__jsx-style-dynamic-selector{border-color:${theme.valid};}`, `.root.warning.__jsx-style-dynamic-selector{border-color:${theme.warning};}`, `.root.error.__jsx-style-dynamic-selector{border-color:${theme.error};}`, `.root.disabled.__jsx-style-dynamic-selector{background-color:${colors.grey100};border-color:${colors.grey500};color:${theme.disabled};cursor:not-allowed;}`, ".root.dense.__jsx-style-dynamic-selector{padding-block:2px;padding-inline:8px;min-height:32px;}", ".root-children.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".root-right.__jsx-style-dynamic-selector{margin-block-start:4px;margin-inline-start:8px;}"]));
 };
-
 InputWrapper.defaultProps = {
   tabIndex: '0'
 };

package/build/es/select/loading.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
-import { CircularLoader } from '@dhis2-ui/loader';
 import { colors, spacers, theme } from '@dhis2/ui-constants';
+import { CircularLoader } from '@dhis2-ui/loader';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -20,7 +20,7 @@ export const Loading = _ref => {
   })), message, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3603755746",
     dynamic: [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
-  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp16, ";-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:").concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;padding-block:").concat(spacers.dp8, ";padding-inline:").concat(spacers.dp24, ";}")]));
+  }, [`.container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp16};-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:${colors.grey700};font-family:${theme.fonts};font-size:13px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};}`]));
 };
 Loading.propTypes = {
   dataTest: PropTypes.string.isRequired,

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

@@ -1,10 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
+import { colors, elevations } from '@dhis2/ui-constants';
 import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
-import { colors, elevations } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const MenuWrapper = _ref => {
   let {
     children,
@@ -22,14 +21,13 @@ const MenuWrapper = _ref => {
     placement: "bottom-start",
     observeReferenceResize: true
   }, /*#__PURE__*/React.createElement("div", {
-    "data-test": "".concat(dataTest, "-menuwrapper"),
+    "data-test": `${dataTest}-menuwrapper`,
     className: _JSXStyle.dynamic([["1363246346", [menuWidth, maxHeight, colors.white, colors.grey200, elevations.e300]]])
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1363246346",
     dynamic: [menuWidth, maxHeight, colors.white, colors.grey200, elevations.e300]
-  }, ["div.__jsx-style-dynamic-selector{width:".concat(menuWidth, ";height:auto;max-height:").concat(maxHeight, ";overflow:auto;background:").concat(colors.white, ";border:1px solid ").concat(colors.grey200, ";border-radius:3px;box-shadow:").concat(elevations.e300, ";}")]))));
+  }, [`div.__jsx-style-dynamic-selector{width:${menuWidth};height:auto;max-height:${maxHeight};overflow:auto;background:${colors.white};border:1px solid ${colors.grey200};border-radius:3px;box-shadow:${elevations.e300};}`]))));
 };
-
 MenuWrapper.defaultProps = {
   maxHeight: '280px'
 };

package/build/es/select/no-match.js

@@ -2,7 +2,6 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const NoMatch = _ref => {
   let {
     message,
@@ -13,9 +12,8 @@ const NoMatch = _ref => {
   }, message, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3788156646",
     dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
-  }, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;line-height:16px;padding-block:").concat(spacers.dp8, ";padding-inline:").concat(spacers.dp24, ";text-align:center;}")]));
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey700};font-family:${theme.fonts};font-size:13px;line-height:16px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};text-align:center;}`]));
 };
-
 NoMatch.propTypes = {
   message: PropTypes.string.isRequired,
   className: PropTypes.string

package/build/es/select/option-helpers.js

@@ -1,19 +1,23 @@
-import React from 'react'; // Check whether an option is valid
+import React from 'react';
 
-export const checkIfValidOption = option => option && 'props' in option && 'value' in option.props && 'label' in option.props; // Filters all children that won't be rendered from an array of react children
+// Check whether an option is valid
+export const checkIfValidOption = option => option && 'props' in option && 'value' in option.props && 'label' in option.props;
 
-export const filterIgnored = children => React.Children.toArray(children).filter(child => child !== null && child !== false && child !== undefined); // Find an option in an array of react children
+// Filters all children that won't be rendered from an array of react children
+export const filterIgnored = children => React.Children.toArray(children).filter(child => child !== null && child !== false && child !== undefined);
 
+// Find an option in an array of react children
 export const findOptionChild = (value, optionChildren) => React.Children.toArray(optionChildren).find(currentOption => {
   if (!currentOption.props) {
     return false;
   }
-
   return value === currentOption.props.value;
-}); // Find an option in an array of option objects
+});
 
-export const findOption = (value, optionArray) => optionArray.find(optionValue => value === optionValue); // Remove a specific option from an array of options
+// Find an option in an array of option objects
+export const findOption = (value, optionArray) => optionArray.find(optionValue => value === optionValue);
 
+// Remove a specific option from an array of options
 export const removeOption = (value, optionArray) => optionArray.filter(optionValue => {
   return optionValue !== value;
 });

package/build/es/select/select.js

@@ -1,12 +1,14 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { debounce } from './debounce/debounce.js';
 import { InputWrapper } from './input-wrapper.js';
-import { MenuWrapper } from './menu-wrapper.js'; // Keycodes for the keypress event handlers
+import { MenuWrapper } from './menu-wrapper.js';
 
+// Keycodes for the keypress event handlers
 const ESCAPE_KEY = 27;
 const SPACE_KEY = 32;
 const UP_KEY = 38;
@@ -14,109 +16,96 @@ const DOWN_KEY = 40;
 export class Select extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {
       open: false,
       menuWidth: 'auto'
     });
-
     _defineProperty(this, "selectRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
-
+    /**
+     * We're debouncing this so it doesn't fire continually during a resize.
+     *
+     * Additionally we should use requestPostAnimationFrame to not trigger a forced
+     * layout, but that's just a proposal, and the added complexity of solving this
+     * in another manner does not seem worth it, considering the minor perf penalty.
+     *
+     * See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
+     */
     _defineProperty(this, "onResize", debounce(() => {
       const menuWidth = this.getMenuWidth();
-
       if (this.state.menuWidth !== menuWidth) {
         this.setState({
           menuWidth
         });
       }
     }, 50));
-
     _defineProperty(this, "handleFocusInput", () => {
       this.inputRef.current.focus();
     });
-
     _defineProperty(this, "onFocus", e => {
       const {
         onFocus,
         disabled,
         selected
       } = this.props;
-
       if (disabled || !onFocus) {
         return;
       }
-
       onFocus({
         selected
       }, e);
     });
-
     _defineProperty(this, "handleOpen", () => {
       this.setState({
         open: true,
         menuWidth: this.getMenuWidth()
       });
     });
-
     _defineProperty(this, "handleClose", () => {
       this.setState({
         open: false
       });
     });
-
     _defineProperty(this, "onToggle", e => {
       if (this.props.disabled) {
         return;
       }
-
       e.stopPropagation();
       this.state.open ? this.handleClose() : this.handleOpen();
     });
-
     _defineProperty(this, "onOutsideClick", e => {
       const {
         onBlur,
         disabled,
         selected
       } = this.props;
-
       if (disabled) {
         return;
       }
-
       this.handleClose();
-
       if (onBlur) {
         onBlur({
           selected
         }, e);
       }
     });
-
     _defineProperty(this, "onKeyDown", e => {
       const {
         onKeyDown,
         disabled,
         selected
       } = this.props;
-
       if (disabled) {
         return;
       }
-
       if (onKeyDown) {
         onKeyDown({
           selected
         }, e);
       }
-
       if (e.defaultPrevented) {
         return;
       }
-
       e.stopPropagation();
       const {
         open
@@ -126,42 +115,26 @@ export class Select extends Component {
       } = e;
       const shouldOpen = !open && (keyCode === SPACE_KEY || keyCode === UP_KEY || keyCode === DOWN_KEY);
       const shouldClose = open && keyCode === ESCAPE_KEY;
-
       if (shouldClose) {
         return this.handleClose();
       }
-
       if (shouldOpen) {
         return this.handleOpen();
       }
     });
   }
-
   componentDidMount() {
     if (this.props.initialFocus) {
       this.inputRef.current.focus();
     }
-
     this.setState({
       menuWidth: this.getMenuWidth()
     });
     window.addEventListener('resize', this.onResize);
   }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.onResize);
   }
-  /**
-   * We're debouncing this so it doesn't fire continually during a resize.
-   *
-   * Additionally we should use requestPostAnimationFrame to not trigger a forced
-   * layout, but that's just a proposal, and the added complexity of solving this
-   * in another manner does not seem worth it, considering the minor perf penalty.
-   *
-   * See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
-   */
-
-
   getMenuWidth() {
     const {
       offsetWidth
@@ -169,14 +142,11 @@ export class Select extends Component {
     const {
       menuWidth
     } = this.state;
-
-    if (offsetWidth && "".concat(offsetWidth, "px") !== menuWidth) {
-      return "".concat(offsetWidth, "px");
+    if (offsetWidth && `${offsetWidth}px` !== menuWidth) {
+      return `${offsetWidth}px`;
     }
-
     return menuWidth;
   }
-
   render() {
     const {
       open,
@@ -195,16 +165,18 @@ export class Select extends Component {
       disabled,
       dense,
       dataTest
-    } = this.props; // Create the input
+    } = this.props;
 
+    // Create the input
     const inputProps = {
       selected,
       onChange,
       options: children,
       disabled
     };
-    const input = /*#__PURE__*/React.cloneElement(this.props.input, inputProps); // Create the menu
+    const input = /*#__PURE__*/React.cloneElement(this.props.input, inputProps);
 
+    // Create the menu
     const menuProps = {
       selected,
       onChange,
@@ -228,16 +200,15 @@ export class Select extends Component {
       valid: valid,
       disabled: disabled,
       dense: dense,
-      dataTest: "".concat(dataTest, "-input")
+      dataTest: `${dataTest}-input`
     }, input), open && /*#__PURE__*/React.createElement(MenuWrapper, {
       onClick: this.onOutsideClick,
       maxHeight: maxHeight,
       selectRef: this.selectRef,
       menuWidth: menuWidth,
-      dataTest: "".concat(dataTest, "-menu")
+      dataTest: `${dataTest}-menu`
     }, menu));
   }
-
 }
 Select.defaultProps = {
   dataTest: 'dhis2-uicore-select'

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

@@ -8,15 +8,18 @@ describe('<Selection />', () => {
   beforeEach(() => {
     // Ensure process.env is also reset for cached modules
     jest.resetModules();
-    process.env = { ...env
-    }; // Allow spying on console.error and silence rendering errors
+    process.env = {
+      ...env
+    };
 
+    // Allow spying on console.error and silence rendering errors
     jest.spyOn(console, 'error').mockImplementation(() => {});
   });
   afterEach(() => {
     // Restore process.env to original state
-    process.env = env; // Restore all mocks back to original values
+    process.env = env;
 
+    // Restore all mocks back to original values
     jest.restoreAllMocks();
   });
   describe('production', () => {

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

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with onBlur handler is rendered', () => {
-  cy.visitStory('SingleSelect', 'With onBlur');
+  cy.visitStory('SingleSelect', 'With on blur');
 });
 Then('the onBlur handler is called', () => {
   cy.window().should(win => {

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

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with onFocus handler is rendered', () => {
-  cy.visitStory('SingleSelect', 'With onFocus');
+  cy.visitStory('SingleSelect', 'With on focus');
 });
 Then('the onFocus handler is called', () => {
   cy.window().should(win => {

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

@@ -1,4 +1,4 @@
 import { Given } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with initial focus is rendered', () => {
-  cy.visitStory('SingleSelect', 'With initialFocus');
+  cy.visitStory('SingleSelect', 'With initial focus');
 });

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

@@ -3,7 +3,7 @@ Given('a SingleSelect with more than ten options is rendered', () => {
   cy.visitStory('SingleSelect', 'With more than ten options');
 });
 Given('a SingleSelect with more than three options and a 100px max-height is rendered', () => {
-  cy.visitStory('SingleSelect', 'With more than three options and a 100px max-height');
+  cy.visitStory('SingleSelect', 'With more than three options and a 100 px max-height');
 });
 Then('has the default max-height', () => {
   cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]').should('have.css', 'max-height', '280px');

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

@@ -1,9 +1,9 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with a disabled option and onChange handler is rendered', () => {
-  cy.visitStory('SingleSelect', 'With disabled option and onChange');
+  cy.visitStory('SingleSelect', 'With disabled option and on change');
 });
 Given('a SingleSelect with custom options and onChange handler is rendered', () => {
-  cy.visitStory('SingleSelect', 'With custom options and onChange');
+  cy.visitStory('SingleSelect', 'With custom options and on change');
 });
 When('an option is clicked', () => {
   cy.contains('option one').click();

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

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a clearable SingleSelect with a selection and onchange handler is rendered', () => {
-  cy.visitStory('SingleSelect', 'With clear button, selection and onChange');
+  cy.visitStory('SingleSelect', 'With clear button, selection and on change');
 });
 When('the clear button is clicked', () => {
   cy.get('[data-test="dhis2-uicore-singleselect-clear"]').click();

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

@@ -1,9 +1,9 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with options and onChange handler is rendered', () => {
-  cy.visitStory('SingleSelect', 'With options and onChange');
+  cy.visitStory('SingleSelect', 'With options and on change');
 });
 Given('a SingleSelect with options, a selection and onChange handler is rendered', () => {
-  cy.visitStory('SingleSelect', 'With options, a selection and onChange');
+  cy.visitStory('SingleSelect', 'With options, a selection and on change');
 });
 Given('the SingleSelect is open', () => {
   cy.get('[data-test="dhis2-uicore-select-input"]').click();

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

@@ -6,7 +6,7 @@ Given('a SingleSelect with hidden sibling elements', () => {
   });
 });
 When('the button is clicked', () => {
-  cy.get('button').click();
+  cy.get('button:contains("Toggle")').click();
 });
 Then('the siblings are displayed', () => {
   cy.get('.toggler').should('exist').and('have.length', 2);