@carbon/react 1.24.0 → 1.26.0-rc.0

package/es/components/RadioButton/RadioButton.js

@@ -7,29 +7,30 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import cx from 'classnames';
 import '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { Text } from '../Text/Text.js';
 
 var _excluded = ["className", "disabled", "hideLabel", "id", "labelPosition", "labelText", "name", "onChange", "value"];
-var RadioButton = /*#__PURE__*/React__default.forwardRef(function RadioButton(_ref, ref) {
-  var className = _ref.className,
-      disabled = _ref.disabled,
-      hideLabel = _ref.hideLabel,
-      id = _ref.id,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
-      _ref$labelText = _ref.labelText,
-      labelText = _ref$labelText === void 0 ? '' : _ref$labelText,
-      name = _ref.name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      rest = _objectWithoutProperties(_ref, _excluded);
+var RadioButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var className = props.className,
+      disabled = props.disabled,
+      hideLabel = props.hideLabel,
+      id = props.id,
+      _props$labelPosition = props.labelPosition,
+      labelPosition = _props$labelPosition === void 0 ? 'right' : _props$labelPosition,
+      _props$labelText = props.labelText,
+      labelText = _props$labelText === void 0 ? '' : _props$labelText,
+      name = props.name,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value,
+      rest = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
   var uid = useId('radio-button');
@@ -41,6 +42,7 @@ var RadioButton = /*#__PURE__*/React__default.forwardRef(function RadioButton(_r
 
   var innerLabelClasses = cx("".concat(prefix, "--radio-button__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var wrapperClasses = cx(className, "".concat(prefix, "--radio-button-wrapper"), _defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
+  var inputRef = useRef(null);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
@@ -48,7 +50,7 @@ var RadioButton = /*#__PURE__*/React__default.forwardRef(function RadioButton(_r
     className: "".concat(prefix, "--radio-button"),
     onChange: handleOnChange,
     id: uniqueId,
-    ref: ref,
+    ref: mergeRefs(inputRef, ref),
     disabled: disabled,
     value: value,
     name: name

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,80 @@
+/**
+ * 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 { ReactNodeLike } from 'prop-types';
+import React from 'react';
+export declare const RadioButtonGroupContext: React.Context<null>;
+type ExcludedAttributes = 'onChange';
+export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
+    /**
+     * Provide a collection of `<RadioButton>` components to render in the group
+     */
+    children?: ReactNodeLike;
+    /**
+     * Provide an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify the `<RadioButton>` to be selected by default
+     */
+    defaultSelected?: string | number;
+    /**
+     * Specify whether the group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNodeLike;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNodeLike;
+    /**
+     * Provide where label text should be placed
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Provide a legend to the RadioButtonGroup input that you are
+     * exposing to the user
+     */
+    legendText?: ReactNodeLike;
+    /**
+     * Specify the name of the underlying `<input>` nodes
+     */
+    name: string;
+    /**
+     * Provide an optional `onChange` hook that is called whenever the value of
+     * the group changes
+     */
+    onChange?: (selection: unknown, name: string, evt: unknown) => void;
+    /**
+     * Provide where radio buttons should be placed
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether the RadioButtonGroup should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
+    /**
+     * Specify the value that is currently selected in the group
+     */
+    valueSelected?: string | number;
+}
+declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<unknown>>;
+export default RadioButtonGroup;

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -5,30 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
+import React__default, { useState, useRef } from 'react';
 import cx from 'classnames';
 import { Legend } from '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import mergeRefs from '../../tools/mergeRefs.js';
 
-var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButtonGroup(_ref, ref) {
+var _excluded = ["children", "className", "defaultSelected", "disabled", "helperText", "invalid", "invalidText", "labelPosition", "legendText", "name", "onChange", "orientation", "readOnly", "valueSelected", "warn", "warnText"];
+var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var _classNames;
 
-  var children = _ref.children,
-      className = _ref.className,
-      defaultSelected = _ref.defaultSelected,
-      disabled = _ref.disabled,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
-      legendText = _ref.legendText,
-      name = _ref.name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
-      readOnly = _ref.readOnly,
-      valueSelected = _ref.valueSelected;
+  var children = props.children,
+      className = props.className,
+      defaultSelected = props.defaultSelected,
+      disabled = props.disabled,
+      helperText = props.helperText,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      invalidText = props.invalidText,
+      _props$labelPosition = props.labelPosition,
+      labelPosition = _props$labelPosition === void 0 ? 'right' : _props$labelPosition,
+      legendText = props.legendText,
+      name = props.name,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
+      readOnly = props.readOnly,
+      valueSelected = props.valueSelected,
+      _props$warn = props.warn,
+      warn = _props$warn === void 0 ? false : _props$warn,
+      warnText = props.warnText,
+      rest = _objectWithoutProperties(props, _excluded);
+
   var prefix = usePrefix();
 
   var _useState = useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected),
@@ -53,7 +65,11 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButt
 
   function getRadioButtons() {
     var mappedChildren = React__default.Children.map(children, function (radioButton) {
-      var value = radioButton.props.value;
+      var _props;
+
+      var _ref = (_props = radioButton === null || radioButton === void 0 ? void 0 : radioButton.props) !== null && _props !== void 0 ? _props : undefined,
+          value = _ref.value;
+
       var newProps = {
         name: name,
         key: value,
@@ -62,11 +78,13 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButt
         checked: value === selected
       };
 
-      if (!selected && radioButton.props.checked) {
+      if (!selected && radioButton !== null && radioButton !== void 0 && radioButton.props.checked) {
         newProps.checked = true;
       }
 
-      return /*#__PURE__*/React__default.cloneElement(radioButton, newProps);
+      if (radioButton) {
+        return /*#__PURE__*/React__default.cloneElement(radioButton, newProps);
+      }
     });
     return mappedChildren;
   }
@@ -80,18 +98,36 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButt
     }
   }
 
-  var fieldsetClasses = cx("".concat(prefix, "--radio-button-group"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _classNames));
+  var showWarning = !readOnly && !invalid && warn;
+  var showHelper = !invalid && !disabled && !warn;
   var wrapperClasses = cx("".concat(prefix, "--form-item"), className);
+  var fieldsetClasses = cx("".concat(prefix, "--radio-button-group"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--invalid"), !readOnly && invalid), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--warning"), showWarning), _classNames));
+  var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+    className: helperClasses
+  }, helperText) : null;
+  var divRef = useRef(null);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses,
-    ref: ref
-  }, /*#__PURE__*/React__default.createElement("fieldset", {
+    ref: mergeRefs(divRef, ref)
+  }, /*#__PURE__*/React__default.createElement("fieldset", _extends({
     className: fieldsetClasses,
     disabled: disabled,
+    "data-invalid": invalid ? true : undefined,
     "aria-readonly": readOnly
-  }, legendText && /*#__PURE__*/React__default.createElement(Legend, {
+  }, rest), legendText && /*#__PURE__*/React__default.createElement(Legend, {
     className: "".concat(prefix, "--label")
-  }, legendText), getRadioButtons()));
+  }, legendText), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--radio-button__validation-msg")
+  }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: "".concat(prefix, "--radio-button__invalid-icon")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, invalidText)), showWarning && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    className: "".concat(prefix, "--radio-button__invalid-icon ").concat(prefix, "--radio-button__invalid-icon--warning")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText)), showHelper && helper));
 });
 RadioButtonGroup.propTypes = {
   /**
@@ -114,6 +150,21 @@ RadioButtonGroup.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
   /**
    * Provide where label text should be placed
    */
@@ -149,8 +200,19 @@ RadioButtonGroup.propTypes = {
   /**
    * Specify the value that is currently selected in the group
    */
-  valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
 };
+RadioButtonGroup.displayName = 'RadioButtonGroup';
 var RadioButtonGroup$1 = RadioButtonGroup;
 
 export { RadioButtonGroup$1 as default };

package/es/components/RadioTile/RadioTile.js

@@ -19,8 +19,7 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
 var _CheckmarkFilled;
 
 var _excluded = ["children", "className", "disabled", "light", "checked", "name", "value", "id", "onChange", "tabIndex"];
-
-function RadioTile(_ref) {
+var RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref, ref) {
   var _cx;
 
   var children = _ref.children,
@@ -60,7 +59,8 @@ function RadioTile(_ref) {
     onKeyDown: !disabled ? handleOnKeyDown : null,
     tabIndex: !disabled ? tabIndex : null,
     type: "radio",
-    value: value
+    value: value,
+    ref: ref
   }), /*#__PURE__*/React__default.createElement("label", _extends({}, rest, {
     htmlFor: inputId,
     className: className
@@ -69,8 +69,7 @@ function RadioTile(_ref) {
   }, _CheckmarkFilled || (_CheckmarkFilled = /*#__PURE__*/React__default.createElement(CheckmarkFilled, null))), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--tile-content")
   }, children)));
-}
-
+});
 RadioTile.propTypes = {
   /**
    * `true` if this tile should be selected.
@@ -127,5 +126,6 @@ RadioTile.defaultProps = {
   onChange: function onChange() {},
   tabIndex: 0
 };
+var RadioTile$1 = RadioTile;
 
-export { RadioTile as default };
+export { RadioTile$1 as default };

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

@@ -0,0 +1,36 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+export interface SearchSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify whether the Search should be a small variant.
+     */
+    small?: boolean;
+}
+declare const SearchSkeleton: {
+    ({ small, className, ...rest }: SearchSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the Search should be a small variant
+         */
+        small: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        small: boolean;
+    };
+};
+export default SearchSkeleton;
+export { SearchSkeleton };

package/es/components/Search/Search.js

@@ -44,7 +44,7 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
       onKeyDown = _ref.onKeyDown,
       onExpand = _ref.onExpand,
       _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? '' : _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,
@@ -115,9 +115,10 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
 
   return /*#__PURE__*/React__default.createElement("div", {
     role: "search",
-    "aria-labelledby": searchId,
+    "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default.createElement("div", {
+    "aria-labelledby": uniqueId,
     role: onExpand ? 'button' : null,
     className: "".concat(prefix, "--search-magnifier"),
     onClick: onExpand

package/es/components/Search/index.js

@@ -7,3 +7,4 @@
 
 import Search from './Search.js';
 export { default as Search, default } from './Search.js';
+export { default as SearchSkeleton } from './Search.Skeleton.js';

package/es/components/Select/Select.d.ts

@@ -0,0 +1,89 @@
+/**
+ * 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, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
+type ExcludedAttributes = 'size';
+interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
+    /**
+     * Provide the contents of your Select
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<select>`
+     */
+    defaultValue?: any;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify a custom `id` for the `<select>`
+     */
+    id: string;
+    /**
+     * Specify whether you want the inline version of this control
+     */
+    inline?: boolean;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNode;
+    /**
+     * Provide label text to be read by screen readers when interacting with the control.
+     */
+    labelText?: ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     *
+     * @deprecated The `light` prop for `Select` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component.
+     * It will be moved in the next major release.
+     */
+    light?: boolean;
+    /**
+     * Reserved for use with <Pagination> component. Will not render a label for the
+     * select since Pagination renders one for us.
+     */
+    noLabel?: boolean;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of the underlying `<input>` changes.
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Whether the select should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Select Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "className" | "disabled" | "size" | "form" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "inline" | "name" | "readOnly" | "required" | "labelText" | "hideLabel" | "light" | "invalid" | "invalidText" | "warn" | "warnText" | "helperText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/es/components/SelectItem/SelectItem.d.ts

@@ -0,0 +1,62 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import { HTMLAttributes } from 'react';
+export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItem> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the <SelectItem> is hidden
+     */
+    hidden?: boolean;
+    /**
+     * Provide the contents of your <SelectItem>
+     */
+    text: string;
+    /**
+     * Specify the value of the <SelectItem>
+     */
+    value: any;
+}
+declare const SelectItem: {
+    ({ className, value, disabled, hidden, text, ...other }: SelectItemProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <SelectItem> should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the <SelectItem> is hidden
+         */
+        hidden: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the contents of your <SelectItem>
+         */
+        text: PropTypes.Validator<string>;
+        /**
+         * Specify the value of the <SelectItem>
+         */
+        value: PropTypes.Validator<any>;
+    };
+    defaultProps: {
+        disabled: boolean;
+        hidden: boolean;
+        value: string;
+        text: string;
+    };
+};
+export default SelectItem;

package/es/components/SelectItem/SelectItem.js

@@ -5,7 +5,7 @@
  * 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 { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -14,8 +14,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
 var _excluded = ["className", "value", "disabled", "hidden", "text"];
 
 var SelectItem = function SelectItem(_ref) {
-  var _classNames;
-
   var className = _ref.className,
       value = _ref.value,
       disabled = _ref.disabled,
@@ -24,7 +22,7 @@ var SelectItem = function SelectItem(_ref) {
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var selectItemClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--select-option"), true), _defineProperty(_classNames, className, className), _classNames));
+  var selectItemClasses = cx(_objectSpread2(_defineProperty({}, "".concat(prefix, "--select-option"), true), className && _defineProperty({}, className, className)));
   return /*#__PURE__*/React__default.createElement("option", _extends({}, other, {
     className: selectItemClasses,
     value: value,

package/es/components/SelectItemGroup/SelectItemGroup.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import { HTMLAttributes, ReactNode } from 'react';
+export interface SelectItemGroupProps extends HTMLAttributes<HTMLOptGroupElement> {
+    /**
+     * Provide the contents of your <SelectItemGroup>
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItemGroup> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the label to be displayed
+     */
+    label: string;
+}
+declare const SelectItemGroup: {
+    ({ children, className, disabled, label, ...other }: SelectItemGroupProps): JSX.Element;
+    propTypes: {
+        /**
+         * Provide the contents of your <SelectItemGroup>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <SelectItemGroup> should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the label to be displayed
+         */
+        label: PropTypes.Validator<string>;
+    };
+    defaultProps: {
+        disabled: boolean;
+        label: string | undefined;
+    };
+};
+export default SelectItemGroup;