From 1aa0493eb546f1828f27ec076d54fab0ae1114ef Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Wed, 28 Feb 2024 09:49:47 +0700
Subject: [PATCH] fix(ChipsSelect): add disabled prop (#6640)

---
 packages/vkui/src/components/Chip/Chip.tsx    |  1 +
 .../ChipsSelect/ChipsSelect.stories.tsx       |  2 +-
 .../components/ChipsSelect/ChipsSelect.tsx    | 46 +++++++++++++++++--
 .../vkui/src/components/ChipsSelect/Readme.md |  2 +-
 .../CustomSelectOption/CustomSelectOption.tsx |  4 +-
 5 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/packages/vkui/src/components/Chip/Chip.tsx b/packages/vkui/src/components/Chip/Chip.tsx
index df800eb372..42864e334b 100644
--- a/packages/vkui/src/components/Chip/Chip.tsx
+++ b/packages/vkui/src/components/Chip/Chip.tsx
@@ -19,6 +19,7 @@ export type ChipValue = string | number;
 export interface ChipOption {
   value?: ChipValue;
   label?: string;
+  disabled?: boolean;
   [otherProp: string]: any;
 }
 
diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.stories.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.stories.tsx
index 1afb589dc4..1729d55cd0 100644
--- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.stories.tsx
+++ b/packages/vkui/src/components/ChipsSelect/ChipsSelect.stories.tsx
@@ -21,7 +21,7 @@ const groups = [
     value: '1',
     label: 'Arctic Monkeys',
   },
-  { value: '2', label: 'Звери' },
+  { value: '2', label: 'Звери', disabled: true },
   { value: '4', label: 'FACE' },
   {
     value: '3',
diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
index 33f7aed894..ee7c0bdfa3 100644
--- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
+++ b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
@@ -20,6 +20,32 @@ import { IconButton } from '../IconButton/IconButton';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './ChipsSelect.module.css';
 
+const findIndexAfter = <O extends ChipOption>(options: O[] = [], startIndex = -1) => {
+  if (startIndex >= options.length - 1) {
+    return -1;
+  }
+  return options.findIndex((option, i) => i > startIndex && !option.disabled);
+};
+
+const findIndexBefore = <O extends ChipOption>(
+  options: O[] = [],
+  endIndex: number = options.length,
+) => {
+  let result = -1;
+  if (endIndex <= 0) {
+    return result;
+  }
+  for (let i = endIndex - 1; i >= 0; i--) {
+    let option = options[i];
+
+    if (!option.disabled) {
+      result = i;
+      break;
+    }
+  }
+  return result;
+};
+
 export interface ChipsSelectProps<Option extends ChipOption>
   extends Omit<ChipsInputProps<Option>, 'after'> {
   popupDirection?: 'top' | 'bottom';
@@ -224,6 +250,12 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
       return;
     }
 
+    const option = filteredOptions[index];
+
+    if (option?.disabled) {
+      return;
+    }
+
     scrollToElement(index);
     setFocusedOptionIndex(index);
   };
@@ -232,9 +264,11 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
     let index = nextIndex === null ? -1 : nextIndex;
 
     if (type === FOCUS_ACTION_NEXT) {
-      index = index + 1;
+      const nextIndex = findIndexAfter(filteredOptions, index);
+      index = nextIndex === -1 ? findIndexAfter(filteredOptions) : nextIndex; // Следующий за index или первый валидный до index
     } else if (type === FOCUS_ACTION_PREV) {
-      index = index - 1;
+      const beforeIndex = findIndexBefore(filteredOptions, index);
+      index = beforeIndex === -1 ? findIndexBefore(filteredOptions) : beforeIndex; // Предшествующий index или последний валидный после index
     }
 
     focusOptionByIndex(index, focusedOptionIndex);
@@ -248,7 +282,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
 
       if (!opened) {
         setOpened(true);
-        setFocusedOptionIndex(0);
+        focusOption(null, FOCUS_ACTION_NEXT);
       } else {
         focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);
       }
@@ -259,7 +293,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
 
       if (!opened) {
         setOpened(true);
-        setFocusedOptionIndex(0);
+        focusOption(null, FOCUS_ACTION_NEXT);
       } else {
         focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);
       }
@@ -424,6 +458,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
                     option,
                     hovered: Boolean(hovered),
                     children: label,
+                    disabled: option.disabled,
                     selected: !!selected,
                     getRootRef: (e) => {
                       if (e) {
@@ -432,6 +467,9 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
                       return undefined;
                     },
                     onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {
+                      if (option.disabled) {
+                        return;
+                      }
                       onChangeStart?.(e, option);
 
                       if (!e.defaultPrevented) {
diff --git a/packages/vkui/src/components/ChipsSelect/Readme.md b/packages/vkui/src/components/ChipsSelect/Readme.md
index 8effee8a42..6021664e9c 100644
--- a/packages/vkui/src/components/ChipsSelect/Readme.md
+++ b/packages/vkui/src/components/ChipsSelect/Readme.md
@@ -21,7 +21,7 @@ const groups = [
     label: 'Arctic Monkeys',
     src: getAvatarUrl('audio_arctic_monkeys'),
   },
-  { value: '2', label: 'Звери', src: getAvatarUrl('audio_leto_zveri') },
+  { value: '2', label: 'Звери', disabled: true, src: getAvatarUrl('audio_leto_zveri') },
   { value: '4', label: 'FACE', src: getAvatarUrl('audio_face') },
   {
     value: '3',
diff --git a/packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx b/packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx
index 10ac6fb95c..01d8edb202 100644
--- a/packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx
+++ b/packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx
@@ -53,8 +53,8 @@ export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLD
   /**
    * Блокирует весь блок.
    *
-   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select) или [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect), то свойство явно должно выставляться только через структуру `options`.
-   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) не будет знать об актуальном состоянии
+   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.
+   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии
    * опции.
    */
   disabled?: boolean;