From ebd6ea5715cd2e47720e177f3b39719b780d7853 Mon Sep 17 00:00:00 2001
From: jpsorensen <93107699+jpsorensen@users.noreply.github.com>
Date: Mon, 6 Mar 2023 12:48:44 -0500
Subject: [PATCH 1/3] Add Typescript annotations to Select, SelectItem and
 SelectItemGroup (#13235)

* refactor(typescript): type annotations on Select*

Add Typescript annotations to Select, SelectItem and SelectItemGroup.

* fix(lint): removed unused imports

Left SelectItem and SelectItemGroup in the imports after using them for
testing. Removed.

* fix(Select-test): update label to labelText

Previously removed label as it was not a property of Select.
On recommendation of maintainers reintroduced using labelText.

* Apply suggestions from code review

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>

* Follow up to change suggestions

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../Select/{Select.js => Select.tsx}          | 113 +++++++++++++++++-
 .../Select/__tests__/Select-test.js           |   2 +-
 .../{SelectItem.js => SelectItem.tsx}         |  40 ++++++-
 ...SelectItemGroup.js => SelectItemGroup.tsx} |  26 +++-
 4 files changed, 172 insertions(+), 9 deletions(-)
 rename packages/react/src/components/Select/{Select.js => Select.tsx} (75%)
 rename packages/react/src/components/SelectItem/{SelectItem.js => SelectItem.tsx} (63%)
 rename packages/react/src/components/SelectItemGroup/{SelectItemGroup.js => SelectItemGroup.tsx} (71%)

diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.tsx
similarity index 75%
rename from packages/react/src/components/Select/Select.js
rename to packages/react/src/components/Select/Select.tsx
index 9a7e261ad49c..2368506f653a 100644
--- a/packages/react/src/components/Select/Select.js
+++ b/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');
diff --git a/packages/react/src/components/Select/__tests__/Select-test.js b/packages/react/src/components/Select/__tests__/Select-test.js
index acbb99a356a3..b47506fb3018 100644
--- a/packages/react/src/components/Select/__tests__/Select-test.js
+++ b/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}>
diff --git a/packages/react/src/components/SelectItem/SelectItem.js b/packages/react/src/components/SelectItem/SelectItem.tsx
similarity index 63%
rename from packages/react/src/components/SelectItem/SelectItem.js
rename to packages/react/src/components/SelectItem/SelectItem.tsx
index 03ae3cbabbe5..d2d9af8f612e 100644
--- a/packages/react/src/components/SelectItem/SelectItem.js
+++ b/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 (
diff --git a/packages/react/src/components/SelectItemGroup/SelectItemGroup.js b/packages/react/src/components/SelectItemGroup/SelectItemGroup.tsx
similarity index 71%
rename from packages/react/src/components/SelectItemGroup/SelectItemGroup.js
rename to packages/react/src/components/SelectItemGroup/SelectItemGroup.tsx
index e4b1d45aecd2..d404ee966b75 100644
--- a/packages/react/src/components/SelectItemGroup/SelectItemGroup.js
+++ b/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 (

From b4d3e7484128beb9a4dbee37acb50ea22021cbd9 Mon Sep 17 00:00:00 2001
From: Jesse Hull <jsehull@users.noreply.github.com>
Date: Mon, 6 Mar 2023 13:16:50 -0500
Subject: [PATCH 2/3] refactor(FilterableMultiSelect): ariaLabel to aria-label
 (#13276)

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      | 10 ++++++----
 .../MultiSelect/FilterableMultiSelect.js      | 19 +++++++++++++++----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 3a2b25187797..4f969ad71b21 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/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",
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index c50aab571d82..78d43a284978 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/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,

From 13d5afc09d49ef9187e76e01a3e18bf311189407 Mon Sep 17 00:00:00 2001
From: andrew <emyarod@users.noreply.github.com>
Date: Mon, 6 Mar 2023 12:45:26 -0600
Subject: [PATCH 3/3] fix(SkeletonText): prevent negative px width values
 (#13270)

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
---
 packages/react/src/components/SkeletonText/SkeletonText.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/SkeletonText/SkeletonText.js b/packages/react/src/components/SkeletonText/SkeletonText.js
index d926a6699c57..1babba69aad7 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText.js
+++ b/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) {