refactor(select): use context first to pass ref

components/select/select-context.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { MutableRefObject } from 'react'
 import { NormalSizes } from '../utils/prop-types'
 
 export interface SelectConfig {
@@ -8,6 +8,7 @@ export interface SelectConfig {
   updateVisible?: Function
   size?: NormalSizes
   disableAll?: boolean
+  ref?: MutableRefObject<HTMLElement | null>
 }
 
 const defaultContext = {

components/select/select-dropdown.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import useTheme from '../styles/use-theme'
+import { useSelectContext } from './select-context'
+import Dropdown from '../shared/dropdown'
+
+interface Props {
+  visible: boolean
+}
+
+const SelectDropdown: React.FC<React.PropsWithChildren<Props>> = ({
+  visible, children,
+}) => {
+  const theme = useTheme()
+  const { ref } = useSelectContext()
+
+  return (
+    <Dropdown parent={ref} visible={visible}>
+      <div className="select-dropdown">
+        {children}
+        <style jsx>{`
+        .select-dropdown {
+          border-radius: ${theme.layout.radius};
+          box-shadow: ${theme.expressiveness.shadowLarge};
+        }
+      `}</style>
+      </div>
+    </Dropdown>
+  )
+}
+
+export default SelectDropdown

components/select/select.tsx

@@ -1,14 +1,13 @@
-import React, { MutableRefObject, useMemo, useRef, useState } from 'react'
-import useTheme from '../styles/use-theme'
-import SelectOption from './select-option'
-import SelectIcon from './select-icon'
-import Dropdown from '../shared/dropdown'
-import useClickAway from '../utils/use-click-away'
-import { ZeitUIThemes } from '../styles/themes'
-import { SelectContext, SelectConfig } from './select-context'
+import React, { useMemo, useRef, useState } from 'react'
 import { NormalSizes } from '../utils/prop-types'
-import { getSizes } from './styles'
+import useClickAway from '../utils/use-click-away'
 import { pickChildByProps, pickChildrenFirst } from '../utils/collections'
+import SelectIcon from './select-icon'
+import SelectOption from './select-option'
+import useTheme from '../styles/use-theme'
+import SelectDropdown from './select-dropdown'
+import { SelectContext, SelectConfig } from './select-context'
+import { getSizes } from './styles'
 
 interface Props {
   disabled?: boolean
@@ -31,25 +30,6 @@ const defaultProps = {
 
 export type SelectProps = Props & typeof defaultProps & React.HTMLAttributes<any>
 
-const getDropdown = (
-  ref: MutableRefObject<HTMLDivElement | null>,
-  children: React.ReactNode | null,
-  theme: ZeitUIThemes,
-  visible: boolean,
-) => (
-  <Dropdown parent={ref} visible={visible}>
-    <div className="select-dropdown">
-      {children}
-      <style jsx>{`
-        .select-dropdown {
-          border-radius: ${theme.layout.radius};
-          box-shadow: ${theme.expressiveness.shadowLarge};
-        }
-      `}</style>
-    </div>
-  </Dropdown>
-)
-
 const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   children, size, disabled, initialValue: init, placeholder,
   icon: Icon, onChange, className, pure, ...props
@@ -68,10 +48,10 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   }
 
   const initialValue: SelectConfig = useMemo(() => ({
-    value, visible, updateValue, updateVisible,
-    size, disableAll: disabled,
-  }), [visible, size, disabled])
-  
+    value, visible, updateValue, updateVisible, size, ref,
+    disableAll: disabled,
+  }), [visible, size, disabled, ref])
+
   const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation()
     event.nativeEvent.stopImmediatePropagation()
@@ -94,7 +74,7 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
       <div className={`select ${className}`} ref={ref} onClick={clickHandler} {...props}>
         {!value && <span className="value placeholder">{placeholder}</span>}
         {value && <span className="value">{selectedChild}</span>}
-        {getDropdown(ref, children, theme, visible)}
+        <SelectDropdown visible={visible}>{children}</SelectDropdown>
         {!pure && <div className="icon"><Icon /></div>}
         <style jsx>{`
           .select {