playbook_ui 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

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

@@ -1,9 +1,10 @@
-import React, { useState, useEffect} from 'react'
+import React, { useState, useEffect, forwardRef} from 'react'
 import Select from 'react-select'
 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 { get, isString, uniqueId } from '../utilities/object'
+
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
@@ -37,6 +38,7 @@ type TypeaheadProps = {
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
+  disabled?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -48,6 +50,7 @@ type TypeaheadProps = {
   options?: Array<{ label: string; value?: 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",
+  onChange?: any,
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
@@ -70,21 +73,23 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-
-const Typeahead = ({
+const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   async,
   className,
   components = {},
   createable,
   error = "",
   data = {},
+  disabled = false,
   getOptionLabel,
   getOptionValue,
   htmlOptions = {},
   id,
+  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  onChange,
   optionsByContext = {},
   searchContextSelector,
   clearOnContextChange = false,
@@ -155,6 +160,15 @@ const Typeahead = ({
   )
 
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
+    if (onChange) {
+      const isReactHookForm = onChange.toString().includes("target")
+      if (isReactHookForm) {
+        onChange({ target: { name, value: _data } })
+      } else {
+        onChange(_data)
+      }
+    }
+    
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -193,15 +207,17 @@ const Typeahead = ({
       <Tag
           classNamePrefix="typeahead-kit-select"
           error={error}
+          isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}
       />
     </div>
   )
-}
+})
 
 Object.keys(kitComponents).forEach((k) => {
   (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
 
+Typeahead.displayName = 'Typeahead'
 export default Typeahead

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

@@ -8,15 +8,17 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
+  wrapped?: boolean,
   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,
 }
 
+
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate } = props.selectProps
+  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -52,6 +54,7 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
             truncate={truncate}
+            wrapped={wrapped}
             {...props}
         />
       }
@@ -66,6 +69,7 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
             truncate={truncate}
+            wrapped={wrapped}
             {...props}
         />
       }

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

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

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

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

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

@@ -2,9 +2,7 @@
 
 import React, { useState } from 'react'
 
-import {
-  Button,
-} from 'playbook-ui'
+import Button from '../../pb_button/_button'
 
 import Typeahead from '../_typeahead'
 

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

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-disabled",
+    disabled: true,
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadDisabled = (props) => {
+  return (
+    <Typeahead
+        disabled
+        label="Colors"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadDisabled

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

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { Typeahead, Title } from 'playbook-ui'
+import { useForm } from 'react-hook-form'
+
+const languages = [
+  { label: 'JavaScript', value: '1995', category: 'Web Development' },
+  { label: 'Python', value: '1991', category: 'General Purpose' },
+  { label: 'Java', value: '1995', category: 'Enterprise' },
+  { label: 'C++', value: '1985', category: 'Systems Programming' },
+  { label: 'Go', value: '2009', category: 'Systems Programming' },
+  { label: 'Rust', value: '2010', category: 'Systems Programming' },
+  { label: 'Swift', value: '2014', category: 'Mobile Development' },
+  { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
+  { label: 'Ruby', value: '1995', category: 'General Purpose' },
+  { label: 'PHP', value: '1995', category: 'Web Development' },
+]
+
+const colors = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadReactHook = (props) => {
+  const { register, watch } = useForm()
+
+  const selectedLanguages = watch('languages')
+  const selectedColor = watch('color')
+
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Multi Select Languages"
+          multiKit="language"
+          options={languages}
+          {...props}
+          {...register('languages')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Languages' 
+      />
+      {selectedLanguages && selectedLanguages.map(language => (
+        <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
+      ))}
+
+      <Typeahead
+          label="Colors"
+          marginTop="lg"
+          options={colors}
+          {...props}
+          {...register('color')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Color' 
+      />
+      <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
+    </>
+  )
+}
+
+export default TypeaheadReactHook

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the Typeahead kit.

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

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

@@ -4,14 +4,12 @@
 import React, { useState } from 'react'
 import { components } from 'react-select'
 
-import {
-  Avatar,
-  Body,
-  Flex,
-  FlexItem,
-  Title,
-  Typeahead,
-} from 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const USERS = [
   {

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

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

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

@@ -1,10 +1,8 @@
 import React, { useState } from 'react'
 
-import {
-  Caption,
-  Typeahead,
-  User,
-} from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Typeahead from '../../pb_typeahead/_typeahead'
+import User from '../../pb_user/_user'
 
 /**
  *

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

@@ -1,10 +1,8 @@
 import React, { useState } from 'react'
 
-import {
-  Caption,
-  Typeahead,
-  User,
-} from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Typeahead from '../../pb_typeahead/_typeahead'
+import User from '../../pb_user/_user'
 
 /**
  *
@@ -49,7 +47,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You removed the user: "${value.label}"`)
+    alert(`You added the user: "${value.label}"`)
   }
 
   return (

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

@@ -1,10 +1,8 @@
 import React, { useState } from 'react'
 
-import {
-  Caption,
-  Typeahead,
-  User,
-} from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Typeahead from '../../pb_typeahead/_typeahead'
+import User from '../../pb_user/_user'
 
 /**
  *
@@ -56,7 +54,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You removed the user: "${value.label}"`)
+    alert(`You added the user: "${value.label}"`)
   }
 
   return (

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

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

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -14,9 +14,11 @@ examples:
     - typeahead_truncated_text: Truncated Text
     - typeahead_dynamic_options: Dynamic Options
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
+    - typeahead_disabled: Disabled
 
   react:
     - typeahead_default: Default
+    - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)
@@ -31,3 +33,4 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_disabled: Disabled

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -13,3 +13,5 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
 export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
+export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
+export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -44,12 +44,16 @@ module Playbook
                       default: false
       prop :validation, type: Playbook::Props::HashProp,
                         default: {}
+      prop :wrapped, type: Playbook::Props::Boolean,
+                     default: false
       prop :clear_on_context_change, type: Playbook::Props::Boolean,
                                      default: true
       prop :options_by_context, type: Playbook::Props::HashProp,
                                 default: {}
       prop :search_context_selector, type: Playbook::Props::String,
                                      default: nil
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -72,7 +76,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi
+        pills || !is_multi || wrapped
       end
 
       def typeahead_react_options
@@ -94,9 +98,11 @@ module Playbook
           placeholder: placeholder,
           plusIcon: plus_icon,
           truncate: truncate,
+          wrapped: wrapped,
           searchContextSelector: search_context_selector,
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,
+          disabled: disabled,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

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

@@ -7,6 +7,8 @@ import { GlobalProps, globalProps } from '../utilities/globalProps'
 import Avatar from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
+import Caption from '../pb_caption/_caption'
+import Detail from '../pb_detail/_detail'
 
 type UserProps = {
   align?: "left" | "center" | "right",
@@ -20,11 +22,13 @@ type UserProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
+  nameStyle?: "title" | "body" | "caption" | "detail"
   orientation?: "horizontal" | "vertical",
   size?: "sm" | "md" | "lg",
   subtitle?: string | Array<Node> | Node,
   territory?: string,
   title?: string,
+  titleStyle?: "title" | "body" | "caption" | "detail",
 } & GlobalProps
 
 const User = (props: UserProps): React.ReactElement => {
@@ -40,11 +44,13 @@ const User = (props: UserProps): React.ReactElement => {
     htmlOptions = {},
     id,
     name,
+    nameStyle = 'title',
     orientation = 'horizontal',
     size = 'sm',
     subtitle,
     territory = '',
     title = '',
+    titleStyle = 'body',
   } = props
 
   const dataProps: {[key: string]: string} = buildDataProps(data)
@@ -58,6 +64,76 @@ const User = (props: UserProps): React.ReactElement => {
   )
 
   const avatarPresent = avatar || avatarUrl
+  const titleText = territory === '' ? title : `${territory} • ${title}`
+
+  const renderNameComponent = () => {
+    switch (nameStyle) {
+      case "title":
+        return (
+          <Title
+              bold={bold}
+              dark={dark}
+              size={size === "lg" ? 3 : 4}
+              text={name}
+          />
+        );
+      case "body":
+        return (
+          <Body
+              dark={dark}
+              text={name}
+          />
+        );
+      case "caption":
+        return (
+          <Caption
+              dark={dark}
+              size={size === "sm" ? "xs" : size}
+              text={name}
+          />
+        );
+      case "detail":
+        return (
+          <Detail
+              dark={dark}
+              text={name}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const renderTitleComponent = () => {
+    switch (titleStyle) {
+      case "body":
+        return (
+          <Body
+              color="light"
+              dark={dark}
+              text={titleText}
+              variant={null}
+          />
+        );
+      case "caption":
+        return (
+          <Caption
+              dark={dark}
+              size={size === "sm" ? "xs" : size}
+              text={titleText}
+          />
+        );
+      case "detail":
+        return (
+          <Detail
+              dark={dark}
+              text={titleText}
+          />
+        );
+      default:
+        return null;
+    }
+  };
 
   return (
     <div
@@ -76,19 +152,8 @@ const User = (props: UserProps): React.ReactElement => {
         />
       }
       <div className="content_wrapper">
-        <Title
-            bold={bold}
-            dark={dark}
-            size={size == 'lg' ? 3 : 4}
-            text={name}
-        />
-        <Body
-            color="light"
-            dark={dark}
-            variant={null}
-        >
-          {territory === '' ? title : `${territory} • ${title}`}
-        </Body>
+        {renderNameComponent()}
+        {renderTitleComponent()}
         { typeof(subtitle) === 'string' &&
           <Body
               color="light"

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -1,5 +1,10 @@
 import React from "react"
-import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
+
+import Caption from '../../pb_caption/_caption'
+import Contact from '../../pb_contact/_contact'
+import Flex from '../../pb_flex/_flex'
+import Icon from '../../pb_icon/_icon'
+import User from '../../pb_user/_user'
 
 const MentorSubtitle = (
   <Flex>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb

@@ -0,0 +1,22 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    name_style: "body",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    name_style: "detail",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { User } from 'playbook-ui'
+
+const UserFontOptions = (props) => {
+  return (
+    <div>
+      <div className="pb--doc-demo-row">
+        <div>
+          <User
+              align="center"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              nameStyle= "body"
+              orientation="horizontal"
+              size= "md"
+              territory= "PHL"
+              title="Remodeling Consultant"
+              {...props}
+          />
+        </div>
+
+        <div>
+          <User
+              align="left"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              nameStyle= "detail"
+              orientation="horizontal"
+              size= "md"
+              territory= "PHL"
+              title= "Remodeling Consultant"
+              {...props}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UserFontOptions

data/app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md

@@ -0,0 +1,5 @@
+Passing a `name_style` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
+
+Passing a `title_style` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
+
+The size of the `caption` is determined by the `size` prop.

data/app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md

@@ -0,0 +1,5 @@
+Passing a `nameStyle` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
+
+Passing a `titleStyle` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
+
+The size of the `caption` is determined by the `size` prop.