playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7978

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 { render, screen, fireEvent } from "../utilities/test-utils"
 
-import { Dropdown, Icon } from 'playbook-ui'
+import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 
 
 const testId = 'dropdown'
@@ -219,4 +219,154 @@ 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()
+})
+
+test("MultiSelect prop to allow multiple selections + add correct Form Pills", () => {
+  render(
+    <Dropdown 
+        data={{ testid: testId }} 
+        multiSelect 
+        options={options} 
+    />
+ );
+
+  const kit = screen.getByTestId(testId);
+  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  fireEvent.click(option[0]); // Select first option
+  fireEvent.click(option[1]); // Select second option
+  const formPills = kit.querySelectorAll(".pb_form_pill_kit_primary");
+  expect(formPills.length).toBe(2);
+  expect(formPills[0]).toHaveTextContent("United States");
+  expect(formPills[1]).toHaveTextContent("Canada");
+});
+
+ test("hides each selected option from the dropdown", () => {
+
+    render(
+      <Dropdown 
+          data={{ testid: testId }} 
+          multiSelect 
+          options={options} 
+      />
+    );
+
+  const kit = screen.getByTestId(testId);
+  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  const firstOpt = options[0].label
+  fireEvent.click(option[0]);
+  const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })
+
+test("renders form pills inside trigger", () => {
+      render(
+        <Dropdown 
+            data={{ testid: testId }} 
+            multiSelect 
+            options={options} 
+        />
+      );
+
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(formPill).toBeInTheDocument()
+  })
+
+test("multiSelect and autocomplete to work together", () => {
+  render (
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        multiSelect
+        options={options}
+    />   
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+  expect(input).toBeInTheDocument()
+    const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(formPill).toBeInTheDocument()
+})
+
+test("renders form pills with size and color", () => {
+      render(
+        <Dropdown 
+            data={{ testid: testId }} 
+            formPillProps={{ size: "small", color: "neutral" }}
+            multiSelect 
+            options={options} 
+        />
+      );
+
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_neutral")
+  expect(formPill).toBeInTheDocument()
+  expect(formPill).toHaveClass("small")
+  })
+
+test("defaultValue works with multiSelect", () => {
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          defaultValue={[options[0], options[2]]}
+          multiSelect
+          options={options}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelectorAll(".pb_form_pill_kit_primary")).toHaveLength(2)
+    const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+    const firstOpt = options[0].label
+    expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })

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

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

@@ -8,13 +8,13 @@
         align: "center",
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
-        cursor: "pointer",
+        cursor: object.autocomplete ? "text" : "pointer",
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
-        <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
@@ -24,13 +24,44 @@
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
-                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                    <% if object.multi_select %>
+                        <%= pb_rails("flex", props: { align: "center", wrap: true }) do %>
+                            <%= pb_rails("flex", props: { id:"dropdown_pills_wrapper", wrap: true }) do %>
+                            <% end %>   
+                        <% if object.autocomplete %>
+                                <input
+                                    data-dropdown-autocomplete
+                                    class="dropdown_input"
+                                    type="text"
+                                    placeholder="<%= object.placeholder || 'Select…' %>"
+                                    autocomplete="off"
+                                />
+                            <% else %>
+                                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display_multi_select"}) %>
+                            <% end %>
+                        <% end %>
+                    <% else %>
+                        <% if object.autocomplete %>
+                            <input
+                                data-dropdown-autocomplete
+                                class="dropdown_input"
+                                type="text"
+                                placeholder="<%= object.placeholder || 'Select…' %>"
+                                autocomplete="off"
+                            />
+                        <% else %>
+                            <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                        <% end %>
+                    <% end %>
                 <% end %>
             <% end %>
         <% end %>
-            <%= pb_rails("body", props: {display: "flex"}) do  %>
-                <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
-                <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("body", props: {display: "flex", align_items:"center" }) do  %>
+                    <%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", id: "dropdown_clear_icon", padding_right:"xs" }) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
+                <% end %>
             <% end %>
     <% end %>
     <% end %>

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

@@ -9,6 +9,10 @@ module Playbook
                 default: ""
       prop :placeholder, type: Playbook::Props::String
       prop :custom_display
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: false
+      prop :multi_select, type: Playbook::Props::Boolean,
+                          default: false
 
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
@@ -23,7 +27,7 @@ module Playbook
       end
 
       def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", "select_only")
+        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete || multi_select))
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -22,12 +22,6 @@ const {
     }
 
     switch (e.key) {
-    case "Backspace":
-    case "Delete":
-      if (autocomplete) {
-      handleBackspace();
-      }
-      break;
     case "ArrowDown": {
       e.preventDefault();
       setIsDropDownClosed(false);