From f265868ee6742925c4df52a9904bbd69aac9ffc9 Mon Sep 17 00:00:00 2001
From: Eldar <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Tue, 21 Jan 2025 10:35:10 +0300
Subject: [PATCH] feat(ChipsSelect): add prop sortFn (#8119)

* feat(ChipsSelect): add prop sortFn

* fix: remove array copy

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

---------

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
---
 .../ChipsSelect/ChipsSelect.test.tsx          | 32 +++++++++++++++++++
 .../components/ChipsSelect/ChipsSelect.tsx    |  2 ++
 .../components/ChipsSelect/useChipsSelect.ts  | 13 +++++++-
 packages/vkui/src/lib/select.ts               |  2 ++
 4 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx
index 5b9b8865f6..d355958987 100644
--- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx
+++ b/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'));
diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
index 3556c88775..614e9d195c 100644
--- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
+++ b/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,
diff --git a/packages/vkui/src/components/ChipsSelect/useChipsSelect.ts b/packages/vkui/src/components/ChipsSelect/useChipsSelect.ts
index 8dc5051f34..24b526717b 100644
--- a/packages/vkui/src/components/ChipsSelect/useChipsSelect.ts
+++ b/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,6 +258,10 @@ function transformOptions<O extends ChipOption>({
     return [{ placeholder: emptyText }];
   }
 
+  if (sortFn) {
+    filteredOptionsProp.sort((optionA, optionB) => sortFn(optionA, optionB, inputValue));
+  }
+
   const parsedOptions = transformValue(filteredOptionsProp, getOptionValue, getOptionLabel);
 
   if (selectedBehavior === 'hide') {
diff --git a/packages/vkui/src/lib/select.ts b/packages/vkui/src/lib/select.ts
index c5ec50a77e..a7b44b25d0 100644
--- a/packages/vkui/src/lib/select.ts
+++ b/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;
 }