Fix EuiSuperSelect TS defs

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed optional TS definitions for `EuiColorPicker` `onBlur` and `onFocus` callbacks ([#1993](https://github.com/elastic/eui/pull/1993))
+- Fixed `EuiSuperSelect` TS definitions ([#1995](https://github.com/elastic/eui/pull/1995))
 
 ## [`11.3.0`](https://github.com/elastic/eui/tree/v11.3.0)
 

src/components/form/super_select/__snapshots__/super_select.test.js.snap

@@ -448,7 +448,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
         fullWidth={false}
         isInvalid={false}
         isLoading={false}
-        onChange={[Function]}
         onClick={[Function]}
         onKeyDown={[Function]}
         options={
@@ -499,7 +498,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
             fullWidth={false}
             isInvalid={false}
             isLoading={false}
-            onChange={[Function]}
             onClick={[Function]}
             onKeyDown={[Function]}
             options={
@@ -563,7 +561,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                     aria-selected={true}
                     className="euiSuperSelectControl euiSuperSelect--isOpen__button"
                     data-test-subj="superSelect"
-                    onChange={[Function]}
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="option"

src/components/form/super_select/index.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from '../../common';
+import { CommonProps, Omit } from '../../common';
 
 import { FunctionComponent, ReactNode, ButtonHTMLAttributes } from 'react';
 
@@ -7,21 +7,23 @@ declare module '@elastic/eui' {
    * @see './super_select.js'
    */
 
-  export type EuiSuperSelectProps = CommonProps &
-    ButtonHTMLAttributes<HTMLButtonElement> & {
+  export type EuiSuperSelectProps<T extends string> = CommonProps &
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & {
       /**
        * Pass an array of options that must at least include:
        * `value`: storing unique value of item,
        * `inputDisplay`: what shows inside the form input when selected
        * `dropdownDisplay` (optional): what shows for the item in the dropdown
        */
       options: Array<{
-        value: string;
+        value: T;
         inputDisplay?: ReactNode;
         dropdownDisplay?: ReactNode;
+        disabled?: boolean;
+        'data-test-subj'?: string;
       }>;
 
-      valueOfSelected?: string;
+      valueOfSelected?: T;
 
       /**
        * Classes for the context menu item
@@ -31,7 +33,7 @@ declare module '@elastic/eui' {
       /**
        * You must pass an `onChange` function to handle the update of the value
        */
-      onChange?: (value: string) => void;
+      onChange?: (value: T) => void;
 
       /**
        * Change to `true` if you want horizontal lines between options.
@@ -54,6 +56,11 @@ declare module '@elastic/eui' {
        */
       isInvalid?: boolean;
 
+      /**
+       * Provides a loading indicator. Default: false
+       */
+      isLoading?: boolean;
+
       /**
        * Make it short. Default: false
        */
@@ -70,5 +77,7 @@ declare module '@elastic/eui' {
       isOpen?: boolean;
     };
 
-  export const EuiSuperSelect: FunctionComponent<EuiSuperSelectProps>;
+  export const EuiSuperSelect: <T extends string>(
+    props: EuiSuperSelectProps<T>
+  ) => ReturnType<FunctionComponent<EuiSuperSelectProps<T>>>;
 }

src/components/form/super_select/super_select.js

@@ -195,7 +195,6 @@ export class EuiSuperSelect extends Component {
       <EuiSuperSelectControl
         options={options}
         value={valueOfSelected}
-        onChange={onChange}
         onClick={
           this.state.isPopoverOpen ? this.closePopover : this.openPopover
         }
@@ -307,6 +306,10 @@ EuiSuperSelect.propTypes = {
    * Provides invalid styling
    */
   isInvalid: PropTypes.bool,
+  /**
+   * Provides loading indictor
+   */
+  isLoading: PropTypes.bool,
   /**
    * Make it short
    */