Skip to content

Commit

Permalink
fix: added typescript types to fluid multiselect (#17583)
Browse files Browse the repository at this point in the history
  • Loading branch information
riddhybansal authored Oct 1, 2024
1 parent c0b1af5 commit 9d5eea1
Show file tree
Hide file tree
Showing 9 changed files with 566 additions and 24 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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>
);
});
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 9d5eea1

Please sign in to comment.