@carbon/react 1.27.0 → 1.28.0-rc.0

package/es/components/Search/Search.Skeleton.js

@@ -5,29 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["small", "className"];
-
-var SearchSkeleton = function SearchSkeleton(_ref) {
-  var _cx;
-
-  var small = _ref.small,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var searchClasses = cx(className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--search--xl"), !small), _defineProperty(_cx, "".concat(prefix, "--search--sm"), small), _cx));
+const SearchSkeleton = _ref => {
+  let {
+    small,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const searchClasses = cx(className, {
+    [`${prefix}--skeleton`]: true,
+    [`${prefix}--search--xl`]: !small,
+    [`${prefix}--search--sm`]: small
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: searchClasses
   }, rest), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--label")
+    className: `${prefix}--label`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--search-input")
+    className: `${prefix}--search-input`
   }));
 };
 
@@ -45,6 +46,5 @@ SearchSkeleton.propTypes = {
 SearchSkeleton.defaultProps = {
   small: false
 };
-var SearchSkeleton$1 = SearchSkeleton;
 
-export { SearchSkeleton, SearchSkeleton$1 as default };
+export { SearchSkeleton, SearchSkeleton as default };

package/es/components/Search/Search.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { type HTMLAttributes, type ReactNode, type ComponentType, type FunctionComponent } from 'react';
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+export interface SearchProps extends InputPropsBase {
+    /**
+     * Specify an optional value for the `autocomplete` property on the underlying
+     * `<input>`, defaults to "off"
+     */
+    autoComplete?: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify a label to be read by screen readers on the "close" button
+     */
+    closeButtonLabelText?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id?: string;
+    /**
+     * Provide the label text for the Search icon
+     */
+    labelText: ReactNode;
+    /**
+     * Optional callback called when the search value changes.
+     */
+    onChange?(e: {
+        target: HTMLInputElement;
+        type: 'change';
+    }): void;
+    /**
+     * Optional callback called when the search value is cleared.
+     */
+    onClear?(): void;
+    /**
+     * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+     */
+    onExpand?(): void;
+    /**
+     * Provide an optional placeholder text for the Search.
+     * Note: if the label and placeholder differ,
+     * VoiceOver on Mac will read both
+     */
+    placeholder?: string;
+    /**
+     * Rendered icon for the Search.
+     * Can be a React component class
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * Specify the role for the underlying `<input>`, defaults to `searchbox`
+     */
+    role?: string;
+    /**
+     * Specify the size of the Search
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Optional prop to specify the type of the `<input>`
+     */
+    type?: string;
+    /**
+     * Specify the value of the `<input>`
+     */
+    value?: string | number;
+}
+declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
+export default Search;

package/es/components/Search/Search.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Close, Search as Search$2 } from '@carbon/icons-react';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { Close, Search as Search$1 } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useRef, useState } from 'react';
@@ -22,62 +22,53 @@ import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
 var _Close;
-
-var _excluded = ["autoComplete", "className", "closeButtonLabelText", "defaultValue", "disabled", "id", "labelText", "light", "onChange", "onClear", "onKeyDown", "onExpand", "placeholder", "renderIcon", "role", "size", "type", "value"];
-var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwardRef) {
-  var _cx, _cx2;
-
-  var _ref$autoComplete = _ref.autoComplete,
-      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-      className = _ref.className,
-      _ref$closeButtonLabel = _ref.closeButtonLabelText,
-      closeButtonLabelText = _ref$closeButtonLabel === void 0 ? 'Clear search input' : _ref$closeButtonLabel,
-      defaultValue = _ref.defaultValue,
-      disabled = _ref.disabled,
-      id = _ref.id,
-      labelText = _ref.labelText,
-      light = _ref.light,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onClear = _ref.onClear,
-      onClear = _ref$onClear === void 0 ? function () {} : _ref$onClear,
-      onKeyDown = _ref.onKeyDown,
-      onExpand = _ref.onExpand,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'Search' : _ref$placeholder,
-      renderIcon = _ref.renderIcon,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'searchbox' : _ref$role,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      value = _ref.value,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var inputRef = useRef(null);
-  var ref = useMergedRefs([forwardRef, inputRef]);
-  var inputId = useId('search-input');
-  var uniqueId = id || inputId;
-  var searchId = "".concat(uniqueId, "-search");
-
-  var _useState = useState(value || defaultValue || false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasContent = _useState2[0],
-      setHasContent = _useState2[1];
-
-  var _useState3 = useState(value),
-      _useState4 = _slicedToArray(_useState3, 2),
-      prevValue = _useState4[0],
-      setPrevValue = _useState4[1];
-
-  var searchClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--search"), true), _defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _defineProperty(_cx, "".concat(prefix, "--search--light"), light), _defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--search--fluid"), isFluid), _defineProperty(_cx, className, className), _cx));
-  var clearClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--search-close"), true), _defineProperty(_cx2, "".concat(prefix, "--search-close--hidden"), !hasContent), _cx2));
+const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwardRef) {
+  let {
+    autoComplete = 'off',
+    className,
+    closeButtonLabelText = 'Clear search input',
+    defaultValue,
+    disabled,
+    id,
+    labelText,
+    // @ts-expect-error: deprecated prop
+    light,
+    onChange = () => {},
+    onClear = () => {},
+    onKeyDown,
+    onExpand,
+    placeholder = 'Search',
+    renderIcon,
+    role = 'searchbox',
+    size = 'md',
+    type = 'text',
+    value,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const inputRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, inputRef]);
+  const inputId = useId('search-input');
+  const uniqueId = id || inputId;
+  const searchId = `${uniqueId}-search`;
+  const [hasContent, setHasContent] = useState(value || defaultValue || false);
+  const [prevValue, setPrevValue] = useState(value);
+  const searchClasses = cx({
+    [`${prefix}--search`]: true,
+    [`${prefix}--search--sm`]: size === 'sm',
+    [`${prefix}--search--md`]: size === 'md',
+    [`${prefix}--search--lg`]: size === 'lg',
+    [`${prefix}--search--light`]: light,
+    [`${prefix}--search--disabled`]: disabled,
+    [`${prefix}--search--fluid`]: isFluid
+  }, className);
+  const clearClasses = cx({
+    [`${prefix}--search-close`]: true,
+    [`${prefix}--search-close--hidden`]: !hasContent
+  });
 
   if (value !== prevValue) {
     setHasContent(!!value);
@@ -85,14 +76,14 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
   }
 
   function clearInput() {
-    if (!value) {
+    if (!value && inputRef.current) {
       inputRef.current.value = '';
     }
 
-    var inputTarget = Object.assign({}, inputRef.current, {
+    const inputTarget = Object.assign({}, inputRef.current, {
       value: ''
     });
-    var clearedEvt = {
+    const clearedEvt = {
       target: inputTarget,
       type: 'change'
     };
@@ -119,18 +110,18 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
     className: searchClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     "aria-labelledby": uniqueId,
-    role: onExpand ? 'button' : null,
-    className: "".concat(prefix, "--search-magnifier"),
+    role: onExpand ? 'button' : undefined,
+    className: `${prefix}--search-magnifier`,
     onClick: onExpand
   }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
     icon: renderIcon
   })), /*#__PURE__*/React__default.createElement("label", {
     id: searchId,
     htmlFor: uniqueId,
-    className: "".concat(prefix, "--label")
+    className: `${prefix}--label`
   }, labelText), /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
     autoComplete: autoComplete,
-    className: "".concat(prefix, "--search-input"),
+    className: `${prefix}--search-input`,
     defaultValue: defaultValue,
     disabled: disabled,
     role: role,
@@ -224,6 +215,7 @@ Search.propTypes = {
    * Rendered icon for the Search.
    * Can be a React component class
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
@@ -248,17 +240,19 @@ Search.propTypes = {
 };
 
 function CustomSearchIcon(_ref2) {
-  var Icon = _ref2.icon;
-  var prefix = usePrefix();
+  let {
+    icon: Icon
+  } = _ref2;
+  const prefix = usePrefix();
 
   if (Icon) {
     return /*#__PURE__*/React__default.createElement(Icon, {
-      className: "".concat(prefix, "--search-magnifier-icon")
+      className: `${prefix}--search-magnifier-icon`
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(Search$2, {
-    className: "".concat(prefix, "--search-magnifier-icon")
+  return /*#__PURE__*/React__default.createElement(Search$1, {
+    className: `${prefix}--search-magnifier-icon`
   });
 }
 
@@ -268,6 +262,5 @@ CustomSearchIcon.propTypes = {
    */
   icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-var Search$1 = Search;
 
-export { Search$1 as default };
+export { Search as default };

package/es/components/Search/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import Search from './Search';
+export * from './Search';
+export default Search;
+export { Search };
+export { default as SearchSkeleton } from './Search.Skeleton';

package/es/components/SecondaryButton/SecondaryButton.js

@@ -9,11 +9,9 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default from 'react';
 import Button from '../Button/Button.js';
 
-var SecondaryButton = function SecondaryButton(props) {
-  return /*#__PURE__*/React__default.createElement(Button, _extends({
-    kind: "secondary"
-  }, props));
-};
+const SecondaryButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
+  kind: "secondary"
+}, props));
 
 var SecondaryButton$1 = SecondaryButton;
 

package/es/components/Select/Select.Skeleton.js

@@ -5,28 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["hideLabel", "className"];
-
-var SelectSkeleton = function SelectSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
+const SelectSkeleton = _ref => {
+  let {
+    hideLabel,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx("".concat(prefix, "--form-item"), className)
+    className: cx(`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--select ").concat(prefix, "--skeleton")
+    className: `${prefix}--select ${prefix}--skeleton`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--select-input")
+    className: `${prefix}--select-input`
   })));
 };
 

package/es/components/Select/Select.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useState, useRef } from 'react';
 import cx from 'classnames';
@@ -17,56 +17,60 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 
-var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "hideLabel", "invalid", "invalidText", "helperText", "light", "readOnly", "size", "warn", "warnText"];
-var getInstanceId = setupGetInstanceId();
-var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
-  var _classNames, _classNames2, _classNames3;
-
-  var className = _ref.className,
-      id = _ref.id,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      labelText = _ref.labelText,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      children = _ref.children,
-      _ref$noLabel = _ref.noLabel,
-      noLabel = _ref$noLabel === void 0 ? false : _ref$noLabel,
-      _ref$hideLabel = _ref.hideLabel,
-      hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      invalidText = _ref.invalidText,
-      helperText = _ref.helperText,
-      _ref$light = _ref.light,
-      light = _ref$light === void 0 ? false : _ref$light,
-      readOnly = _ref.readOnly,
-      size = _ref.size,
-      _ref$warn = _ref.warn,
-      warn = _ref$warn === void 0 ? false : _ref$warn,
-      warnText = _ref.warnText,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var enabled = useFeatureFlag('enable-v11-release');
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var _useRef = useRef(getInstanceId()),
-      selectInstanceId = _useRef.current;
-
-  var selectClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--select"), true), _defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--select--readonly"), readOnly), _defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
-  var labelClasses = cx("".concat(prefix, "--label"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
-  var inputClasses = cx((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--select-input"), true), _defineProperty(_classNames3, "".concat(prefix, "--select-input--").concat(size), size), _classNames3));
-  var errorId = "".concat(id, "-error-msg");
-
-  var errorText = function () {
+const getInstanceId = setupGetInstanceId();
+const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
+  let {
+    className,
+    id,
+    inline = false,
+    labelText,
+    disabled = false,
+    children,
+    // reserved for use with <Pagination> component
+    noLabel = false,
+    // eslint-disable-next-line no-unused-vars
+    hideLabel = false,
+    invalid = false,
+    invalidText,
+    helperText,
+    light = false,
+    readOnly,
+    size,
+    warn = false,
+    warnText,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const enabled = useFeatureFlag('enable-v11-release');
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const [isFocused, setIsFocused] = useState(false);
+  const {
+    current: selectInstanceId
+  } = useRef(getInstanceId());
+  const selectClasses = cx({
+    [`${prefix}--select`]: true,
+    [`${prefix}--select--inline`]: inline,
+    [`${prefix}--select--light`]: light,
+    [`${prefix}--select--invalid`]: invalid,
+    [`${prefix}--select--disabled`]: disabled,
+    [`${prefix}--select--readonly`]: readOnly,
+    [`${prefix}--select--warning`]: warn,
+    [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--select--fluid--focus`]: isFluid && isFocused
+  }, [enabled ? null : className]);
+  const labelClasses = cx(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const inputClasses = cx({
+    [`${prefix}--select-input`]: true,
+    [`${prefix}--select-input--${size}`]: size
+  });
+  const errorId = `${id}-error-msg`;
+
+  const errorText = (() => {
     if (invalid) {
       return invalidText;
     }
@@ -74,19 +78,21 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     if (warn) {
       return warnText;
     }
-  }();
+  })();
 
-  var error = invalid || warn ? /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement"),
+  const error = invalid || warn ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--form-requirement`,
     id: errorId
   }, errorText) : null;
-  var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var helperId = !helperText ? undefined : "select-helper-text-".concat(selectInstanceId);
-  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  const helperTextClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
+  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperTextClasses
   }, helperText) : null;
-  var ariaProps = {};
+  const ariaProps = {};
 
   if (invalid) {
     ariaProps['aria-describedby'] = errorId;
@@ -94,12 +100,12 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     ariaProps['aria-describedby'] = helper ? helperId : undefined;
   }
 
-  var handleFocus = function handleFocus(evt) {
+  const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
-  var readOnlyEventHandlers = {
-    onMouseDown: function onMouseDown(evt) {
+  const readOnlyEventHandlers = {
+    onMouseDown: evt => {
       // NOTE: does not prevent click
       if (readOnly) {
         evt.preventDefault(); // focus on the element as per readonly input behavior
@@ -107,8 +113,8 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
         evt.target.focus();
       }
     },
-    onKeyDown: function onKeyDown(evt) {
-      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ']; // This prevents the select from opening for the above keys
+    onKeyDown: evt => {
+      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ']; // This prevents the select from opening for the above keys
 
       if (readOnly && selectAccessKeys.includes(evt.key)) {
         evt.preventDefault();
@@ -116,7 +122,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     }
   };
 
-  var input = function () {
+  const input = (() => {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("select", _extends({}, other, ariaProps, {
       id: id,
       className: inputClasses,
@@ -126,33 +132,33 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     }, readOnlyEventHandlers, {
       ref: ref
     }), children), /*#__PURE__*/React__default.createElement(ChevronDown, {
-      className: "".concat(prefix, "--select__arrow")
+      className: `${prefix}--select__arrow`
     }), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
-      className: "".concat(prefix, "--select__invalid-icon")
+      className: `${prefix}--select__invalid-icon`
     }), !invalid && warn && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
-      className: "".concat(prefix, "--select__invalid-icon ").concat(prefix, "--select__invalid-icon--warning")
+      className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`
     }));
-  }();
+  })();
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
+    className: enabled ? cx(`${prefix}--form-item`, className) : `${prefix}--form-item`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: selectClasses
   }, !noLabel && /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText), inline && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--select-input--inline__wrapper")
+    className: `${prefix}--select-input--inline__wrapper`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--select-input__wrapper"),
+    className: `${prefix}--select-input__wrapper`,
     "data-invalid": invalid || null
   }, input), error), !inline && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--select-input__wrapper"),
+    className: `${prefix}--select-input__wrapper`,
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
   }, input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
-    className: "".concat(prefix, "--select__divider")
+    className: `${prefix}--select__divider`
   }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
 Select.displayName = 'Select';