playbook_ui 14.19.0.pre.alpha.PLAY2171advancedtable7832 → 14.19.0.pre.alpha.PLAY2172homeaddressstreetundefinedstatebug7716

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

@@ -1,45 +1,35 @@
 examples:
   rails:
-  - dropdown_default_rails: Default
+  - dropdown_default: Default
   - dropdown_with_autocomplete: Autocomplete
-  - dropdown_multi_select_rails: Multi Select
-  - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
-  - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
   - 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_multi_select_with_custom_options: Multi Select with 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
-  - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
 
   react:
   - dropdown_default: Default
   - dropdown_with_autocomplete: Autocomplete
-  - dropdown_multi_select: Multi Select
-  - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
-  - dropdown_multi_select_display: Multi Select with Form Pill Props
   - 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_multi_select_with_custom_options: Multi Select with 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_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden

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

@@ -15,8 +15,3 @@ export { default as DropdownClearSelection } from './_dropdown_clear_selection.j
 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'
-export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
-export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
-export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
-export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'

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

@@ -6,7 +6,7 @@
         <input
             data-default-value="<%= input_default_value %>"
             id="dropdown-selected-option"
-            name="<%= object.name %><%= '[]' if object.multi_select %>"
+            name="<%= object.name %>"
             style="display: none"
             <%= object.required ? "required" : ""%>
         />
@@ -14,8 +14,8 @@
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select }) %>
-            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar }) 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

@@ -22,17 +22,9 @@ module Playbook
                           default: false
       prop :searchbar, type: Playbook::Props::Boolean,
                        default: false
-      prop :multi_select, type: Playbook::Props::Boolean,
-                          default: false
-      prop :form_pill_props, type: Playbook::Props::HashProp,
-                             default: {}
 
       def data
-        Hash(prop(:data)).merge(
-          pb_dropdown: true,
-          pb_dropdown_multi_select: multi_select,
-          form_pill_props: form_pill_props.to_json
-        )
+        Hash(prop(:data)).merge(pb_dropdown: true)
       end
 
       def classname
@@ -46,13 +38,7 @@ module Playbook
       end
 
       def input_default_value
-        return "" unless default_value.present?
-
-        if multi_select
-          default_value.map { |v| v.transform_keys(&:to_s)["id"] }.join(",")
-        else
-          default_value.transform_keys(&:to_s)["id"]
-        end
+        default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end
 
       def separators_class

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

@@ -14,7 +14,7 @@
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
-        <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
+        <%= pb_rails("flex/flex_item") do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
@@ -24,44 +24,23 @@
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
-                    <% 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 %>
+                    <% if object.autocomplete %>
+                        <input
+                            data-dropdown-autocomplete
+                            class="dropdown_input"
+                            type="text"
+                            placeholder="<%= object.placeholder || 'Select…' %>"
+                            autocomplete="off"
+                        />
                     <% 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 %>
+                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% end %>
             <% end %>
         <% end %>
-            <%= 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 %>
+            <%= 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"}) %>
             <% end %>
     <% end %>
     <% end %>

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

@@ -11,8 +11,6 @@ module Playbook
       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)
@@ -27,7 +25,7 @@ module Playbook
       end
 
       def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete || multi_select))
+        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete))
       end
     end
   end

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

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