feat(SearchInput): make whole input interactive (#4868)

* feat(SearchInput): make whole input interactive

* fix: add changeset and add more unit tests

Author: matthprost

.changeset/plain-suits-wait.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`<SearchInput />` is now fully interactive

packages/ui/src/components/SearchInput/Key.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import { Text } from '../Text'
 
 const Container = styled.div`
+  cursor: text;
   background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
   border-radius: ${({ theme }) => theme.radii.default};
   border: 0.5px solid ${({ theme }) => theme.colors.neutral.border};
@@ -54,6 +55,7 @@ export const Key = ({ children, disabled }: KeyProps) => {
     <Container
       data-disabled={disabled}
       data-children-length={children.length > 1}
+      data-testid={`key-${children}`}
     >
       <Text as="span" variant="caption" sentiment="neutral" disabled={disabled}>
         {isSpecialKey

packages/ui/src/components/SearchInput/KeyGroup.tsx

@@ -1,18 +1,24 @@
+import styled from '@emotion/styled'
 import type { ComponentProps } from 'react'
 import { Stack } from '../Stack'
 import { Key } from './Key'
 
+const ClickableStack = styled(Stack)`
+  cursor: text;
+`
+
 type KeyGroupProps = {
   keys: ComponentProps<typeof Key>['children'][]
   disabled: ComponentProps<typeof Key>['disabled']
+  onClick?: () => void
 }
 
-export const KeyGroup = ({ keys, disabled }: KeyGroupProps) => (
-  <Stack gap={0.5} direction="row">
+export const KeyGroup = ({ keys, disabled, onClick }: KeyGroupProps) => (
+  <ClickableStack gap={0.5} direction="row" onClick={onClick}>
     {keys.map(key => (
       <Key key={key} disabled={disabled}>
         {key}
       </Key>
     ))}
-  </Stack>
+  </ClickableStack>
 )