feat(ChipsSelect): add prop sortFn

packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx

@@ -70,6 +70,38 @@ describe('ChipsSelect', () => {
     expect(within(dropdownLocator).getByRole('option', { name: 'Синий' })).toBeTruthy();
   });
 
+  it('should sort options by sortFn prop', async () => {
+    type Option = { label: string; value: number };
+    const options: Option[] = [
+      { label: '1', value: 1 },
+      { label: '3', value: 3 },
+      { label: '2', value: 2 },
+    ];
+    const byAsc = (a: Option, b: Option) => a.label.localeCompare(b.label);
+    const byDesc = (a: Option, b: Option) => b.label.localeCompare(a.label);
+
+    const checkOptionsOrder = async (order: string[]) => {
+      await userEvent.click(screen.getByRole('combobox'));
+      const dropdownLocator = screen.getByTestId('dropdown');
+      const optionsValues = within(dropdownLocator)
+        .getAllByRole('option')
+        .map((element) => element.textContent);
+      expect(optionsValues).toEqual(order);
+    };
+
+    // Сортируем по возрастанию
+    const { rerender } = render(
+      <ChipsSelect options={options} defaultValue={[]} sortFn={byAsc} dropdownTestId="dropdown" />,
+    );
+    await checkOptionsOrder(['1', '2', '3']);
+
+    // Сортируем по убыванию
+    rerender(
+      <ChipsSelect options={options} defaultValue={[]} sortFn={byDesc} dropdownTestId="dropdown" />,
+    );
+    await checkOptionsOrder(['3', '2', '1']);
+  });
+
   it('shows spinner if fetching', async () => {
     const result = render(<ChipsSelect fetching defaultValue={[]} dropdownTestId="dropdown" />);
     await userEvent.click(result.getByRole('combobox'));

packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx

@@ -161,6 +161,7 @@ export const ChipsSelect = <Option extends ChipOption>({
   forceDropdownPortal,
   noMaxHeight = false,
   filterFn = defaultFilterFn,
+  sortFn = false,
   dropdownTestId,
   onClose,
   onOpen,
@@ -231,6 +232,7 @@ export const ChipsSelect = <Option extends ChipOption>({
     emptyText,
     creatable,
     filterFn,
+    sortFn,
     selectedBehavior,
     onClose,
     onOpen,

packages/vkui/src/components/ChipsSelect/useChipsSelect.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { isEqual } from '@vkontakte/vkjs';
 import { type SimulateReactInputTargetState } from '../../lib/react';
-import { defaultFilterFn, type FilterFn } from '../../lib/select';
+import { defaultFilterFn, type FilterFn, type SortFn } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import {
   transformValue,
@@ -39,6 +39,7 @@ export interface UseChipsSelectProps<O extends ChipOption = ChipOption>
    */
   selectedBehavior?: 'hide' | 'highlight';
   filterFn?: false | FilterFn<O>;
+  sortFn?: false | SortFn<O>;
   /**
    * Будет вызвано в момент скрытия выпадающего списка
    */
@@ -70,6 +71,7 @@ export const useChipsSelect = <O extends ChipOption>({
   creatable = false,
   emptyText = DEFAULT_EMPTY_TEXT,
   filterFn = defaultFilterFn,
+  sortFn = false,
   selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,
   options: optionsProp = DEFAULT_VALUE,
   onClose,
@@ -130,6 +132,7 @@ export const useChipsSelect = <O extends ChipOption>({
           emptyText,
           creatable,
           filterFn,
+          sortFn,
           options: optionsProp,
           selectedBehavior,
         })
@@ -173,6 +176,7 @@ export const useChipsSelect = <O extends ChipOption>({
           emptyText,
           creatable,
           filterFn,
+          sortFn,
           options: optionsProp,
           selectedBehavior,
         });
@@ -194,6 +198,7 @@ export const useChipsSelect = <O extends ChipOption>({
       creatable,
       selectedBehavior,
       filterFn,
+      sortFn,
     ],
   );
 
@@ -225,6 +230,7 @@ function transformOptions<O extends ChipOption>({
   inputValue = DEFAULT_INPUT_VALUE,
   emptyText = DEFAULT_EMPTY_TEXT,
   creatable = false,
+  sortFn = false,
   filterFn = defaultFilterFn,
   options: optionsProp = DEFAULT_VALUE,
   selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,
@@ -237,6 +243,7 @@ function transformOptions<O extends ChipOption>({
     | 'emptyText'
     | 'creatable'
     | 'filterFn'
+    | 'sortFn'
     | 'options'
     | 'selectedBehavior'
   >) {
@@ -251,7 +258,13 @@ function transformOptions<O extends ChipOption>({
     return [{ placeholder: emptyText }];
   }
 
-  const parsedOptions = transformValue(filteredOptionsProp, getOptionValue, getOptionLabel);
+  const sortedOptions = sortFn
+    ? [...filteredOptionsProp].sort((optionA, optionB) => {
+        return sortFn(optionA, optionB, inputValue);
+      })
+    : filteredOptionsProp;
+
+  const parsedOptions = transformValue(sortedOptions, getOptionValue, getOptionLabel);
 
   if (selectedBehavior === 'hide') {
     const selected = value.map((item) => item.value);

packages/vkui/src/lib/select.ts

@@ -16,6 +16,8 @@ export type FilterFn<O extends Option> = (
   getOptionsLabel?: GetOptionLabel<O>,
 ) => boolean;
 
+export type SortFn<O extends Option> = (optionA: O, optionB: O, inputValue: string) => number;
+
 function getOptionLabelDefault<O extends Option>(option: O): O['label'] {
   return option.label;
 }