playbook_ui 14.19.0.pre.alpha.PLAY21297675 → 14.19.0.pre.alpha.PLAY21377811

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();
+      });
+    }
+  }
 }

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

@@ -27,6 +27,13 @@ export class PbDropdownKeyboard {
     }
   }
 
+  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);
@@ -71,7 +78,7 @@ export class PbDropdownKeyboard {
         if (this.searchInput) {
           setTimeout(() => {
             if (this.searchInput.value.trim() === "") {
-              this.dropdown.resetDropdownValue();
+              this.dropdown.handleBackspaceClear();
             }
           }, 0); 
         }
@@ -81,23 +88,43 @@ export class PbDropdownKeyboard {
     }
   }
 
-  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/DropdownOption.tsx

@@ -45,27 +45,31 @@ const DropdownOption = (props: DropdownOptionProps) => {
     filterItem,
     focusedOptionIndex,
     handleOptionClick,
+    multiSelect,
     selected,
   } = useContext(DropdownContext);
 
-  const isItemMatchingFilter = (option: GenericObject) => {
-    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+  const isItemMatchingFilter = (option: GenericObject | undefined) => {
+    const label = typeof option?.label === 'string' ? option.label.toLowerCase() : option?.label;
     return String(label).toLowerCase().includes(filterItem.toLowerCase());
   }
 
-  if (!isItemMatchingFilter(option)) {
+  // When multiSelect, then if an option is selected, remove from dropdown
+  const isSelected = Array.isArray(selected)
+   ? selected.some((item) => item.label === option?.label)
+   : (selected as GenericObject)?.label === option?.label;
+
+  
+  if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
   const isFocused =
     focusedOptionIndex >= 0 &&
-    filteredOptions[focusedOptionIndex].label === option.label;
+    filteredOptions[focusedOptionIndex].label === option?.label;
   const focusedClass = isFocused && "focused";
 
-  const selectedClass = `${
-    selected?.label === option.label
-      ? "selected"
-      : "list"
-  }`;
+  const selectedClass = isSelected ? "selected" : "list";
+
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -92,14 +96,14 @@ const DropdownOption = (props: DropdownOptionProps) => {
       <ListItem
           cursor="pointer"
           dark={dark}
-          data-name={option.value}
-          key={option.label}
+          data-name={option?.value}
+          key={option?.label}
           padding="none"
       >
           {children ? 
           <div className="dropdown_option_wrapper">{children}</div> :
               <Body dark={dark} 
-                  text={option.label} 
+                  text={option?.label} 
               />
           }
       </ListItem>