fix: added typescript types to fluid multiselect (#17583)

packages/react/src/components/FluidMultiSelect/FluidMultiSelect.js → packages/react/src/components/FluidMultiSelect/FluidFilterableMultiSelect.tsx

@@ -6,16 +6,167 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ForwardedRef, FunctionComponent, RefObject } from 'react';
 import classnames from 'classnames';
 import { FilterableMultiSelect } from '../FilterableMultiSelect';
 import MultiSelect from '../MultiSelect';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
+import {
+  UseComboboxProps,
+  UseMultipleSelectionProps,
+  UseSelectProps,
+} from 'downshift';
+import { MultiSelectProps } from '../MultiSelect/MultiSelect';
+import { FilterableMultiSelectProps } from '../MultiSelect/FilterableMultiSelect';
+
+interface OnChangeData<ItemType> {
+  selectedItems: ItemType[] | null;
+}
+
+interface SharedOptions {
+  locale: string;
+}
+
+export interface FluidFilterableMultiSelectProps<ItemType>
+  extends FilterableMultiSelectProps<ItemType> {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+  /**
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription?: string;
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText?: string;
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+   */
+  direction?: 'top' | 'bottom';
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+  /**
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
+   */
+  downshiftProps?: Partial<UseMultipleSelectionProps<ItemType>>;
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: string;
+  /**
+   * Allow users to pass in arbitrary items from their collection that are
+   * pre-selected
+   */
+  initialSelectedItems?: 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 `FluidMultiSelect` 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?: FunctionComponent<ItemType>;
+  /**
+   * 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. Consider
+   * declaring function with `useCallback` to prevent unnecessary re-renders.
+   */
+  itemToString?(item: ItemType): string;
+  /**
+   * 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: NonNullable<React.ReactNode>;
+  /**
+   * Specify the locale of the control. Used for the default `compareItems`
+   * used for sorting the list of items in the control.
+   */
+  locale?: string;
+  /**
+   * `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;
+  /**
+   * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
+   */
+  onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
+  /**
+   * `onMenuChange` is a utility for this controlled component to communicate to a
+   * consuming component that the menu was open(`true`)/closed(`false`).
+   */
+  onMenuChange?(open: boolean): void;
+  /**
+   * Whether or not the Multiselect is readonly
+   */
+  readOnly?: boolean;
+  /**
+   * For full control of the selected items
+   */
+  selectedItems?: ItemType[];
+  /**
+   * Specify feedback (mode) of the selection.
+   * `top`: selected item jumps to top
+   * `fixed`: selected item stays at it's position
+   * `top-after-reopen`: selected item jump to top after reopen dropdown
+   */
+  selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
 
-const FluidMultiSelect = React.forwardRef(function FluidMultiSelect(
-  { className, isCondensed, isFilterable, ...other },
-  ref
+  /**
+   * 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 title to show title on hover
+   */
+  useTitleInItem?: 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?: React.ReactNode;
+}
+const FluidMultiSelect = React.forwardRef(function FluidMultiSelect<ItemType>(
+  {
+    className,
+    isCondensed,
+    ...other
+  }: FluidFilterableMultiSelectProps<ItemType>,
+  ref: ForwardedRef<HTMLDivElement>
 ) {
   const prefix = usePrefix();
   const classNames = classnames(
@@ -26,11 +177,7 @@ const FluidMultiSelect = React.forwardRef(function FluidMultiSelect(
 
   return (
     <FormContext.Provider value={{ isFluid: true }}>
-      {isFilterable ? (
-        <FilterableMultiSelect ref={ref} className={classNames} {...other} />
-      ) : (
-        <MultiSelect ref={ref} className={classNames} {...other} />
-      )}
+      <FilterableMultiSelect ref={ref} className={classNames} {...other} />
     </FormContext.Provider>
   );
 });
@@ -104,11 +251,6 @@ FluidMultiSelect.propTypes = {
    */
   isCondensed: PropTypes.bool,
 
-  /**
-   * Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
-   */
-  isFilterable: PropTypes.bool,
-
   /**
    * Function to render items as custom components instead of strings.
    * Defaults to null and is overridden by a getter

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

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