playbook_ui 14.18.0.pre.alpha.PLAY20397473 → 14.18.0.pre.alpha.dropdownautocomplete7493

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -36,7 +36,6 @@ type DropdownProps = {
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
-    triggerRef?: any;
     variant?: "default" | "subtle";
 };
 
@@ -65,7 +64,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         onSelect,
         options,
         separators = true,
-        triggerRef,
         variant = "default",
     } = props;
 
@@ -91,7 +89,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
 
     const dropdownRef = useRef(null);
-    const inputRef = useRef(null);
+    const inputRef = useRef<HTMLInputElement>(null);
     const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
@@ -99,15 +97,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         separateChildComponents(children);
 
     useEffect(() => {
-        // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
-        //Only needed for when useDropdown hook used with external trigger
-        if (triggerRef?.current) {
-            const parentElement = triggerRef.current.parentNode;
-            if (parentElement) {
-                parentElement.style.position = 'relative';
-            }
-        }
-        // Handle clicks outside the dropdown
+     // Handle clicks outside the dropdown
         const handleClick = handleClickOutside({
             inputWrapperRef,
             dropdownContainerRef,
@@ -167,7 +157,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     };
 
     const handleWrapperClick = () => {
-        autocomplete && inputRef.current.focus();
+        autocomplete && inputRef?.current?.focus();
         toggleDropdown();
     };
 
@@ -202,7 +192,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             {...htmlProps}
             className={classes}
             id={id}
-            style={triggerRef ? { position: "absolute" } : { position: "relative" }}
+            style={{position: "relative"}}
         >
             <DropdownContext.Provider
                 value={{
@@ -225,8 +215,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     setIsDropDownClosed,
                     setIsInputFocused,
                     setSelected,
-                    toggleDropdown,
-                    triggerRef
+                    toggleDropdown
                 }}
             >
                 {label &&

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,4 +1,4 @@
-<% 
+<%
   options = [
     { label: 'United States', value: 'United States', id: 'us' },
     { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,4 +6,7 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>
+<%= pb_rails("dropdown", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  options: options
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb

@@ -0,0 +1,28 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧", 
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -1,86 +1,39 @@
 import React from 'react'
 
 import Dropdown from '../../pb_dropdown/_dropdown'
-import Badge from '../../pb_badge/_badge'
-import FlexItem from '../../pb_flex/_flex_item'
-import User from '../../pb_user/_user'
 
 const DropdownWithAutocomplete = (props) => {
 
   const options = [
     {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Lead UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
     },
     {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧", 
+      id: "gb"
     },
     {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
-      territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "Lead UX Designer",
-      id: "courtney-long",
-      status: "Online"
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
     }
-  ];
-
+  ]
 
   return (
   <div>
     <Dropdown autocomplete
         options={options}
         {...props}
-    >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          >
-            <>
-              <FlexItem>
-                <User
-                    align="left"
-                    avatar
-                    name={option.label}
-                    orientation="horizontal"
-                    territory={option.territory}
-                    title={option.title}
-                />
-              </FlexItem>
-              <FlexItem>
-                <Badge
-                    rounded
-                    text={option.status}
-                    variant={`${
-                        option.status === "Offline"
-                        ? "neutral"
-                        : option.status === "Online"
-                        ? "success"
-                        : "warning"
-                    }`}
-                />
-              </FlexItem>
-            </>
-          </Dropdown.Option>
-        ))}
-    </Dropdown>
+    /> 
   </div>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb

@@ -0,0 +1,58 @@
+<% 
+   options = [
+    {
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Away"
+    },
+    {
+      label: "Carlos Lima",
+      value: "Carlos Lima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+                  <% end %>
+              <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx}

@@ -1,15 +1,13 @@
-import React, { useState } from 'react'
+import React from 'react'
 
-import Dropdown from '../../pb_dropdown/_dropdown'
+import Dropdown from '../_dropdown'
 import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
 
 
-const DropdownWithAutocompleteAndCustomDisplay = (props) => {
-  const [selectedOption, setSelectedOption] = useState();
-
+const DropdownWithAutocompleteWithSubcomponents = (props) => {
   const options = [
     {
       label: "Jasper Furniss",
@@ -45,34 +43,21 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
     }
   ];
 
-  const CustomDisplay = () => {
-    return (
-      <>
-      {
-        selectedOption && (
-            <Avatar
-                name={selectedOption.label}
-                size="xs"
-            />
-        )
-      }
-    </>
-    )
-  };
 
   return (
   <div>
     <Dropdown autocomplete
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >
-        <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <User
                     align="left"
@@ -85,6 +70,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
               </FlexItem>
               <FlexItem>
                 <Badge
+                    dark
                     rounded
                     text={option.status}
                     variant={`${
@@ -96,7 +82,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
                     }`}
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
     </Dropdown>
@@ -104,4 +90,4 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   )
 }
 
-export default  DropdownWithAutocompleteAndCustomDisplay
+export default  DropdownWithAutocompleteWithSubcomponents

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md

@@ -0,0 +1 @@
+`autocomplete` prop can also be used in conjunction with the subcomponent structure.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md

@@ -0,0 +1 @@
+The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import IconCircle from '../../pb_icon_circle/_icon_circle';
+
+const DropdownWithSearch = (props) => {
+const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      icon: "🇺🇸",
+      id: "United-states"
+
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      icon: "🇬🇧",
+      id: "united-kingdom"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger>
+        <div key={selectedOption ? selectedOption.icon : "flag"}>
+            <IconCircle
+                cursor="pointer"
+                icon={selectedOption ? selectedOption.icon : "flag"}
+                variant="royal"
+            />
+        </div>
+      </Dropdown.Trigger>
+      <Dropdown.Container maxWidth="xs"
+          searchbar
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownWithSearch

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md

@@ -0,0 +1,2 @@
+The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
+`searchbar` is set to false by default. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb

@@ -0,0 +1,52 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧",
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") do %>
+        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
+    <% end %>
+    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
+              <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md

@@ -0,0 +1,2 @@
+The optional `searchbar` boolean prop can also be used on the `dropdown/dropdown_container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
+`searchbar` is set to false by default. 

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

@@ -1,12 +1,15 @@
 examples:
   rails:
   - dropdown_default: Default
+  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
+  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
+  - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
@@ -15,20 +18,20 @@ examples:
 
   react:
   - dropdown_default: Default
+  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
+  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
+  - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
-  # - dropdown_with_autocomplete: Autocomplete
-  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
-  # - dropdown_with_external_control: useDropdown Hook
-  # - dropdown_with_hook: useDropdown Hook with Any Trigger
+  - dropdown_with_external_control: useDropdown Hook
 

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

@@ -3,11 +3,10 @@ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_di
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
 export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
-export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
+export { default as DropdownWithAutocompleteWithSubcomponents } from './_dropdown_with_autocomplete_with_subcomponents.jsx'
 export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
 export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
-export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
@@ -15,3 +14,4 @@ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.j
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
+export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -14,8 +14,8 @@
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger") %>
-            <%= pb_rails("dropdown/dropdown_container") do %>
+            <%= pb_rails("dropdown/dropdown_trigger", props:{autocomplete: object.autocomplete}) %>
+            <%= pb_rails("dropdown/dropdown_container", props: {searchbar: object.searchbar}) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -18,6 +18,10 @@ module Playbook
                      default: "default"
       prop :separators, type: Playbook::Props::Boolean,
                         default: true
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: false
+      prop :searchbar, type: Playbook::Props::Boolean,
+                       default: false
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "../utilities/test-utils"
 
-import { Dropdown, Icon } from 'playbook-ui'
+import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 
 
 const testId = 'dropdown'
@@ -219,4 +219,48 @@ test('show error message', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveTextContent(errorMessage)
+})
+
+test("autocomplete prop to render input", () => {
+  render (
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        options={options}
+    />   
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+  expect(input).toBeInTheDocument()
+})
+
+test("searchbar prop to render TextInput in container", () => {  
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    >
+      <Dropdown.Trigger>
+          <IconCircle
+              cursor="pointer"
+              icon="flag"
+              variant="royal"
+          />
+      </Dropdown.Trigger>
+      <Dropdown.Container maxWidth="xs"
+          searchbar
+      >
+      {options.map((option) => (
+      <Dropdown.Option key={option.id} 
+          option={option}
+      /> 
+    ))}
+    </Dropdown.Container>
+    </Dropdown>
+  )
+
+  const kit = screen.getByTestId(testId)
+  const searchbar = kit.querySelector('.pb_text_input_kit')
+  expect(searchbar).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,4 +1,14 @@
 <%= pb_content_tag do %>
+    <% if object.searchbar %>
+        <%= pb_rails("text_input", props: {padding_top:"xs", padding_x:"xs"}) do %>
+            <input 
+            type="text"
+            placeholder="Search…"
+            data-dropdown-search
+            autocomplete="off"
+            />
+        <% end %>
+    <% end %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
             <% if content.present? %>
                 <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbDropdown
     class DropdownContainer < Playbook::KitBase
+      prop :searchbar, type: Playbook::Props::Boolean,
+                       default: false
+
       def classname
         generate_classname("pb_dropdown_container", "close", separator: " ")
       end