@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/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/lib/components/Search/Search.js

@@ -32,62 +32,53 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var inputRef = React.useRef(null);
-  var ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
-  var inputId = useId.useId('search-input');
-  var uniqueId = id || inputId;
-  var searchId = "".concat(uniqueId, "-search");
-
-  var _useState = React.useState(value || defaultValue || false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      hasContent = _useState2[0],
-      setHasContent = _useState2[1];
-
-  var _useState3 = React.useState(value),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevValue = _useState4[0],
-      setPrevValue = _useState4[1];
-
-  var searchClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--fluid"), isFluid), _rollupPluginBabelHelpers.defineProperty(_cx, className, className), _cx));
-  var clearClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--search-close"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--search-close--hidden"), !hasContent), _cx2));
+const Search = /*#__PURE__*/React__default["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.usePrefix();
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const inputRef = React.useRef(null);
+  const ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
+  const inputId = useId.useId('search-input');
+  const uniqueId = id || inputId;
+  const searchId = `${uniqueId}-search`;
+  const [hasContent, setHasContent] = React.useState(value || defaultValue || false);
+  const [prevValue, setPrevValue] = React.useState(value);
+  const searchClasses = cx__default["default"]({
+    [`${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__default["default"]({
+    [`${prefix}--search-close`]: true,
+    [`${prefix}--search-close--hidden`]: !hasContent
+  });
 
   if (value !== prevValue) {
     setHasContent(!!value);
@@ -95,14 +86,14 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
   }
 
   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'
     };
@@ -129,18 +120,18 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
     className: searchClasses
   }, /*#__PURE__*/React__default["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["default"].createElement(CustomSearchIcon, {
     icon: renderIcon
   })), /*#__PURE__*/React__default["default"].createElement("label", {
     id: searchId,
     htmlFor: uniqueId,
-    className: "".concat(prefix, "--label")
+    className: `${prefix}--label`
   }, labelText), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, {
     autoComplete: autoComplete,
-    className: "".concat(prefix, "--search-input"),
+    className: `${prefix}--search-input`,
     defaultValue: defaultValue,
     disabled: disabled,
     role: role,
@@ -234,6 +225,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__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
 
   /**
@@ -258,17 +250,19 @@ Search.propTypes = {
 };
 
 function CustomSearchIcon(_ref2) {
-  var Icon = _ref2.icon;
-  var prefix = usePrefix.usePrefix();
+  let {
+    icon: Icon
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
 
   if (Icon) {
     return /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: "".concat(prefix, "--search-magnifier-icon")
+      className: `${prefix}--search-magnifier-icon`
     });
   }
 
   return /*#__PURE__*/React__default["default"].createElement(iconsReact.Search, {
-    className: "".concat(prefix, "--search-magnifier-icon")
+    className: `${prefix}--search-magnifier-icon`
   });
 }
 
@@ -278,6 +272,5 @@ CustomSearchIcon.propTypes = {
    */
   icon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
-var Search$1 = Search;
 
-exports["default"] = Search$1;
+exports["default"] = Search;

package/lib/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/lib/components/SecondaryButton/SecondaryButton.js

@@ -17,11 +17,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SecondaryButton = function SecondaryButton(props) {
-  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
-    kind: "secondary"
-  }, props));
-};
+const SecondaryButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+  kind: "secondary"
+}, props));
 
 var SecondaryButton$1 = SecondaryButton;
 

package/lib/components/Select/Select.Skeleton.js

@@ -21,22 +21,21 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["hideLabel", "className"];
-
-var SelectSkeleton = function SelectSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+const SelectSkeleton = _ref => {
+  let {
+    hideLabel,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--form-item"), className)
+    className: cx__default["default"](`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--select ").concat(prefix, "--skeleton")
+    className: `${prefix}--select ${prefix}--skeleton`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--select-input")
+    className: `${prefix}--select-input`
   })));
 };
 

package/lib/components/Select/Select.js

@@ -27,56 +27,60 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "hideLabel", "invalid", "invalidText", "helperText", "light", "readOnly", "size", "warn", "warnText"];
-var getInstanceId = setupGetInstanceId["default"]();
-var Select = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var enabled = index.useFeatureFlag('enable-v11-release');
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var _useRef = React.useRef(getInstanceId()),
-      selectInstanceId = _useRef.current;
-
-  var selectClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
-  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
-  var inputClasses = cx__default["default"]((_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--select-input"), true), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--select-input--").concat(size), size), _classNames3));
-  var errorId = "".concat(id, "-error-msg");
-
-  var errorText = function () {
+const getInstanceId = setupGetInstanceId["default"]();
+const Select = /*#__PURE__*/React__default["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.usePrefix();
+  const enabled = index.useFeatureFlag('enable-v11-release');
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const {
+    current: selectInstanceId
+  } = React.useRef(getInstanceId());
+  const selectClasses = cx__default["default"]({
+    [`${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__default["default"](`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const inputClasses = cx__default["default"]({
+    [`${prefix}--select-input`]: true,
+    [`${prefix}--select-input--${size}`]: size
+  });
+  const errorId = `${id}-error-msg`;
+
+  const errorText = (() => {
     if (invalid) {
       return invalidText;
     }
@@ -84,19 +88,21 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     if (warn) {
       return warnText;
     }
-  }();
+  })();
 
-  var error = invalid || warn ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--form-requirement"),
+  const error = invalid || warn ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--form-requirement`,
     id: errorId
   }, errorText) : null;
-  var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var helperId = !helperText ? undefined : "select-helper-text-".concat(selectInstanceId);
-  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
+  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,
     className: helperTextClasses
   }, helperText) : null;
-  var ariaProps = {};
+  const ariaProps = {};
 
   if (invalid) {
     ariaProps['aria-describedby'] = errorId;
@@ -104,12 +110,12 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     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
@@ -117,8 +123,8 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
         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();
@@ -126,7 +132,7 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     }
   };
 
-  var input = function () {
+  const input = (() => {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("select", _rollupPluginBabelHelpers["extends"]({}, other, ariaProps, {
       id: id,
       className: inputClasses,
@@ -136,33 +142,33 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     }, readOnlyEventHandlers, {
       ref: ref
     }), children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-      className: "".concat(prefix, "--select__arrow")
+      className: `${prefix}--select__arrow`
     }), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-      className: "".concat(prefix, "--select__invalid-icon")
+      className: `${prefix}--select__invalid-icon`
     }), !invalid && warn && /*#__PURE__*/React__default["default"].createElement(iconsReact.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["default"].createElement("div", {
-    className: enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
+    className: enabled ? cx__default["default"](`${prefix}--form-item`, className) : `${prefix}--form-item`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: selectClasses
   }, !noLabel && /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText), inline && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--select-input--inline__wrapper")
+    className: `${prefix}--select-input--inline__wrapper`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--select-input__wrapper"),
+    className: `${prefix}--select-input__wrapper`,
     "data-invalid": invalid || null
   }, input), error), !inline && /*#__PURE__*/React__default["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["default"].createElement("hr", {
-    className: "".concat(prefix, "--select__divider")
+    className: `${prefix}--select__divider`
   }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
 Select.displayName = 'Select';

package/lib/components/SelectItem/SelectItem.js

@@ -21,18 +21,22 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "value", "disabled", "hidden", "text"];
-
-var SelectItem = function SelectItem(_ref) {
-  var className = _ref.className,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      hidden = _ref.hidden,
-      text = _ref.text,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var selectItemClasses = cx__default["default"](_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--select-option"), true), className && _rollupPluginBabelHelpers.defineProperty({}, className, className)));
+const SelectItem = _ref => {
+  let {
+    className,
+    value,
+    disabled,
+    hidden,
+    text,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const selectItemClasses = cx__default["default"]({
+    [`${prefix}--select-option`]: true,
+    ...(className && {
+      [className]: className
+    })
+  });
   return /*#__PURE__*/React__default["default"].createElement("option", _rollupPluginBabelHelpers["extends"]({}, other, {
     className: selectItemClasses,
     value: value,

package/lib/components/SelectItemGroup/SelectItemGroup.js

@@ -41,17 +41,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["children", "className", "disabled", "label"];
-
-var SelectItemGroup = function SelectItemGroup(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      label = _ref.label,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]("".concat(prefix, "--select-optgroup"), className);
+const SelectItemGroup = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    label,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--select-optgroup`, className);
   return /*#__PURE__*/React__default["default"].createElement("optgroup", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     label: label,