playbook_ui 13.33.0 → 13.33.1.pre.alpha.PLAY14143336

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,7 +1,5 @@
-// @flow
-
 import React from 'react'
-import { Typeahead } from '../..'
+import { Typeahead } from 'playbook-ui'
 
 /**
  *

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

@@ -1,7 +1,5 @@
-// @flow
-
 import React from 'react'
-import { Typeahead } from '../..'
+import { Typeahead } from 'playbook-ui'
 
 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 '../..'
+} from 'playbook-ui'
 
 import Typeahead from '../_typeahead'
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 
 /**
  *
@@ -17,13 +15,6 @@ 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 {
@@ -63,28 +54,30 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
 
   return (
     <>
-      <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"
+      {users && users.length > 0 && (
+        <React.Fragment>
+          <Caption
+              marginBottom="xs"
+              text="State (Users)"
               {...props}
           />
-        </For>
-      </If>
+          <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>
+      )}
       <Typeahead
           async
           isMulti
@@ -93,7 +86,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props: UserProps) => (
+          valueComponent={(props) => (
             <User
                 avatar
                 avatarUrl={props.imageUrl}

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

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

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -4,24 +4,24 @@ import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
   _resultsElement: HTMLElement
-  _debouncedSearch: () => void
+  _debouncedSearch: Function
   _resultsLoadingIndicator: HTMLElement
   _resultOptionTemplate: HTMLElement
   _resultsOptionCache: Map<string, Array<DocumentFragment>>
   _searchContext: string
 
-  static get selector(): string {
+  static get selector() {
     return '[data-pb-typeahead-kit]'
   }
 
-  connect(): void {
+  connect() {
     this.element.addEventListener('keydown', (event: KeyboardEvent) => this.handleKeydown(event))
-    this.searchInput.addEventListener('focus', () => this.debouncedSearch)
-    this.searchInput.addEventListener('input', () => this.debouncedSearch)
+    this.searchInput.addEventListener('focus', () => this.debouncedSearch())
+    this.searchInput.addEventListener('input', () => this.debouncedSearch())
     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
   }
 
-  handleKeydown(event: KeyboardEvent): void {
+  handleKeydown(event: KeyboardEvent) {
     if (event.key === 'ArrowUp') {
       event.preventDefault()
       this.focusPreviousOption()
@@ -31,7 +31,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     }
   }
 
-  search(): void {
+  search() {
     if (this.searchTerm.length < parseInt(this.searchTermMinimumLength)) return this.clearResults()
 
     this.toggleResultsLoadingIndicator(true)
@@ -49,7 +49,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
-  resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>): void {
+  resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
     const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext)
     if (this.resultsOptionCache.has(searchTermAndContext)) this.resultsOptionCache.delete(searchTermAndContext)
     if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys().next().value)
@@ -58,18 +58,18 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.showResults()
   }
 
-  resultsCacheClear(): void {
+  resultsCacheClear() {
     this.resultsOptionCache.clear()
   }
 
-  get debouncedSearch(): void {
+  get debouncedSearch() {
     return this._debouncedSearch = (
       this._debouncedSearch ||
       debounce(this.search, parseInt(this.searchDebounceTimeout)).bind(this)
     )
   }
 
-  showResults(): void {
+  showResults() {
     if (!this.resultsOptionCache.has(this.searchTermAndContext)) return
 
     this.toggleResultsLoadingIndicator(false)
@@ -82,7 +82,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     }
   }
 
-  optionSelected(event: MouseEvent): void {
+  optionSelected(event: MouseEvent) {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
@@ -93,7 +93,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
   }
 
-  clearResults(): void {
+  clearResults() {
     this.resultsElement.innerHTML = ''
   }
 
@@ -103,7 +103,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     return resultOption
   }
 
-  focusPreviousOption(): void {
+  focusPreviousOption() {
     const currentIndex = this.resultOptionItems.indexOf(this.currentSelectedResultOptionItem)
     const previousIndex = currentIndex - 1
     const previousOptionItem = (
@@ -113,7 +113,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     (previousOptionItem as HTMLElement).focus()
   }
 
-  focusNextOption(): void {
+  focusNextOption() {
     const currentIndex = this.resultOptionItems.indexOf(this.currentSelectedResultOptionItem)
     const nextIndex = currentIndex + 1
     const nextOptionItem = (
@@ -123,23 +123,23 @@ export default class PbTypeahead extends PbEnhancedElement {
     (nextOptionItem as HTMLElement).focus()
   }
 
-  get resultOptionItems(): HTMLElement[] {
+  get resultOptionItems() {
     return Array.from(this.resultsElement.querySelectorAll('[data-result-option-item]'))
   }
 
-  get currentSelectedResultOptionItem(): HTMLElement | null {
+  get currentSelectedResultOptionItem() {
     return document.activeElement.closest('[data-result-option-item]')
   }
 
-  get searchInput(): HTMLInputElement | null {
+  get searchInput() {
     return this._searchInput = (this._searchInput || this.element.querySelector('input[type="search"]'))
   }
 
-  get searchTerm(): string {
+  get searchTerm() {
     return this.searchInput.value
   }
 
-  get searchContext(): string | null {
+  get searchContext() {
     if (this._searchContext) return this._searchContext
 
     const selector = (this.element as HTMLElement).dataset.searchContextValueSelector
@@ -151,35 +151,35 @@ export default class PbTypeahead extends PbEnhancedElement {
     return null
   }
 
-  set searchContext(value: string) {
+  set searchContext(value) {
     this._searchContext = value
   }
 
-  get searchTermAndContext(): string {
+  get searchTermAndContext() {
     return this.cacheKeyFor(this.searchTerm, this.searchContext)
   }
 
-  cacheKeyFor(searchTerm: string, searchContext: string): string {
+  cacheKeyFor(searchTerm: string, searchContext: string) {
     return [searchTerm, JSON.stringify(searchContext)].join()
   }
 
-  searchInputClear(): void {
+  searchInputClear() {
     this.searchInput.value = ''
   }
 
-  get searchTermMinimumLength(): string | undefined {
+  get searchTermMinimumLength() {
     return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchTermMinimumLength
   }
 
-  get searchDebounceTimeout(): string | undefined {
+  get searchDebounceTimeout() {
     return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchDebounceTimeout
   }
 
-  get resultsElement(): HTMLElement | null {
+  get resultsElement() {
     return this._resultsElement = (this._resultsElement || this.element.querySelector('[data-pb-typeahead-kit-results]'))
   }
 
-  get resultOptionTemplate(): HTMLElement | null {
+  get resultOptionTemplate() {
     return this._resultOptionTemplate = (
       this._resultOptionTemplate ||
       this.element.querySelector('template[data-pb-typeahead-kit-result-option]')
@@ -193,15 +193,15 @@ export default class PbTypeahead extends PbEnhancedElement {
     )
   }
 
-  get resultsLoadingIndicator(): HTMLElement | null {
+  get resultsLoadingIndicator() {
     return this._resultsLoadingIndicator = (
       this._resultsLoadingIndicator ||
       this.element.querySelector('[data-pb-typeahead-kit-loading-indicator]')
     )
   }
 
-  toggleResultsLoadingIndicator(visible: boolean): void {
-    let visibilityProperty = '0'
+  toggleResultsLoadingIndicator(visible: boolean) {
+    var visibilityProperty = '0'
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -26,7 +26,7 @@ type UserProps = {
   title?: string,
 } & GlobalProps
 
-const User = (props: UserProps): React.ReactElement => {
+const User = (props: UserProps) => {
   const {
     align = 'left',
     aria = {},