playbook_ui 14.20.0.pre.alpha.revert4637revert4621PLAY2033atactionbarrails7855 → 14.20.0.pre.rc.0

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/_dropdown_with_custom_display.jsx

@@ -6,7 +6,6 @@ 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'
-import Body from '../../pb_body/_body'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -51,20 +50,10 @@ const DropdownWithCustomDisplay = (props) => {
       <>
       {
         selectedOption && (
-          <Flex align="center">
             <Avatar
                 name={selectedOption.label}
                 size="xs"
             />
-            <Body 
-                marginX="xs"
-                text={selectedOption.label} 
-            />
-            <Badge 
-                text={selectedOption.status} 
-                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
-            />
-          </Flex>
         )
       }
     </>

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

@@ -1,4 +1,4 @@
-Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 

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

@@ -38,11 +38,7 @@
 
 <%
   custom_display = capture do
-    pb_rails("flex", props: { align: "center" }) do
-      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
-      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
-      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
-    end
+    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
   end
 %>
 
@@ -66,31 +62,4 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
-
-
-<script>
-  document.addEventListener("pb:dropdown:selected", (e) => {
-    const option   = e.detail;
-    const dropdown = e.target;
-
-    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
-    if (!display) return;
-
-    const nameEl = display.querySelector("#dropdown-avatar-name");
-    if (nameEl) nameEl.textContent = option.label;
-
-    const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
-    const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
-    if (avatarEl) {
-      avatarEl.dataset.name = option.label;
-      avatarEl.setAttribute("data-initials", initials);
-    }
-    const badgeEl   = display.querySelector("#dropdown-avatar-status");
-    const variant = option.status === "Online"  ? "success" : option.status === "Offline" ? "neutral" : "warning";
-    if (badgeEl) {
-      badgeEl.querySelector("span").textContent = option.status;
-      badgeEl.className = 'pb_badge_kit_' + variant;
-    }
-  });
-</script>
+<% end %>

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

@@ -1,6 +1,4 @@
-Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
-
-Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
 

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