diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 566ab6e50944..b7f997ddba64 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -10244,6 +10244,7 @@ Map { "type": "node", }, "onChange": Object { + "isRequired": true, "type": "func", }, "renderSelectedItem": Object { diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.Skeleton.js b/packages/react/src/components/FluidComboBox/FluidComboBox.Skeleton.tsx similarity index 79% rename from packages/react/src/components/FluidComboBox/FluidComboBox.Skeleton.js rename to packages/react/src/components/FluidComboBox/FluidComboBox.Skeleton.tsx index b66100cd0326..d2b6ba9116d5 100644 --- a/packages/react/src/components/FluidComboBox/FluidComboBox.Skeleton.js +++ b/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 = ({ + className, + ...rest +}) => { const prefix = usePrefix(); const wrapperClasses = cx( className, diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.js b/packages/react/src/components/FluidComboBox/FluidComboBox.tsx similarity index 52% rename from packages/react/src/components/FluidComboBox/FluidComboBox.js rename to packages/react/src/components/FluidComboBox/FluidComboBox.tsx index 94b6f6ef9260..8d5c4c590ebc 100644 --- a/packages/react/src/components/FluidComboBox/FluidComboBox.js +++ b/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 = (item: ItemType | null) => string; + +interface OnChangeData { + selectedItem: ItemType | null | undefined; + inputValue?: string | null; +} + +export interface FluidComboBoxProps extends ComboBoxProps { + /** + * 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 `` should be disabled + */ + disabled?: boolean; + + /** + * Specify a custom `id` for the `` + */ + 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 | 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; + /** + * 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) => 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( + { className, isCondensed, ...other }: FluidComboBoxProps, + ref: ForwardedRef ) { 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 diff --git a/packages/react/src/components/FluidComboBox/index.js b/packages/react/src/components/FluidComboBox/index.tsx similarity index 63% rename from packages/react/src/components/FluidComboBox/index.js rename to packages/react/src/components/FluidComboBox/index.tsx index eb27e70f9ab0..55a639e74c46 100644 --- a/packages/react/src/components/FluidComboBox/index.js +++ b/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';