carbon-react 118.5.1 → 118.6.0

package/lib/components/select/multi-select/multi-select.component.js

@@ -4,92 +4,70 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MultiSelect = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _invariant = _interopRequireDefault(require("invariant"));
-
 var _utils = require("../../../style/utils");
-
 var _selectTextbox = _interopRequireDefault(require("../select-textbox"));
-
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-
 var _withFilter = _interopRequireDefault(require("../utils/with-filter.hoc"));
-
 var _selectList = _interopRequireDefault(require("../select-list/select-list.component"));
-
 var _multiSelect = require("./multi-select.style");
-
 var _pill = _interopRequireDefault(require("../../pill"));
-
 var _isExpectedOption = _interopRequireDefault(require("../utils/is-expected-option"));
-
 var _isExpectedValue = _interopRequireDefault(require("../utils/is-expected-value"));
-
 var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
-
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
-
 var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
-
 var _useFormSpacing = _interopRequireDefault(require("../../../hooks/__internal__/useFormSpacing"));
-
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
-
-const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  value,
-  defaultValue,
-  id,
-  label,
-  name,
-  disabled,
-  readOnly,
-  children,
-  onOpen,
-  onFilterChange: onFilterChangeProp,
-  onChange,
-  onClick,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  openOnFocus = false,
-  noResultsMessage,
-  placeholder,
-  disablePortal,
-  isLoading,
-  tableHeader,
-  multiColumn,
-  tooltipPosition,
-  size,
-  "data-component": dataComponent = "multiselect",
-  "data-element": dataElement,
-  "data-role": dataRole,
-  listPlacement = "bottom",
-  listMaxHeight,
-  flipEnabled = true,
-  wrapPillText = true,
-  inputRef,
-  enableVirtualScroll,
-  virtualScrollOverscan,
-  ...textboxProps
-}, ref) => {
+const MultiSelect = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    value,
+    defaultValue,
+    id,
+    label,
+    name,
+    disabled,
+    readOnly,
+    children,
+    onOpen,
+    onFilterChange: onFilterChangeProp,
+    onChange,
+    onClick,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    openOnFocus = false,
+    noResultsMessage,
+    placeholder,
+    disablePortal,
+    isLoading,
+    tableHeader,
+    multiColumn,
+    tooltipPosition,
+    size,
+    "data-component": dataComponent = "multiselect",
+    "data-element": dataElement,
+    "data-role": dataRole,
+    listPlacement = "bottom",
+    listMaxHeight,
+    flipEnabled = true,
+    wrapPillText = true,
+    inputRef,
+    enableVirtualScroll,
+    virtualScrollOverscan,
+    ...textboxProps
+  } = _ref;
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const accessibilityLabelId = (0, _react.useRef)((0, _guid.default)());
@@ -115,33 +93,27 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     label
   });
   const actualValue = isControlled.current ? value : selectedValue;
-
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
-
     _logger.default.deprecate("The `inputRef` prop in `Multi Select` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
-
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
-
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
-
     _logger.default.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-
   const setOpen = (0, _react.useCallback)(() => {
     setOpenState(isAlreadyOpen => {
       if (!isAlreadyOpen && onOpen) {
         onOpen();
       }
-
       return true;
     });
   }, [onOpen]);
   const createCustomEvent = (0, _react.useCallback)(newValue => {
     const customEvent = {
-      target: { ...(name && {
+      target: {
+        ...(name && {
           name
         }),
         ...(id && {
@@ -152,41 +124,37 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     };
     return customEvent;
   }, [name, id]);
+
   /* generic value update function which can be used for both controlled and uncontrolled
    * components, both with and without onChange.
    * It accepts a function to update the value, which is assumed to be have no side effects and therefore
    * be safe to run more than once if needed. */
-
   const updateValue = (0, _react.useCallback)(updateFunction => {
-    const newValue = updateFunction(actualValue); // only call onChange if an option has been selected or deselected
-
-    if (onChange && newValue.length !== (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length)) {
+    const newValue = updateFunction(actualValue);
+    // only call onChange if an option has been selected or deselected
+    if (onChange && newValue.length !== actualValue?.length) {
       onChange(createCustomEvent(newValue));
-    } // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
-
+    }
 
+    // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
     if (!isControlled.current) {
       setSelectedValue(updateFunction);
     }
   }, [createCustomEvent, onChange, actualValue]);
-
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {
       const {
         text
       } = child.props;
-      return (text === null || text === void 0 ? void 0 : text.toLowerCase().indexOf(textToMatch.toLowerCase())) !== -1;
+      return text?.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
     });
   }
-
   const handleTextboxChange = (0, _react.useCallback)(event => {
     const newValue = event.target.value;
     const match = findElementWithMatchingText(newValue, children);
-
     if (match) {
       setHighlightedValue(match.props.value);
     }
-
     setFilterText(newValue);
     setTextValue(newValue);
     setOpen();
@@ -197,9 +165,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       if (!previousValue.length) {
         return previousValue;
       }
-
       const newValue = previousValue.slice(); // spreading does not work but slice does - see https://github.com/microsoft/TypeScript/issues/53670
-
       newValue.splice(index, 1);
       return newValue;
     });
@@ -209,65 +175,51 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       key
     } = event;
     const isDeleteKey = key === "Backspace" || key === "Delete";
-
     if (onKeyDown) {
       onKeyDown(event);
     }
-
     if (readOnly) {
       return;
     }
-
     if (!event.defaultPrevented && (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
       setOpen();
     }
-
     if (isDeleteKey && (filterText === "" || textValue === "")) {
       removeSelectedValue(-1);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = (0, _react.useMemo)(() => {
-    var _React$Children$map;
-
-    return actualValue && actualValue.length ? (_React$Children$map = _react.default.Children.map(children, child => {
+    return actualValue && actualValue.length ? _react.default.Children.map(children, child => {
       return /*#__PURE__*/_react.default.isValidElement(child) && actualValue.includes(child.props.value) ? child.props.text : false;
-    })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(child => child).reduce((acc, item) => {
+    })?.filter(child => child).reduce((acc, item) => {
       return acc ? `${acc}, ${item}` : item;
     }, "") : null;
   }, [children, actualValue]);
   const handleGlobalClick = (0, _react.useCallback)(event => {
     isMouseDownReported.current = false;
-
     if (!isOpen) {
       return;
     }
-
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
-
     if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
       setTextValue("");
       setFilterText("");
       setHighlightedValue("");
       setOpenState(false);
     }
-
     isClickTriggeredBySelect.current = false;
   }, [isOpen]);
   const mapValuesToPills = (0, _react.useMemo)(() => {
     const canDelete = !disabled && !readOnly;
-
-    if (!(actualValue !== null && actualValue !== void 0 && actualValue.length)) {
+    if (!actualValue?.length) {
       return "";
     }
-
     return actualValue.map((singleValue, index) => {
       const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, singleValue));
-
       let pillProps = {};
-
       if ( /*#__PURE__*/_react.default.isValidElement(matchingOption)) {
         pillProps = {
           title: matchingOption.props.text,
@@ -275,7 +227,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
           borderColor: matchingOption.props.borderColor
         };
       }
-
       const title = pillProps.title || "";
       const key = title + ( /*#__PURE__*/_react.default.isValidElement(matchingOption) && matchingOption.props.value || index);
       return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
@@ -284,19 +235,20 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
         onDelete: canDelete ? () => removeSelectedValue(index) : undefined,
         wrapText: wrapPillText
       }, pillProps), title));
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, actualValue]);
   (0, _react.useEffect)(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
     !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
-  }, [value, onChange]); // removes placeholder when a value is present
+  }, [value, onChange]);
 
+  // removes placeholder when a value is present
   (0, _react.useEffect)(() => {
-    const hasValue = value === null || value === void 0 ? void 0 : value.length;
-    const hasSelectedValue = actualValue === null || actualValue === void 0 ? void 0 : actualValue.length;
-
+    const hasValue = value?.length;
+    const hasSelectedValue = actualValue?.length;
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");
     } else {
@@ -320,84 +272,64 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     isFirstRender.current = false;
   }, []);
-
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-
     if (onClick) {
       onClick(event);
     }
   }
-
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;
-
     if (onClick) {
       onClick(event);
     }
-
     setOpenState(isAlreadyOpen => {
       if (isAlreadyOpen) {
         setFilterText("");
         return false;
       }
-
       if (onOpen) {
         onOpen();
       }
-
       return true;
     });
   }
-
   function handleTextboxBlur(event) {
     isMouseDownOnInput.current = false;
-
     if (isMouseDownReported.current) {
       return;
     }
-
     isInputFocused.current = false;
-
     if (onBlur) {
       onBlur(event);
     }
   }
-
   function handleTextboxMouseDown(event) {
     isMouseDownReported.current = true;
-
     if (event.target.dataset.element === "input") {
       isMouseDownOnInput.current = true;
     }
   }
-
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
-
   function handleTextboxFocus(event) {
-    const triggerFocus = () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-
+    const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {
       setOpenState(isAlreadyOpen => {
         if (isAlreadyOpen) {
           return true;
         }
-
         if (onOpen) {
           onOpen();
         }
-
         if (onFocus && !isInputFocused.current) {
           triggerFocus();
           isInputFocused.current = true;
         }
-
         if (isMouseDownReported.current && !isMouseDownOnInput.current) {
           return false;
         }
-
         return true;
       });
     } else if (onFocus && !isInputFocused.current) {
@@ -405,33 +337,28 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       isInputFocused.current = true;
     }
   }
-
   const onSelectOption = (0, _react.useCallback)(optionData => {
     const {
       value: newValue,
       selectionType,
       id: selectedOptionId
     } = optionData;
-
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
       setActiveDescendantId(selectedOptionId);
       return;
     }
-
     if (selectionType === "click") {
       isClickTriggeredBySelect.current = true;
     }
-
     setTextValue("");
-    const isAlreadySelected = (actualValue === null || actualValue === void 0 ? void 0 : actualValue.findIndex(val => (0, _isExpectedValue.default)(val, newValue))) !== -1;
-    textboxRef === null || textboxRef === void 0 ? void 0 : textboxRef.focus();
+    const isAlreadySelected = actualValue?.findIndex(val => (0, _isExpectedValue.default)(val, newValue)) !== -1;
+    textboxRef?.focus();
     isMouseDownReported.current = false;
     updateValue(previousValue => {
       if (isAlreadySelected) {
         return previousValue;
       }
-
       return [...previousValue, newValue];
     });
   }, [textboxRef, actualValue, updateValue]);
@@ -441,18 +368,15 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, []);
   const assignInput = (0, _react.useCallback)(element => {
     setTextboxRef(element);
-
     if (inputRef || !ref) {
       return;
     }
-
     if (typeof ref === "function") {
       ref(element);
     } else {
       ref.current = element;
     }
   }, [ref, inputRef]);
-
   function getTextboxProps() {
     return {
       id: inputId.current,
@@ -479,12 +403,11 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }
-
   const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
     labelId: labelId,
-    anchorElement: (textboxRef === null || textboxRef === void 0 ? void 0 : textboxRef.parentElement) || undefined,
+    anchorElement: textboxRef?.parentElement || undefined,
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
@@ -504,7 +427,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     enableVirtualScroll: enableVirtualScroll,
     virtualScrollOverscan: virtualScrollOverscan
   }, children);
-
   const marginProps = (0, _useFormSpacing.default)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
     disabled: disabled,
@@ -532,7 +454,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     textboxRef: textboxRef
   }, getTextboxProps()))), selectList);
 });
-
 exports.MultiSelect = MultiSelect;
 MultiSelect.propTypes = {
   "about": _propTypes.default.string,
@@ -604,14 +525,12 @@ MultiSelect.propTypes = {
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "color": _propTypes.default.string,
+  "content": _propTypes.default.string,
   "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
   "contextMenu": _propTypes.default.string,
-  "crossOrigin": _propTypes.default.string,
-  "css": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-    "__emotion_styles": _propTypes.default.any.isRequired
-  }), _propTypes.default.string, _propTypes.default.bool]),
+  "crossOrigin": _propTypes.default.oneOf(["", "anonymous", "use-credentials"]),
   "dangerouslySetInnerHTML": _propTypes.default.shape({
-    "__html": _propTypes.default.string.isRequired
+    "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
   }),
   "data-component": _propTypes.default.string,
   "data-element": _propTypes.default.string,
@@ -831,6 +750,7 @@ MultiSelect.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
   "name": _propTypes.default.string,
+  "nonce": _propTypes.default.string,
   "noResultsMessage": _propTypes.default.string,
   "onAbort": _propTypes.default.func,
   "onAbortCapture": _propTypes.default.func,
@@ -1002,9 +922,11 @@ MultiSelect.propTypes = {
   "property": _propTypes.default.string,
   "radioGroup": _propTypes.default.string,
   "readOnly": _propTypes.default.bool,
+  "rel": _propTypes.default.string,
   "required": _propTypes.default.bool,
   "resource": _propTypes.default.string,
   "results": _propTypes.default.number,
+  "rev": _propTypes.default.string,
   "reverse": _propTypes.default.bool,
   "role": _propTypes.default.oneOfType([_propTypes.default.oneOf(["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,

package/lib/components/select/multi-select/multi-select.style.js

@@ -3,26 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledAccessibilityLabelContainer = exports.StyledSelectMultiSelect = exports.StyledSelectPillContainer = void 0;
-
+exports.StyledSelectPillContainer = exports.StyledSelectMultiSelect = exports.StyledAccessibilityLabelContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _pill = _interopRequireDefault(require("../../pill/pill.style"));
-
 var _themes = require("../../../style/themes");
-
 var _inputIconToggle = _interopRequireDefault(require("../../../__internal__/input-icon-toggle/input-icon-toggle.style"));
-
 var _select = _interopRequireDefault(require("../select.style"));
-
 var _inputPresentation = _interopRequireDefault(require("../../../__internal__/input/input-presentation.style"));
-
 var _input = _interopRequireDefault(require("../../../__internal__/input/input.style"));
-
 var _inputSizes = _interopRequireDefault(require("../../../__internal__/input/input-sizes.style"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const StyledSelectPillContainer = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
@@ -44,12 +34,18 @@ const StyledSelectMultiSelect = (0, _styledComponents.default)(_select.default)`
 
   ${_inputPresentation.default} {
     // size has a default value of "medium" defined in StyledSelect, but TS can't see this
-    padding-right: ${({
-  size
-}) => _inputSizes.default[size].height};
-    padding-left: ${({
-  size
-}) => _inputSizes.default[size].horizontalPadding};
+    padding-right: ${_ref => {
+  let {
+    size
+  } = _ref;
+  return _inputSizes.default[size].height;
+}};
+    padding-left: ${_ref2 => {
+  let {
+    size
+  } = _ref2;
+  return _inputSizes.default[size].horizontalPadding;
+}};
     position: relative;
 
     ${_input.default} {

package/lib/components/select/option/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "default", {
     return _option.default;
   }
 });
-
 var _option = _interopRequireDefault(require("./option.component"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }