mParticle · tibuurcio · Mar 1, 2024 · Mar 1, 2024 · Mar 14, 2024 · Mar 14, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -2,6 +2,5 @@
   "semi": false,
   "singleQuote": true,
   "arrowParens": "avoid",
-  "printWidth": 120,
-  "bracketSameLine": true
+  "printWidth": 120
 }
diff --git a/design/LightTheme.ts b/design/LightTheme.ts
@@ -138,4 +138,4 @@ export const LightTheme: IMpThemeConfig = {
       mpColorBorderDisabled: '#dcdcd8',
     },
   },
-}
+}
diff --git a/src/components/data-entry/Input/Input.stories.tsx b/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,
@@ -125,3 +131,61 @@ export const WithPrefixAndSuffix: Story = {
     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()
+    }
+  },
+}
diff --git a/src/components/data-entry/Input/Input.tsx b/src/components/data-entry/Input/Input.tsx
@@ -2,20 +2,19 @@ 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 { type InputRef }
 
-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
+const InputWithRef = forwardRef(Input)
+export { InputWithRef as InternalInput }
diff --git a/src/components/data-entry/Input/index.ts b/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 }
diff --git a/src/components/data-entry/Mentions/Mentions.stories.tsx b/src/components/data-entry/Mentions/Mentions.stories.tsx
@@ -249,13 +249,15 @@ export const ExampleForm: Story = {
           layout="horizontal"
           onFinish={() => {
             void onFinish()
-          }}>
+          }}
+        >
           <Form.Item
             name="coders"
             label="Top coders"
             labelCol={{ span: 6 }}
             wrapperCol={{ span: 16 }}
-            rules={[{ validator: checkMention }]}>
+            rules={[{ validator: checkMention }]}
+          >
             <Mentions
               rows={1}
               options={[
@@ -279,7 +281,8 @@ export const ExampleForm: Story = {
             label="Bio"
             labelCol={{ span: 6 }}
             wrapperCol={{ span: 16 }}
-            rules={[{ required: true }]}>
+            rules={[{ required: true }]}
+          >
             <Mentions
               rows={3}
               placeholder="You can use @ to ref user here"

diff --git a/src/components/index.ts b/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'

diff --git a/src/components/layout/Flex/Flex.stories.tsx b/src/components/layout/Flex/Flex.stories.tsx
@@ -23,7 +23,8 @@ const meta: Meta<typeof Flex> = {
           height: 108,
           borderRadius: 6,
           border: '1px solid #40a9ff',
-        }}>
+        }}
+      >
         {Array.from({ length: 4 }).map((_, i) => (
           <div
             key={i}
@@ -136,8 +137,9 @@ export const ExampleBasic: Story = {
           <Radio.Group
             value={value}
             onChange={e => {
-              setValue(e.target.value)
-            }}>
+              setValue(e.target.value as string)
+            }}
+          >
             <Radio value="horizontal">horizontal</Radio>
             <Radio value="vertical">vertical</Radio>
           </Radio.Group>
@@ -198,8 +200,9 @@ export const ExampleGap: Story = {
           <Radio.Group
             value={gapSize}
             onChange={e => {
-              setGapSize(e.target.value)
-            }}>
+              setGapSize(e.target.value as SizeType | 'customize')
+            }}
+          >
             {['small', 'middle', 'large', 'customize'].map(size => (
               <Radio key={size} value={size}>
                 {size}

diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx
@@ -84,7 +84,8 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
                   className="globalNavigation__mpHome"
                   onClick={() => {
                     props.onMpHomeClick()
-                  }}>
+                  }}
+                >
                   <MpLogo className="globalNavigation__mpSvg" />
                 </Center>
               </Tooltip>
@@ -94,4 +95,4 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
       </Layout.Sider>
     </Layout>
   )
-}
+}
diff --git a/src/components/navigation/GlobalNavigation/NavigationSearch.tsx b/src/components/navigation/GlobalNavigation/NavigationSearch.tsx
@@ -19,7 +19,8 @@ export function NavigationSearch(props: INavigationSearchProps) {
             <>Search</>
             <>{getOS() === 'Macintosh' ? 'Cmd' : 'Ctrl'} + K</>
           </Space>
-        }>
+        }
+      >
         <Center className="globalNavigation__searchButtonWrapper">
           <Button
             className="globalNavigation__searchButton"

diff --git a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx
@@ -9,4 +9,4 @@ export function SuiteLogo(props: IGlobalNavigationLogo) {
       {props.label}
     </Center>
   )
-}
+}
diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx b/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'
@@ -151,12 +148,14 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) {
           signoutOptions={props.signoutOptions}
           menuItems={menuItems}
         />
-      }>
+      }
+    >
       <div
         className="globalNavigation__item workspaceSelector__menuItem"
         onClick={e => {
           focusOnInput(true)
-        }}>
+        }}
+      >
         <Avatar {...props.avatarOptions} className="workspaceSelector__avatar">
           {getInitialsIfNoImage(hasImage, workspaceInitials)}
         </Avatar>

diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorContent.tsx b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorContent.tsx
@@ -1,7 +1,6 @@
 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'

diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSignout.tsx b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSignout.tsx
@@ -8,7 +8,8 @@ export const WorkspaceSignout = ({ signoutOptions }: { signoutOptions: IWorkspac
       type="primary"
       onClick={_e => {
         signoutOptions?.onSignout()
-      }}>
+      }}
+    >
       {signoutOptions?.label ?? 'Sign Out of mParticle'}
     </Button>
   </div>

diff --git a/src/components/navigation/GlobalNavigation/global-navigation.css b/src/components/navigation/GlobalNavigation/global-navigation.css
@@ -152,7 +152,7 @@
 .navigationCreate__item {
   height: 100% !important;
   min-height: 100% !important;
-  padding: var(--padding-xxs) 0;
+  padding: var(--padding-xxs) 0;  
 }
 
 .navigationCreate__item .ant-flex {

diff --git a/src/styles/_variables.css b/src/styles/_variables.css
@@ -1,17 +1,17 @@
 :root {
   --blue: #1677ff;
-  --purple: #722ed1;
-  --cyan: #13c2c2;
-  --green: #52c41a;
-  --magenta: #eb2f96;
+  --purple: #722ED1;
+  --cyan: #13C2C2;
+  --green: #52C41A;
+  --magenta: #EB2F96;
   --pink: #eb2f96;
-  --red: #f5222d;
-  --orange: #fa8c16;
-  --yellow: #fadb14;
-  --volcano: #fa541c;
-  --geekblue: #2f54eb;
-  --gold: #faad14;
-  --lime: #a0d911;
+  --red: #F5222D;
+  --orange: #FA8C16;
+  --yellow: #FADB14;
+  --volcano: #FA541C;
+  --geekblue: #2F54EB;
+  --gold: #FAAD14;
+  --lime: #A0D911;
   --color-primary: #3600d1;
   --color-success: #52c41a;
   --color-warning: #faad14;
@@ -20,8 +20,7 @@
   --color-link: #1677ff;
   --color-text-base: #0f0e0e;
   --color-bg-base: #fff;
-  --font-family: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-family-code: 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   --font-size: 14px;
   --line-width: 1px;
@@ -357,11 +356,9 @@
   --margin-lg: 24px;
   --margin-xl: 32px;
   --margin-xxl: 48px;
-  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  --box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  --box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
-    0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --box-shadow:  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ;
+  --box-shadow-secondary:  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ;
+  --box-shadow-tertiary:  0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02) ;
   --screen-xs: 480px;
   --screen-xs-min: 480px;
   --screen-xs-max: 575px;
@@ -380,16 +377,11 @@
   --screen-xxl: 1600px;
   --screen-xxl-min: 1600px;
   --box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
-  --box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
-    0 5px 12px 4px rgba(0, 0, 0, 0.09);
-  --box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12),
-    -9px 0 28px 8px rgba(0, 0, 0, 0.05);
-  --box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12),
-    9px 0 28px 8px rgba(0, 0, 0, 0.05);
-  --box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  --box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 -9px 28px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-card:  0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) ;
+  --box-shadow-drawer-right:  -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05) ;
+  --box-shadow-drawer-left:  6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05) ;
+  --box-shadow-drawer-up:  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ;
+  --box-shadow-drawer-down:  0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05) ;
   --box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
   --box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
   --box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);
-Original file line number
+Diff line change
@@ Expand Up / @@ -138,4 +138,4 @@ export const LightTheme: IMpThemeConfig = { @@
           mpColorBorderDisabled: '#dcdcd8',
         },
       },
-    }
+    }