playbook_ui 15.4.0 → 15.5.0.pre.alpha.PLAY2503datepickerdefaultdateoutsideminmaxrange12814

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
+import Caption from '../../pb_caption/_caption'
+
+const ProgressStepColor = (props) => (
+  <div>
+    <br />
+    <ProgressStep 
+        color="info"
+        icon 
+        variant="tracker" 
+        {...props}
+    >
+      <ProgressStepItem status="complete">
+        <Caption>{'Ordered'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        <Caption>{'Shipped'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        <Caption>{'Delivered'}</Caption>
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepColor

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md

@@ -0,0 +1,3 @@
+The `color` prop can also be used to set color for the tracker variant. Options for color are `primary` and `info` with default being set to `primary`.
+
+**NOTE**: The `color` prop is only available with the `tracker` variant.

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import ProgressStep from '../_progress_step.tsx'
+import ProgressStepItem from '../_progress_step_item.tsx'
+import Caption from '../../pb_caption/_caption'
+
+const ProgressStepCustomIcon = (props) => (
+  <div>
+    <br />
+    <ProgressStep 
+        icon 
+        variant="tracker" 
+        {...props}
+    >
+      <ProgressStepItem status="complete">
+        <Caption>{'Ordered'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem 
+          icon="exclamation-triangle"
+          status="active" 
+      >
+        <Caption>{'Shipped'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        <Caption>{'Delivered'}</Caption>
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepCustomIcon

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md

@@ -0,0 +1 @@
+Custom icons can also be set for individual steps. Simply use the `icon` prop for the relevant `ProgressStepItem`/`progress_step_item` as shown here. 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb

@@ -39,7 +39,10 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
   step 2
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
   step 3
+  <% end %>
+    <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  step 4
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -6,7 +6,6 @@ import ProgressStepItem from '../_progress_step_item.tsx'
 const ProgressStepDefault = (props) => (
   <div>
     <ProgressStep
-        icon
         {...props}
     >
       <ProgressStepItem status="complete" />
@@ -19,12 +18,24 @@ const ProgressStepDefault = (props) => (
 
     <ProgressStep {...props}>
       <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 5'}</ProgressStepItem>
     </ProgressStep>
 
     <br />
     <br />
+
+    <ProgressStep 
+        icon
+        {...props}
+    >
+      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
+    </ProgressStep>
   </div>
 )
 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md

@@ -0,0 +1,3 @@
+The default Progress Step kit sets orientation to horizontal and can be used with completed, active, and inactive steps as shown here.
+
+`icon` is a boolean prop that can also be set to true to render icons within the steps indicator. `icon` is false by default.

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md

@@ -0,0 +1,3 @@
+The `variant` prop can be set to `tracker` to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the `icon` prop to true for this variant. 
+
+This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -25,13 +25,7 @@
     Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-    <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
-  Card content
-<% end %>
-<br>
-<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
-  Card content
-<% end %>
+    Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
     Child

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.md

@@ -0,0 +1 @@
+`orientation` can also be set to `vertical` as shown here. By default, this is set to `horizontal`.

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

@@ -3,6 +3,7 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
+  - progress_step_color: Color
   - progress_step_custom_icon: Custom Icon
   - progress_step_tooltip: Tooltip
 
@@ -10,4 +11,6 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
+  - progress_step_color: Color
+  - progress_step_custom_icon: Custom Icon
   - progress_step_tracker_click_events: Using State

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

@@ -2,3 +2,5 @@ export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
 export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
+export { default as ProgressStepColor } from './_progress_step_color.jsx'
+export { default as ProgressStepCustomIcon } from './_progress_step_custom_icon.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -107,3 +107,44 @@ test('should render the children elements', () => {
   expect(step2Kit).toHaveClass('pb_progress_step_item_active')
   expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
 })
+
+test('should render info color', () => {
+render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            color="info"
+            data={{ testid: testId }} 
+            variant="tracker"
+        >
+          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+        </ProgressStep> 
+        )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker_info')
+})
+
+test('should render custom icon', () => {
+render( 
+        <ProgressStep
+            aria={{ label: testId }}
+            data={{ testid: testId }} 
+            variant="tracker"
+        >
+          <ProgressStepItem icon="exclamation-triangle" 
+              status="complete"
+          >
+            {'Step 1'}
+          </ProgressStepItem>
+          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
+        </ProgressStep> 
+        )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
+  const icon = kit.getAttribute('aria-label', "exclamation-triangle-icon")
+  expect(icon).toBeDefined()
+})

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import { useForm } from "react-hook-form"
-import { Radio, Flex, Body } from "playbook-ui"
+import Radio from "../_radio"
+import Body from "../../pb_body/_body"
+import Flex from "../../pb_flex/_flex"
 
 const RadioReactHook = () => {
   const { register, watch } = useForm({

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import { Button, Body, Select } from "playbook-ui"
+import Select from "../_select"
+import Body from "../../pb_body/_body"
+import Button from "../../pb_button/_button"
 
 const SelectReactHook = (props) => {
   const { register, handleSubmit, formState: { errors } } = useForm({

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -119,21 +119,22 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-left-shadow');
                     }
 
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
+                    const headerWidth = (header as HTMLElement).offsetWidth;
+                    accumulatedWidth += headerWidth;
 
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    cells.forEach((cell) => {
+                        cell.classList.add('sticky');
+                        (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
 
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-right');
-                        cell.classList.remove('sticky-left-shadow');
-                    } else {
-                        cell.classList.remove('with-border-right');
-                        cell.classList.add('sticky-left-shadow');
-                    }
-                });
+                        if (!isLastColumn) {
+                            cell.classList.add('with-border-right');
+                            cell.classList.remove('sticky-left-shadow');
+                        } else {
+                            cell.classList.remove('with-border-right');
+                            cell.classList.add('sticky-left-shadow');
+                        }
+                    });
+                }
             });
         };
 
@@ -170,21 +171,22 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-right-shadow');
                     }
 
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
+                    const headerWidth = (header as HTMLElement).offsetWidth;
+                    accumulatedWidth += headerWidth;
 
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    cells.forEach((cell) => {
+                        cell.classList.add('sticky');
+                        (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
 
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-left');
-                        cell.classList.remove('sticky-right-shadow');
-                    } else {
-                        cell.classList.remove('with-border-left');
-                        cell.classList.add('sticky-right-shadow');
-                    }
-                });
+                        if (!isLastColumn) {
+                            cell.classList.add('with-border-left');
+                            cell.classList.remove('sticky-right-shadow');
+                        } else {
+                            cell.classList.remove('with-border-left');
+                            cell.classList.add('sticky-right-shadow');
+                        }
+                    });
+                }
             });
         };
 

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -8,6 +8,25 @@
       border-right: 1px solid $border_light !important;
     }
 
+    // **Advanced Table** specific rules to eliminate double borders when vertical-border is active
+    .pb_advanced_table &,
+    &[data-vertical-border="true"] {
+      // Remove first column box-shadow (preserve border-right in Chrome and use CSS var to respect column group border colors)
+      .table-header-cells:first-child,
+      .table-header-cells-custom:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child {
+        box-shadow: none !important;
+        border-right: 1px solid var(--column-border-color, #{$border_light}) !important;
+      }
+
+      .pb_table_td:nth-child(2) {
+        box-shadow: none !important;
+      }
+    }
+    // --- End Advanced Table First Column Code Section ---
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -63,5 +82,35 @@
         }
       }
     }
+
+    // Dark mode support for advanced tables
+    .pb_advanced_table.dark & {
+      td, th, .pb_table_td, .pb_table_th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      thead tr th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      &[data-vertical-border="true"] {
+        .table-header-cells:first-child,
+        .table-header-cells-custom:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child {
+          border-right: 1px solid var(--column-border-color, #{$border_dark}) !important;
+        }
+      }
+
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            border-right-color: darken($border_dark, 10%) !important;
+          }
+        }
+      }
+    }
+    // --- End Advanced Table Dark Mode Code Section ---
   }
 }

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

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

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

@@ -161,6 +161,10 @@
   .typeahead-plus-icon {
     color: $text_lt_lighter;
   }
+  .pb_badge_kit_primary {
+    margin-bottom: 2px;
+    margin-top: 2px;
+  }
   .pb_badge_kit_primary span {
     line-height: 16.5px;
     letter-spacing: normal;

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -276,3 +276,18 @@ test('multi-value badges have tabIndex and focus class when focused', () => {
   })
 })
 
+test('input display none shows number of selected items', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'input-display-none-test' }}
+        defaultValue={[options[0], options[1]]}
+        inputDisplay="none"
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('input-display-none-test')
+  const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
+  expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
+})

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

@@ -43,6 +43,7 @@ type TypeaheadProps = {
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  inputDisplay?: "pills" | "none",
   label?: string,
   loadOptions?: string | Noop,
   getOptionLabel?: string | (() => string),
@@ -89,6 +90,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
+  inputDisplay = "pills",
   name,
   loadOptions = noop,
   marginBottom = "sm",
@@ -238,6 +240,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
     id: id || uniqueId(),
+    inputDisplay: inputDisplay,
     inline: false,
     isClearable: true,
     isSearchable: true,

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

@@ -7,18 +7,29 @@ type ClearContainerProps = {
     id: string,
   },
   clearValue: () => void,
+  innerProps?: any,
 }
 
-const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
-  const { selectProps, clearValue } = props
+const ClearContainer = (props: ClearContainerProps | any): React.ReactElement => {
+  const { selectProps, clearValue, innerProps } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
   }, [clearValue, selectProps.id])
 
+  // To stop this from bubbling up when inside a dialog or other modal
+  const handleMouseDown = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    innerProps?.onMouseDown?.(event)
+  }
+
   return (
     <components.ClearIndicator
         className="clear_indicator"
         {...props}
+        innerProps={{
+          ...innerProps,
+          onMouseDown: handleMouseDown,
+        }}
     />
   )
 }

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

@@ -19,7 +19,12 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps, isFocused } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
+  const { dark, multiKit, pillColor, truncate, wrapped, inputDisplay } = props.selectProps
+
+  // If inputDisplay is "none", don't render the pill/badge, just return null (the count handled in ValueContainer file)
+  if (inputDisplay === 'none') {
+    return null
+  }
 
   const formPillProps = {
     marginRight: 'xs',
@@ -62,6 +67,7 @@ const MultiValue = (props: Props) => {
             className={pillClassName}
             closeProps={removeProps}
             htmlOptions={{onKeyDown:handleKeyDown}}
+            marginRight="xs"
             removeIcon
             tabIndex={0}
             text={label}

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

@@ -1,15 +1,42 @@
 import React from 'react'
 import { components } from 'react-select'
+import Body from '../../pb_body/_body'
 
 type ValueContainerProps = {
-  children: React.ReactNode,
+  children: React.ReactNode | React.ReactNode[],
+  selectProps?: Record<string, unknown>,
+  hasValue?: boolean,
 }
 
-const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
-  <components.ValueContainer
-      className="text_input_value_container"
-      {...props}
-  />
-)
+const ValueContainer = (props: ValueContainerProps | any): React.ReactElement => {
+  const { children, selectProps, hasValue } = props
+  const inputDisplay = (selectProps as any)?.inputDisplay
+  const value = (selectProps as any)?.value
+
+  // When inputDisplay is "none" and there are selected values, show count text (this is for multi-select only)
+  if (inputDisplay === 'none' && hasValue && value) {
+    const selectedCount = Array.isArray(value) ? value.length : 0
+    
+    return (
+      <components.ValueContainer 
+          className="text_input_value_container"
+          {...props}
+      >
+        <Body
+            className="pb_typeahead_selection_count"
+            text={`${selectedCount} item${selectedCount !== 1 ? 's' : ''} selected`}
+        />
+        {children}
+      </components.ValueContainer>
+    )
+  }
+
+  return (
+    <components.ValueContainer 
+        className="text_input_value_container"
+        {...props}
+    />
+  )
+}
 
 export default ValueContainer

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

@@ -0,0 +1,30 @@
+<% 
+options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' }
+] 
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-input-display-none",
+    label: "With Input Display None",
+    options: options,
+    name: :foo,
+    input_display: "none",
+    })
+%>
+<br/>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-input-display-pills",
+    label: "With Input Display Pills (Default)",
+    options: options,
+    name: :foo,
+    pills: true,
+    })
+%>

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

@@ -0,0 +1,37 @@
+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' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' }
+]
+
+const TypeaheadInputDisplay = (props) => {
+  return (
+    <>
+      <Typeahead
+          inputDisplay="none"
+          isMulti
+          label="With Input Display None"
+          options={options}
+          {...props}
+      />
+      <br/>
+      <Typeahead
+          isMulti
+          label="With Input Display Pills (Default)"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadInputDisplay

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

@@ -0,0 +1,3 @@
+Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default. 
+
+**NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.

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

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { Typeahead, Title } from 'playbook-ui'
+import Typeahead from '../_typeahead'
+import Title from '../../pb_title/_title'
 import { useForm } from 'react-hook-form'
 
 const languages = [

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

@@ -5,6 +5,7 @@ examples:
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -26,6 +27,7 @@ examples:
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -17,4 +17,5 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
 export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'