playbook_ui 13.32.0.pre.alpha.PLAY14143297 → 13.32.0.pre.alpha.play1416movealiaslogic3239

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

@@ -7,11 +7,12 @@ import { SelectValueType } from '../_typeahead'
 
 type Props = {
   data: SelectValueType,
+  multiValueTemplate: any,
   removeProps: any,
   selectProps: any,
 }
 
-const MultiValue = (props: Props): React.ReactElement => {
+const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
   const { multiKit } = props.selectProps
@@ -26,36 +27,36 @@ const MultiValue = (props: Props): React.ReactElement => {
 
   return (
     <components.MultiValueContainer
-        className="text_input_multivalue_container"
-        {...props}
+      className="text_input_multivalue_container"
+      {...props}
     >
       {multiKit === 'badge' &&
         <Badge
-            closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
+          closeProps={removeProps}
+          removeIcon
+          text={label}
+          variant="primary"
         />
       }
 
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
-            avatarUrl={imageUrl}
-            closeProps={removeProps}
-            marginRight="xs"
-            name={label}
-            size={multiKit === 'smallPill' ? 'small' : ''}
-            text=''
+          avatarUrl={imageUrl}
+          closeProps={removeProps}
+          marginRight="xs"
+          name={label}
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text=''
         />
       }
 
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
-            closeProps={removeProps}
-            marginRight="xs"
-            name=''
-            size={multiKit === 'smallPill' ? 'small' : ''}
-            text={label}
+          closeProps={removeProps}
+          marginRight="xs"
+          name=''
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text={label}
         />
       }
     </components.MultiValueContainer>

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

@@ -3,7 +3,7 @@ import { components } from 'react-select'
 
 import User from '../../pb_user/_user'
 
-const Option = (props: any): React.ReactElement => {
+const Option = (props: any) => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +14,11 @@ const Option = (props: any): React.ReactElement => {
       <>
         {!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"
           />
         }
 

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

@@ -4,19 +4,19 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
 
-const Placeholder = (props: any): React.ReactElement => (
+const Placeholder = (props: any) => (
   <>
     <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>

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

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

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

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import { Typeahead } from '../..'
 
 /**
  *

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

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import { Typeahead } from '../..'
 
 const options = [
   { label: 'Jardim', value: 'Portuguese' },

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

@@ -1,10 +1,8 @@
-/* eslint-disable react/no-multi-comp */
-
 import React, { useState } from 'react'
 
 import {
   Button,
-} from 'playbook-ui'
+} from '../..'
 
 import Typeahead from '../_typeahead'
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -1,28 +1,63 @@
-<%
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
 <%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "Colors",
-    name: :foo,
-    is_multi: false
-  })
-%>
+  label: "user",
+  name: :foo,
+  data: { typeahead_example: true },
+  input_options: {
+    classname: "my-typeahead-class",
+    data: {
+      typeahead_testing: "data field test"
+    },
+    id: "typeahead-input-id-test",
+  },
+})%>
+
+<br><br><br>
+
+<%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
+  <%= pb_rails("body") do %>
+    Use the above input to search for users on Github, and see the results as you type.
+  <% end %>
+
+  <%= pb_rails("body") do %>
+    When you make a selection, you will see it appear in the list below
+  <% end %>
+
+  <div data-selected-option></div>
+<% end %>
+
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
 
 <%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
-    console.log('Single Option selected')
-    console.dir(event.detail)
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
   })
-  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
-    console.log('All options cleared')
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample) return;
+
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
   })
 <% end %>

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

@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react'
 
 import Typeahead from '../_typeahead'

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

@@ -1,3 +1,5 @@
+// @flow
+
 import React, { useState, useEffect } from 'react'
 
 import Typeahead from '../_typeahead'

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

@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react'
 
 import Typeahead from '../_typeahead'

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

@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react'
 
 import Typeahead from '../_typeahead'

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

@@ -1,8 +1,9 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/no-multi-comp */
+/* @flow */
 
 import React, { useState } from 'react'
-import { components } from 'react-select'
+import { components, OptionProps } from 'react-select'
 
 import {
   Avatar,
@@ -11,7 +12,7 @@ import {
   FlexItem,
   Title,
   Typeahead,
-} from 'playbook-ui'
+} from '../..'
 
 const USERS = [
   {
@@ -41,7 +42,7 @@ const TypeaheadWithHighlight = (props) => {
 
   const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
 
-    const highlighted = (text) => {
+    const highlighted = (text: string) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
@@ -69,7 +70,7 @@ const TypeaheadWithHighlight = (props) => {
   }
 
   const customComponents = {
-    Option: (highlightProps) => (
+    Option: (highlightProps: OptionProps) => (
       <components.Option {...highlightProps}/>
     ),
     SingleValue: ({ ...props }) => (

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

@@ -1,5 +1,7 @@
+/* @flow */
+
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import { Typeahead } from '../..'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

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

@@ -1,10 +1,12 @@
+/* @flow */
+
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from 'playbook-ui'
+} from '../..'
 
 /**
  *
@@ -45,6 +47,8 @@ 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'){
@@ -55,30 +59,29 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
 
   return (
     <>
-      {users && users.length > 0 && (
-        <React.Fragment>
-          <Caption
-              marginBottom="xs"
-              text="State (Users)"
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
               {...props}
           />
-          {users.map((user) => (
-            <User
-                align="left"
-                key={user.value}
-                marginBottom="md"
-                name={user.label}
-                orientation="horizontal"
-                {...props}
-            />
-          ))}
-        </React.Fragment>
-      )}
+        </For>
+      </If>
       <Typeahead
           async
           getOptionLabel={(option) => option.name}

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

@@ -1,10 +1,12 @@
+/* @flow */
+
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from 'playbook-ui'
+} from '../..'
 
 /**
  *
@@ -15,6 +17,13 @@ import {
  * @summary - for doc example purposes only
  */
 
+type UserProps = {
+  imageUrl?: String,
+  label?: String,
+  territory?: String,
+  type?: String,
+}
+
 const filterResults = (results) =>
   results.items.map((result) => {
     return {
@@ -54,30 +63,28 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
 
   return (
     <>
-      {users && users.length > 0 && (
-        <React.Fragment>
-          <Caption
-              marginBottom="xs"
-              text="State (Users)"
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              avatar
+              avatarUrl={user.imageUrl}
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
               {...props}
           />
-          <For
-              each="user"
-              of={users}
-          >
-            <User
-                align="left"
-                avatar
-                avatarUrl={user.imageUrl}
-                key={user.value}
-                marginBottom="md"
-                name={user.label}
-                orientation="horizontal"
-                {...props}
-            />
-          </For>
-        </React.Fragment>
-      )}
+        </For>
+      </If>
       <Typeahead
           async
           isMulti
@@ -86,7 +93,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props) => (
+          valueComponent={(props: UserProps) => (
             <User
                 avatar
                 avatarUrl={props.imageUrl}

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

@@ -1,10 +1,12 @@
+/* @flow */
+
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from 'playbook-ui'
+} from '../..'
 
 /**
  *
@@ -61,27 +63,28 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
 
   return (
     <>
-      {users && users.length > 0 && (
-        <React.Fragment>
-          <Caption
-              marginBottom="xs"
-              text="State (Users)"
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              avatar
+              avatarUrl={user.imageUrl}
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
               {...props}
           />
-          {users.map((user) => (
-            <User
-                align="left"
-                avatar
-                avatarUrl={user.imageUrl}
-                key={user.value}
-                marginBottom="md"
-                name={user.label}
-                orientation="horizontal"
-                {...props}
-            />
-          ))}
-        </React.Fragment>
-      )}
+        </For>
+      </If>
       <Typeahead
           async
           isMulti