feat(select): add component

components/index.ts

@@ -31,3 +31,4 @@ export { default as ButtonDropdown } from './button-dropdown'
 export { default as Capacity } from './capacity'
 export { default as Input } from './input'
 export { default as Radio } from './radio'
+export { default as Select } from './select'

components/select/index.ts

@@ -0,0 +1,6 @@
+import Select from './select'
+import SelectOption from './select-option'
+
+Select.Option = SelectOption
+
+export default Select

components/select/select-context.ts

@@ -0,0 +1,21 @@
+import React from 'react'
+import { NormalSizes } from '../utils/prop-types'
+
+export interface SelectConfig {
+  value?: string
+  updateValue?: Function
+  visible?: boolean
+  updateVisible?: Function
+  size?: NormalSizes
+  disableAll?: boolean
+}
+
+const defaultContext = {
+  visible: false,
+  size: 'medium' as NormalSizes,
+  disableAll: false,
+}
+
+export const SelectContext = React.createContext<SelectConfig>(defaultContext)
+
+export const useSelectContext = (): SelectConfig => React.useContext<SelectConfig>(SelectContext)

components/select/select-icon.tsx

@@ -0,0 +1,33 @@
+import React  from 'react'
+import withDefaults from '../utils/with-defaults'
+
+interface Props {
+  width?: string
+}
+
+const defaultProps = {
+  width: '1.25em'
+}
+
+export type SelectIconProps = Props & typeof defaultProps
+
+const SelectIcon: React.FC<SelectIconProps> = React.memo(({
+  width,
+}) => {
+  
+  return (
+    <svg viewBox="0 0 24 24" width={width} height={width} strokeWidth="1" strokeLinecap="round"
+      strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
+      <path d="M6 9l6 6 6-6" />
+      <style jsx>{`
+        svg {
+          color: inherit;
+          stroke: currentColor;
+          transition: all 200ms ease;
+        }
+      `}</style>
+    </svg>
+  )
+})
+
+export default withDefaults(SelectIcon, defaultProps)

components/select/select-option.tsx

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react'
+import withDefaults from '../utils/with-defaults'
+import useTheme from '../styles/use-theme'
+import { useSelectContext } from './select-context'
+
+interface Props {
+  value: string
+  disabled?: boolean
+  className?: string
+  preventAllEvents?: boolean
+}
+
+const defaultProps = {
+  disabled: false,
+  className: '',
+  preventAllEvents: false,
+}
+
+export type SelectOptionProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+
+const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
+  value: identValue, className, children, disabled, preventAllEvents, ...props
+}) => {
+  const theme = useTheme()
+  const { updateValue, value, disableAll } = useSelectContext()
+  const isDisabled = useMemo(() => disabled || disableAll, [disabled, disableAll])
+  if (identValue === undefined) {
+    console.error('[Select Option]: the props "value" is required.')
+  }
+
+  const selected = useMemo(() => value ? identValue === value : false, [identValue, value])
+  
+  const bgColor = useMemo(() => {
+    if (isDisabled) return theme.palette.accents_1
+    return selected ? theme.palette.accents_1 : theme.palette.background
+  }, [selected, isDisabled, theme.palette])
+
+  const color = useMemo(() => {
+    if (isDisabled) return theme.palette.accents_4
+    return selected ? theme.palette.foreground : theme.palette.accents_5
+  }, [selected, isDisabled, theme.palette])
+
+  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (preventAllEvents) return
+    event.stopPropagation()
+    event.nativeEvent.stopImmediatePropagation()
+    event.preventDefault()
+    if (isDisabled) return
+    updateValue && updateValue(identValue)
+  }
+
+  return (
+    <>
+      <div className={className} onClick={clickHandler} {...props}>{children}</div>
+  
+      <style jsx>{`
+        div {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          font-weight: normal;
+          white-space: pre;
+          font-size: .75rem;
+          height: calc(1.688 * ${theme.layout.gap});
+          padding: 0 ${theme.layout.gapHalf};
+          background-color: ${bgColor};
+          color: ${color};
+          user-select: none;
+          border: 0;
+          cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
+          transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+        }
+        
+        div:first-of-type {
+          border-top-left-radius: ${theme.layout.radius};
+          border-top-right-radius: ${theme.layout.radius};
+        }
+        
+        div:last-of-type {
+          border-bottom-left-radius: ${theme.layout.radius};
+          border-bottom-right-radius: ${theme.layout.radius};
+        }
+        
+        div:hover {
+          background-color: ${theme.palette.accents_1};
+        }
+      `}</style>
+    </>
+  )
+}
+
+export default withDefaults(SelectOption, defaultProps)

components/select/select.tsx

@@ -0,0 +1,182 @@
+import React, { MutableRefObject, useEffect, 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 { ZeitUIThemes } from '../styles/themes'
+import { SelectContext, SelectConfig } from './select-context'
+import { NormalSizes } from '../utils/prop-types'
+import { getSizes } from './styles'
+import { pickChildByProps, pickChildrenFirst } from '../utils/collections'
+
+interface Props {
+  disabled?: boolean
+  size?: NormalSizes
+  initialValue?: string
+  placeholder?: React.ReactNode | string
+  icon?: React.ReactNode
+  onChange?: (value: string) => void
+  pure?: boolean
+  className?: string
+}
+
+const defaultProps = {
+  disabled: false,
+  size: 'medium' as NormalSizes,
+  icon: SelectIcon,
+  pure: false,
+  className: '',
+}
+
+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
+}) => {
+  const theme = useTheme()
+  const ref = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState<boolean>(false)
+  const [value, setValue] = useState<string | undefined>(init)
+  const sizes = useMemo(() => getSizes(theme, size), [theme, size])
+  
+  const updateVisible = (next: boolean) => setVisible(next)
+  const updateValue = (next: string) => {
+    setValue(next)
+    onChange && onChange(next)
+    setVisible(false)
+  }
+
+  const initialValue: SelectConfig = useMemo(() => ({
+    value, visible, updateValue, updateVisible,
+    size, disableAll: disabled,
+  }), [visible, size, disabled])
+  
+  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    event.nativeEvent.stopImmediatePropagation()
+    event.preventDefault()
+    if (disabled) return
+    setVisible(!visible)
+  }
+  
+  useEffect(() => {
+    const closeHandler = () => setVisible(false)
+    document.addEventListener('click', closeHandler)
+    return () => document.removeEventListener('click', closeHandler)
+  }, [])
+  
+  const selectedChild = useMemo(() => {
+    const [, optionChildren] = pickChildByProps(children, 'value', value)
+    const child = pickChildrenFirst(optionChildren)
+    if (!React.isValidElement(child)) return optionChildren
+    return React.cloneElement(child, { preventAllEvents: true })
+  }, [value, children])
+
+  return (
+    <SelectContext.Provider value={initialValue}>
+      <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)}
+        {!pure && <div className="icon"><Icon /></div>}
+        <style jsx>{`
+          .select {
+            display: inline-flex;
+            align-items: center;
+            user-select: none;
+            white-space: nowrap;
+            position: relative;
+            cursor: ${disabled ? 'not-allowed' : 'pointer'};
+            max-width: 80vw;
+            width: initial;
+            overflow: hidden;
+            transition: border 0.2s ease 0s, color 0.2s ease-out 0s, box-shadow 0.2s ease 0s;
+            border: 1px solid ${theme.palette.border};
+            border-radius: ${theme.layout.radius};
+            padding: 0 ${theme.layout.gapQuarter} 0 ${theme.layout.gapHalf};
+            height: ${sizes.height};
+            min-width: ${sizes.minWidth};
+            background-color: ${disabled ? theme.palette.accents_1 : theme.palette.background};
+          }
+          
+          .select:hover {
+            border-color: ${disabled ? theme.palette.border : theme.palette.foreground};
+          }
+          
+          .select:hover .icon {
+            color: ${disabled ? theme.palette.accents_5 : theme.palette.foreground}
+          }
+          
+          .value {
+            display: inline-flex;
+            flex: 1;
+            height: 100%;
+            align-items: center;
+            line-height: 1;
+            padding: 0;
+            margin-right: 1.25rem;
+            font-size: ${sizes.fontSize};
+            color: ${disabled ? theme.palette.accents_4 : theme.palette.foreground};
+            width: calc(100% - 1.25rem);
+          }
+          
+          .value > :global(div), .value > :global(div:hover) {
+            border-radius: 0;
+            background-color: transparent;
+            padding: 0;
+            margin: 0;
+            color: inherit;
+          }
+          
+          .placeholder {
+            color: ${theme.palette.accents_3};
+          }
+          
+          .icon {
+            position: absolute;
+            right: ${theme.layout.gapQuarter};
+            font-size: ${sizes.fontSize};
+            top: 50%;
+            bottom: 0;
+            transform: translateY(-50%) rotate(${visible ? '180' : '0'}deg);
+            pointer-events: none;
+            transition: transform 200ms ease;
+            display: flex;
+            align-items: center;
+            color: ${theme.palette.accents_5};
+          }
+        `}</style>
+      </div>
+    </SelectContext.Provider>
+  )
+}
+
+type SelectComponent<P = {}> = React.FC<P> & {
+  Option: typeof SelectOption
+}
+
+type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps>
+
+(Select as SelectComponent<ComponentProps>).defaultProps = defaultProps
+
+export default Select as SelectComponent<ComponentProps>

components/select/styles.ts

@@ -0,0 +1,36 @@
+import { NormalSizes } from 'components/utils/prop-types'
+import { ZeitUIThemes } from 'components/styles/themes'
+
+export interface SelectSize {
+  height: string
+  fontSize: string
+  minWidth: string
+}
+
+export const getSizes = (theme: ZeitUIThemes, size?: NormalSizes) => {
+  const sizes: { [key in NormalSizes]: SelectSize } = {
+    medium: {
+      height: `calc(1.688 * ${theme.layout.gap})`,
+      fontSize: '.875rem',
+      minWidth: '10rem',
+    },
+    small: {
+      height: `calc(1.344 * ${theme.layout.gap})`,
+      fontSize: '.75rem',
+      minWidth: '8rem',
+    },
+    mini: {
+      height: `calc(1 * ${theme.layout.gap})`,
+      fontSize: '.75rem',
+      minWidth: '6.5rem',
+    },
+    large: {
+      height: `calc(2 * ${theme.layout.gap})`,
+      fontSize: '1.225rem',
+      minWidth: '12.5rem',
+    },
+  }
+  
+  return size ? sizes[size] : sizes.medium
+}
+

components/shared/dropdown.tsx

@@ -0,0 +1,77 @@
+import React, { MutableRefObject, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import usePortal from '../utils/use-portal'
+import CSSTransition from './css-transition'
+
+interface Props {
+  parent?: MutableRefObject<HTMLDivElement | null>
+  visible: boolean
+}
+
+interface ReactiveDomReact {
+  top: number
+  left: number
+  right: number
+  width: number
+}
+
+const defaultRect: ReactiveDomReact = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  width: 0,
+}
+
+const getRect = (ref: MutableRefObject<HTMLDivElement | null>): ReactiveDomReact => {
+  if (!ref || !ref.current) return defaultRect
+  const rect = ref.current.getBoundingClientRect()
+  return {
+    ...rect,
+    width: rect.width || (rect.right - rect.left),
+    top: rect.bottom + document.documentElement.scrollTop,
+    left: rect.left + document.documentElement.scrollLeft,
+  }
+}
+
+const Dropdown: React.FC<React.PropsWithChildren<Props>> = React.memo(({
+  children, parent, visible,
+}) => {
+  const el = usePortal('dropdown')
+  const [rect, setRect] = useState<ReactiveDomReact>(defaultRect)
+  if (!parent) return null
+  
+  const updateRect = () => {
+    const { top, left, right, width: nativeWidth } = getRect(parent)
+    setRect({ top, left, right, width: nativeWidth })
+  }
+
+  useEffect(() => {
+    updateRect()
+    window.addEventListener('resize', updateRect)
+    return () => window.removeEventListener('resize', updateRect)
+  }, [])
+  
+  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
+  }
+
+  if (!el) return null
+  return createPortal((
+    <CSSTransition visible={visible}>
+      <div className="dropdown" onClick={clickHandler}>
+        {children}
+        <style jsx>{`
+        .dropdown {
+          position: absolute;
+          width: ${rect.width}px;
+          top: ${rect.top + 2}px;
+          left: ${rect.left}px;
+        }
+      `}</style>
+      </div>
+    </CSSTransition>
+  ), el)
+})
+
+export default Dropdown

components/shared/portal.tsx

@@ -1,33 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import useSSR from '../utils/use-ssr'
-import { createPortal } from 'react-dom'
-
-const Portal: React.FC<React.PropsWithChildren<{}>> = React.memo(({
-  children,
-}) => {
-  const { isBrowser } = useSSR()
-  const [mounted, setMounted] = useState<boolean>(false)
-  const ref = useRef(isBrowser ? document.createElement('div') : null)
-  
-  useEffect(() => {
-    if (!isBrowser) return
-    if (!ref.current) {
-      ref.current = document.createElement('div')
-    }
-    if (!mounted) {
-      document.body.appendChild(ref.current)
-      setMounted(true)
-    }
-    
-    return () => {
-      if (!ref.current) return
-      document.body.removeChild(ref.current)
-      ref.current.remove()
-    }
-  }, [isBrowser])
-  
-  if (!isBrowser || !ref.current) return null
-  return createPortal(children, ref.current)
-})
-
-export default Portal

components/utils/collections.ts

@@ -55,3 +55,9 @@ export const pickChildByProps = (
   
   return [withoutPropChildren, targetChildren]
 }
+
+export const pickChildrenFirst = (
+  children: ReactNode | undefined,
+): ReactNode | undefined => {
+  return React.Children.toArray(children)[0]
+}

components/utils/use-ssr.ts

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 
 const isBrowser = (): boolean => {
   return Boolean(typeof window !== 'undefined' &&
@@ -11,9 +12,14 @@ export type SSRState = {
 }
 
 const useSSR = (): SSRState => {
+  const [browser, setBrowser] = useState<boolean>(false)
+  useEffect(() => {
+    setBrowser(isBrowser())
+  }, [])
+
   return {
-    isBrowser: isBrowser(),
-    isServer: !isBrowser(),
+    isBrowser: browser,
+    isServer: !browser,
   }
 }
 

pages/docs/components/select.mdx

@@ -0,0 +1,92 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Select, Spacer, Code } from 'components'
+
+export const meta = {
+  title: 'select',
+  description: 'select',
+}
+
+## Select
+
+Display a dropdown list of items.
+
+<Playground
+  scope={{ Select }}
+  code={`
+() => {
+  const handler = val => console.log(val)
+  return (
+    <Select placeholder="Choose one" onChange={handler}>
+      <Select.Option value="1">Option 1</Select.Option>
+      <Select.Option value="2">Option 2</Select.Option>
+    </Select>
+  )
+}
+`} />
+
+<Playground
+  title="Disabled"
+  scope={{ Select }}
+  code={`
+<Select placeholder="Choose one" disabled>
+  <Select.Option value="1">Option 1</Select.Option>
+  <Select.Option value="2">Option 2</Select.Option>
+</Select>
+`} />
+
+<Playground
+  title="Disabled Option"
+  scope={{ Select }}
+  code={`
+<Select placeholder="Choose one">
+  <Select.Option value="1" disabled>Option 1</Select.Option>
+  <Select.Option value="2">Option 2</Select.Option>
+</Select>
+`} />
+
+<Playground
+  title="Without Icon"
+  scope={{ Select }}
+  code={`
+<Select placeholder="Choose one" pure>
+  <Select.Option value="1">Option 1</Select.Option>
+  <Select.Option value="2">Option 2</Select.Option>
+</Select>
+`} />
+
+<Playground
+  title="Compose"
+  scope={{ Select, Code }}
+  code={`
+<Select placeholder="Choose one" initialValue="1">
+  <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
+  <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
+</Select>
+`} />
+
+
+<Attributes edit="/pages/docs/components/select.mdx">
+<Attributes.Title>Select.Props</Attributes.Title>
+
+| Attribute | Description | Type | Accepted values | Default
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **initialValue** | selected value | `string` | - | - |
+| **placeholder** | placeholder string | `string` | - | - |
+| **size** | select component size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
+| **icon** | icon component | `ReactNode` | - | `SVG Component` |
+| **pure** | remove icon component | `boolean` | - | `false` |
+| **disabled** | disable current radio | `boolean` | - | `false` |
+| **onChange** | selected value | `(val: string) => void` | - | - |
+| ... | native props | `HTMLAttributes` | `'name', 'alt', 'className', ...` | - |
+
+<Attributes.Title>Select.Option.Props</Attributes.Title>
+
+| Attribute | Description | Type | Accepted values | Default
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **value**(required) | unique ident value | `string` | - | - |
+| **disabled** | disable current option | `boolean` | - | `false` |
+| ... | native props | `HTMLAttributes` | `'name', 'id', 'className', ...` | - |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>