@ringcentral/spring-ui 1.7.0

package/src/Autocomplete/SuggestionList/utils/useSuggestionList.d.ts

@@ -0,0 +1,101 @@
+import { ButtonHTMLAttributes, ChangeEvent, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import type { SuggestionListItemProps } from '../SuggestionListItem';
+import { UseAutocompleteGroupParams } from './useSuggestionListGroup';
+import type { SuggestionListItemData } from './SuggestionListItem';
+export declare const DEFAULT_GET_OPTION_LABEL: <T extends {
+    label?: string | undefined;
+}>(item: T) => string;
+export declare type SuggestionListGetItemPropsOptions<T> = {
+    index?: number;
+    item: T;
+};
+export declare type SuggestionListHighlightChangeReason = 'keyboard' | 'mouse' | 'auto' | undefined;
+export declare type SuggestionListFilterOptions<T> = (options: T[], state: {
+    /** current input value */
+    inputValue?: string;
+    /** is that input value have been changed or not */
+    inputChanged?: boolean;
+    /** get option label */
+    getOptionLabel: (option: T) => string;
+    /** current be selected item array  */
+    selectedItems: T[];
+}) => T[];
+export declare type UseSuggestionListParams<T extends SuggestionListItemData = SuggestionListItemData> = {
+    /** current suggestion list unique id */
+    id?: string;
+    /** current text field input value */
+    inputValue?: string;
+    /** emit current input value */
+    onInputChange?: (value: string) => void;
+    /** that input ref you binding event */
+    inputRef: React.RefObject<HTMLInputElement>;
+    /**
+     * If `true`, will allow disabled items highlightable.
+     */
+    disabledItemsHighlightable?: boolean;
+    /**
+     * process filtered options result, let you can handle result after filter
+     */
+    processFilteredResult?: (options: T[], inputValue: string) => T[];
+    /**
+     * A filter function that determines the options that are eligible.
+     *
+     * @param {T[]} options The options to render.
+     * @param {object} state The state of the component.
+     * @returns {T[]}
+     */
+    filterOptions?: SuggestionListFilterOptions<T>;
+    /** emit when item be select */
+    onSelect?: (event: React.ChangeEvent<{}>, selectedItems: T) => void;
+    /**
+     * @param event keydown event
+     * @param highlightedIndex current menu highlightedIndex
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>, highlightedIndex?: number | null) => void;
+    /**
+     * Trigger when click clear button.
+     */
+    onClear?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Used to determine the string value for a given option.
+     * It's used to fill the input (and the list box options if `renderOption` is not provided).
+     *
+     * @param {T} option
+     * @returns {string}
+     */
+    getOptionLabel?: (option: T) => string;
+} & Omit<UseAutocompleteGroupParams<T>, 'filteredResult' | 'id'>;
+/**
+ * provide suggestion list with search function and expandable group with virtualized list
+ */
+export declare const useSuggestionList: <T extends SuggestionListItemData = SuggestionListItemData>({ id, inputValue: inputValueProp, getOptionLabel, filterOptions, disabledItemsHighlightable, options, onInputChange: onInputChangeProp, inputRef, onKeyDown: onKeyDownProp, onSelect, onClear, getOptionDisabled, groupBy, onGroupExpanded, groupVariant, groupExpanded, groupDefaultExpanded, getExpandIconProps, processFilteredResult, }: UseSuggestionListParams<T>) => {
+    reset: (isFocus?: boolean | undefined) => void;
+    clearInput: () => void;
+    forceUpdate: () => void;
+    focusInput: () => void | undefined;
+    updateInputValue: (newValue: string) => void;
+    selectItem: (e: ChangeEvent<{}>, selectedItem: T | null) => boolean;
+    onKeyFocusedIndexHandle: (event: import("react").KeyboardEvent<any>) => void;
+    getClearButtonProps: (props?: import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> | undefined) => import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    getLabelProps: (props?: import("react").DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> | undefined) => import("react").DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+    getSuggestionListProps: (restMenuProps?: import("react").DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined) => import("react").DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+    getInputProps: (props?: import("react").DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | undefined) => import("react").DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    getInputAriaProps: (props?: import("react").DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | undefined) => import("react").DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    getItemProps: ({ item, index, }: SuggestionListGetItemPropsOptions<T>) => SuggestionListItemProps;
+    highlightedIndexRef: import("react").MutableRefObject<number>;
+    highlightedIndex: number;
+    optionItems: T[];
+    inputValue: string;
+    onInputChange: (newValue: string) => boolean;
+    setHighlightedIndex: (index: number, { reRender, reason, }: {
+        reRender?: boolean | undefined;
+        reason?: SuggestionListHighlightChangeReason;
+    }) => void;
+    changeHighlightedIndexReasonRef: import("react").MutableRefObject<SuggestionListHighlightChangeReason>;
+    changeHighlightedIndexReason: SuggestionListHighlightChangeReason;
+    optionsGroupList: import("./SuggestionListItem").SuggestionListGroupedOption<T>[];
+    /** current unique id */
+    id: string;
+    getNextFocusableOption: (index?: number, isInfinite?: any) => number;
+    handleF10KeyDown: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+};

package/src/Autocomplete/SuggestionList/utils/useSuggestionListGroup.d.ts

@@ -0,0 +1,71 @@
+import { ButtonHTMLAttributes, PropsWithoutRef } from 'react';
+import { SuggestionListGroupedOption, SuggestionListItemData } from './SuggestionListItem';
+export declare type UseAutocompleteGroupParams<T extends SuggestionListItemData = SuggestionListItemData> = {
+    id: string;
+    /**
+     * @requires
+     * options for search
+     */
+    options: T[];
+    /**
+     * Used to determine the disabled state for a given option.
+     *
+     * @param {T} option The option to test.
+     * @returns {boolean}
+     */
+    getOptionDisabled?: (option: T) => boolean;
+    /**
+     * current filtered results
+     */
+    filteredResult: T[];
+    /**
+     * group layout mode
+     *
+     * - `normal`: use group name as group title
+     * - `expanded`: use first-item as group title, and that is `clickable`
+     *
+     * @default 'normal'
+     */
+    groupVariant?: 'normal' | 'expanded';
+    /**
+     * group expanded state, you can control expanded state by that
+     *
+     * - `true`: expand all
+     * - `false`: collapse all
+     * - `{key: boolean}`: control group state
+     */
+    groupExpanded?: Record<string, boolean> | boolean;
+    /**
+     * group default expanded state
+     *
+     * - `true`: expand all
+     * - `false`: collapse all
+     * - `{key: boolean}`: control group state
+     */
+    groupDefaultExpanded?: Record<string, boolean> | boolean;
+    /**
+     * If provided, the options will be grouped under the returned string.
+     * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
+     *
+     * @param {T} option The options to group.
+     * @returns {string} The group key
+     */
+    groupBy?: (option: T) => string;
+    /**
+     * Trigger when group item expanded state change.
+     *
+     * @param {object} group The state of the group.
+     * @param {object} groupStateMap The whole group state
+     */
+    onGroupExpanded?: (group: SuggestionListGroupedOption<T>, groupStateMap: Record<string, boolean>) => void;
+    /** The props apply to ExpandIcon */
+    getExpandIconProps?: (group: SuggestionListGroupedOption) => PropsWithoutRef<React.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>> | undefined;
+};
+declare type ExpandedMapState = Record<string, boolean>;
+export declare const useAutocompleteGroup: <T extends SuggestionListItemData = SuggestionListItemData>({ groupBy, options, filteredResult, getExpandIconProps, groupExpanded, groupDefaultExpanded, onGroupExpanded, groupVariant, getOptionDisabled, id, }: UseAutocompleteGroupParams<T>) => {
+    optionsGroupList: SuggestionListGroupedOption<T>[];
+    groupedResult: T[];
+    groupExpandedMap: ExpandedMapState;
+    handleGroupExpandedChange: (groupName: string) => void;
+};
+export {};

package/src/Autocomplete/index.d.ts

@@ -0,0 +1,6 @@
+export * from './SuggestionList';
+export * from './Autocomplete.classes';
+export * from './Autocomplete';
+export * from './Autocomplete.type';
+export * from './useAutocomplete';
+export * from './useAutocompleteTag';