fix: more small fixes

apps/website/src/components/table-issues/table-issues.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 
 import { Avatar, Button, Input, Tag, Text } from '@status-im/components'
 import { ProfileIcon, SearchIcon } from '@status-im/icons'
@@ -10,7 +10,6 @@ import { DropdownFilter, DropdownSort, Tabs } from './filters'
 
 import type { DropdownFilterProps } from './filters/dropdown-filter'
 import type { DropdownSortProps } from './filters/dropdown-sort'
-import type { TextInput } from 'react-native'
 
 const issues = [
   {
@@ -216,7 +215,6 @@ const sortOptions: DropdownSortProps['data'] = [
 
 const TableIssues = () => {
   const [issuesSearchText, setIssuesSearchText] = useState('')
-  const inputRef = useRef<TextInput>(null)
 
   const currentBreakpoint = useCurrentBreakpoint()
 
@@ -238,7 +236,6 @@ const TableIssues = () => {
                       onChangeText={setIssuesSearchText}
                       variant="retractable"
                       direction={currentBreakpoint === '2xl' ? 'rtl' : 'ltr'}
-                      ref={inputRef}
                     />
                   </div>
 

packages/components/src/dropdown-menu/dropdown-menu.tsx

@@ -12,7 +12,7 @@ import {
 import { CheckIcon } from '@status-im/icons'
 import { Stack, styled } from '@tamagui/core'
 
-import { Checkbox } from '../selectors'
+import { Checkbox } from '../checkbox'
 import { Text } from '../text'
 
 interface Props {

packages/components/src/index.tsx

@@ -1,6 +1,7 @@
 export * from './anchor-actions'
 export * from './avatar'
 export * from './button'
+export * from './checkbox'
 export * from './community'
 export * from './composer'
 export * from './context-tag'

packages/components/src/input/input.stories.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { SearchIcon } from '@status-im/icons'
 
 import { Input } from './input'
 
 import type { Meta, StoryObj } from '@storybook/react'
-import type { TextInput } from 'react-native'
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta: Meta<typeof Input> = {
@@ -19,7 +18,6 @@ type Story = StoryObj<typeof Input>
 export const Primary: Story = {
   args: {
     placeholder: 'Type something...',
-    // children: 'Click me',
   },
 }
 
@@ -56,13 +54,9 @@ const InputSearch = () => {
 const InputSearchMinimzed = () => {
   const [value, setValue] = useState('')
 
-  const [isMinimized, setIsMinimized] = useState(true)
-  const inputRef = useRef<TextInput>(null)
-
   return (
     <>
       <Input
-        onHandleMinimized={() => setIsMinimized(!isMinimized)}
         placeholder="Please type something..."
         value={value}
         onChangeText={setValue}
@@ -70,8 +64,7 @@ const InputSearchMinimzed = () => {
         onClear={() => setValue('')}
         size={32}
         direction="rtl"
-        minimized={isMinimized}
+        variant="retractable"
-        ref={inputRef}
       />
     </>
   )
@@ -89,7 +82,6 @@ export const WithError: Story = {
   args: {
     placeholder: 'Type something...',
     error: true,
-    // children: 'Click me',
   },
 }
 

packages/components/src/input/input.tsx

@@ -1,5 +1,6 @@
-import { cloneElement, forwardRef, useState } from 'react'
+import { cloneElement, forwardRef, useRef, useState } from 'react'
 
+import { composeRefs } from '@radix-ui/react-compose-refs'
 import { ClearIcon } from '@status-im/icons'
 import { setupReactNative, Stack, styled } from '@tamagui/core'
 import { focusableInputHOC } from '@tamagui/focusable'
@@ -51,6 +52,8 @@ const _Input = (props: Props, ref: Ref<TextInput>) => {
 
   const isRetractable = variant === 'retractable'
 
+  const inputRef = useRef<TextInput>(null)
+
   return (
     <Stack flexDirection={direction === 'ltr' ? 'row' : 'row-reverse'}>
       {Boolean(label || endLabel) && (
@@ -80,7 +83,7 @@ const _Input = (props: Props, ref: Ref<TextInput>) => {
 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ref is not inferred correctly here
-            ref?.current?.focus()
+            inputRef?.current?.focus()
           }
         }}
       >
@@ -91,7 +94,7 @@ const _Input = (props: Props, ref: Ref<TextInput>) => {
           value={value}
           placeholder={isMinimized && !value ? '' : placeholder}
           flex={1}
-          ref={ref}
+          ref={composeRefs(ref, inputRef)}
           onBlur={() => {
             if (!value && isRetractable && !isMinimized) {
               setIsMinimized(true)