feat(formik): add FormikSearchSelect component

Author: boilund

packages/docs/src/mdx/formikComponents/FormikSearchSelect.mdx

@@ -0,0 +1,90 @@
+export const meta = {
+  name: 'FormikSearchSelect',
+  route: '/formik/FormikSearchSelect',
+  menu: 'Formik',
+}
+
+# FormikSearchSelect
+
+A formik component that wraps a SearchSelect component.
+
+## Demo
+
+```typescript type=demo
+<FormikDemo initialValues={{ fruits: 'cherry' }}>
+  <FormikSearchSelectField
+    label="Select favorite fruits"
+    name="fruits"
+    noOptionsLabel="No options"
+    options={[
+      { label: 'Apple', value: 'apple' },
+      { label: 'Banana', value: 'banana' },
+      { label: 'Cherry', value: 'cherry' },
+      { label: 'Dragon fruit', value: 'dragon_fruit' },
+      { label: 'Elderberry', value: 'elderberry' },
+    ]}
+  />
+</FormikDemo>
+```
+
+## Usage in code
+
+```typescript
+import React, { useMemo, useCallback } from 'react'
+import { useFormik, FormikProvider } from 'formik'
+import { FormikSearchSelectField } from 'practical-react-components-formik'
+import * as yup from 'yup'
+
+const MyComponent = ({ enabled }) => {
+  const validationSchema = useMemo(
+    () =>
+      yup.object().shape({
+        selected: yup.string().required(),
+      }),
+    []
+  )
+
+  const initialValues = useMemo(
+    () => ({
+      selected,
+    }),
+    // Initial values that should not change during
+    // re-renders as formik handles state by itself
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  const onSubmit = useCallback((values: FormikValues) => {
+    /* Save data here */
+  }, [])
+
+  const formik = useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit,
+  })
+
+  const options = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Cherry', value: 'cherry' },
+    { label: 'Dragon fruit', value: 'dragon_fruit' },
+    { label: 'Elderberry', value: 'elderberry' },
+  ]
+
+  return (
+    <FormikProvider value={formik}>
+      <FormikSearchSelectField
+        label="Selected"
+        name="selected"
+        noOptionsLabel="No options"
+        options={options}
+      />
+    </FormikProvider>
+  )
+}
+```
+
+## Props
+
+<Props of="FormikSearchSelect" />

packages/formik/src/FormikSearchSelect.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react'
+import { useField, FieldConfig } from 'formik'
+import {
+  SearchSelect,
+  SelectProps,
+  FieldProps,
+  withField,
+} from 'practical-react-components-core'
+
+export interface FormikSearchSelectProps<V extends string = string>
+  extends Omit<SelectProps<V>, 'name' | 'value'>,
+    Partial<Pick<SelectProps<V>, 'value'>>,
+    Pick<FieldConfig, 'name' | 'validate'> {}
+
+export function FormikSearchSelect<V extends string = string>({
+  name,
+  validate,
+  ...props
+}: FormikSearchSelectProps<V>): JSX.Element {
+  const [field, meta, { setValue, setTouched }] = useField<V>({
+    name,
+    validate,
+  })
+  const onBlur = useCallback(() => setTouched(true), [setTouched])
+
+  return (
+    <SearchSelect<V>
+      {...field}
+      onChange={setValue}
+      onBlur={onBlur}
+      error={meta.touched ? meta.error : undefined}
+      {...props}
+    />
+  )
+}
+
+export const FormikSearchSelectField = <V extends string = string>(
+  props: FieldProps & FormikSearchSelectProps<V>
+) => withField<FormikSearchSelectProps<V>>(FormikSearchSelect)(props)

packages/formik/src/index.ts

@@ -5,6 +5,7 @@ export * from './FormikMultiSelect'
 export * from './FormikNumberInput'
 export * from './FormikNumberSelect'
 export * from './FormikRadioButtonGroup'
+export * from './FormikSearchSelect'
 export * from './FormikSelect'
 export * from './FormikTextArea'
 export * from './FormikTextInput'