fix: Input now support refs

src/components/data-entry/Input/Input.stories.tsx

@@ -1,5 +1,11 @@
-import { Input } from 'src/components/data-entry/Input/Input'
+import { Input, type InputRef } from 'src/components/data-entry/Input'
+import { Button } from 'src/components/general/Button/Button'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { ExampleStory } from 'src/utils/ExampleStory'
+import { useRef } from 'react'
+import { Space } from 'src/components'
+import { expect, userEvent } from '@storybook/test'
+
 const meta: Meta<typeof Input> = {
   title: 'Aquarium/Data Entry/Input',
   component: Input,
@@ -124,4 +130,62 @@ export const WithPrefixAndSuffix: Story = {
     suffix: '.com',
     placeholder: 'Email',
   },
-}
+}
+
+export const WithFocusManagement: Story = {
+  args: {
+    value: 'Test value',
+  },
+  render: (props, meta) => {
+    const inputRef = useRef<InputRef>(null)
+
+    const focus = (cursor: 'start' | 'end' | 'all' = 'start') => {
+      inputRef.current?.focus({
+        cursor,
+      })
+    }
+
+    return (
+      <ExampleStory title={meta.name}>
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Space wrap>
+            <Button
+              onClick={() => {
+                focus('start')
+              }}>
+              Focus at start
+            </Button>
+            <Button
+              onClick={() => {
+                focus('end')
+              }}>
+              Focus at last
+            </Button>
+            <Button
+              onClick={() => {
+                focus('all')
+              }}>
+              Focus to select all
+            </Button>
+          </Space>
+          <br />
+          <Input {...props} defaultValue="Welcome to the Aquarium" ref={inputRef} />
+        </Space>
+      </ExampleStory>
+    )
+  },
+  play: async story => {
+    const input = story.canvasElement.querySelector('input')
+    await expect(input).toBeInTheDocument()
+
+    const buttons = story.canvasElement.querySelectorAll('button')
+    await expect(buttons.length).toBe(3)
+
+    for (const button of buttons) {
+      input?.blur()
+      await userEvent.click(button)
+      await expect(input).toHaveFocus()
+      input?.blur()
+    }
+  },
+}

src/components/data-entry/Input/Input.tsx

@@ -2,20 +2,17 @@ import { Input as AntInput } from 'antd'
 import { type InputProps as AntInputProps } from 'antd'
 import { ConfigProvider } from 'src/components'
 import { type InputRef } from 'antd'
+import { forwardRef, type Ref } from 'react'
 
 export interface IInputProps extends AntInputProps {}
 
-export const Input = (props: IInputProps) => {
+const Input = (props: IInputProps, ref: Ref<InputRef>) => {
   return (
     <ConfigProvider>
-      <AntInput {...props} />
+      <AntInput {...props} ref={ref} />
     </ConfigProvider>
   )
 }
 
-Input.Group = AntInput.Group
-Input.Password = AntInput.Password
-Input.Search = AntInput.Search
-Input.TextArea = AntInput.TextArea
-
-export { type InputRef }
+const InputWithRef = forwardRef(Input)
+export { InputWithRef as InternalInput }

src/components/data-entry/Input/index.ts

@@ -0,0 +1,19 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react'
+import { Input as AntInput, type InputRef } from 'antd'
+import { InternalInput, type IInputProps } from 'src/components/data-entry/Input/Input'
+
+type CompoundedComponent = ForwardRefExoticComponent<IInputProps & RefAttributes<InputRef>> & {
+  Group: typeof AntInput.Group
+  Search: typeof AntInput.Search
+  TextArea: typeof AntInput.TextArea
+  Password: typeof AntInput.Password
+}
+
+const Input = InternalInput as CompoundedComponent
+
+Input.Group = AntInput.Group
+Input.Password = AntInput.Password
+Input.Search = AntInput.Search
+Input.TextArea = AntInput.TextArea
+
+export { Input, type InputRef, type IInputProps }

src/components/index.ts

@@ -11,7 +11,7 @@ export { Slider, type ISliderProps } from './data-entry/Slider/Slider'
 export { Cascader, type ICascaderProps } from './data-entry/Cascader/Cascader'
 export { DatePicker, type IDatePickerProps } from './data-entry/DatePicker/DatePicker'
 export { Checkbox, type ICheckboxProps } from './data-entry/Checkbox/Checkbox'
-export { Input, type IInputProps } from './data-entry/Input/Input'
+export { Input, type IInputProps, type InputRef } from './data-entry/Input'
 export { InputNumber, type IInputNumberProps } from './data-entry/InputNumber/InputNumber'
 export { Switch, type ISwitchProps } from './data-entry/Switch/Switch'
 export { Upload, type IUploadProps } from './data-entry/Upload/Upload'

src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx

@@ -7,6 +7,7 @@ import {
   type INavigationOrg,
   type INavigationWorkspace,
   type IWorkspaceSelectorDisplayItem,
+  type InputRef,
   Popover,
 } from 'src/components'
 import { Flex } from 'src/components'
@@ -17,10 +18,6 @@ import { useEffect } from 'react'
 import { useMemo } from 'react'
 import { debounce, hasImageAtSrc } from 'src/utils/utils'
 import { getInitials } from 'src/utils/utils'
-
-// TODO: Need to make our Input component comply with forwardRef to be able to import it from src/components
-// As soon as https://github.com/mParticle/aquarium/pull/123 is merged
-import { type InputRef } from 'antd'
 import { WorkspaceSelectorContent } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorContent'
 import { useMount } from 'src/hooks/useMount'
 import { PaddingXxs } from 'src/styles/style'
@@ -144,8 +141,7 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) {
           signoutOptions={props.signoutOptions}
           menuItems={menuItems}
         />
-      }
-    >
+      }>
       <div className="globalNavigation__item workspaceSelector__menuItem">
         <Avatar {...props.avatarOptions} className="workspaceSelector__avatar">
           {getInitialsIfNoImage(hasImage, workspaceInitials)}

src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorContent.tsx

@@ -1,10 +1,9 @@
 import { type ChangeEvent, type RefObject } from 'react'
-import { Input, type InputRef } from 'antd'
 import type { IWorkspaceSelectorProps } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector'
-import type { IWorkspaceSelectorDisplayItem } from 'src/components'
+import { Input, type InputRef, type IWorkspaceSelectorDisplayItem } from 'src/components'
 import { WorkspaceSelectorContentItems } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorContentItems'
-import { WorkspaceNoResults } from "src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceNoResults";
-import { WorkspaceSignout } from "src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSignout";
+import { WorkspaceNoResults } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceNoResults'
+import { WorkspaceSignout } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSignout'
 
 type WorkspaceSelectorContentProps = {
   onSearch: (e: ChangeEvent<HTMLInputElement>) => void
@@ -39,4 +38,4 @@ export function WorkspaceSelectorContent(props: WorkspaceSelectorContentProps) {
       <WorkspaceSignout signoutOptions={signoutOptions} />
     </div>
   )
-}
+}

src/components/navigation/GlobalNavigation/global-navigation.css

@@ -279,4 +279,4 @@
 .globalNavigation__mpSvg {
   width: 28px;
   height: var(--size-lg);
-}
+}

src/styles/style.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 18:40:59 GMT
+ * Generated on Tue, 19 Mar 2024 18:51:20 GMT
  */
 
 export const Blue = "#1677ff";