playbook_ui 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 → 14.10.0.pre.alpha.play1465attempt25272

data/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}
   />
 )
 

data/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 {

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

@@ -45,8 +45,7 @@ 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'){
@@ -58,6 +57,9 @@ const TypeaheadWithPillsAsync = (props) => {
     return results()
   }
 
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
+
   return (
     <>
       {users && users.length > 0 && (

data/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}