playbook_ui 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301 → 13.32.0.pre.alpha.PLAY1138iconkitaddcolorprop3268

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

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

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

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

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

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

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_custom_menu_list.jsx

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

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_with_pills_async.jsx

@@ -47,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'){
@@ -57,8 +59,6 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
 
   return (
     <>

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 = {},

data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx

@@ -15,7 +15,7 @@ type UserBadgeProps = {
   size?: "sm" | "md" | "lg",
 }
 
-const UserBadge = (props: UserBadgeProps): React.ReactElement => {
+const UserBadge = (props: UserBadgeProps) => {
   const {
     aria = {},
     badge = 'million-dollar',
@@ -38,11 +38,11 @@ const UserBadge = (props: UserBadgeProps): React.ReactElement => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       <div className="pb_user_badge_wrapper">
         {image}