diff --git a/src/components/autocompletes/common/autocompleteMenu/autocompleteMenu.tsx b/src/components/autocompletes/common/autocompleteMenu/autocompleteMenu.tsx index 081c0460..8de78fc1 100644 --- a/src/components/autocompletes/common/autocompleteMenu/autocompleteMenu.tsx +++ b/src/components/autocompletes/common/autocompleteMenu/autocompleteMenu.tsx @@ -33,6 +33,8 @@ type AutocompleteMenuProps = { minLength?: number | null; inputValue?: string; className?: string; + optionsLimit?: number; + limitationText?: string; } & AutocompleteOptionsProps; export const AutocompleteMenu = forwardRef( diff --git a/src/components/autocompletes/common/autocompleteOptions.module.scss b/src/components/autocompletes/common/autocompleteOptions.module.scss index a79975da..bcd794b3 100644 --- a/src/components/autocompletes/common/autocompleteOptions.module.scss +++ b/src/components/autocompletes/common/autocompleteOptions.module.scss @@ -25,3 +25,17 @@ padding: 8px 12px; text-align: center; } + +.limitation-item { + pointer-events: none; + min-height: 36px; + padding: 4px 12px; + cursor: pointer; + box-sizing: border-box; + color: var(--rp-ui-color-text-secondary); + align-items: center; + text-align: center; + width: 100%; + font-family: var(--rp-ui-base-font-family); + font-size: 13px; +} diff --git a/src/components/autocompletes/common/autocompleteOptions.tsx b/src/components/autocompletes/common/autocompleteOptions.tsx index 4ecc14ac..51e2f4e1 100644 --- a/src/components/autocompletes/common/autocompleteOptions.tsx +++ b/src/components/autocompletes/common/autocompleteOptions.tsx @@ -48,6 +48,8 @@ export interface AutocompleteOptionsProps { customNoMatchesMessage?: string; getUniqKey?: (item: T) => string; newItemButtonText: string; + limitationText?: string; + optionsLimit?: number; } export const AutocompleteOptions = (props: AutocompleteOptionsProps) => { @@ -65,6 +67,8 @@ export const AutocompleteOptions = (props: AutocompleteOptionsProps) => { getUniqKey, getItemProps, parseValueToString, + limitationText = 'Too many results. Type to search', + optionsLimit = 0, } = props; const filterStaticOptions = useCallback(() => { @@ -159,6 +163,11 @@ export const AutocompleteOptions = (props: AutocompleteOptionsProps) => {
{!isEmpty(availableOptions) ? renderItems(availableOptions) : renderEmptyList()} + {availableOptions?.length > optionsLimit && optionsLimit > 0 && limitationText ? ( + + ) : null} {!createWithoutConfirmation && renderNewItem(availableOptions)}
diff --git a/src/components/autocompletes/multipleAutocomplete/multipleAutocomplete.tsx b/src/components/autocompletes/multipleAutocomplete/multipleAutocomplete.tsx index 03103f77..951441a5 100644 --- a/src/components/autocompletes/multipleAutocomplete/multipleAutocomplete.tsx +++ b/src/components/autocompletes/multipleAutocomplete/multipleAutocomplete.tsx @@ -90,6 +90,8 @@ export interface MultipleAutocompleteProps { selectedItemSingleLine?: boolean; selectedItemClassName?: string; selectedItemTextClassName?: string; + optionsLimit?: number; + limitationText?: string; } export const MultipleAutocomplete = (componentsProps: MultipleAutocompleteProps) => { diff --git a/src/components/autocompletes/singleAutocomplete/singleAutocomplete.tsx b/src/components/autocompletes/singleAutocomplete/singleAutocomplete.tsx index c9a0634d..fc11a6c8 100644 --- a/src/components/autocompletes/singleAutocomplete/singleAutocomplete.tsx +++ b/src/components/autocompletes/singleAutocomplete/singleAutocomplete.tsx @@ -75,6 +75,8 @@ export interface SingleAutocompleteProps { customEmptyListMessage?: string; customNoMatchesMessage?: string; newItemButtonText?: string; + optionsLimit?: number; + limitationText?: string; } export const SingleAutocomplete = (componentProps: SingleAutocompleteProps) => {