@dhis2-ui/select 10.16.3-alpha.1 → 10.16.4

package/build/es/multi-select/selection-list.js

@@ -2,67 +2,61 @@ import { Chip } from '@dhis2-ui/chip';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { removeOption, findOptionChild } from '../select/index.js';
-const createRemoveHandler = _ref => {
-  let {
-    selected,
-    onChange,
-    value
-  } = _ref;
-  return (_, e) => {
-    const filtered = removeOption(value, selected);
-    const data = {
-      selected: filtered
-    };
-    onChange(data, e);
+const createRemoveHandler = ({
+  selected,
+  onChange,
+  value
+}) => (_, e) => {
+  const filtered = removeOption(value, selected);
+  const data = {
+    selected: filtered
   };
+  onChange(data, e);
 };
-const SelectionList = _ref2 => {
-  let {
-    selected,
-    onChange,
-    disabled,
-    options
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, selected.map(value => {
-    const isProduction = process.env.NODE_ENV === 'production';
-    const selectedOption = findOptionChild(value, options);
-    if (!selectedOption) {
-      const message = `There is no option with the value: "${value}". ` + 'Make sure that all the values passed to the selected ' + 'prop match the value of an existing option.';
-      if (isProduction) {
-        // Don't crash the app if in production
-        console.error(message);
-      } else {
-        // Throw error if not in production for maximum visibility
-        throw new Error(message);
-      }
+const SelectionList = ({
+  selected,
+  onChange,
+  disabled,
+  options
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, selected.map(value => {
+  const isProduction = process.env.NODE_ENV === 'production';
+  const selectedOption = findOptionChild(value, options);
+  if (!selectedOption) {
+    const message = `There is no option with the value: "${value}". ` + 'Make sure that all the values passed to the selected ' + 'prop match the value of an existing option.';
+    if (isProduction) {
+      // Don't crash the app if in production
+      console.error(message);
+    } else {
+      // Throw error if not in production for maximum visibility
+      throw new Error(message);
     }
-    const isDisabled = selectedOption ?
-    // The chip should be disabled if the option or the select are disabled
-    selectedOption.props.disabled || disabled :
-    // If there is no selected option, just look at the select
-    disabled;
-    // Use the selected value if we do not have a label
-    const label = selectedOption ? selectedOption.props.label : value;
+  }
+  const isDisabled = selectedOption ?
+  // The chip should be disabled if the option or the select are disabled
+  selectedOption.props.disabled || disabled :
+  // If there is no selected option, just look at the select
+  disabled;
+  // Use the selected value if we do not have a label
+  const label = selectedOption ? selectedOption.props.label : value;
 
-    // Create an onRemove handler, but only if it's not disabled
-    const onRemove = isDisabled ? undefined : createRemoveHandler({
-      selected,
-      onChange,
-      value
-    });
-    return /*#__PURE__*/React.createElement(Chip, {
-      key: value,
-      onRemove: onRemove,
-      disabled: isDisabled,
-      marginBottom: 0,
-      marginLeft: 0,
-      marginTop: 0,
-      marginRight: 0,
-      overflow: true,
-      dense: true
-    }, label);
-  }));
-};
+  // Create an onRemove handler, but only if it's not disabled
+  const onRemove = isDisabled ? undefined : createRemoveHandler({
+    selected,
+    onChange,
+    value
+  });
+  return /*#__PURE__*/React.createElement(Chip, {
+    key: value,
+    onRemove: onRemove,
+    disabled: isDisabled,
+    marginBottom: 0,
+    marginLeft: 0,
+    marginTop: 0,
+    marginRight: 0,
+    overflow: true,
+    dense: true
+  }, label);
+}));
 SelectionList.propTypes = {
   disabled: PropTypes.bool,
   options: PropTypes.node,

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

@@ -14,37 +14,34 @@ const {
   }, [`.jsx-2013783366{padding:${spacers.dp8} ${spacers.dp12};}`]),
   className: "jsx-2013783366"
 };
-const MultiSelectOption = _ref => {
-  let {
-    label,
+const MultiSelectOption = ({
+  label,
+  active,
+  disabled,
+  onClick,
+  className,
+  dataTest = 'dhis2-uicore-multiselectoption',
+  value
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  "data-value": value,
+  "data-label": label,
+  className: _JSXStyle.dynamic([["2722881483", [colors.grey200, colors.teal050]]]) + " " + (cx(className, {
     active,
-    disabled,
-    onClick,
-    className,
-    dataTest = 'dhis2-uicore-multiselectoption',
-    value
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    "data-value": value,
-    "data-label": label,
-    className: _JSXStyle.dynamic([["2722881483", [colors.grey200, colors.teal050]]]) + " " + (cx(className, {
-      active,
-      disabled
-    }) || "")
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    name: label,
-    className: checkboxClassname,
-    checked: active,
-    label: label,
-    onChange: onClick,
-    disabled: disabled,
-    dense: true
-  }), styles, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2722881483",
-    dynamic: [colors.grey200, colors.teal050]
-  }, [`div.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};}`, `div.active.__jsx-style-dynamic-selector{background-color:${colors.teal050};}`, "div.active.__jsx-style-dynamic-selector:hover{background-color:#e6f4f4;}", "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
-};
+    disabled
+  }) || "")
+}, /*#__PURE__*/React.createElement(Checkbox, {
+  name: label,
+  className: checkboxClassname,
+  checked: active,
+  label: label,
+  onChange: onClick,
+  disabled: disabled,
+  dense: true
+}), styles, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "2722881483",
+  dynamic: [colors.grey200, colors.teal050]
+}, [`div.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};}`, `div.active.__jsx-style-dynamic-selector{background-color:${colors.teal050};}`, "div.active.__jsx-style-dynamic-selector:hover{background-color:#e6f4f4;}", "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
 MultiSelectOption.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,

package/build/es/select/debounce/debounce.js

@@ -1,4 +1,3 @@
-var _this = this;
 /**
  * Returns a function, that, as long as it continues to be invoked, will not be triggered. The
  * function will be called after it stops being called for N milliseconds. If `immediate` is
@@ -7,11 +6,8 @@ var _this = this;
 
 export const debounce = (func, wait, immediate) => {
   let timeout;
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    const context = _this;
+  return (...args) => {
+    const context = this;
     const later = () => {
       timeout = null;
       if (!immediate) {

package/build/es/select/empty.js

@@ -2,20 +2,17 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-const Empty = _ref => {
-  let {
-    message,
-    className,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
-  }, message, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3788156646",
-    dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
-  }, [`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;}`]));
-};
+const Empty = ({
+  message,
+  className,
+  dataTest
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
+}, message, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "3788156646",
+  dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
+}, [`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;}`]));
 Empty.propTypes = {
   dataTest: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,

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

@@ -3,30 +3,27 @@ import { spacers, colors } from '@dhis2/ui-constants';
 import { Input } from '@dhis2-ui/input';
 import PropTypes from 'prop-types';
 import React from 'react';
-const FilterInput = _ref => {
-  let {
-    value,
-    onChange,
-    placeholder,
-    className,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["730881408", [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]]]) + " " + (className || "")
-  }, /*#__PURE__*/React.createElement(Input, {
-    dense: true,
-    dataTest: dataTest,
-    value: value,
-    onChange: onChange,
-    type: "text",
-    name: "filter",
-    placeholder: placeholder,
-    initialFocus: true
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "730881408",
-    dynamic: [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]
-  }, [`div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${colors.white};padding-block-start:${spacers.dp8};padding-inline-end:${spacers.dp8};padding-block-end:${spacers.dp4};padding-inline-start:${spacers.dp8};z-index:1;}`]));
-};
+const FilterInput = ({
+  value,
+  onChange,
+  placeholder,
+  className,
+  dataTest
+}) => /*#__PURE__*/React.createElement("div", {
+  className: _JSXStyle.dynamic([["730881408", [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]]]) + " " + (className || "")
+}, /*#__PURE__*/React.createElement(Input, {
+  dense: true,
+  dataTest: dataTest,
+  value: value,
+  onChange: onChange,
+  type: "text",
+  name: "filter",
+  placeholder: placeholder,
+  initialFocus: true
+}), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "730881408",
+  dynamic: [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]
+}, [`div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${colors.white};padding-block-start:${spacers.dp8};padding-inline-end:${spacers.dp8};padding-block-end:${spacers.dp4};padding-inline-start:${spacers.dp8};z-index:1;}`]));
 FilterInput.propTypes = {
   dataTest: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,

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

@@ -8,15 +8,14 @@ import { FilterInput } from './filter-input.js';
 import { NoMatch } from './no-match.js';
 import { filterIgnored, checkIfValidOption } from './option-helpers.js';
 export class FilterableMenu extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "state", {
       filter: ''
     });
-    _defineProperty(this, "onFilterChange", _ref => {
-      let {
-        value
-      } = _ref;
+    _defineProperty(this, "onFilterChange", ({
+      value
+    }) => {
       this.setState({
         filter: value
       });

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

@@ -3,37 +3,34 @@ 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,
-    clearText,
-    className,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    openDelay: 500,
-    content: clearText
-  }, /*#__PURE__*/React.createElement("button", {
-    "data-test": dataTest,
-    onClick: onClear,
-    type: "button",
-    className: _JSXStyle.dynamic([["2859518049", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]]) + " " + (className || "")
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: _JSXStyle.dynamic([["2859518049", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z",
-    fill: "none",
-    className: _JSXStyle.dynamic([["2859518049", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2859518049",
-    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-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-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{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", `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};}`])));
-};
+const InputClearButton = ({
+  onClear,
+  clearText,
+  className,
+  dataTest
+}) => /*#__PURE__*/React.createElement(Tooltip, {
+  openDelay: 500,
+  content: clearText
+}, /*#__PURE__*/React.createElement("button", {
+  "data-test": dataTest,
+  onClick: onClear,
+  type: "button",
+  className: _JSXStyle.dynamic([["2859518049", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]]) + " " + (className || "")
+}, /*#__PURE__*/React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  className: _JSXStyle.dynamic([["2859518049", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z",
+  fill: "none",
+  className: _JSXStyle.dynamic([["2859518049", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
+})), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "2859518049",
+  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-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-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{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", `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,12 +2,11 @@ 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;
+const InputPlaceholder = ({
+  placeholder,
+  className,
+  dataTest
+}) => {
   if (!placeholder) {
     return null;
   }

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

@@ -2,12 +2,11 @@ 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;
+const InputPrefix = ({
+  prefix,
+  className,
+  dataTest
+}) => {
   if (!prefix) {
     return null;
   }

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

@@ -4,20 +4,19 @@ import { IconChevronDown16 } from '@dhis2/ui-icons';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-const InputWrapper = _ref => {
-  let {
-    dataTest,
-    onToggle,
-    children,
-    tabIndex = '0',
-    error,
-    warning,
-    valid,
-    disabled,
-    dense,
-    className,
-    inputRef
-  } = _ref;
+const InputWrapper = ({
+  dataTest,
+  onToggle,
+  children,
+  tabIndex = '0',
+  error,
+  warning,
+  valid,
+  disabled,
+  dense,
+  className,
+  inputRef
+}) => {
   const classNames = cx(className, 'root', {
     error,
     warning,

package/build/es/select/loading.js

@@ -4,24 +4,21 @@ import { CircularLoader } from '@dhis2-ui/loader';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const Loading = _ref => {
-  let {
-    message,
-    className,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["3603755746", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (cx(className, 'container') || "")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3603755746", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]])
-  }, /*#__PURE__*/React.createElement(CircularLoader, {
-    small: true
-  })), 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:${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};}`]));
-};
+export const Loading = ({
+  message,
+  className,
+  dataTest
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  className: _JSXStyle.dynamic([["3603755746", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (cx(className, 'container') || "")
+}, /*#__PURE__*/React.createElement("div", {
+  className: _JSXStyle.dynamic([["3603755746", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]])
+}, /*#__PURE__*/React.createElement(CircularLoader, {
+  small: true
+})), 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:${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,
   className: PropTypes.string,

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

@@ -4,15 +4,14 @@ import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
 import PropTypes from 'prop-types';
 import React from 'react';
-const MenuWrapper = _ref => {
-  let {
-    children,
-    dataTest,
-    maxHeight = '280px',
-    menuWidth,
-    onClick,
-    selectRef
-  } = _ref;
+const MenuWrapper = ({
+  children,
+  dataTest,
+  maxHeight = '280px',
+  menuWidth,
+  onClick,
+  selectRef
+}) => {
   return /*#__PURE__*/React.createElement(Layer, {
     onBackdropClick: onClick,
     transparent: true

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

@@ -2,18 +2,15 @@ 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,
-    className
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
-  }, message, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3788156646",
-    dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
-  }, [`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;}`]));
-};
+const NoMatch = ({
+  message,
+  className
+}) => /*#__PURE__*/React.createElement("div", {
+  className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
+}, message, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "3788156646",
+  dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
+}, [`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/select.js

@@ -15,8 +15,8 @@ const SPACE_KEY = 32;
 const UP_KEY = 38;
 const DOWN_KEY = 40;
 export class Select extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "state", {
       open: false,
       menuWidth: 'auto'

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

@@ -2,25 +2,22 @@ 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;}"]));
-};
+const CustomOption = ({
+  label
+}) => /*#__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(() => {

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

@@ -5,13 +5,10 @@ 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;
+    return filterValue ? options.filter(({
+      label,
+      value
+    }) => label.match(new RegExp(filterValue), 'i') && value !== '') : options;
   }, [filterValue]);
   return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
     name: "simple",