Feat: Combobox

package.json

@@ -67,6 +67,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.11.8",
+    "@ariakit/react": "0.4.13",
     "@headlessui/react": "^1.7.17",
     "@polkadot/api": "13.1.1",
     "@polkadot/keyring": "13.1.1",

src/renderer/features/fellowship-members/components/MembersModal.tsx

@@ -47,7 +47,7 @@ export const MembersModal = ({ children }: PropsWithChildren) => {
       <Modal.Content>
         <Box padding={[4, 5]} gap={6} fillContainer>
           {members.length !== 0 ? (
-            <SearchInput autoFocus placeholder={t('general.input.searchLabel')} value={query} onChange={setQuery} />
+            <SearchInput autoFocus value={query} placeholder={t('general.input.searchLabel')} onChange={setQuery} />
           ) : null}
 
           {filteredMembers.length === 0 ? (

src/renderer/pages/Onboarding/Vault/ManageMultishard/ManageMultishard.tsx

@@ -277,7 +277,7 @@ export const ManageMultishard = ({ seedInfo, onBack, onClose, onComplete }: Prop
                     disabled={inactiveAccounts[getAccountId(index)]}
                     placeholder={t('onboarding.paritySigner.accountNamePlaceholder')}
                     value={accountNames[getAccountId(index)] || ''}
-                    onChange={(name) => updateAccountName(name, index)}
+                    onChange={(value) => updateAccountName(value, index)}
                   />
                 </div>
                 <ul className="flex flex-col gap-2.5">
@@ -317,7 +317,7 @@ export const ManageMultishard = ({ seedInfo, onBack, onClose, onComplete }: Prop
                                 disabled={inactiveAccounts[getAccountId(index, chainId, derivedKeyIndex)]}
                                 placeholder={t('onboarding.paritySigner.accountNamePlaceholder')}
                                 value={accountNames[getAccountId(index, chainId, derivedKeyIndex)] || ''}
-                                onChange={(name) => updateAccountName(name, index, chainId, derivedKeyIndex)}
+                                onChange={(value) => updateAccountName(value, index, chainId, derivedKeyIndex)}
                               />
                               <IconButton
                                 name={

src/renderer/pages/Staking/ui/ShardedList.tsx

@@ -74,7 +74,7 @@ export const ShardedList = ({
             <Checkbox
               checked={shardsStats.selected === shardsStake.length}
               semiChecked={shardsStats.selected > 0 && shardsStats.selected < shardsStake.length}
-              onChange={(checked) => selectAllShards(checked)}
+              onChange={selectAllShards}
             >
               <div className="grid grid-cols-[174px,104px,104px] items-center gap-x-6">
                 <div className="flex items-center gap-x-2">

src/renderer/shared/ui-kit/Combobox/Combobox.stories.tsx

@@ -0,0 +1,55 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { noop } from 'lodash';
+
+import { Combobox } from './Combobox';
+
+const meta: Meta<typeof Combobox> = {
+  title: 'Design System/kit/Combobox',
+  component: Combobox,
+  parameters: {
+    layout: 'centered',
+  },
+  render: (params) => {
+    return (
+      <Combobox {...params} placeholder="Type something ..." value="" onChange={noop}>
+        <Combobox.Content>
+          {[
+            { text: '🍎 Apple', value: 'Apple' },
+            { text: '🍇 Grape', value: 'Grape' },
+            { text: '🍊 Orange', value: 'Orange' },
+            { text: '🍓 Strawberry', value: 'Strawberry' },
+            { text: '🍉 Watermelon', value: 'Watermelon' },
+          ].map((item) => (
+            <Combobox.Item key={item.text} value={item.value}>
+              {item.text}
+            </Combobox.Item>
+          ))}
+        </Combobox.Content>
+      </Combobox>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Combobox>;
+
+export const Default: Story = {};
+
+export const Small: Story = {
+  args: {
+    height: 'sm',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+};

src/renderer/shared/ui-kit/Combobox/Combobox.tsx

@@ -0,0 +1,154 @@
+import * as Ariakit from '@ariakit/react';
+import * as RadixPopover from '@radix-ui/react-popover';
+import {
+  Children,
+  type ComponentProps,
+  type PropsWithChildren,
+  type RefObject,
+  createContext,
+  startTransition,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { cnTw } from '@/shared/lib/utils';
+import { Input } from '../Input/Input';
+import { ScrollArea } from '../ScrollArea/ScrollArea';
+import { Surface } from '../Surface/Surface';
+import { useTheme } from '../Theme/useTheme';
+import { gridSpaceConverter } from '../_helpers/gridSpaceConverter';
+
+type ContextProps = {
+  testId?: string;
+  open?: boolean;
+  onOpenChange?: (value: boolean) => void;
+};
+
+type ExpandedContextProps = {
+  comboboxRef?: RefObject<HTMLInputElement>;
+  listboxRef?: RefObject<HTMLDivElement>;
+};
+
+const Context = createContext<ContextProps & ExpandedContextProps>({});
+
+type InputProps = Pick<ComponentProps<typeof Input>, 'disabled' | 'invalid' | 'placeholder' | 'height'>;
+
+type ControlledPopoverProps = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+type RootProps = PropsWithChildren<ControlledPopoverProps & ContextProps & InputProps>;
+
+const Root = ({ testId = 'Combobox', value, onChange, children, ...inputProps }: RootProps) => {
+  const comboboxRef = useRef<HTMLInputElement>(null);
+  const listboxRef = useRef<HTMLDivElement>(null);
+
+  const [open, onOpenChange] = useState(false);
+
+  const ctx = useMemo(() => ({ open, onOpenChange, testId, comboboxRef, listboxRef }), [open, testId]);
+
+  return (
+    <Context.Provider value={ctx}>
+      <RadixPopover.Root modal open={open} onOpenChange={onOpenChange}>
+        <Ariakit.ComboboxProvider
+          open={open}
+          setOpen={onOpenChange}
+          defaultValue={value}
+          defaultSelectedValue={value}
+          setSelectedValue={onChange}
+          setValue={(value) => startTransition(() => onChange(value))}
+        >
+          <Trigger {...inputProps} />
+          {children}
+        </Ariakit.ComboboxProvider>
+      </RadixPopover.Root>
+    </Context.Provider>
+  );
+};
+
+const Trigger = ({ placeholder, ...inputProps }: InputProps) => {
+  const { onOpenChange, comboboxRef } = useContext(Context);
+
+  return (
+    <RadixPopover.Anchor asChild>
+      <Ariakit.Combobox
+        autoSelect
+        autoComplete="both"
+        ref={comboboxRef}
+        placeholder={placeholder}
+        render={({ onChange, ...props }) => <Input {...props} {...inputProps} onChangeEvent={onChange} />}
+        onFocus={() => onOpenChange?.(true)}
+        onBlur={() => onOpenChange?.(false)}
+      />
+    </RadixPopover.Anchor>
+  );
+};
+
+const Content = ({ children }: PropsWithChildren) => {
+  const { portalContainer } = useTheme();
+  const { testId, comboboxRef, listboxRef } = useContext(Context);
+
+  if (Children.count(children) === 0) return null;
+
+  return (
+    <RadixPopover.Portal container={portalContainer}>
+      <RadixPopover.Content
+        asChild
+        hideWhenDetached
+        style={{ width: 'var(--radix-popover-trigger-width)' }}
+        collisionPadding={gridSpaceConverter(2)}
+        sideOffset={gridSpaceConverter(2)}
+        data-testid={testId}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onInteractOutside={(event) => {
+          const target = event.target as Element | null;
+          const isCombobox = target === comboboxRef?.current;
+          const inListbox = target && listboxRef?.current?.contains(target);
+          if (isCombobox || inListbox) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <Surface
+          elevation={1}
+          className={cnTw(
+            'flex h-max max-h-[--radix-popper-available-height] flex-col',
+            'overflow-hidden duration-100 animate-in fade-in zoom-in-95',
+          )}
+        >
+          <ScrollArea>
+            <Ariakit.ComboboxList className="flex flex-col gap-y-1 p-1" ref={listboxRef} role="listbox">
+              {children}
+            </Ariakit.ComboboxList>
+          </ScrollArea>
+        </Surface>
+      </RadixPopover.Content>
+    </RadixPopover.Portal>
+  );
+};
+
+type ItemProps = {
+  value: string;
+};
+const Item = ({ value, children }: PropsWithChildren<ItemProps>) => {
+  return (
+    <Ariakit.ComboboxItem
+      focusOnHover
+      value={value}
+      className={cnTw(
+        'flex cursor-pointer rounded p-2 text-footnote text-text-secondary',
+        'bg-block-background-default data-[active-item]:bg-block-background-hover',
+      )}
+    >
+      {children}
+    </Ariakit.ComboboxItem>
+  );
+};
+
+export const Combobox = Object.assign(Root, {
+  Content,
+  Item,
+});

src/renderer/shared/ui-kit/Input/Input.test.tsx

@@ -19,6 +19,6 @@ describe('ui/Inputs/Input', () => {
     const input = screen.getByRole('textbox');
     await user.type(input, 'x');
 
-    expect(spyChange).toBeCalledWith('x');
+    expect(spyChange).toHaveBeenCalledWith('x');
   });
 });

src/renderer/shared/ui-kit/Input/Input.tsx

@@ -1,4 +1,5 @@
 import {
+  type ChangeEvent,
   type ClipboardEvent,
   type ComponentPropsWithoutRef,
   type ReactNode,
@@ -21,6 +22,7 @@ type ComponentProps = {
   prefixElement?: ReactNode;
   suffixElement?: ReactNode;
   onChange?: (value: string) => void;
+  onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void;
   onPaste?: (event: ClipboardEvent) => void;
 };
 
@@ -42,6 +44,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       prefixElement,
       suffixElement,
       onChange,
+      onChangeEvent,
       onPaste,
       ...props
     },
@@ -96,7 +99,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           autoFocus={autoFocus}
           disabled={disabled}
           spellCheck={spellCheck}
-          onChange={(event) => onChange?.(event.target.value)}
+          onChange={(event) => {
+            onChange?.(event.target.value);
+            onChangeEvent?.(event);
+          }}
           onPaste={(event) => onPaste?.(event)}
           {...props}
         />

src/renderer/shared/ui-kit/ScrollArea/ScrollArea.tsx

@@ -12,7 +12,7 @@ type Props = PropsWithChildren<
   }
 >;
 
-export const ScrollArea = ({ onScroll, orientation = 'vertical', children }: Props) => (
+export const ScrollArea = ({ orientation = 'vertical', children, onScroll }: Props) => (
   <RadixScrollArea.Root type="scroll" scrollHideDelay={500} className="flex h-full w-full flex-col overflow-hidden">
     <RadixScrollArea.Viewport className="h-full w-full" onScroll={onScroll}>
       {children}

src/renderer/shared/ui-kit/index.ts

@@ -6,6 +6,7 @@ export { ThemeProvider } from './Theme/ThemeProvider';
 export { ScrollArea } from './ScrollArea/ScrollArea';
 export { InputFile } from './InputFile/InputFile';
 export { Checkbox } from './Checkbox/Checkbox';
+export { Combobox } from './Combobox/Combobox';
 export { Dropdown } from './Dropdown/Dropdown';
 export { Skeleton } from './Skeleton/Skeleton';
 export { Carousel } from './Carousel/Carousel';

src/renderer/shared/ui/Dropdowns/Combobox/Combobox.tsx

@@ -1,5 +1,5 @@
 import { Combobox as HeadlessCombobox, Transition } from '@headlessui/react';
-import { type ComponentProps, Fragment } from 'react';
+import { type ChangeEvent, type ComponentProps, Fragment } from 'react';
 
 import { cnTw } from '@/shared/lib/utils';
 import { Input } from '@/shared/ui-kit';
@@ -46,8 +46,7 @@ export const Combobox = ({
         <HeadlessCombobox.Input
           as={Input}
           displayValue={(option: ComboboxOption) => option.value}
-          // @ts-expect-error onChange doesn't respect custom <Input /> onChange type
-          onChange={onInput}
+          onChangeEvent={(e: ChangeEvent<HTMLInputElement>) => onInput(e.target.value)}
           {...inputProps}
         />