fix(components): select types

interlay · Oct 2, 2023 · 12fe0db · 12fe0db
1 parent 9bd412b
commit 12fe0db
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
@@ -32,7 +32,7 @@ type ModalAttrs = {
   modalProps?: { ref?: React.Ref<HTMLDivElement> } & Omit<SelectModalProps, 'state' | 'isOpen' | 'onClose' | 'id'>;
 };
 
-type ConditionalAttrs = ListboxAttrs | ModalAttrs;
+// type ConditionalAttrs = ListboxAttrs | ModalAttrs;
 
 type InheritAttrs<T = SelectObject> = Omit<
   CollectionBase<T> & Omit<FieldProps, 'children'> & AriaSelectProps<T>,
@@ -41,7 +41,13 @@ type InheritAttrs<T = SelectObject> = Omit<
 
 type NativeAttrs<T = SelectObject> = Omit<React.InputHTMLAttributes<Element>, keyof Props<T> | 'children'>;
 
-type SelectProps<T = SelectObject> = Props<T> & ConditionalAttrs & NativeAttrs<T> & InheritAttrs<T>;
+type CommonProps<T = SelectObject> = Props<T> & NativeAttrs<T> & InheritAttrs<T>;
+
+type ListboxSelectProps<T = SelectObject> = CommonProps<T> & ListboxAttrs;
+
+type ModalSelectProps<T = SelectObject> = CommonProps<T> & ModalAttrs;
+
+type SelectProps<T = SelectObject> = ModalSelectProps<T> | ListboxSelectProps<T>;
 
 // TODO: listbox is not implemented
 const Select = <T extends SelectObject = SelectObject>(
@@ -172,4 +178,4 @@ const _Select = forwardRef(Select) as <T extends SelectObject = SelectObject>(
 Select.displayName = 'Select';
 
 export { _Select as Select };
-export type { SelectProps };
+export type { SelectProps, ListboxSelectProps, ModalSelectProps };
diff --git a/packages/components/src/Select/index.tsx b/packages/components/src/Select/index.tsx
@@ -1,4 +1,4 @@
-export type { SelectProps } from './Select';
+export type { SelectProps, ListboxSelectProps, ModalSelectProps } from './Select';
 export { Select } from './Select';
 export type { SelectTriggerProps } from './SelectTrigger';
 export { SelectTrigger } from './SelectTrigger';

diff --git a/packages/components/src/TokenInput/TokenSelect.tsx b/packages/components/src/TokenInput/TokenSelect.tsx
@@ -1,6 +1,6 @@
 import { CoinIcon } from '../CoinIcon';
 import { Flex } from '../Flex';
-import { Item, Select, SelectProps } from '../Select';
+import { Item, Select, ModalSelectProps } from '../Select';
 import { Span } from '../Text';
 
 import { StyledTicker, StyledTokenSelect } from './TokenInput.style';
@@ -20,7 +20,7 @@ type TokenData = {
   balanceUSD: number;
 };
 
-type TokenSelectProps = Omit<SelectProps<TokenData>, 'children' | 'type'>;
+type TokenSelectProps = Omit<ModalSelectProps<TokenData>, 'children' | 'type'>;
 
 const TokenSelect = (props: TokenSelectProps): JSX.Element => (
   <Select<TokenData>

diff --git a/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx b/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx
@@ -191,6 +191,13 @@ describe('TokenInput', () => {
       await testA11y(<TokenInput label='label' selectProps={{ items }} type='selectable' />);
     });
 
+    it('ref should be forwarded to the modal', () => {
+      const ref = createRef<HTMLInputElement>();
+
+      render(<TokenInput label='label' selectProps={{ items, modalProps: { ref } }} type='selectable' />);
+      expect(ref.current).not.toBeNull();
+    });
+
     it('should render empty value', () => {
       render(<TokenInput label='label' selectProps={{ items }} type='selectable' />);