matching_options converted to TS+tests

CHANGELOG.md

@@ -1,14 +1,15 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Use `cache-loader` to speed up development docs site build ([#1841](https://github.com/elastic/eui/pull/1841)
+- Converted `matching_options` to TS ([#1828](https://github.com/elastic/eui/pull/1828))
 
 **Bug fixes**
 
 - Added `toastLifeTimeMs` typescript definition for individual toasts in `EuiGlobalToastList` ([#1846](https://github.com/elastic/eui/pull/1846))
 
 ## [`10.0.1`](https://github.com/elastic/eui/tree/v10.0.1)
 
-- Convert `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
+- Converted `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
 - Updated `IconColor` type to better distinguish between accepted types ([#1842](https://github.com/elastic/eui/pull/1842))
 
 ## [`10.0.0`](https://github.com/elastic/eui/tree/v10.0.0)

src/components/combo_box/index.d.ts

@@ -6,73 +6,84 @@ import {
   EuiComboBoxOptionsListPosition,
   EuiComboBoxOptionsListProps,
 } from '@elastic/eui';
-import { RefCallback } from '../common';
+import { RefCallback, CommonProps } from '../common';
 
 declare module '@elastic/eui' {
-  export type EuiComboBoxOptionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    label: string,
-    isGroupLabelOption?: boolean,
-  }
+  export type EuiComboBoxOptionProps = CommonProps &
+    ButtonHTMLAttributes<HTMLButtonElement> & {
+      label: string;
+      isGroupLabelOption?: boolean;
+      options?: EuiComboBoxOptionProps[];
+    };
 
-  export type EuiComboBoxOptionsListPosition = 'top' | 'bottom'
+  export type EuiComboBoxOptionsListPosition = 'top' | 'bottom';
 
   export interface EuiComboBoxOption {
-    option: EuiComboBoxOptionProps,
-    children?: ReactNode,
-    className?: string,
-    optionRef?: RefCallback<HTMLButtonElement>,
-    onClick: (option: EuiComboBoxOptionProps) => any,
-    onEnterKey: (option: EuiComboBoxOptionProps) => any,
-    disabled?: boolean,
+    option: EuiComboBoxOptionProps;
+    children?: ReactNode;
+    className?: string;
+    optionRef?: RefCallback<HTMLButtonElement>;
+    onClick: (option: EuiComboBoxOptionProps) => any;
+    onEnterKey: (option: EuiComboBoxOptionProps) => any;
+    disabled?: boolean;
   }
 
   export interface EuiComboBoxOptionsListProps {
-    options?: Array<EuiComboBoxOptionProps>,
-    isLoading?: boolean,
-    selectedOptions?: Array<any>,
-    onCreateOption?: any,
-    searchValue?: string,
-    matchingOptions?: Array<EuiComboBoxOptionProps>,
-    optionRef?: EuiComboBoxOption['optionRef'],
-    onOptionClick?: EuiComboBoxOption['onClick'],
-    onOptionEnterKey?: EuiComboBoxOption['onEnterKey'],
-    areAllOptionsSelected?: boolean,
-    getSelectedOptionForSearchValue?: (searchValue: string, selectedOptions: Array<any>) => EuiComboBoxOptionProps,
-    updatePosition: (parameter?: UIEvent | EuiPanelProps['panelRef']) => any,
-    position?: EuiComboBoxOptionsListPosition,
-    listRef: EuiPanelProps['panelRef'],
-    renderOption?: (option: EuiComboBoxOptionProps, searchValue: string, OPTION_CONTENT_CLASSNAME: string) => ReactNode,
-    width?: number,
-    scrollToIndex?: number,
-    onScroll?: ListProps['onScroll'],
-    rowHeight?: number,
-    fullWidth?: boolean,
+    options?: EuiComboBoxOptionProps[];
+    isLoading?: boolean;
+    selectedOptions?: any[];
+    onCreateOption?: any;
+    searchValue?: string;
+    matchingOptions?: EuiComboBoxOptionProps[];
+    optionRef?: EuiComboBoxOption['optionRef'];
+    onOptionClick?: EuiComboBoxOption['onClick'];
+    onOptionEnterKey?: EuiComboBoxOption['onEnterKey'];
+    areAllOptionsSelected?: boolean;
+    getSelectedOptionForSearchValue?: (
+      searchValue: string,
+      selectedOptions: any[]
+    ) => EuiComboBoxOptionProps;
+    updatePosition: (parameter?: UIEvent | EuiPanelProps['panelRef']) => any;
+    position?: EuiComboBoxOptionsListPosition;
+    listRef: EuiPanelProps['panelRef'];
+    renderOption?: (
+      option: EuiComboBoxOptionProps,
+      searchValue: string,
+      OPTION_CONTENT_CLASSNAME: string
+    ) => ReactNode;
+    width?: number;
+    scrollToIndex?: number;
+    onScroll?: ListProps['onScroll'];
+    rowHeight?: number;
+    fullWidth?: boolean;
   }
-  export const EuiComboBoxOptionsList: FunctionComponent<EuiComboBoxOptionsListProps>;
+  export const EuiComboBoxOptionsList: FunctionComponent<
+    EuiComboBoxOptionsListProps
+  >;
 
   export type EuiComboBoxSingleSelectionShape = { asPlainText?: boolean; };
 
   export interface EuiComboBoxProps {
-    id?: string,
-    isDisabled?: boolean,
-    className?: string,
-    placeholder?: string,
-    isLoading?: boolean,
-    async?: boolean,
-    singleSelection?: EuiComboBoxSingleSelectionShape | boolean,
-    noSuggestions?: boolean,
-    options?: EuiComboBoxOptionsListProps['options'],
-    selectedOptions?: EuiComboBoxOptionsListProps['selectedOptions'],
-    onBlur?: FocusEventHandler<HTMLInputElement>,
-    onChange?: (options: Array<EuiComboBoxOptionProps>) => any,
-    onFocus?: FocusEventHandler<HTMLInputElement>,
-    onSearchChange?: (searchValue: string) => any,
-    onCreateOption?: EuiComboBoxOptionsListProps['onCreateOption'],
-    renderOption?: EuiComboBoxOptionsListProps['renderOption'],
-    isInvalid?: boolean,
-    rowHeight?: number,
-    isClearable?: boolean,
-    fullWidth?: boolean,
+    id?: string;
+    isDisabled?: boolean;
+    className?: string;
+    placeholder?: string;
+    isLoading?: boolean;
+    async?: boolean;
+    singleSelection?: EuiComboBoxSingleSelectionShape | boolean;
+    noSuggestions?: boolean;
+    options?: EuiComboBoxOptionsListProps['options'];
+    selectedOptions?: EuiComboBoxOptionsListProps['selectedOptions'];
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onChange?: (options: Array<EuiComboBoxOptionProps>) => any;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onSearchChange?: (searchValue: string) => any;
+    onCreateOption?: EuiComboBoxOptionsListProps['onCreateOption'];
+    renderOption?: EuiComboBoxOptionsListProps['renderOption'];
+    isInvalid?: boolean;
+    rowHeight?: number;
+    isClearable?: boolean;
+    fullWidth?: boolean;
     inputRef?: (element: HTMLInputElement) => void;
   }
   export const EuiComboBox: FunctionComponent<EuiComboBoxProps>;

src/components/combo_box/matching_options.test.ts

@@ -0,0 +1,171 @@
+import { EuiComboBoxOptionProps } from '@elastic/eui';
+import {
+  flattenOptionGroups,
+  getSelectedOptionForSearchValue,
+  getMatchingOptions,
+} from './matching_options';
+
+const options: EuiComboBoxOptionProps[] = [
+  {
+    label: 'Titan',
+    'data-test-subj': 'titanOption',
+  },
+  {
+    label: 'Saturn',
+    'data-test-subj': 'saturnOption',
+  },
+  {
+    label: 'Mimas',
+  },
+];
+
+describe('flattenOptionGroups', () => {
+  test('it flattens one level of options', () => {
+    // Assemble
+    const input = [
+      {
+        label: 'Titan',
+        'data-test-subj': 'titanOption',
+      },
+      {
+        label: 'Enceladus',
+        options: [
+          {
+            label: 'Saturn',
+            'data-test-subj': 'saturnOption',
+          },
+        ],
+      },
+      {
+        label: 'Mimas',
+      },
+    ];
+    const expected = options;
+    // Act
+    const got = flattenOptionGroups(input);
+    // Assert
+    expect(got).toMatchObject(expected);
+  });
+});
+
+describe('getSelectedOptionForSearchValue', () => {
+  test('gets the first matching selected option for search value', () => {
+    // Assemble
+    const expected: EuiComboBoxOptionProps = {
+      label: 'Saturn',
+      'data-test-subj': 'saturnOption',
+    };
+    // Act
+    const got = getSelectedOptionForSearchValue('saturn', options);
+    // Assert
+    expect(got).toMatchObject(expected);
+  });
+});
+
+describe('getSelectedOptionForSearchValue', () => {
+  test('returns undefined when no matching option found for search value', () => {
+    // Act
+    const got = getSelectedOptionForSearchValue('Pluto', options);
+    // Assert
+    expect(got).toBeUndefined();
+  });
+  test('gets the first matching selected option for search value', () => {
+    // Assemble
+    const expected: EuiComboBoxOptionProps = {
+      label: 'Saturn',
+      'data-test-subj': 'saturnOption',
+    };
+    // Act
+    const got = getSelectedOptionForSearchValue('saturn', options);
+    // Assert
+    expect(got).toMatchObject(expected);
+  });
+});
+
+interface GetMatchingOptionsTestCase {
+  options: EuiComboBoxOptionProps[];
+  selectedOptions: EuiComboBoxOptionProps[];
+  searchValue: string;
+  isPreFiltered: boolean;
+  showPrevSelected: boolean;
+  expected: EuiComboBoxOptionProps[];
+}
+
+const testCases: GetMatchingOptionsTestCase[] = [
+  {
+    options,
+    selectedOptions: [
+      {
+        label: 'Saturn',
+        'data-test-subj': 'saturnOption',
+      },
+    ],
+    searchValue: 'saturn',
+    isPreFiltered: false,
+    showPrevSelected: false,
+    expected: [],
+  },
+  {
+    options,
+    selectedOptions: [
+      {
+        label: 'Saturn',
+        'data-test-subj': 'saturnOption',
+      },
+    ],
+    searchValue: 'saturn',
+    isPreFiltered: true,
+    showPrevSelected: false,
+    expected: [
+      { 'data-test-subj': 'titanOption', label: 'Titan' },
+      { label: 'Mimas' },
+    ],
+  },
+  {
+    options,
+    selectedOptions: [
+      {
+        label: 'Saturn',
+        'data-test-subj': 'saturnOption',
+      },
+    ],
+    searchValue: 'saturn',
+    isPreFiltered: false,
+    showPrevSelected: true,
+    expected: [{ 'data-test-subj': 'saturnOption', label: 'Saturn' }],
+  },
+  {
+    options,
+    selectedOptions: [
+      {
+        label: 'Saturn',
+        'data-test-subj': 'saturnOption',
+      },
+    ],
+    searchValue: 'saturn',
+    isPreFiltered: true,
+    showPrevSelected: true,
+    expected: [
+      { 'data-test-subj': 'titanOption', label: 'Titan' },
+      { 'data-test-subj': 'saturnOption', label: 'Saturn' },
+      { label: 'Mimas' },
+    ],
+  },
+];
+
+describe('getMatchingOptions', () => {
+  test.each(testCases)(
+    '.getMatchingOptions(%o)',
+    (testCase: GetMatchingOptionsTestCase) => {
+      expect(
+        getMatchingOptions(
+          testCase.options,
+          testCase.selectedOptions,
+          testCase.searchValue,
+          testCase.isPreFiltered,
+          testCase.showPrevSelected
+        )
+      ).toMatchObject(testCase.expected);
+    }
+  );
+});