feat(formiks): add FormikMultiSelect (#27)

src/fields/MultiSelect.tsx

@@ -42,7 +42,6 @@ export function MultiSelect({
 
 const StyledTagPicker = styled(TagPicker)`
   cursor: pointer;
-  width: 9.25rem;
 
   > .rs-picker-toggle {
     cursor: inherit;

src/fields/Select.tsx

@@ -50,6 +50,4 @@ export function Select({
   )
 }
 
-const StyledSelectPicker = styled(SelectPicker)`
-  display: inline-flex;
-`
+const StyledSelectPicker = styled(SelectPicker)``

src/formiks/FormikMultiSelect.tsx

@@ -0,0 +1,27 @@
+import { useField } from 'formik'
+import { useCallback, useEffect } from 'react'
+
+import { MultiSelect } from '../fields/MultiSelect'
+
+import type { MultiSelectProps } from '../fields/MultiSelect'
+
+export type FormikMultiSelectProps = Omit<MultiSelectProps, 'defaultValue' | 'onChange'> & {
+  name: string
+}
+export function FormikMultiSelect({ name, ...originalProps }: FormikMultiSelectProps) {
+  const [, , helpers] = useField(name)
+  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+  // both because it is useless and it will trigger infinite hook calls
+  const { setValue } = helpers
+
+  const handleChange = useCallback((nextValue: string[] | undefined) => {
+    setValue(nextValue)
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => () => setValue(undefined), [])
+
+  return <MultiSelect name={name} onChange={handleChange} {...originalProps} />
+}

src/index.ts

@@ -11,6 +11,7 @@ export { FormikCheckbox } from './formiks/FormikCheckbox'
 export { FormikDatePicker } from './formiks/FormikDatePicker'
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker'
 export { FormikEffect } from './formiks/FormikEffect'
+export { FormikMultiSelect } from './formiks/FormikMultiSelect'
 export { FormikSelect } from './formiks/FormikSelect'
 
 export { ThemeProvider } from './ThemeProvider'
@@ -27,4 +28,5 @@ export type { FormikCheckboxProps } from './formiks/FormikCheckbox'
 export type { FormikDatePickerProps } from './formiks/FormikDatePicker'
 export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker'
 export type { FormikEffectProps } from './formiks/FormikEffect'
+export type { FormikMultiSelectProps } from './formiks/FormikMultiSelect'
 export type { FormikSelectProps } from './formiks/FormikSelect'

stories/formiks/FormikMultiSelect.stories.tsx

@@ -0,0 +1,51 @@
+import { Formik } from 'formik'
+import { useState } from 'react'
+
+import { FormikEffect, FormikMultiSelect } from '../../src'
+import { Output } from '../_components/Output'
+import { noop } from '../_utils/noop'
+
+import type { FormikMultiSelectProps } from '../../src'
+
+const args: FormikMultiSelectProps = {
+  placeholder: 'Pick some options',
+  name: 'myMultiSelect',
+  options: [
+    { label: 'First Option', value: 'FIRST_OPTION' },
+    { label: 'Second Option', value: 'SECOND_OPTION' },
+    { label: 'Third Option', value: 'THIRD_OPTION' },
+    { label: 'A Very Very Long Option', value: 'A_VERY_VERY_LONG_OPTION' }
+  ]
+}
+
+export default {
+  title: 'Formiks/FormikMultiSelect',
+  component: FormikMultiSelect,
+
+  argTypes: {},
+
+  args
+}
+
+export const _FormikMultiSelect = (props: FormikMultiSelectProps) => {
+  const [outputValue, setOutputValue] = useState<
+    | {
+        mySelect?: string[]
+      }
+    | '∅'
+  >('∅')
+
+  return (
+    <>
+      <Formik initialValues={{}} onSubmit={noop}>
+        <>
+          <FormikEffect onChange={setOutputValue} />
+
+          <FormikMultiSelect {...props} />
+        </>
+      </Formik>
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}

stories/formiks/FormikSelect.stories.tsx

@@ -30,7 +30,7 @@ export default {
 export const _FormikSelect = (props: FormikSelectProps) => {
   const [outputValue, setOutputValue] = useState<
     | {
-        mySelect?: string | string[]
+        mySelect?: string
       }
     | '∅'
   >('∅')