playbook_ui 14.19.0.pre.alpha.PLAY21377811 → 14.19.0.pre.alpha.borderfixadvancedtable7816

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

@@ -15,7 +15,7 @@
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
-      min-height: 45px;
+      height: 45px;
       @media (hover: hover) {
         &:hover,
         &:active,

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, useMemo } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -25,7 +25,6 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
     defaultValue?: GenericObject;
@@ -34,7 +33,6 @@ type DropdownProps = {
     id?: string;
     isClosed?: boolean;
     label?: string;
-    multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
@@ -63,8 +61,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         id,
         isClosed = true,
         label,
-        multiSelect = false,
-        formPillProps,
         onSelect,
         options,
         separators = true,
@@ -84,20 +80,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const initialSelected = useMemo(() => {
-      if (multiSelect) {
-        if (Array.isArray(defaultValue)) return defaultValue;
-        return defaultValue && Object.keys(defaultValue).length
-          ? [defaultValue]
-          : [];
-      }
-      return defaultValue || {};
-    }, [multiSelect, defaultValue]);
-
-    const [selected, setSelected] = useState<GenericObject | GenericObject[]>(
-      initialSelected
-    );
-
+    const [selected, setSelected] = useState<GenericObject>(defaultValue);
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -110,12 +93,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
-    const selectedArray = Array.isArray(selected)
-    ? selected
-    : selected && Object.keys(selected).length
-    ? [selected]
-    : [];
-
     const { trigger, container, otherChildren } =
         separateChildComponents(children);
 
@@ -147,23 +124,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
     const optionsWithBlankSelection = blankSelectionOption.concat(options);
-
-    const availableOptions = useMemo(()=> {
-        if (!multiSelect) return optionsWithBlankSelection;
-        return optionsWithBlankSelection.filter((option: GenericObject) => !selectedArray.some((sel) => sel.label === option.label));
-    }, [optionsWithBlankSelection, selectedArray, multiSelect]);
-    
-    const filteredOptions = useMemo(() => {
-          return availableOptions.filter((opt: GenericObject) =>
-            String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
-          );
-        }, [availableOptions, filterItem]);
+    const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
+        const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+        return String(label).toLowerCase().includes(filterItem.toLowerCase());
+    });
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
         if (!isDropDownClosed) {
             let newIndex = 0;
-            if (selected && !Array.isArray(selected) && selected.label) {
+            if (selected && selected?.label) {
                 const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
                 if (selectedIndex >= 0) {
                     newIndex = selectedIndex;
@@ -179,27 +149,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setIsDropDownClosed(false);
     };
 
-
-      const handleOptionClick = (clickedItem: GenericObject) => {
-                if (multiSelect) {
-                    setSelected((prev) => {
-                       const list = prev as GenericObject[];
-                       const exists = list.find((option) => option.value === clickedItem.value);
-                       const next = exists
-                       ? list.filter((option) => option.value !== clickedItem.value)
-                           : [...list, clickedItem];
-                   onSelect && onSelect(next);
-                       return next;
-                   });
-                   setFilterItem("");
-                   setIsDropDownClosed(true);
-               } else {
-                   setSelected(clickedItem);
-                   setFilterItem("");
-                   setIsDropDownClosed(true);
-                   onSelect && onSelect(clickedItem);
-            }
-             };
+    const handleOptionClick = (selectedItem: GenericObject) => {
+        setSelected(selectedItem);
+        setFilterItem("");
+        setIsDropDownClosed(true);
+        onSelect && onSelect(selectedItem);
+    };
 
     const handleWrapperClick = () => {
         autocomplete && inputRef?.current?.focus();
@@ -207,14 +162,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     };
 
     const handleBackspace = () => {
-      if (multiSelect) {
-        setSelected([]);
-        onSelect && onSelect([]);
-      } else {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
-      }
     };
 
     const componentsToRender = prepareSubcomponents({
@@ -228,17 +178,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     });
 
     useImperativeHandle(ref, () => ({
-      clearSelected: () => {
-        if (multiSelect) {
-          setSelected([]);
-          onSelect && onSelect([]);
-        } else {
-          setSelected({});
-          onSelect && onSelect(null);
-        }
-        setFilterItem("");
-        setIsDropDownClosed(true);
-      },
+        clearSelected: () => {
+            setSelected({});
+            setFilterItem("");
+            setIsDropDownClosed(true);
+            onSelect && onSelect(null);
+        },
     }));
 
     return (
@@ -256,7 +201,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     filteredOptions,
                     filterItem,
                     focusedOptionIndex,
-                    formPillProps,
                     handleBackspace,
                     handleChange,
                     handleOptionClick,
@@ -265,8 +209,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    multiSelect,
-                    onSelect,
                     optionsWithBlankSelection,
                     selected,
                     setFocusedOptionIndex,

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

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) %>

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);