@bitrise/bitkit 10.9.1 → 10.9.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.9.1",
+  "version": "10.9.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Dropdown/Dropdown.context.tsx

@@ -4,11 +4,12 @@ import { createContext } from '@chakra-ui/react-utils';
 
 const [DropdownStylesProvider, useDropdownStyles] = createStylesContext('Dropdown');
 
-export type DropdownEventArgs = { value: string; index: number | undefined; label: ReactNode };
+export type DropdownEventArgs<T> = { value: T; index: number | undefined; label: ReactNode };
 
-type DropdownContext = {
-  formValue: string;
-  onOptionSelected: (arg: DropdownEventArgs) => void;
+type DropdownContext<T> = {
+  formValue: T;
+  onOptionSelected: (arg: DropdownEventArgs<T>) => void;
+  listRef: React.RefObject<(HTMLElement | null)[]>;
   searchValue: string;
   searchRef: React.Ref<HTMLInputElement>;
   searchOnChange: (sv: string) => void;
@@ -18,20 +19,24 @@ type DropdownContext = {
   getItemProps: (x: object) => object;
 };
 
-const [DropdownContextProvider, useDropdownContext] = createContext<DropdownContext>();
+const [DropdownContextProvider, useDropdownContext] = createContext<DropdownContext<unknown>>();
 
-const DropdownProvider = ({
+function useDropdownContextTyped<T>(): DropdownContext<T> {
+  return useDropdownContext() as unknown as DropdownContext<T>;
+}
+
+const DropdownProvider = <T,>({
   styles,
   context,
   children,
 }: {
   styles: ComponentProps<typeof DropdownStylesProvider>['value'];
   children: ReactNode;
-  context: DropdownContext;
+  context: DropdownContext<T>;
 }) => (
-  <DropdownContextProvider value={context}>
+  <DropdownContextProvider value={context as DropdownContext<unknown>}>
     <DropdownStylesProvider value={styles}>{children}</DropdownStylesProvider>
   </DropdownContextProvider>
 );
 
-export { DropdownProvider, useDropdownContext, useDropdownStyles };
+export { DropdownProvider, useDropdownContextTyped as useDropdownContext, useDropdownStyles };

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -56,6 +56,27 @@ export const WithDetail = () => {
   );
 };
 
+export const WithLongOptions = () => {
+  return (
+    <Dropdown defaultValue="y" w="150px">
+      <DropdownOption value="y">
+        some very long option text longer than the component with verylongwordwithoutbreakopportunities
+      </DropdownOption>
+      <DropdownOption>some very long option text longer than the component</DropdownOption>
+    </Dropdown>
+  );
+};
+
+export const WithoutSearch = () => {
+  return (
+    <Dropdown search={false}>
+      <DropdownOption>opt1</DropdownOption>
+      <DropdownOption>opt2</DropdownOption>
+      <DropdownOption>opt3</DropdownOption>
+    </Dropdown>
+  );
+};
+
 export const Default: ComponentStoryFn<typeof Dropdown> = (args) => {
   return (
     <form

package/src/Components/Dropdown/Dropdown.test.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, MutableRefObject, StrictMode, useState } from 'react';
+import { ComponentProps, forwardRef, MutableRefObject, StrictMode, useState } from 'react';
 import { setTimeout } from 'timers/promises';
 import { render as renderRTL, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -12,12 +12,15 @@ const render = (ui: React.ReactElement) => {
   return renderRTL(<StrictMode>{ui}</StrictMode>);
 };
 
-const TestComponent = forwardRef<HTMLFormElement, { submit: (data: unknown) => void }>(({ submit, ...props }, ref) => {
+const TestComponent = forwardRef<
+  HTMLFormElement,
+  { submit: (data: unknown) => void } & ComponentProps<typeof Dropdown>
+>(({ submit, ...props }, ref) => {
   const { register, handleSubmit } = useForm({ defaultValues: { dropdown: 'unset' } });
 
   return (
-    <form {...props} onSubmit={handleSubmit(submit)} ref={ref}>
-      <Dropdown aria-label="Test" {...register('dropdown')}>
+    <form onSubmit={handleSubmit(submit)} ref={ref}>
+      <Dropdown {...props} aria-label="Test" {...register('dropdown')}>
         <DropdownOption value="x">Test Opt1</DropdownOption>
         <DropdownOption value="y">Test Opt2</DropdownOption>
         <DropdownOption value="z">Test Opt3</DropdownOption>
@@ -37,6 +40,39 @@ describe('Dropdown', () => {
     expect(button).toHaveTextContent('Test Opt1');
   });
 
+  describe('supports null value', () => {
+    it('can be selected', async () => {
+      const handler = jest.fn();
+      const Test = () => {
+        return (
+          <Dropdown onChange={(ev) => handler(ev.target.value)}>
+            <DropdownOption value={null}>null</DropdownOption>
+          </Dropdown>
+        );
+      };
+      render(<Test />);
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      const opt = await screen.findByRole('listbox');
+      await userEvent.selectOptions(opt, 'null');
+      expect(handler).toHaveBeenCalledWith(null);
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+    it('works as defaultValue', async () => {
+      const handler = jest.fn();
+      const Test = () => {
+        return (
+          <Dropdown defaultValue={null} onChange={(ev) => handler(ev.target.value)}>
+            <DropdownOption value={null}>null</DropdownOption>
+          </Dropdown>
+        );
+      };
+      render(<Test />);
+      const button = await screen.findByRole('combobox');
+      expect(button).toHaveTextContent('null');
+    });
+  });
+
   it('search field can be disabled', async () => {
     render(
       <Dropdown search={false}>
@@ -77,8 +113,8 @@ describe('Dropdown', () => {
   });
 
   it('works in controlled mode (from the inside)', async () => {
-    const Test = ({ valueRef }: { valueRef: MutableRefObject<string> }) => {
-      const [value, setValue] = useState('x');
+    const Test = ({ valueRef }: { valueRef: MutableRefObject<string | null> }) => {
+      const [value, setValue] = useState<string | null>('x');
       valueRef.current = value;
       return (
         <Dropdown value={value} onChange={(ev) => setValue(ev.target.value)}>
@@ -215,33 +251,73 @@ describe('Dropdown', () => {
       expect(option1).toBeInTheDocument();
       expect(option2).not.toBeInTheDocument();
     });
-  });
 
-  describe('search', () => {
-    it('supports custom search', async () => {
-      render(<CustomSearch />);
+    it('works with keyboard navigation', async () => {
+      const handler = jest.fn();
+      const Test = () => {
+        return (
+          <Dropdown onChange={(ev) => handler(ev.target.value)}>
+            <DropdownDetailedOption value="y" icon={<Avatar name="hello" />} subtitle="ok" title="testx" />
+            <DropdownDetailedOption value="x" icon={<Avatar name="hello" />} subtitle="ok" title="test" />
+            <DropdownDetailedOption value="z" icon={<Avatar name="hello" />} subtitle="ok" title="test" />
+          </Dropdown>
+        );
+      };
+      render(<Test />);
       const button = await screen.findByRole('combobox');
-
       await userEvent.click(button);
       const search = await screen.findByRole('search');
-      await userEvent.type(search, 'text1');
-      let option1 = screen.queryByRole('option', { name: 'text1' });
-      let option2 = screen.queryByRole('option', { name: 'text2' });
-      let option3 = screen.queryByRole('option', { name: 'text3' });
-      let option4 = screen.queryByRole('option', { name: 'text4' });
-      expect(option1).toBeInTheDocument();
-      expect(option2).not.toBeInTheDocument();
-      expect(option3).not.toBeInTheDocument();
-      expect(option4).not.toBeInTheDocument();
-      await userEvent.clear(search);
-      option1 = screen.queryByRole('option', { name: 'text1' });
-      option2 = screen.queryByRole('option', { name: 'text2' });
-      option3 = screen.queryByRole('option', { name: 'text3' });
-      option4 = screen.queryByRole('option', { name: 'text4' });
-      expect(option1).toBeInTheDocument();
-      expect(option2).toBeInTheDocument();
-      expect(option3).toBeInTheDocument();
-      expect(option4).toBeInTheDocument();
+      await waitFor(() => expect(search).toHaveFocus());
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      expect(handler).toHaveBeenCalledWith('x');
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('search', () => {
+    describe('custom search', () => {
+      it('works', async () => {
+        render(<CustomSearch />);
+        const button = await screen.findByRole('combobox');
+
+        await userEvent.click(button);
+        const search = await screen.findByRole('search');
+        await userEvent.type(search, 'text1');
+        let option1 = screen.queryByRole('option', { name: 'text1' });
+        let option2 = screen.queryByRole('option', { name: 'text2' });
+        let option3 = screen.queryByRole('option', { name: 'text3' });
+        let option4 = screen.queryByRole('option', { name: 'text4' });
+        expect(option1).toBeInTheDocument();
+        expect(option2).not.toBeInTheDocument();
+        expect(option3).not.toBeInTheDocument();
+        expect(option4).not.toBeInTheDocument();
+        await userEvent.clear(search);
+        option1 = screen.queryByRole('option', { name: 'text1' });
+        option2 = screen.queryByRole('option', { name: 'text2' });
+        option3 = screen.queryByRole('option', { name: 'text3' });
+        option4 = screen.queryByRole('option', { name: 'text4' });
+        expect(option1).toBeInTheDocument();
+        expect(option2).toBeInTheDocument();
+        expect(option3).toBeInTheDocument();
+        expect(option4).toBeInTheDocument();
+      });
+
+      it('resets after closing', async () => {
+        render(<CustomSearch />);
+        const button = await screen.findByRole('combobox');
+
+        await userEvent.click(button);
+        const search = await screen.findByRole('search');
+        await userEvent.type(search, 'text1');
+        await userEvent.click(button);
+        await userEvent.click(button);
+        const option1 = screen.queryByRole('option', { name: 'text1' });
+        const option2 = screen.queryByRole('option', { name: 'text2' });
+        expect(option1).toBeInTheDocument();
+        expect(option2).toBeInTheDocument();
+      });
     });
 
     it('removes group when items are filtered', async () => {
@@ -396,6 +472,22 @@ describe('Dropdown', () => {
       expect(handler).toHaveBeenCalledTimes(1);
     });
 
+    it('works without search', async () => {
+      const handler = jest.fn();
+      render(<TestComponent search={false} submit={(data: unknown) => handler(data)} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+      const submit = await screen.findByRole('button', { name: 'Send' });
+
+      await userEvent.click(button);
+      await screen.findByRole('listbox');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      await userEvent.click(submit);
+      expect(handler).toHaveBeenCalledWith({ dropdown: 'y' });
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
     it('works with groups', async () => {
       const handler = jest.fn();
       const Test = () => {

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -43,6 +43,7 @@ const DropdownTheme = {
     item: {
       cursor: 'pointer',
       userSelect: 'none',
+      wordBreak: 'break-word',
       color: 'purple.10',
       paddingY: '8',
       paddingX: '16',
@@ -73,7 +74,7 @@ const DropdownTheme = {
       zIndex: '1',
       display: 'flex',
       minH: 0,
-      maxH: 'min(calc(2.5rem * 6 + 1.5rem), var(--floating-available-height))',
+      maxH: 'max(min(var(--dropdown-floating-max, 16rem), var(--floating-available-height)), var(--dropdown-floating-min, 10rem))',
       flexShrink: 1,
       flexDir: 'column',
     },

package/src/Components/Dropdown/Dropdown.tsx

@@ -21,22 +21,25 @@ import {
 import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import Icon from '../Icon/Icon';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
-import { DropdownOption, DropdownGroup, DropdownDetailedOption } from './DropdownOption';
+import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
 import useFloatingDropdown from './hooks/useFloatingDropdown';
 import { useSimpleSearch, NoResultsFound } from './hooks/useSimpleSearch';
 import { isSearchable } from './isNodeMatch';
 
-type DropdownSearchProps =
-  | { placeholder?: string }
-  | {
-      placeholder?: string;
-      value: string;
-      onChange: (newValue: string) => void;
-    };
-const DropdownSearch = ({ placeholder = 'Start typing to filter options', ...rest }: DropdownSearchProps) => {
+type DropdownSearchCustomProps = {
+  value: string;
+  onChange: (newValue: string) => void;
+};
+type DropdownSearchProps = { placeholder?: string; reset?: boolean };
+const DropdownSearch = ({
+  placeholder = 'Start typing to filter options',
+  reset = true,
+  ...rest
+}: DropdownSearchProps | (DropdownSearchProps & DropdownSearchCustomProps)) => {
   const { search } = useDropdownStyles();
   const { searchValue, searchOnSubmit, searchOnChange, searchRef } = useDropdownContext();
+
   const { value, onChange } = 'onChange' in rest ? rest : { value: searchValue, onChange: searchOnChange };
 
   const onChangeCB = useCallback(
@@ -45,6 +48,13 @@ const DropdownSearch = ({ placeholder = 'Start typing to filter options', ...res
     },
     [onChange],
   );
+  useEffect(() => {
+    return () => {
+      if (reset) {
+        onChange('');
+      }
+    };
+  }, [reset]);
   const onKeyDown = useCallback(
     (ev: React.KeyboardEvent) => {
       if (ev.key === 'Enter') {
@@ -74,15 +84,17 @@ const DropdownSearch = ({ placeholder = 'Start typing to filter options', ...res
 };
 export { DropdownOption, DropdownGroup, DropdownSearch, NoResultsFound, DropdownDetailedOption };
 
-type DropdownInstance = { value: string; name?: string };
-type DropdownChangeEventHandler = (ev: { target: DropdownInstance }) => void;
-export interface DropdownProps extends ChakraProps {
+type DropdownInstance<T> = { value: T; name?: string };
+type DropdownChangeEventHandler<T> = (ev: { target: DropdownInstance<T> }) => void;
+export interface DropdownProps<T> extends ChakraProps {
   name?: string;
-  onChange?: DropdownChangeEventHandler;
-  onBlur?: DropdownChangeEventHandler;
-  value?: string;
-  defaultValue?: string;
+  onChange?: DropdownChangeEventHandler<T>;
+  onBlur?: DropdownChangeEventHandler<T>;
+  value?: T;
+  defaultValue?: T;
   size?: 'small' | 'medium';
+  dropdownMaxHeight?: ChakraProps['maxH'];
+  dropdownMinHeight?: ChakraProps['minH'];
   readOnly?: boolean;
   disabled?: boolean;
   placeholder?: string;
@@ -91,31 +103,18 @@ export interface DropdownProps extends ChakraProps {
   children?: ReactNode;
 }
 
-function useOptionListWithRefs({
-  children,
-  listRef,
-  getItemProps,
-}: {
-  children: ReactNode;
-  listRef: React.MutableRefObject<(HTMLElement | null)[]>;
-  getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-}) {
+function useOptionListWithIndexes({ children }: { children: ReactNode }) {
   return useMemo(() => {
     const childList = React.Children.toArray(children);
     let idx = 0;
     const transform = (ch: ReactNode): ReactNode => {
       if (React.isValidElement(ch)) {
-        if (ch.type === DropdownOption) {
+        if (ch.type === DropdownOption || ch.type === DropdownDetailedOption) {
           const index = idx;
           idx += 1;
           return cloneElement(ch, {
-            ...getItemProps({
-              ...ch.props,
-              index,
-              ref(node) {
-                listRef.current[index] = node;
-              },
-            }),
+            ...ch.props,
+            index,
           });
         }
         if ('children' in ch.props) {
@@ -131,17 +130,18 @@ function useOptionListWithRefs({
   }, [children]);
 }
 
-type UseDropdownProps = {
-  ref: React.Ref<DropdownInstance>;
+type UseDropdownProps<T> = {
+  ref: React.Ref<DropdownInstance<T>>;
   optionsRef: React.RefObject<HTMLDivElement>;
 };
 
-function findOption(children: ReactNode, value: string): { label: ReactNode; index: number } | null {
+function findOption<T>(children: ReactNode, value: T): { label: ReactNode; index: number } | null {
   const list = React.Children.toArray(children);
   for (let i = 0; i < list.length; i++) {
     const elem = list[i];
     if (React.isValidElement(elem)) {
-      if (elem.type === DropdownOption && (elem.props.value || '') === value) {
+      const optValue = typeof elem.props.value === 'undefined' ? null : elem.props.value;
+      if (elem.type === DropdownOption && optValue === value) {
         return { label: elem.props.children, index: elem.props.index };
       }
       const ch =
@@ -154,7 +154,7 @@ function findOption(children: ReactNode, value: string): { label: ReactNode; ind
   return null;
 }
 
-function useDropdown({
+function useDropdown<T>({
   name,
   onChange,
   value,
@@ -164,12 +164,12 @@ function useDropdown({
   children,
   readOnly,
   ...rest
-}: DropdownProps & UseDropdownProps) {
+}: DropdownProps<T> & UseDropdownProps<T>) {
   const searchRef = useRef(null);
   const {
-    onClose,
+    close,
     isOpen,
-    referenceProps,
+    getReferenceProps,
     floatingProps,
     context: floatingContext,
     activeIndex,
@@ -178,7 +178,7 @@ function useDropdown({
     getItemProps,
     listRef,
   } = useFloatingDropdown({ enabled: !readOnly, optionsRef });
-  const [formValue, setFormValue] = useControllableState({
+  const [formValue, setFormValue] = useControllableState<T>({
     onChange: (newValue) => onChange?.({ target: { value: newValue, name } }),
     defaultValue,
     value,
@@ -186,25 +186,33 @@ function useDropdown({
 
   const [formLabel, setFormLabel] = useState<ReactNode>();
   useImperativeHandle(ref, () => ({ value: formValue, name }), [formValue, name]);
-  const refdChildren = useOptionListWithRefs({ children, listRef, getItemProps });
+  const refdChildren = useOptionListWithIndexes({ children });
 
   const searchOnSubmit = useCallback(() => {
     if (activeIndex !== null) {
       listRef.current[activeIndex]?.click();
     }
   }, [activeIndex]);
+  const referenceKeyDown = useCallback(
+    (ev: React.KeyboardEvent) => {
+      if (ev.key === 'Enter') {
+        ev.preventDefault();
+        searchOnSubmit();
+      }
+    },
+    [searchOnSubmit],
+  );
   const { searchValue, searchOnChange, ...searchResults } = useSimpleSearch({
     children: refdChildren,
     onSearch: () => setActiveIndex(null),
-    isOpen,
   });
 
   const onOptionSelected = useCallback(
-    (args: DropdownEventArgs) => {
+    (args: DropdownEventArgs<T>) => {
       setFormValue(args.value);
-      onClose();
+      close();
     },
-    [onClose, setFormValue],
+    [close, setFormValue],
   );
   const context = useMemo(
     () => ({
@@ -216,8 +224,19 @@ function useDropdown({
       searchValue,
       searchRef,
       searchOnSubmit,
+      listRef,
     }),
-    [formValue, onOptionSelected, activeIndex, getItemProps, searchOnChange, searchValue, searchRef, searchOnSubmit],
+    [
+      listRef,
+      formValue,
+      onOptionSelected,
+      activeIndex,
+      getItemProps,
+      searchOnChange,
+      searchValue,
+      searchRef,
+      searchOnSubmit,
+    ],
   );
 
   useEffect(() => {
@@ -229,7 +248,9 @@ function useDropdown({
   }, [refdChildren, formValue]);
   return {
     isOpen,
-    referenceProps,
+    referenceProps: getReferenceProps({
+      onKeyDown: referenceKeyDown,
+    }),
     floatingProps,
     floatingContext,
     searchOnSubmit,
@@ -242,8 +263,11 @@ function useDropdown({
   };
 }
 
-const Dropdown = forwardRef<DropdownInstance, DropdownProps>(
-  ({ readOnly, onBlur, placeholder, name, search, size = 'medium', ...props }, ref) => {
+const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<string | null>>(
+  (
+    { dropdownMaxHeight, dropdownMinHeight, readOnly, onBlur, placeholder, name, search, size = 'medium', ...props },
+    ref,
+  ) => {
     const optionsRef = useRef(null);
     const {
       context: dropdownCtx,
@@ -273,6 +297,14 @@ const Dropdown = forwardRef<DropdownInstance, DropdownProps>(
         onBlur({ target: { value: formValue, name } });
       }
     };
+    const listStyles = useMemo(
+      () => ({
+        ...dropdownStyles.list,
+        '--dropdown-floating-max': dropdownMaxHeight,
+        '--dropdown-floating-min': dropdownMinHeight,
+      }),
+      [dropdownMinHeight, dropdownMaxHeight, dropdownStyles.list],
+    );
     const searchElement = search === false ? null : search || <DropdownSearch />;
     return (
       <>
@@ -280,7 +312,7 @@ const Dropdown = forwardRef<DropdownInstance, DropdownProps>(
         <DropdownProvider context={dropdownCtx} styles={dropdownStyles}>
           <DropdownButton
             {...referenceProps}
-            aria-label={props['aria-label']}
+            {...props}
             placeholder={placeholder}
             size={size}
             formLabel={formLabel}
@@ -289,7 +321,7 @@ const Dropdown = forwardRef<DropdownInstance, DropdownProps>(
           />
           {isOpen && (
             <FloatingFocusManager initialFocus={searchRef} context={floatingContext}>
-              <chakra.div {...floatingProps} sx={dropdownStyles.list}>
+              <chakra.div {...floatingProps} sx={listStyles}>
                 {searchElement}
                 <chakra.div tabIndex={-1} ref={optionsRef} __css={dropdownStyles.options}>
                   {children}
@@ -303,4 +335,11 @@ const Dropdown = forwardRef<DropdownInstance, DropdownProps>(
   },
 );
 
+export function typedDropdown<T>() {
+  return {
+    Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<DropdownInstance<T>>>,
+    DropdownOption: DropdownOption as (p: DropdownOptionProps<T>) => JSX.Element,
+  };
+}
+
 export default Dropdown;

package/src/Components/Dropdown/DropdownButton.tsx

@@ -17,7 +17,9 @@ const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
     const iconSize = size === 'medium' ? '24' : '16';
     return (
       <chakra.button aria-readonly={readOnly} type="button" ref={ref} onBlur={blurHandler} __css={field} {...rest}>
-        <chakra.span flexGrow={1}>{formLabel || placeholder}</chakra.span>
+        <chakra.span overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" flexGrow={1}>
+          {formLabel || placeholder}
+        </chakra.span>
         <Icon aria-hidden="true" __css={icon} name="DropdownArrows" fontSize={iconSize} size={iconSize} />
       </chakra.button>
     );

package/src/Components/Dropdown/DropdownOption.tsx

@@ -1,21 +1,28 @@
-import { forwardRef, ReactNode, useId } from 'react';
+import { ReactNode, useId } from 'react';
 import { chakra } from '@chakra-ui/react';
 import { cx } from '@chakra-ui/utils';
 import Text from '../Text/Text';
 import Divider from '../Divider/Divider';
 import { useDropdownContext, useDropdownStyles } from './Dropdown.context';
 
-const DropdownOption = forwardRef<
-  HTMLDivElement,
-  { value?: string; children?: ReactNode; index?: number; 'aria-label'?: string }
->(({ value = '', children, index, ...rest }, ref) => {
+export type DropdownOptionProps<T> = {
+  value?: T | null;
+  children?: ReactNode;
+  'aria-label'?: string;
+};
+const DropdownOption = <T = string,>({ value = null, children, ...rest }: DropdownOptionProps<T>) => {
   const { item } = useDropdownStyles();
-  const ctx = useDropdownContext();
+  const ctx = useDropdownContext<T | null>();
+  const { index } = rest as { index?: number };
   return (
     <chakra.div
       role="option"
       id={useId()}
-      ref={ref}
+      ref={(node) => {
+        if (ctx.listRef.current) {
+          ctx.listRef.current[index!] = node;
+        }
+      }}
       {...rest}
       className={cx(
         value === ctx.formValue && 'bitkit-select__option-active',
@@ -24,14 +31,14 @@ const DropdownOption = forwardRef<
       __css={item}
       {...ctx.getItemProps({
         onClick() {
-          ctx.onOptionSelected({ value: value || '', index, label: children });
+          ctx.onOptionSelected({ value, index, label: children });
         },
       })}
     >
       {children}
     </chakra.div>
   );
-});
+};
 
 const DropdownGroup = ({ children, label }: { children: ReactNode; label: string }) => {
   const { group } = useDropdownStyles();
@@ -54,16 +61,15 @@ const DropdownDetailedOption = ({
   title,
   subtitle,
   value,
-  index,
+  ...rest
 }: {
   icon: ReactNode;
   title: string;
   subtitle: string;
   value?: string;
-  index?: number;
 }) => {
   return (
-    <DropdownOption value={value} index={index} aria-label={title}>
+    <DropdownOption value={value} {...rest} aria-label={title}>
       <chakra.div alignItems="center" gap="12" display="flex" flexDir="row">
         {icon}
         <chakra.div>