@ringcentral/spring-ui 1.7.0 → 1.8.0

package/index.js

@@ -120,7 +120,7 @@ export { Dialog, DialogActions, DialogContent, DialogTitle, dialogStyle } from '
 export { D as Drawer } from './chunks/Drawer.js';
 export { D as DragHandle } from './chunks/DragHandle.js';
 export { SwipeableDrawer, swipeableDrawerStyles } from './SwipeableDrawer.js';
-export { Autocomplete, DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, RcAutocompleteDefaultFilterOptions, SuggestionList, SuggestionListItem, autocompleteStyles, stringArrToRegExp, suggestionListStyles, useAutocomplete, useAutocompleteGroup, useAutocompleteTag, useDynamicHeight, useHighlightScroll, useSuggestionList } from './Autocomplete.js';
+export { Autocomplete, DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_PADDING, RcAutocompleteDefaultFilterOptions, SuggestionList, SuggestionListItem, autocompleteStyles, getPaddingValue, isFirstInGroup, stringArrToRegExp, suggestionListStyles, useAutocomplete, useAutocompleteGroup, useAutocompleteTag, useDynamicHeight, useHighlightScroll, useSuggestionList } from './Autocomplete.js';
 export { EmptyState, emptyStateStyle } from './EmptyState.js';
 export { TabContext, generateTabStableIds, useInternalTabsContext, useTabStableIds } from './TabContext.js';
 export { TabPanel, tabPanelStyle } from './TabPanel.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/spring-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "author": "RingCentral",
   "description": "A comprehensive React component library built with Tailwind CSS, featuring production-ready components",
   "main": "./index.js",
@@ -14,9 +14,9 @@
     "@floating-ui/react-dom": "2.1.1",
     "@juggle/resize-observer": "3.4.0",
     "@mui/base": "5.0.0-beta.40",
-    "@ringcentral/spring-base": "^1.7.0",
-    "@ringcentral/spring-icon": "^1.7.0",
-    "@ringcentral/spring-theme": "^1.7.0",
+    "@ringcentral/spring-base": "^1.8.0",
+    "@ringcentral/spring-icon": "^1.8.0",
+    "@ringcentral/spring-theme": "^1.8.0",
     "@types/lodash": "^4.14.182",
     "@use-gesture/react": "10.3.1",
     "clsx": "^1.2.1",

package/src/Accordion/Accordion.type.d.ts

@@ -2,30 +2,9 @@ import { ReactNode, SyntheticEvent } from 'react';
 import { StandardProps } from '@ringcentral/spring-base';
 import { AccordionClassesKey } from './Accordion.classes';
 export declare type AccordionProps = StandardProps<{
-    /**
-     * Slot for header of Accordion.
-     */
     header: ReactNode;
-    /**
-     * If `true`, expands the accordion by default.
-     * @default false
-     */
     defaultExpanded?: boolean;
-    /**
-     * If `true`, expands the accordion, otherwise collapse it.
-     * Setting this prop enables control over the accordion.
-     */
     expanded?: boolean;
-    /**
-     * Callback fired when the expand/collapse state is changed.
-     *
-     * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-     * @param {boolean} expanded The `expanded` state of the accordion.
-     */
     onChange?: (event: SyntheticEvent, expanded: boolean) => void;
-    /**
-     * false: will unmount content whenever collapsed
-     * true: keep displayed children mounted when collapsed
-     */
     keepMounted?: boolean;
 }, AccordionClassesKey, 'div'>;

package/src/AccordionHeader/AccordionHeader.type.d.ts

@@ -3,23 +3,9 @@ import { StandardProps, UseFocusVisibleOptions } from '@ringcentral/spring-base'
 import { ExpandCollapseCaretProps } from '../Animation/components/ExpandCollapseCaret';
 import { AccordionHeaderClassesKey } from './AccordionHeader.classes';
 export declare type AccordionHeaderProps = StandardProps<{
-    /** If children is not string,
-     * **should** handle truncation tooltip by adding title attribute on the actual component containing the string */
     children: ReactNode;
-    /** secondary content slot of the header. */
     secondarySlot?: ReactNode;
-    /**
-     * If `true`, the component will be disabled.
-     * @default false
-     */
     disabled?: boolean;
-    /**
-     * If `true`, the component will show an ExpandCollapseCaret icon.
-     * @default true
-     */
     expandIcon?: boolean;
-    /**
-     * Props passed to the ExpandCollapseCaret component
-     */
     ExpandCollapseCaretProps?: Partial<ExpandCollapseCaretProps>;
 } & Pick<UseFocusVisibleOptions, 'onFocusVisible'>, AccordionHeaderClassesKey, 'button'>;

package/src/Alert/Alert.type.d.ts

@@ -7,44 +7,12 @@ declare type DefaultElementType = 'div';
 declare type ExtendElementType = ElementType;
 export declare type AlertSeverity = 'info' | 'error' | 'success' | 'warning' | 'neutral';
 declare type BaseAlertProps = WithClassesProps<{
-    /**
-     * The action to display. It renders after the message, at the end of the alert.
-     */
     action?: React.ReactNode;
-    /**
-     * @deprecated Use startSlot instead. Will be removed in the next major version.
-     * Override the icon displayed before the children.
-     * Unless provided, the icon is mapped to the value of the `severity` prop.
-     *
-     * @default false
-     */
     icon?: React.ComponentType | boolean;
-    /**
-     * The content to display at the start of the alert, before the message.
-     * If not provided and severity is set, a default icon will be shown.
-     */
     startSlot?: React.ComponentType | React.ReactElement | null;
-    /**
-     * Callback fired when the component requests to be closed.
-     *
-     * When this callback is set, a close icon button is displayed that triggers the callback when clicked.
-     */
     onClose?: () => void;
-    /**
-     * Override the default label for the *close popup* icon button.
-     *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
-     */
     closeText?: string;
-    /**
-     * The severity of the alert. This defines the color and icon used.
-     *
-     * @default "info"
-     */
     severity?: AlertSeverity;
-    /**
-     * Props applied to the IconButton component used for the close button.
-     */
     CloseButtonProps?: IconButtonProps;
 }, AlertClassesKey>;
 export declare type AlertProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseAlertProps, T>;

package/src/Animation/components/ExpandCollapseCaret/ExpandCollapseCaret.d.ts

@@ -5,10 +5,6 @@ import { ExpandCollapseCaretClassesKey } from './ExpandCollapseCaret.classes';
 import expandCollapseCaretStyles from './styles/ExpandCollapseCaret.css';
 declare type Orientation = 'vertical' | 'horizontal';
 export declare type ExpandCollapseCaretProps = WithClassesProps<{
-    /**
-     * The orientation of the caret.
-     * @default 'vertical'
-     */
     orientation?: Orientation;
     expanded: boolean;
     size?: IconProps['size'];

package/src/Animation/components/ShowHideEye/ShowHideEye.d.ts

@@ -4,10 +4,6 @@ import { MotionComponent } from '../types';
 import { ShowHideEyeClassesKey } from './ShowHideEye.classes';
 import showHideEyeStyles from './styles/ShowHideEye.css';
 export declare type ShowHideEyeProps = WithClassesProps<{
-    /**
-     * If `true`, the eye is closed.
-     * @default false
-     */
     hide: boolean;
 } & Omit<IconProps, 'symbol' | 'classes'>, ShowHideEyeClassesKey>;
 export declare const ShowHideEye: MotionComponent<ShowHideEyeProps>;

package/src/Animation/hooks/useMotionSafeTransition/useMotionSafeTransition.d.ts

@@ -1,8 +1,4 @@
 import { Transition } from 'framer-motion';
-/**
- * A hook that returns an instant transition if the user has reduced motion enabled.
- * If reduced motion is not enabled, returns the given motion transition.
- */
 export declare const useMotionSafeTransition: (transition: Transition) => (import("framer-motion").Orchestration & import("framer-motion").Repeat & {
     [key: string]: any;
 }) | {

package/src/Autocomplete/Autocomplete.d.ts

@@ -3,9 +3,4 @@ import autocompleteStyles from './styles/Autocomplete.css';
 import { SuggestionListItemData } from './SuggestionList';
 declare const Autocomplete: AutocompleteComponent<SuggestionListItemData>;
 export { Autocomplete, autocompleteStyles };
-/**
- * default Autocomplete filter options method, use with `variant="tags"`
- *
- * - filter options by input value and selected items
- */
 export declare const RcAutocompleteDefaultFilterOptions: AutocompleteProps['filterOptions'];

package/src/Autocomplete/Autocomplete.type.d.ts

@@ -9,123 +9,39 @@ import { UseAutocompleteParams } from './useAutocomplete';
 import { GetTagProps } from './useAutocompleteTag';
 export declare type AutocompleteSuggestionListProps<T> = BaseSuggestionListProps<T> & Pick<SuggestionListProps, 'maxContainerHeight' | 'padding' | 'virtualize'>;
 export declare type AutocompleteRef<T extends SuggestionListItemData = SuggestionListItemData> = {
-    /** get current active index */
     getActiveIndex: () => number;
-    /** set current active index */
     setActiveIndex: (index: number) => void;
-    /** get current filter result option items; */
     getFilterResultItems: () => T[];
-    /** get current highlight index */
     getHighlightedIndex: () => number;
-    /** set current highlight index */
     setHighlightedIndex: (index: number) => void;
-    /**
-     * keep highlightedIndex for next render when options change,
-     * can use when lazy load more options
-     */
     keepHighlightedIndex: () => void;
-    /** open the listbox menu */
     openMenu: () => void;
-    /** close the listbox menu */
     closeMenu: () => void;
-    /** focus on text field input */
     focus: () => void;
-    /** reset whole downshift, isFocus default is `false` */
     reset: (isFocus?: boolean) => void;
-    /** method to clean input value */
     clearInput: () => void;
 };
 export declare type AutocompleteProps<T extends SuggestionListItemData = SuggestionListItemData> = StandardProps<{
-    /** Determines the variant of the Autocomplete component. */
     variant?: 'autocomplete' | 'tags';
-    /** If true, the component will take up the full width of its container.
-     *  @default `true`
-     */
     fullWidth?: boolean;
-    /** Specifies the variant of the input field. */
     inputVariant?: AutoCompleteTextFieldInputProps['variant'];
-    /** Enables the toggle button for the dropdown menu. */
     toggleButton?: boolean;
-    /** Props applied to the toggle button. */
     ToggleButtonProps?: Partial<IconButtonProps> & HTMLDataAttribute;
-    /**
-     * Props applied to the underlying IconButton component used for the clear button.
-     * Allows customization of appearance and behavior.
-     *
-     * @example
-     * ```tsx
-     * ClearButtonProps={{
-     *   size: 'xsmall',
-     *   'aria-label': 'Clear input',
-     * }}
-     * ```
-     */
     ClearButtonProps?: Partial<IconButtonProps> & HTMLDataAttribute;
-    /**
-     * Function to get custom props for the toggle button based on the menu's open state.
-     * Useful for customizing the toggle button icon.
-     */
     getToggleButtonProps?: (isOpen: boolean) => AutocompleteProps<T>['ToggleButtonProps'];
-    /**
-     * A ref for imperative actions.
-     *
-     * - `getActiveIndex`: get current active index
-     * - `setActiveIndex`: set current active index;
-     * - `getFilterResultItems`: get current filter result option items;
-     * - `getHighlightedIndex`: get current highlight index;
-     * - `setHighlightedIndex`: set current highlight index;
-     * - `openMenu`: open the listbox menu
-     * - `closeMenu`: close the listbox menu
-     * - `focus`: focus on text field input
-     * - `reset(isFocus)`: reset whole downshift, `isFocus` default is `false`
-     */
     action?: React.Ref<AutocompleteRef<T>>;
-    /**
-     * Custom rendering function for options Uses `getOptionLabel` by default.
-     * @param option The option to render.
-     * @param state The state of the component.
-     * @returns A ReactNode representing the rendered option.
-     */
     renderOption?: (option: T, state: AutocompleteRenderOptionState) => React.ReactNode;
-    /** Custom component for rendering the popper. Defaults to Popper.
-     *  @default Popper
-     */
     PopperComponent?: ComponentType<PopperProps>;
-    /** Configuration props for the Popper component. */
     PopperProps?: Omit<Partial<PopperProps>, 'open' | 'keepMounted' | 'anchorEl' | 'classes'> & {
-        /**
-         * Determines the anchor element type for the popper.
-         *
-         * - `root`: on that whole TextField
-         * - `input`: on that inside input
-         * @default 'root'
-         */
         anchorElType?: 'root' | 'input';
     } & ClassesProp<AutocompletePopperClassesKey>;
-    /** Props for the suggestion list, supporting virtualized lists. */
     SuggestionListProps?: AutocompleteSuggestionListProps<T>;
-    /**
-     * Custom rendering function for the input field, default is `RcTextField`
-     */
     renderInput?: (params: Partial<AutoCompleteTextFieldInputProps>) => React.ReactElement;
-    /** If true, allows free solo input not bound to provided options. */
     freeSolo?: boolean;
-    /**
-     * If `true`, the placeholder will be displayed when multiple value is allowed and tags are present.
-     * @default false
-     */
     showPlaceholderWithTags?: boolean;
-    /**
-     * Custom rendering function for selected tags.
-     *
-     * @param selectedItems The selected items.
-     * @param getTagProps Function to get props for each tag.
-     * @returns A ReactNode representing the rendered tags.
-     */
     renderTags?: (selectedItems: T[], getTagProps: (selectedItem: T, index: number) => Omit<GetTagProps<T>, 'children' | 'index' | 'selectedItem'> & {
         onDelete?: React.EventHandler<any>;
     }) => React.ReactNode;
-    /** If true, the popup will ignore blur events. Useful for customization. */
     debug?: boolean;
 } & Omit<UseAutocompleteParams<T>, 'inputRef'> & Partial<Pick<UseAutocompleteParams<T>, 'inputRef'>> & Omit<AutoCompleteTextFieldInputProps, 'value' | 'variant' | 'onChange'> & Pick<SuggestionListProps, 'renderGroup'>, AutocompleteClassesKey, 'div'>;
 export interface AutocompleteComponent<T extends SuggestionListItemData = SuggestionListItemData> {

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

@@ -6,139 +6,55 @@ import suggestionListStyles from './styles/SuggestionList.css';
 import { SuggestionListClassesKey } from './SuggestionList.classes';
 import { SuggestionListItemProps } from './SuggestionListItem';
 import { SuggestionListGroupedOption, SuggestionListHighlightChangeReason, SuggestionListItemData, UseSuggestionListParams } from './utils';
+export declare const DEFAULT_PADDING = 8;
 export interface AutocompleteRenderOptionState {
-    /** current input value */
     inputValue?: string;
-    /** is that item be show highlighted style */
     highlighted: boolean;
-    /** that item index */
     index: number;
-    /** sort index in option own group */
     indexInOwnGroup?: number;
-    /** if that item is group title, that have that `expanded` state */
     expanded?: boolean;
-    /** if that item is group title, that will have that `expandIconProps` */
     expandIconProps?: Partial<IconButtonProps>;
 }
-export declare type BaseSuggestionListProps<T, K = any> = Omit<Partial<VirtuosoProps<T, K>>, 'totalCount' | 'itemContent' | 'data' | 'color'> & ClassesProp<SuggestionListClassesKey> & HTMLDataAttribute;
+export declare type BaseSuggestionListProps<T, K = Record<string, never>> = Omit<Partial<VirtuosoProps<T, K>>, 'totalCount' | 'itemContent' | 'data' | 'color'> & ClassesProp<SuggestionListClassesKey> & HTMLDataAttribute;
 export declare type SuggestionListProps<T extends SuggestionListItemData = SuggestionListItemData, K = any> = {
-    /**
-     * that virtual list container height,
-     *
-     * @default 100%
-     */
     maxContainerHeight?: number | '100%';
-    /**
-     * vertical padding of the list
-     *
-     * @default 8
-     */
     padding?: boolean | number;
-    /** is that menu virtualize  */
     virtualize?: boolean;
-    /** current highlightedIndex */
     highlightedIndex: number;
-    /** select options */
+    prevHighlightedIndex?: number;
     options: SuggestionListItemData[];
-    /**
-     * Used to determine the selected state for a given option.
-     *
-     * @param {T} option The option to test.
-     * @returns {boolean}
-     */
     getOptionSelected?: (option: T) => boolean;
-    /** each item props getter */
     getItemProps: (options: {
         index?: number;
         item: T;
     }) => SuggestionListItemProps;
-    /** list wrapper props getter */
     getSuggestionListProps: (restProps?: HTMLAttributes<HTMLDivElement> | undefined) => HTMLAttributes<HTMLDivElement>;
-    /** that reason that change highlighted */
     changeHighlightedIndexReason?: SuggestionListHighlightChangeReason | undefined;
-    /** is that need keep highlighted index, that will be helpful when you need load more options when scroll */
     isKeepHighlightedIndex?: boolean;
-    /** trigger when need update outside popper position */
     onContainerHeightChange?: () => void;
-    /** options group list, use for calculate `aria-setsize` */
     optionsGroupList?: SuggestionListGroupedOption<SuggestionListItemData>[];
-    /**
-     * Render the option, use `getOptionLabel` by default.
-     *
-     * @param {T} option The option to render.
-     * @param {object} state The state of the component.
-     * @returns {ReactNode}
-     */
     renderOption?: (option: T, state: AutocompleteRenderOptionState) => React.ReactNode;
-    /**
-     * Render the group title item, also with for toggle button props.
-     *
-     * > when you have set custom `renderOption`, the `renderGroup` must be set.
-     *
-     * @param {T} option The option to render.
-     * @param {object} state The state of the component.
-     * @returns {ReactNode}
-     */
     renderGroup?: (option: T, state: AutocompleteRenderOptionState) => React.ReactNode;
 } & Pick<UseSuggestionListParams, 'groupVariant' | 'groupExpanded' | 'inputValue' | 'getOptionDisabled' | 'getOptionLabel'> & BaseSuggestionListProps<T, K>;
+export declare const getPaddingValue: (padding: boolean | number, itemCount: number) => number;
 export declare const SuggestionList: React.ForwardRefExoticComponent<{
-    /**
-     * that virtual list container height,
-     *
-     * @default 100%
-     */
     maxContainerHeight?: number | "100%" | undefined;
-    /**
-     * vertical padding of the list
-     *
-     * @default 8
-     */
     padding?: number | boolean | undefined;
-    /** is that menu virtualize  */
     virtualize?: boolean | undefined;
-    /** current highlightedIndex */
     highlightedIndex: number;
-    /** select options */
+    prevHighlightedIndex?: number | undefined;
     options: SuggestionListItemData[];
-    /**
-     * Used to determine the selected state for a given option.
-     *
-     * @param {T} option The option to test.
-     * @returns {boolean}
-     */
     getOptionSelected?: ((option: SuggestionListItemData) => boolean) | undefined;
-    /** each item props getter */
     getItemProps: (options: {
         index?: number | undefined;
         item: SuggestionListItemData;
     }) => SuggestionListItemProps;
-    /** list wrapper props getter */
     getSuggestionListProps: (restProps?: HTMLAttributes<HTMLDivElement> | undefined) => HTMLAttributes<HTMLDivElement>;
-    /** that reason that change highlighted */
     changeHighlightedIndexReason?: SuggestionListHighlightChangeReason | undefined;
-    /** is that need keep highlighted index, that will be helpful when you need load more options when scroll */
     isKeepHighlightedIndex?: boolean | undefined;
-    /** trigger when need update outside popper position */
     onContainerHeightChange?: (() => void) | undefined;
-    /** options group list, use for calculate `aria-setsize` */
     optionsGroupList?: SuggestionListGroupedOption<SuggestionListItemData>[] | undefined;
-    /**
-     * Render the option, use `getOptionLabel` by default.
-     *
-     * @param {T} option The option to render.
-     * @param {object} state The state of the component.
-     * @returns {ReactNode}
-     */
     renderOption?: ((option: SuggestionListItemData, state: AutocompleteRenderOptionState) => React.ReactNode) | undefined;
-    /**
-     * Render the group title item, also with for toggle button props.
-     *
-     * > when you have set custom `renderOption`, the `renderGroup` must be set.
-     *
-     * @param {T} option The option to render.
-     * @param {object} state The state of the component.
-     * @returns {ReactNode}
-     */
     renderGroup?: ((option: SuggestionListItemData, state: AutocompleteRenderOptionState) => React.ReactNode) | undefined;
 } & Pick<UseSuggestionListParams<SuggestionListItemData>, "getOptionDisabled" | "groupExpanded" | "groupVariant" | "inputValue" | "getOptionLabel"> & Omit<Partial<VirtuosoProps<SuggestionListItemData, any>>, "data" | "color" | "itemContent" | "totalCount"> & ClassesProp<SuggestionListClassesKey> & HTMLDataAttribute & React.RefAttributes<VirtuosoHandle>>;
 export { suggestionListStyles };

package/src/Autocomplete/SuggestionList/SuggestionListItem.d.ts

@@ -6,7 +6,6 @@ export declare type SuggestionListItemProps = {
     id?: string;
     label?: React.ReactNode;
     expanded?: boolean;
-    expandable?: boolean;
     isGroupTitle?: boolean;
     isTitleMode?: boolean;
     selected?: boolean;
@@ -18,7 +17,6 @@ export declare const SuggestionListItem: import("react").ForwardRefExoticCompone
     id?: string | undefined;
     label?: React.ReactNode;
     expanded?: boolean | undefined;
-    expandable?: boolean | undefined;
     isGroupTitle?: boolean | undefined;
     isTitleMode?: boolean | undefined;
     selected?: boolean | undefined;

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

@@ -2,32 +2,20 @@ import { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithoutRef } from 'react'
 import { IconButtonProps } from '../../../IconButton';
 export interface SuggestionListGroupedOption<T = SuggestionListItemData> {
     options: T[];
-    /** group key */
     key: number;
-    /** group index in all options */
     index: number;
-    /** group order in all group */
     order: number;
-    /** group title */
     group: string;
-    /** expanded state */
     expanded: boolean;
-    /** The props apply to apply to the underlying `IconButton` */
     getExpandIconProps?: (additionalProps?: Omit<PropsWithoutRef<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, 'color'> & Partial<IconButtonProps>) => Omit<PropsWithoutRef<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, 'color'> | undefined | Partial<IconButtonProps>;
 }
 export declare type SuggestionListItemData = {
-    /** children item id */
     id?: number | string;
-    /** display label */
     label?: string;
-    /** is that item disabled */
     disabled?: boolean;
-    /** is that item error */
     error?: boolean;
-    /** is that come from freeSolo item */
     freeSolo?: boolean;
-    /** that item belongs group */
     group?: SuggestionListGroupedOption;
-    /** default styles */
     className?: string;
 };
+export declare const isFirstInGroup: (option: SuggestionListItemData) => boolean;

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

@@ -1,15 +1,9 @@
 /// <reference types="react" />
 declare type UseDynamicHeightParams = {
-    /** total items count */
     itemCount: number;
-    /** max-height of container */
     maxContainerHeight?: number | '100%';
-    /** trigger when container height need change */
     onContainerHeightChange?: (number: number) => void;
 };
-/**
- * auto calculate container height
- */
 export declare const useDynamicHeight: ({ itemCount, maxContainerHeight, onContainerHeightChange, }: UseDynamicHeightParams) => {
     containerHeighRef: import("react").MutableRefObject<number>;
     totalListHeightChanged: (height: number) => void;

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

@@ -1,33 +1,13 @@
 import React from 'react';
 import { FlatIndexLocationWithAlign, ListItem } from 'react-virtuoso';
 declare type UseHighlightScrollParams = {
-    /** function to call to scroll to target index */
     scrollToIndex: (location: FlatIndexLocationWithAlign) => void;
-    /** that scroll container height ref */
     containerHeighRef: React.MutableRefObject<number>;
 };
-/**
- * scroll into current highlight index
- */
 export declare function useHighlightScroll({ containerHeighRef, scrollToIndex, }: UseHighlightScrollParams): {
-    /**
-     * scroller reference
-     */
     scrollerRef: React.MutableRefObject<HTMLElement | undefined>;
-    /**
-     * Scroll to target highlighted index
-     * @param prevHighlightedIndex previous highlightedIndex
-     * @param currHighlightedIndex current highlightedIndex
-     * @param topHighlightIndex top highlighIndex for check should scroll when init
-     */
     scrollToHighlightedIndex: (prevHighlightedIndex: number, currHighlightedIndex: number, topHighlightIndex?: number) => void;
-    /**
-     * set to virtuoso `scrollerRef` prop, auto bind inner `scrollerRef`
-     */
     scrollerRefFn: (elm: HTMLElement) => HTMLElement;
-    /**
-     * set to virtuoso `itemsRendered` prop, auto bind inner `renderedItemsRef`
-     */
     itemsRendered: (e: ListItem<unknown>[]) => ListItem<unknown>[];
 };
 export {};

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

@@ -11,64 +11,27 @@ export declare type SuggestionListGetItemPropsOptions<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[];
+    isOptionEqualToValue: (option: T, value: T) => boolean;
 }) => 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;
+    isOptionEqualToValue?: (option: T, value: T) => boolean;
 } & 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>) => {
+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, isOptionEqualToValue, }: UseSuggestionListParams<T>) => {
     reset: (isFocus?: boolean | undefined) => void;
     clearInput: () => void;
     forceUpdate: () => void;
@@ -94,7 +57,6 @@ export declare const useSuggestionList: <T extends SuggestionListItemData = Sugg
     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;