Added typescript types to fluid combobox and its skeleton state (#17563)

* fix: renamed js files to tsx for fluid combobox components

* fix: added typescript types to fluid combobox

* fix: snapshots

* Update packages/react/src/components/FluidComboBox/FluidComboBox.tsx

---------

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

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

@@ -10244,6 +10244,7 @@ Map {
         "type": "node",
       },
       "onChange": Object {
+        "isRequired": true,
         "type": "func",
       },
       "renderSelectedItem": Object {

packages/react/src/components/FluidComboBox/FluidComboBox.Skeleton.js → packages/react/src/components/FluidComboBox/FluidComboBox.Skeleton.tsx

@@ -10,7 +10,17 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const FluidComboBoxSkeleton = ({ className, ...rest }) => {
+export interface FluidComboBoxSkeletonProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+}
+
+const FluidComboBoxSkeleton: React.FC<FluidComboBoxSkeletonProps> = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const wrapperClasses = cx(
     className,

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

@@ -6,15 +6,128 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ComponentType, ForwardedRef } from 'react';
 import classnames from 'classnames';
 import ComboBox from '../ComboBox';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
+import { ComboBoxProps } from '../ComboBox/ComboBox';
 
-const FluidComboBox = React.forwardRef(function FluidComboBox(
-  { className, isCondensed, ...other },
-  ref
+type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
+
+interface OnChangeData<ItemType> {
+  selectedItem: ItemType | null | undefined;
+  inputValue?: string | null;
+}
+
+export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType> {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction?: 'top' | 'bottom';
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: string;
+
+  /**
+   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+   * from their collection that are pre-selected
+   */
+  initialSelectedItem?: ItemType;
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Specify if the `FluidComboBox` should render its menu items in condensed mode
+   */
+  isCondensed?: boolean;
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement?: ComponentType<ItemType> | null;
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list.
+   */
+  itemToString?: ItemToStringHandler<ItemType>;
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: ItemType[];
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: React.ReactNode;
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occurring.
+   */
+  onChange: (data: OnChangeData<ItemType>) => void;
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem?: (selectedItem: ItemType) => React.ReactNode;
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   * */
+  selectedItem?: ItemType | null;
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText?: React.ReactNode;
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId?: (id: string) => string;
+
+  /**
+   * 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?: React.ReactNode;
+}
+
+const FluidComboBox = React.forwardRef(function FluidComboBox<ItemType>(
+  { className, isCondensed, ...other }: FluidComboBoxProps<ItemType>,
+  ref: ForwardedRef<HTMLInputElement>
 ) {
   const prefix = usePrefix();
   const classNames = classnames(
@@ -105,7 +218,7 @@ FluidComboBox.propTypes = {
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component what kind of internal state changes are occurring.
    */
-  onChange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
 
   /**
    * An optional callback to render the currently selected item as a react element instead of only

packages/react/src/components/FluidComboBox/index.js → packages/react/src/components/FluidComboBox/index.tsx

@@ -6,7 +6,9 @@
  */
 
 import FluidComboBox from './FluidComboBox';
-
+import type { FluidComboBoxProps } from './FluidComboBox';
+import type { FluidComboBoxSkeletonProps } from './FluidComboBox.Skeleton';
+export type { FluidComboBoxProps, FluidComboBoxSkeletonProps };
 export default FluidComboBox;
 export { FluidComboBox };
 export { default as FluidComboBoxSkeleton } from './FluidComboBox.Skeleton';