Merge branch 'main' into tab-tip-popover

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3296,7 +3296,7 @@ Map {
   "FilterableMultiSelect" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "defaultProps": Object {
-      "ariaLabel": "Choose an item",
+      "aria-label": "Choose an item",
       "compareItems": [Function],
       "direction": "bottom",
       "disabled": false,
@@ -3309,9 +3309,10 @@ Map {
       "sortItems": [Function],
     },
     "propTypes": Object {
-      "ariaLabel": Object {
+      "aria-label": Object {
         "type": "string",
       },
+      "ariaLabel": [Function],
       "compareItems": Object {
         "isRequired": true,
         "type": "func",
@@ -4536,7 +4537,7 @@ Map {
     "Filterable": Object {
       "$$typeof": Symbol(react.forward_ref),
       "defaultProps": Object {
-        "ariaLabel": "Choose an item",
+        "aria-label": "Choose an item",
         "compareItems": [Function],
         "direction": "bottom",
         "disabled": false,
@@ -4549,9 +4550,10 @@ Map {
         "sortItems": [Function],
       },
       "propTypes": Object {
-        "ariaLabel": Object {
+        "aria-label": Object {
           "type": "string",
         },
+        "ariaLabel": [Function],
         "compareItems": Object {
           "isRequired": true,
           "type": "func",

packages/react/src/components/MultiSelect/FilterableMultiSelect.js

@@ -28,7 +28,8 @@ import { FormContext } from '../FluidForm';
 
 const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
   {
-    ariaLabel,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
     compareItems,
     direction,
@@ -361,6 +362,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
                   </label>
                 ) : null}
                 <ListBox
+                  aria-label={deprecatedAriaLabel || ariaLabel}
                   onFocus={isFluid ? handleFocus : null}
                   onBlur={isFluid ? handleFocus : null}
                   className={className}
@@ -487,9 +489,18 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
 
 FilterableMultiSelect.propTypes = {
   /**
-   * 'aria-label' of the ListBox component.
+   * Specify a label to be read by screen readers on the container node
    */
-  ariaLabel: PropTypes.string,
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate(
+    PropTypes.string,
+    'This prop syntax has been deprecated. Please use the new `aria-label`.'
+  ),
 
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
@@ -632,7 +643,7 @@ FilterableMultiSelect.propTypes = {
 };
 
 FilterableMultiSelect.defaultProps = {
-  ariaLabel: 'Choose an item',
+  ['aria-label']: 'Choose an item',
   compareItems: defaultCompareItems,
   direction: 'bottom',
   disabled: false,

packages/react/src/components/Select/Select.js → packages/react/src/components/Select/Select.tsx

@@ -6,7 +6,14 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useContext, useState } from 'react';
+import React, {
+  ChangeEventHandler,
+  ComponentPropsWithRef,
+  ForwardedRef,
+  ReactNode,
+  useContext,
+  useState,
+} from 'react';
 import classNames from 'classnames';
 import {
   ChevronDown,
@@ -18,6 +25,106 @@ import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 
+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;
+}
+
 const Select = React.forwardRef(function Select(
   {
     className,
@@ -39,8 +146,8 @@ const Select = React.forwardRef(function Select(
     warn = false,
     warnText,
     ...other
-  },
-  ref
+  }: SelectProps,
+  ref: ForwardedRef<HTMLSelectElement>
 ) {
   const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');

packages/react/src/components/Select/__tests__/Select-test.js

@@ -174,7 +174,7 @@ describe('Select', () => {
       render(
         <Select
           id="select-1"
-          label="Select label"
+          labelText="Select label"
           readOnly={true}
           onClick={onClick}
           onChange={onChange}>

packages/react/src/components/SelectItem/SelectItem.js → packages/react/src/components/SelectItem/SelectItem.tsx

@@ -6,15 +6,49 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SelectItem = ({ className, value, disabled, hidden, text, ...other }) => {
+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;
+}
+
+const SelectItem = ({
+  className,
+  value,
+  disabled,
+  hidden,
+  text,
+  ...other
+}: SelectItemProps) => {
   const prefix = usePrefix();
   const selectItemClasses = classNames({
     [`${prefix}--select-option`]: true,
-    [className]: className,
+    ...(className && { [className]: className }),
   });
 
   return (

packages/react/src/components/SelectItemGroup/SelectItemGroup.js → packages/react/src/components/SelectItemGroup/SelectItemGroup.tsx

@@ -6,18 +6,40 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import classnames from 'classnames';
 import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix';
 
+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;
+}
 const SelectItemGroup = ({
   children,
   className,
   disabled,
   label,
   ...other
-}) => {
+}: SelectItemGroupProps) => {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--select-optgroup`, className);
   return (

packages/react/src/components/SkeletonText/SkeletonText.js

@@ -51,7 +51,8 @@ const SkeletonText = ({
   useIsomorphicEffect(() => {
     refs.current.map((item, j) => {
       const randomPercentWidth = getRandomInt(0, 75, j) + 'px';
-      const randomPxWidth = getRandomInt(widthNum - 75, widthNum, j) + 'px';
+      const randomPxWidth =
+        getRandomInt(Math.max(widthNum - 75, 0), widthNum, j) + 'px';
 
       if (item) {
         if (widthPercent && paragraph) {