playbook_ui 14.19.0 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854

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 %>"
+            name="<%= object.name %><%= '[]' if object.multi_select %>"
             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}) %>
-            <%= pb_rails("dropdown/dropdown_container", props: {searchbar: object.searchbar}) do %>
+            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select }) %>
+            <%= 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,9 +22,17 @@ 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)
+        Hash(prop(:data)).merge(
+          pb_dropdown: true,
+          pb_dropdown_multi_select: multi_select,
+          form_pill_props: form_pill_props.to_json
+        )
       end
 
       def classname
@@ -38,7 +46,13 @@ module Playbook
       end
 
       def input_default_value
-        default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
+        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
       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") 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,23 +24,44 @@
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
-                    <% if object.autocomplete %>
-                        <input
-                            data-dropdown-autocomplete
-                            class="dropdown_input"
-                            type="text"
-                            placeholder="<%= object.placeholder || 'Select…' %>"
-                            autocomplete="off"
-                        />
+                    <% 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 %>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                        <% 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

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

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

@@ -13,6 +13,7 @@ const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
 const DROPDOWN_INPUT = "#dropdown-selected-option";
 const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
 const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
+const CLEAR_ICON_SELECTOR = "#dropdown_clear_icon";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -20,11 +21,18 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   get target() {
-    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+    return this.element.querySelector(CONTAINER_SELECTOR);
   }
 
+  selectedOptions = new Set();
+  clearBtn = null;
+
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
+    this.isMultiSelect = this.element.dataset.pbDropdownMultiSelect === "true";
+    this.formPillProps = this.element.dataset.formPillProps
+      ? JSON.parse(this.element.dataset.formPillProps)
+      : {};
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -32,6 +40,26 @@ export default class PbDropdown extends PbEnhancedElement {
     this.handleFormValidation();
     this.handleFormReset();
     this.bindSearchBar();
+    this.updatePills();
+
+    this.clearBtn = this.element.querySelector(CLEAR_ICON_SELECTOR);
+    if (this.clearBtn) {
+      this.clearBtn.style.display = "none";
+      this.clearBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.clearSelection();
+      });
+    }
+    this.updateClearButton();
+  }
+
+  updateClearButton() {
+    if (!this.clearBtn) return;
+    const hasSelection = this.isMultiSelect
+      ? this.selectedOptions.size > 0
+      : Boolean(this.element.querySelector(DROPDOWN_INPUT).value);
+
+    this.clearBtn.style.display = hasSelection ? "" : "none";
   }
 
   bindEventListeners() {
@@ -52,7 +80,7 @@ export default class PbDropdown extends PbEnhancedElement {
   bindSearchBar() {
     this.searchBar = this.element.querySelector(SEARCH_BAR_SELECTOR);
     if (!this.searchBar) return;
-  
+
     this.searchBar.addEventListener("input", (e) =>
       this.handleSearch(e.target.value)
     );
@@ -73,11 +101,28 @@ export default class PbDropdown extends PbEnhancedElement {
     );
   }
 
+  adjustDropdownHeight() {
+    if (this.target.classList.contains("open")) {
+      const el = this.target;
+      el.style.height = "auto";
+      requestAnimationFrame(() => {
+        const newHeight = el.scrollHeight + "px";
+        el.offsetHeight; // force reflow
+        el.style.height = newHeight;
+      });
+    }
+  }
+
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
     this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
-      const label = JSON.parse(opt.dataset.dropdownOptionLabel).label
-        .toString()
+      //make it so that if the option is selected, it will not show up in the search results
+      if (this.isMultiSelect && this.selectedOptions.has(opt.dataset.dropdownOptionLabel)) {
+      opt.style.display = "none";
+      return;
+    }
+      const label = JSON.parse(opt.dataset.dropdownOptionLabel)
+        .label.toString()
         .toLowerCase();
 
       // hide or show option
@@ -85,15 +130,7 @@ export default class PbDropdown extends PbEnhancedElement {
       opt.style.display = match ? "" : "none";
     });
 
-    if (this.target.classList.contains("open")) {
-      const el = this.target;
-        el.style.height = "auto";
-        requestAnimationFrame(() => {
-        const newHeight = el.scrollHeight + "px";
-          el.offsetHeight; // force reflow
-        el.style.height = newHeight;
-      });
-    }
+    this.adjustDropdownHeight();
   }
 
   handleOptionClick(event) {
@@ -102,10 +139,26 @@ export default class PbDropdown extends PbEnhancedElement {
 
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
-      hiddenInput.value = JSON.parse(value).id;
-      this.clearFormValidation(hiddenInput);
+      if (this.isMultiSelect) {
+        const alreadySelected = this.selectedOptions.has(value);
+        if (alreadySelected) {
+          this.selectedOptions.delete(value);
+        } else {
+          this.selectedOptions.add(value);
+        }
+        this.updatePills();
+        this.syncHiddenInputs();
+        if (this.searchInput && this.isMultiSelect) {
+          this.searchInput.value = "";
+          this.handleBackspaceClear();
+        }
+      } else {
+        hiddenInput.value = JSON.parse(value).id;
+      }
 
+      this.clearFormValidation(hiddenInput);
       this.onOptionSelected(value, option);
+      this.updateClearButton();
     }
   }
 
@@ -137,23 +190,54 @@ export default class PbDropdown extends PbEnhancedElement {
     }
   }
 
+  emitSelectionChange() {
+    let detail;
+
+    if (this.isMultiSelect) {
+      detail = Array.from(this.selectedOptions).map(JSON.parse);
+    } else {
+      const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+      detail = hiddenInput.value
+        ? JSON.parse(
+            this.element.querySelector(
+              OPTION_SELECTOR +
+                `[data-dropdown-option-label*='"id":"${hiddenInput.value}"']`
+            ).dataset.dropdownOptionLabel
+          )
+        : null;
+    }
+    this.element.setAttribute("data-option-selected", JSON.stringify(detail));
+    this.element.dispatchEvent(
+      new CustomEvent("pb:dropdown:selected", {
+        detail,
+        bubbles: true,
+      })
+    );
+  }
+
   onOptionSelected(value, selectedOption) {
     const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
     const customDisplayElement = this.element.querySelector(
       "#dropdown_trigger_custom_display"
     );
+
     if (triggerElement) {
-      const selectedLabel = JSON.parse(value).label;
-      triggerElement.textContent = selectedLabel;
+      if (!this.isMultiSelect) {
+        const selectedLabel = JSON.parse(value).label;
+        triggerElement.textContent = selectedLabel;
+        this.emitSelectionChange();
+      }
       if (customDisplayElement) {
+        triggerElement.textContent = "";
         customDisplayElement.style.display = "block";
         customDisplayElement.style.paddingRight = "8px";
       }
     }
 
     const autocompleteInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
-    if (autocompleteInput){
+    if (autocompleteInput && !this.isMultiSelect) {
       autocompleteInput.value = JSON.parse(value).label;
+      this.emitSelectionChange();
     }
 
     const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
@@ -165,10 +249,24 @@ export default class PbDropdown extends PbEnhancedElement {
     }
 
     const options = this.element.querySelectorAll(OPTION_SELECTOR);
-    options.forEach((option) => {
-      option.classList.remove("pb_dropdown_option_selected");
-    });
-    selectedOption.classList.add("pb_dropdown_option_selected");
+    if (this.isMultiSelect) {
+      this.emitSelectionChange();
+      Array.from(this.selectedOptions).map((option) => {
+        if (
+          JSON.parse(option).id ===
+          JSON.parse(selectedOption.dataset.dropdownOptionLabel).id
+        ) {
+          selectedOption.style.display = "none";
+          this.adjustDropdownHeight();
+        }
+      });
+    } else {
+      options.forEach((option) => {
+        option.classList.remove("pb_dropdown_option_selected");
+      });
+      selectedOption.classList.add("pb_dropdown_option_selected");
+    }
+    this.updateClearButton();
   }
 
   showElement(elem) {
@@ -242,21 +340,66 @@ export default class PbDropdown extends PbEnhancedElement {
         errorLabelElement.remove();
       }
     }
+    if (this.isMultiSelect) {
+      if (this.selectedOptions.size > 0) {
+        const dropdownWrapperElement = input.closest(".dropdown_wrapper");
+        dropdownWrapperElement.classList.remove("error");
+        const errorLabelElement = dropdownWrapperElement.querySelector(
+          ".pb_body_kit_negative"
+        );
+        if (errorLabelElement) {
+          errorLabelElement.remove();
+        }
+      }
+    }
   }
 
   setDefaultValue() {
     const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
-    const options = this.element.querySelectorAll(OPTION_SELECTOR);
-
+    const optionEls = Array.from(
+      this.element.querySelectorAll(OPTION_SELECTOR)
+    );
     const defaultValue = hiddenInput.dataset.defaultValue || "";
-    hiddenInput.value = defaultValue;
+    if (!defaultValue) return;
+
+    if (this.isMultiSelect) {
+      const ids = defaultValue.split(",");
+      ids.forEach((id) => {
+        const selectedOption = optionEls.find((opt) => {
+          try {
+            return JSON.parse(opt.dataset.dropdownOptionLabel).id === id;
+          } catch {
+            return false;
+          }
+        });
+        if (!selectedOption) {
+          console.warn(`Dropdown default ID ${id} not found`);
+          return;
+        }
 
-    if (defaultValue) {
-      const selectedOption = Array.from(options).find((option) => {
-        return (
-          JSON.parse(option.dataset.dropdownOptionLabel).id === defaultValue
-        );
+        const raw = selectedOption.dataset.dropdownOptionLabel;
+        this.selectedOptions.add(raw);
+
+        selectedOption.style.display = "none";
+      });
+
+      this.updatePills();
+      this.updateClearButton();
+      this.adjustDropdownHeight();
+      this.syncHiddenInputs();
+    } else {
+      hiddenInput.value = defaultValue;
+      const selectedOption = optionEls.find((opt) => {
+        try {
+          return (
+            JSON.parse(opt.dataset.dropdownOptionLabel).id === defaultValue
+          );
+        } catch {
+          return false;
+        }
       });
+      if (!selectedOption) return;
+
       selectedOption.classList.add("pb_dropdown_option_selected");
       this.setTriggerElementText(
         JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
@@ -279,12 +422,32 @@ export default class PbDropdown extends PbEnhancedElement {
     const options = this.element.querySelectorAll(OPTION_SELECTOR);
     options.forEach((option) => {
       option.classList.remove("pb_dropdown_option_selected");
+      option.style.display = "";
     });
 
     hiddenInput.value = "";
 
     const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
     this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);
+
+    if (this.searchInput) {
+      this.searchInput.value = "";
+      if (this.target.classList.contains("open")) {
+        const el = this.target;
+        el.style.height = "auto";
+        requestAnimationFrame(() => {
+          const newHeight = el.scrollHeight + "px";
+          el.offsetHeight; // force reflow
+          el.style.height = newHeight;
+        });
+      }
+    }
+    if (this.isMultiSelect) {
+      this.selectedOptions.clear();
+      this.updatePills();
+      this.updateClearButton();
+      this.syncHiddenInputs();
+    }
   }
 
   setTriggerElementText(text) {
@@ -293,4 +456,147 @@ export default class PbDropdown extends PbEnhancedElement {
       triggerElement.textContent = text;
     }
   }
+
+  updatePills() {
+    if (!this.isMultiSelect) return;
+
+    const wrapper = this.element.querySelector("#dropdown_pills_wrapper");
+    const placeholder = this.element.querySelector(
+      "#dropdown_trigger_display_multi_select"
+    );
+    if (!wrapper) return;
+
+    wrapper.innerHTML = "";
+    // Show or hide the placeholder based on selected options
+    if (placeholder) {
+      if (this.selectedOptions.size > 0) {
+        placeholder.style.display = "none";
+      } else {
+        placeholder.style.display = "";
+      }
+    }
+
+    Array.from(this.selectedOptions).map((option) => {
+      // Create a form pill for each selected option
+      const pill = document.createElement("div");
+      const color = this.formPillProps.color || "primary";
+      pill.classList.add(`pb_form_pill_kit_${color}`, "mr_xs");
+      if (this.formPillProps.size === "small") {
+        pill.classList.add("small");
+      }
+      pill.tabIndex = 0;
+      pill.dataset.pillId = JSON.parse(option).id;
+      const innerDiv = document.createElement("h3");
+      innerDiv.className = "pb_title_kit_size_4 pb_form_pill_text";
+      innerDiv.textContent = JSON.parse(option).label;
+      pill.appendChild(innerDiv);
+
+      const closeIcon = document.createElement("div");
+      closeIcon.className = "pb_form_pill_close";
+      closeIcon.innerHTML = `<svg class="pb_custom_icon svg-inline--fa svg_${
+        this.formPillProps.size === "small" ? "xs" : "sm"
+      } svg_fw" xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25"><path fill="currentColor" d="M23.0762 6.77734L17.4512 12.4023L23.0293 17.9805C23.498 18.4023 23.498 19.1055 23.0293 19.5273C22.6074 19.9961 21.9043 19.9961 21.4824 19.5273L15.8574 13.9492L10.2793 19.5273C9.85742 19.9961 9.1543 19.9961 8.73242 19.5273C8.26367 19.1055 8.26367 18.4023 8.73242 17.9336L14.3105 12.3555L8.73242 6.77734C8.26367 6.35547 8.26367 5.65234 8.73242 5.18359C9.1543 4.76172 9.85742 4.76172 10.3262 5.18359L15.9043 10.8086L21.4824 5.23047C21.9043 4.76172 22.6074 4.76172 23.0762 5.23047C23.498 5.65234 23.498 6.35547 23.0762 6.77734Z"/></svg>`;
+      pill.appendChild(closeIcon);
+
+      closeIcon.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const id = pill.dataset.pillId;
+        this.selectedOptions.delete(option);
+
+        const optEl = this.element.querySelector(
+          `${OPTION_SELECTOR}[data-dropdown-option-label*='"id":${JSON.stringify(
+            id
+          )}']`
+        );
+        if (optEl) {
+          optEl.style.display = "";
+          if (this.target.classList.contains("open")) {
+            this.showElement(this.target);
+          }
+        }
+
+        this.updatePills();
+        this.updateClearButton();
+        this.emitSelectionChange();
+        this.syncHiddenInputs();
+      });
+      wrapper.appendChild(pill);
+    });
+  }
+
+  clearSelection() {
+    if (this.isMultiSelect) {
+      this.selectedOptions.clear();
+      this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+        opt.style.display = "";
+      });
+      if (this.target.classList.contains("open")) {
+        this.showElement(this.target);
+      }
+    }
+    const customDisplay = this.element.querySelector(
+      "#dropdown_trigger_custom_display"
+    );
+    if (customDisplay) {
+      customDisplay.style.display = "none";
+    }
+    this.resetDropdownValue();
+    this.updatePills();
+    this.updateClearButton();
+    this.syncHiddenInputs();
+    this.emitSelectionChange();
+  }
+
+  syncHiddenInputs() {
+    if (!this.isMultiSelect) return;
+    this.element
+      .querySelectorAll('input[data-generated="true"]')
+      .forEach((n) => n.remove());
+
+    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
+    if (!baseInput) return;
+    // for multi_select, for each selectedOption, create a hidden input
+    const name = baseInput.getAttribute("name");
+    this.selectedOptions.forEach((raw) => {
+      const id = JSON.parse(raw).id;
+      const inp = document.createElement("input");
+      inp.type = "hidden";
+      inp.name = name;
+      inp.value = id;
+      inp.dataset.generated = "true";
+      baseInput.insertAdjacentElement("afterend", inp);
+    });
+    baseInput.value = "";
+  }
+
+  handleBackspaceClear() {
+    if (!this.isMultiSelect) {
+      this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+        opt.classList.remove("pb_dropdown_option_selected");
+        opt.style.display = "";
+        this.adjustDropdownHeight();
+      });
+
+      const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+      if (hiddenInput) hiddenInput.value = "";
+
+      const placeholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
+      if (placeholder)
+        this.setTriggerElementText(placeholder.dataset.dropdownPlaceholder);
+    }
+    if (this.isMultiSelect) {
+      this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+        const optValue = opt.dataset.dropdownOptionLabel;
+        if (
+          this.selectedOptions.size > 0 &&
+          this.selectedOptions.has(optValue)
+        ) {
+          opt.style.display = "none";
+        } else {
+          opt.style.display = "";
+        }
+        this.adjustDropdownHeight();
+      });
+    }
+  }
 }