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

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Body from '../../pb_body/_body'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
+    I'm 150px high and 100px wide!
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
+    I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
+    I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
+    I have a min_width of 300px!
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px"  } do %>
+    I have a min_height of 300px!
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+
+const TooltipSizing = (props) => {
+
+  return (
+   <Flex
+       flexDirection='row'
+       gap='md'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip
+          height='150px'
+          placement='top'
+          text="I'm 150px high and 100px wide!"
+          width='100px'
+          {...props}
+      >
+        <Button text="Height and Width"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxHeight='100px'
+          placement='top'
+          text="I have a maxHeight of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
+          width='250px'
+          {...props}
+      >
+        <Button text="maxHeight"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxWidth='150px'
+          placement='top'
+          text="I have a maxWidth of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
+          {...props}
+      >
+        <Button text="maxWidth"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          minWidth='300px'
+          placement='top'
+          text="I have a minWidth of 300px!"
+          {...props}
+      >
+        <Button text="minWidth"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxWidth='150px'
+          minHeight='300px'
+          placement='top'
+          text="I have a minHeight of 300px!"
+          {...props}
+      >
+        <Button text="minHeight"/>
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipSizing

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md

@@ -0,0 +1,3 @@
+You can customize the `height` and `width` of the tooltip's popover.
+
+When using `maxHeight`, be sure to set a `width` as well. The text needs to truncate within the `width` prop.

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

@@ -4,6 +4,8 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
+  - tooltip_sizing: Tooltip Sizing
+  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
@@ -12,7 +14,7 @@ examples:
   - tooltip_default_react: Default
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
+  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
-

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

@@ -1,6 +1,7 @@
 export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
+export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,10 +1,11 @@
 <%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
-  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
+      id: object.id,
+      data: object.data,
+      class: object.classname,
+      style: remove_height_properties(combined_html_options[:style]) || "",
+      **combined_html_options.except(:style)) do %>
+  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -3,24 +3,49 @@
 module Playbook
   module PbTooltip
     class Tooltip < Playbook::KitBase
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :delay_open
+      prop :delay_close
+      prop :height
+      prop :interaction, type: Playbook::Props::Boolean,
+                         default: false
+      prop :max_height
+      prop :max_width
+      prop :min_height
+      prop :min_width
       prop :position
+      prop :tooltip_id
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
-      prop :tooltip_id
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :delay_open
-      prop :delay_close
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
+      prop :width
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
       end
 
+      def remove_height_properties(combined_html_options_style)
+        return nil if combined_html_options_style.nil?
+
+        combined_html_options_style.gsub(/\s*(height|min-height|max-height)\s*:[^;]*;?\s*/, "")
+                                   .strip
+                                   .presence
+      end
+
+      def height_and_width_helper
+        out = ""
+        out += "width: #{width};" if width.present?
+        out += "height: #{height};" if height.present?
+        out += "max-height: #{max_height};" if max_height.present?
+        out += "max-width: #{max_width};" if max_width.present?
+        out += "min-height: #{min_height};" if min_height.present?
+        out += "min-width: #{min_width};" if min_width.present?
+        out
+      end
+
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from 'lodash'
+import { merge } from '../utilities/object'
 
 type TreemapChartProps = {
   chartData: {

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

@@ -126,6 +126,9 @@
         color: $text_lt_default;
       }
       &__control {
+        &--is-disabled {
+          background-color: shade($white, 5%);
+        }
         &--is-focused {
           @include pb_textarea_focus;
           @include transition_default;
@@ -252,6 +255,7 @@
           color: $text_dk_default;
         }
         &__control {
+        
           &--is-focused {
             @include pb_textarea_focus;
             @include transition_default;

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 (