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

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

@@ -11,6 +11,9 @@ const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
 const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
 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() {
@@ -18,16 +21,45 @@ 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();
     this.updateArrowDisplay(false);
     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() {
@@ -45,20 +77,117 @@ 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)
+    );
+  }
+
+  bindSearchInput() {
+    this.searchInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
+    if (!this.searchInput) return;
+
+    // Focus the input when anyone clicks the wrapper
+    this.element
+      .querySelector(TRIGGER_SELECTOR)
+      ?.addEventListener("click", () => this.searchInput.focus());
+
+    // Live filter
+    this.searchInput.addEventListener("input", (e) =>
+      this.handleSearch(e.target.value)
+    );
+  }
+
+  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();
+    let hasMatch = false
+    this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+      //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
+      const match = label.includes(lcTerm);
+      opt.style.display = match ? "" : "none";
+      if (match) hasMatch = true
+    });
+
+    this.adjustDropdownHeight();
+
+    this.removeNoOptionsMessage()
+    if (!hasMatch) {
+      this.showNoOptionsMessage()
+    }
+  }
+
+  showNoOptionsMessage() {
+    if (this.element.querySelector(".dropdown_no_options")) return;
+
+    const noOptionElement = document.createElement("div");
+    noOptionElement.className = "pb_body_kit_light dropdown_no_options pb_item_kit p_xs display_flex justify_content_center";
+    noOptionElement.textContent = "no option";
+
+    this.target.appendChild(noOptionElement);
+  }
+
+  removeNoOptionsMessage() {
+    const existing = this.element.querySelector(".dropdown_no_options");
+    if (existing) {
+      existing.remove();
+    }
+  }
+
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
     const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
 
     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();
     }
   }
 
   handleDocumentClick(event) {
+    if (event.target.closest(SEARCH_BAR_SELECTOR)) return;
     if (this.isClickOutside(event) && this.target.classList.contains("open")) {
       this.hideElement(this.target);
       this.updateArrowDisplay(false);
@@ -85,20 +214,56 @@ 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 && !this.isMultiSelect) {
+      autocompleteInput.value = JSON.parse(value).label;
+      this.emitSelectionChange();
+    }
+
     const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
     if (customTrigger) {
       if (this.target.classList.contains("open")) {
@@ -108,10 +273,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) {
@@ -185,21 +364,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
@@ -222,12 +446,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) {
@@ -236,4 +480,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();
+      });
+    }
+  }
 }

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

@@ -1,4 +1,6 @@
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
+const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
+
 export class PbDropdownKeyboard {
   constructor(dropdown) {
     this.dropdown = dropdown;
@@ -7,6 +9,9 @@ export class PbDropdownKeyboard {
       this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
     );
     this.focusedOptionIndex = -1;
+    this.searchInput = this.dropdownElement.querySelector(
+      SEARCH_INPUT_SELECTOR
+    );
     this.init();
   }
 
@@ -15,6 +20,25 @@ export class PbDropdownKeyboard {
       "keydown",
       this.handleKeyDown.bind(this)
     );
+    if (this.searchInput) {
+      this.searchInput.addEventListener("input", () =>
+        this.openDropdownIfClosed()
+      );
+    }
+  }
+
+  getVisibleOptions() {
+    // We only want to return the options that are visible
+    return Array.from(
+      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+    ).filter((opt) => opt.style.display !== "none");
+  }
+
+  openDropdownIfClosed() {
+    if (!this.dropdown.target.classList.contains("open")) {
+      this.dropdown.showElement(this.dropdown.target);
+      this.dropdown.updateArrowDisplay(true);
+    }
   }
 
   handleKeyDown(event) {
@@ -50,28 +74,57 @@ export class PbDropdownKeyboard {
         this.dropdown.updateArrowDisplay(false);
         this.resetFocus();
         break;
+      case "Backspace":
+        if (this.searchInput) {
+          setTimeout(() => {
+            if (this.searchInput.value.trim() === "") {
+              this.dropdown.handleBackspaceClear();
+            }
+          }, 0); 
+        }
+        break;
       default:
         break;
     }
   }
 
-  moveFocus(direction) {
+moveFocus(direction) {
+    const allOptions = Array.from(
+      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+    );
+    const visible = this.getVisibleOptions();
+    if (!visible.length) return;
+
     if (this.focusedOptionIndex !== -1) {
-      this.options[this.focusedOptionIndex].classList.remove(
+      allOptions[this.focusedOptionIndex].classList.remove(
         "pb_dropdown_option_focused"
       );
     }
-    this.focusedOptionIndex =
-      (this.focusedOptionIndex + direction + this.options.length) %
-      this.options.length;
-    this.options[this.focusedOptionIndex].classList.add(
-      "pb_dropdown_option_focused"
-    );
+
+    const prevVisibleIndex =
+      this.focusedOptionIndex === -1
+        ? -1
+        : visible.indexOf(allOptions[this.focusedOptionIndex]);
+
+    const nextVisibleIndex =
+      (prevVisibleIndex + direction + visible.length) % visible.length;
+
+    const nextEl = visible[nextVisibleIndex];
+    nextEl.classList.add("pb_dropdown_option_focused");
+
+    this.focusedOptionIndex = allOptions.indexOf(nextEl);
   }
 
+
   selectOption() {
-    const option = this.options[this.focusedOptionIndex];
-    this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
-    this.dropdown.hideElement(this.dropdown.target);
+    const allOptions = Array.from(
+      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+    );
+    if (this.focusedOptionIndex < 0) return;
+
+    const optionEl = allOptions[this.focusedOptionIndex];
+    this.dropdown.handleOptionClick({ target: optionEl });
+    this.dropdown.toggleElement(this.dropdown.target);
+    this.dropdown.updateClearButton();
   }
 }

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -6,7 +6,7 @@ import {
   buildDataProps,
   buildHtmlProps
 } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
+import { globalProps, GlobalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -24,7 +24,7 @@ type DropdownContainerProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
-};
+} & GlobalProps;
 
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {
@@ -46,7 +46,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     inputRef,
     isDropDownClosed,
     setFocusedOptionIndex,
-    triggerRef
   } = useContext(DropdownContext);
 
   const ariaProps = buildAriaProps(aria);
@@ -67,7 +66,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
         ref={dropdownContainerRef}
-        style={triggerRef ? {} : { position: "absolute"}}
+        style={{ position: "absolute"}}
     >
       {searchbar && (
         <TextInput dark={dark}