[PLAY-1465] Fix Linting Errors - Typeahead Kit

playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -4,7 +4,7 @@ import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
 import { get, isString, uniqueId } from 'lodash'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
 import {
@@ -42,18 +42,15 @@ type TypeaheadProps = {
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  getOptionLabel?: string | (() => string),
+  getOptionValue?: string | (() => string),
   name?: string,
-  marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
-  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
-} & GlobalProps
+}
 
 export type SelectValueType = {
   label: string,
   value: string,
   imageUrl?: string,
-  pillColor?: string,
 }
 
 type TagOnChangeValues = {
@@ -79,10 +76,8 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
-  marginBottom = "sm",
-  pillColor,
   ...props
-}: TypeaheadProps) => {
+}: TypeaheadProps): React.ReactElement => {
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -109,8 +104,8 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
-    onMultiValueClick: (_option: SelectValueType): any => undefined,
-    pillColor: pillColor,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onMultiValueClick: (_option: SelectValueType): void => undefined,
     ...props,
   }
 
@@ -136,15 +131,11 @@ const Typeahead = ({
     }
   }
 
-  const filteredProps: TypeaheadProps = {...props}
-  delete filteredProps.truncate
-
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
-    `mb_${marginBottom}`,
-    globalProps(filteredProps),
+    globalProps(props),
     className
   )
 

playbook/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -1,16 +1,24 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
-const ClearContainer = (props: any) => {
+type ClearContainerProps = {
+  children: React.ReactNode,
+  selectProps?: {
+    id: string,
+  },
+  clearValue: () => void,
+}
+
+const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [true])
+  }, [clearValue, selectProps.id])
 
   return (
     <components.ClearIndicator
-      className="clear_indicator"
-      {...props}
+        className="clear_indicator"
+        {...props}
     />
   )
 }

playbook/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -5,16 +5,19 @@ import Flex from '../../pb_flex/_flex'
 import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
-  selectProps: any,
+  selectProps: {
+    dark?: boolean,
+    label: string,
+    error?: string,
+  },
 }
 
-const TypeaheadControl = (props: Props) => (
+const TypeaheadControl = (props: Props): React.ReactElement => (
   <div className="pb_typeahead_wrapper">
     <TextInput
         dark={props.selectProps.dark}
         error={props.selectProps.error}
         label={props.selectProps.label}
-        marginBottom="none"
     >
       <Flex>
         <components.Control

playbook/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const IndicatorsContainer = (props: any) => (
+type IndicatorsContainerProps = {
+  children: React.ReactNode,
+}
+
+
+const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
   <components.IndicatorsContainer
-    className="text_input_indicators"
-    {...props}
+      className="text_input_indicators"
+      {...props}
   />
 )
 

playbook/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const MenuList = (props: any) => {
+type MenuListProps = {
+  children: React.ReactNode,
+  footer: React.ReactNode,
+}
+
+const MenuList = (props: MenuListProps): React.ReactElement => {
   return (
   <components.MenuList {...props}>
     {props.children}

playbook/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -7,22 +7,25 @@ import { SelectValueType } from '../_typeahead'
 
 type Props = {
   data: SelectValueType,
-  multiValueTemplate: any,
-  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
-  removeProps: any,
-  selectProps: any,
+  removeProps?: {
+    onClick?: React.MouseEventHandler<HTMLSpanElement>,
+    onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
+    onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
+  },
+  selectProps: {
+    multiKit?: string,
+  },
 }
 
-const MultiValue = (props: Props) => {
+const MultiValue = (props: Props): React.ReactElement => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate } = props.selectProps
+  const { multiKit } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
     name: label,
     avatarUrl: '',
-    dark,
   }
 
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
@@ -45,28 +48,20 @@ const MultiValue = (props: Props) => {
         <FormPill
             avatarUrl={imageUrl}
             closeProps={removeProps}
-            color={pillColor}
-            dark={dark}
             marginRight="xs"
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
-            truncate={truncate}
-            {...props}
         />
       }
 
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
             closeProps={removeProps}
-            color={pillColor}
-            dark={dark}
             marginRight="xs"
             name=''
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
-            truncate={truncate}
-            {...props}
         />
       }
     </components.MultiValueContainer>

playbook/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -3,7 +3,22 @@ import { components } from 'react-select'
 
 import User from '../../pb_user/_user'
 
-const Option = (props: any) => {
+type OptionProps = {
+  children: React.ReactNode,
+  label?: string,
+  data: {
+    imageUrl?: string,
+  },
+  selectProps: {
+    dark?: boolean,
+    valueComponent?: (data: {
+      imageUrl?: string,
+    }) => React.ReactNode,
+  },
+}
+
+
+const Option = (props: OptionProps): React.ReactElement => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +29,11 @@ const Option = (props: any) => {
       <>
         {!valueComponent && imageUrl &&
           <User
-            align="left"
-            avatarUrl={imageUrl}
-            dark={props.selectProps.dark}
-            name={props.label}
-            orientation="horizontal"
+              align="left"
+              avatarUrl={imageUrl}
+              dark={props.selectProps.dark}
+              name={props.label}
+              orientation="horizontal"
           />
         }
 

playbook/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx

@@ -4,19 +4,26 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
 
-const Placeholder = (props: any) => (
+type PlaceholderProps = {
+  children: React.ReactNode,
+  selectProps: {
+    plusIcon?: boolean,
+  },
+}
+
+const Placeholder = (props: PlaceholderProps): React.ReactElement => (
   <>
     <Flex
-      align="center"
-      className="placeholder"
+        align="center"
+        className="placeholder"
     >
       <components.IndicatorsContainer
-        {...props}
+          {...props}
       />
       {props.selectProps.plusIcon &&
         <Icon
-          className="typeahead-plus-icon"
-          icon="plus"
+            className="typeahead-plus-icon"
+            icon="plus"
         />
       }
     </Flex>

playbook/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const ValueContainer = (props: any) => (
+type ValueContainerProps = {
+  children: React.ReactNode,
+}
+
+const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
   <components.ValueContainer
-    className="text_input_value_container"
-    {...props}
+      className="text_input_value_container"
+      {...props}
   />
 )
 

playbook/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React, { useState } from 'react'
 
 import {

playbook/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -45,8 +45,6 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -57,6 +55,8 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
 
   return (
     <>

playbook/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -83,13 +83,13 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props) => (
+          valueComponent={({ imageUrl, label, territory, type }) => (
             <User
                 avatar
-                avatarUrl={props.imageUrl}
-                name={props.label}
-                territory={props.territory}
-                title={props.type}
+                avatarUrl={imageUrl}
+                name={label}
+                territory={territory}
+                title={type}
             />
           )}
           {...props}