playbook_ui 16.1.0.pre.alpha.play264213817 → 16.1.0.pre.alpha.play273614090

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

@@ -4,16 +4,18 @@ import { PbDropdownKeyboard } from "./keyboard_accessibility";
 const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
 const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
 const CONTAINER_SELECTOR = "[data-dropdown-container]";
-const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
-const UP_ARROW_SELECTOR = "#dropdown_close_icon";
+const DOWN_ARROW_SELECTOR = "[data-dropdown-open-icon]";
+const UP_ARROW_SELECTOR = "[data-dropdown-close-icon]";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
+const DROPDOWN_TRIGGER_DISPLAY = "[data-dropdown-trigger-display]";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
-const DROPDOWN_INPUT = "#dropdown-selected-option";
+const DROPDOWN_INPUT = "[data-dropdown-selected-option]";
 const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
 const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
-const CLEAR_ICON_SELECTOR = "#dropdown_clear_icon";
+const CLEAR_ICON_SELECTOR = "[data-dropdown-clear-icon]";
+const LABEL_SELECTOR = '[data-dropdown="pb-dropdown-label"]';
+
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -30,14 +32,15 @@ export default class PbDropdown extends PbEnhancedElement {
   connect() {
     // Store instance on element for DatePicker sync
     this.element._pbDropdownInstance = this;
-    
+
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.isMultiSelect = this.element.dataset.pbDropdownMultiSelect === "true";
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
     const baseInput = this.element.querySelector(DROPDOWN_INPUT);
-    this.wasOriginallyRequired = baseInput && baseInput.hasAttribute("required");
+    this.wasOriginallyRequired =
+      baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -48,6 +51,7 @@ export default class PbDropdown extends PbEnhancedElement {
     this.updatePills();
 
     this.clearBtn = this.element.querySelector(CLEAR_ICON_SELECTOR);
+    this.isClearable = this.element.dataset.pbDropdownClearable !== "false";
     if (this.clearBtn) {
       this.clearBtn.style.display = "none";
       this.clearBtn.addEventListener("click", (e) => {
@@ -60,6 +64,10 @@ export default class PbDropdown extends PbEnhancedElement {
 
   updateClearButton() {
     if (!this.clearBtn) return;
+    if (!this.isClearable) {
+      this.clearBtn.style.display = "none";
+      return;
+    }
     const hasSelection = this.isMultiSelect
       ? this.selectedOptions.size > 0
       : Boolean(this.element.querySelector(DROPDOWN_INPUT).value);
@@ -70,15 +78,24 @@ export default class PbDropdown extends PbEnhancedElement {
   bindEventListeners() {
     const customTrigger =
       this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
-    customTrigger.addEventListener("click", () =>
-      this.toggleElement(this.target)
-    );
+    customTrigger.addEventListener("click", (e) => {
+      const label = e.target.closest(LABEL_SELECTOR);
+      if (label && label.htmlFor) {
+        const trigger = this.element.querySelector(
+          `#${CSS.escape(label.htmlFor)}`,
+        );
+        if (trigger) {
+          trigger.focus();
+        }
+      }
+      this.toggleElement(this.target);
+    });
 
     this.target.addEventListener("click", this.handleOptionClick.bind(this));
     document.addEventListener(
       "click",
       this.handleDocumentClick.bind(this),
-      true
+      true,
     );
   }
 
@@ -87,7 +104,7 @@ export default class PbDropdown extends PbEnhancedElement {
     if (!this.searchBar) return;
 
     this.searchBar.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value)
+      this.handleSearch(e.target.value),
     );
   }
 
@@ -102,46 +119,85 @@ export default class PbDropdown extends PbEnhancedElement {
 
     // Live filter
     this.searchInput.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value)
+      this.handleSearch(e.target.value),
     );
   }
 
   adjustDropdownHeight() {
     if (this.target.classList.contains("open")) {
       const el = this.target;
+      const shouldConstrain = el.classList.contains("constrain_height");
       el.style.height = "auto";
       requestAnimationFrame(() => {
-        const newHeight = el.scrollHeight + "px";
-        el.offsetHeight; // force reflow
-        el.style.height = newHeight;
+        if (shouldConstrain) {
+          // Calculate 18em in pixels (matches SCSS max-height: 18em)
+          const fontSize = parseFloat(getComputedStyle(el).fontSize) || 16;
+          const maxHeight = fontSize * 18;
+          const scrollHeight = el.scrollHeight;
+          const newHeight = Math.min(scrollHeight, maxHeight);
+          el.offsetHeight; // force reflow
+          el.style.height = newHeight + "px";
+        } else {
+          el.offsetHeight; // force reflow
+          el.style.height = el.scrollHeight + "px";
+        }
       });
     }
   }
 
+  adjustDropdownPosition(container) {
+    if (!container) return;
+
+    const wrapper = this.element.querySelector(".dropdown_wrapper");
+    if (!wrapper) return;
+
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const h = container.getBoundingClientRect().height || container.scrollHeight;
+    const spaceBelow = window.innerHeight - wrapperRect.bottom;
+    const spaceAbove = wrapperRect.top;
+
+    // If not enough space below but enough space above, position above
+    if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+      container.style.top = "auto";
+      container.style.bottom = "calc(100% + 5px)";
+      container.style.marginTop = "0";
+      container.style.marginBottom = "0";
+    } else {
+      // Default: position below
+      container.style.top = "";
+      container.style.bottom = "";
+      container.style.marginTop = "";
+      container.style.marginBottom = "";
+    }
+  }
+
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
-    let hasMatch = false
+    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;
-    }
+      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
+      // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
-      if (match) hasMatch = true
+      if (match) hasMatch = true;
     });
 
     this.adjustDropdownHeight();
 
-    this.removeNoOptionsMessage()
+    this.removeNoOptionsMessage();
     if (!hasMatch) {
-      this.showNoOptionsMessage()
+      this.showNoOptionsMessage();
     }
   }
 
@@ -149,7 +205,8 @@ export default class PbDropdown extends PbEnhancedElement {
     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.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);
@@ -200,6 +257,8 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   isClickOutside(event) {
+    const label = event.target.closest(LABEL_SELECTOR);
+    if (label && this.element.contains(label)) return false;
     const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
     if (customTrigger) {
       return !customTrigger.contains(event.target);
@@ -230,8 +289,8 @@ export default class PbDropdown extends PbEnhancedElement {
         ? JSON.parse(
             this.element.querySelector(
               OPTION_SELECTOR +
-                `[data-dropdown-option-label*='"id":"${hiddenInput.value}"']`
-            ).dataset.dropdownOptionLabel
+                `[data-dropdown-option-label*='"id":"${hiddenInput.value}"']`,
+            ).dataset.dropdownOptionLabel,
           )
         : null;
     }
@@ -240,14 +299,14 @@ export default class PbDropdown extends PbEnhancedElement {
       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"
+      '[data-dropdown-trigger-custom-display]',
     );
 
     if (triggerElement) {
@@ -255,36 +314,46 @@ export default class PbDropdown extends PbEnhancedElement {
         const selectedLabel = JSON.parse(value).label;
         triggerElement.textContent = selectedLabel;
         this.emitSelectionChange();
-        
+
         // Handle quickpick variant: populate start/end date hidden inputs
         const optionData = JSON.parse(value);
         const startDateId = this.element.dataset.startDateId;
         const endDateId = this.element.dataset.endDateId;
         const controlsStartId = this.element.dataset.controlsStartId;
         const controlsEndId = this.element.dataset.controlsEndId;
-        
+
         if (optionData.formatted_start_date && optionData.formatted_end_date) {
           // Populate date inputs when option has date fields
           if (startDateId) {
             const startDateInput = document.getElementById(startDateId);
-            if (startDateInput) startDateInput.value = optionData.formatted_start_date;
+            if (startDateInput)
+              startDateInput.value = optionData.formatted_start_date;
           }
-          
+
           if (endDateId) {
             const endDateInput = document.getElementById(endDateId);
-            if (endDateInput) endDateInput.value = optionData.formatted_end_date;
+            if (endDateInput)
+              endDateInput.value = optionData.formatted_end_date;
           }
-          
+
           // Sync with DatePickers if controlsStartId/controlsEndId are present
           if (controlsStartId) {
-            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            const startPicker = document.querySelector(
+              `#${controlsStartId}`,
+            )?._flatpickr;
             if (startPicker) {
-              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+              startPicker.setDate(
+                optionData.formatted_start_date,
+                true,
+                "m/d/Y",
+              );
             }
           }
-          
+
           if (controlsEndId) {
-            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            const endPicker = document.querySelector(
+              `#${controlsEndId}`,
+            )?._flatpickr;
             if (endPicker) {
               endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
             }
@@ -295,22 +364,26 @@ export default class PbDropdown extends PbEnhancedElement {
             const startDateInput = document.getElementById(startDateId);
             if (startDateInput) startDateInput.value = "";
           }
-          
+
           if (endDateId) {
             const endDateInput = document.getElementById(endDateId);
             if (endDateInput) endDateInput.value = "";
           }
-          
+
           // Clear DatePickers as well
           if (controlsStartId) {
-            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            const startPicker = document.querySelector(
+              `#${controlsStartId}`,
+            )?._flatpickr;
             if (startPicker) {
               startPicker.clear();
             }
           }
-          
+
           if (controlsEndId) {
-            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            const endPicker = document.querySelector(
+              `#${controlsEndId}`,
+            )?._flatpickr;
             if (endPicker) {
               endPicker.clear();
             }
@@ -350,7 +423,9 @@ export default class PbDropdown extends PbEnhancedElement {
           this.adjustDropdownHeight();
         }
       });
-      this.element.querySelector(DROPDOWN_INPUT).value = Array.from(this.selectedOptions)
+      this.element.querySelector(DROPDOWN_INPUT).value = Array.from(
+        this.selectedOptions,
+      )
         .map((opt) => JSON.parse(opt).id)
         .join(",");
     } else {
@@ -365,7 +440,21 @@ export default class PbDropdown extends PbEnhancedElement {
   showElement(elem) {
     elem.classList.remove("close");
     elem.classList.add("open");
-    elem.style.height = elem.scrollHeight + "px";
+    
+    const shouldConstrain = elem.classList.contains("constrain_height");
+    if (shouldConstrain) {
+      // Calculate height respecting max-height constraint (18em)
+      const fontSize = parseFloat(getComputedStyle(elem).fontSize) || 16;
+      const maxHeight = fontSize * 18; // matches SCSS max-height: 18em
+      const scrollHeight = elem.scrollHeight;
+      const height = Math.min(scrollHeight, maxHeight);
+      elem.style.height = height + "px";
+    } else {
+      elem.style.height = elem.scrollHeight + "px";
+    }
+    
+    // Auto-position dropdown above if not enough space below
+    this.adjustDropdownPosition(elem);
   }
 
   hideElement(elem) {
@@ -382,7 +471,7 @@ export default class PbDropdown extends PbEnhancedElement {
       this.keyboardHandler.focusedOptionIndex = -1;
       const options = this.element.querySelectorAll(OPTION_SELECTOR);
       options.forEach((option) =>
-        option.classList.remove("pb_dropdown_option_focused")
+        option.classList.remove("pb_dropdown_option_focused"),
       );
     }
   }
@@ -417,7 +506,7 @@ export default class PbDropdown extends PbEnhancedElement {
           hiddenInput.closest(".dropdown_wrapper").classList.add("error");
         }
       },
-      true
+      true,
     );
   }
 
@@ -427,7 +516,7 @@ export default class PbDropdown extends PbEnhancedElement {
         const dropdownWrapperElement = input.closest(".dropdown_wrapper");
         dropdownWrapperElement.classList.remove("error");
         const errorLabelElement = dropdownWrapperElement.querySelector(
-          ".pb_body_kit_negative"
+          ".pb_body_kit_negative",
         );
         if (errorLabelElement) {
           errorLabelElement.remove();
@@ -435,13 +524,13 @@ export default class PbDropdown extends PbEnhancedElement {
         return;
       }
     }
-    
+
     if (input.checkValidity()) {
       const dropdownWrapperElement = input.closest(".dropdown_wrapper");
       dropdownWrapperElement.classList.remove("error");
 
       const errorLabelElement = dropdownWrapperElement.querySelector(
-        ".pb_body_kit_negative"
+        ".pb_body_kit_negative",
       );
       if (errorLabelElement) {
         errorLabelElement.remove();
@@ -452,7 +541,7 @@ export default class PbDropdown extends PbEnhancedElement {
   setDefaultValue() {
     const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
     const optionEls = Array.from(
-      this.element.querySelectorAll(OPTION_SELECTOR)
+      this.element.querySelectorAll(OPTION_SELECTOR),
     );
     const defaultValue = hiddenInput.dataset.defaultValue || "";
     if (!defaultValue) return;
@@ -498,44 +587,53 @@ export default class PbDropdown extends PbEnhancedElement {
       selectedOption.classList.add("pb_dropdown_option_selected");
       const optionData = JSON.parse(selectedOption.dataset.dropdownOptionLabel);
       this.setTriggerElementText(optionData.label);
-      
+
       // Handle quickpick variant: populate start/end date hidden inputs and sync DatePickers
       if (optionData.formatted_start_date && optionData.formatted_end_date) {
         const startDateId = this.element.dataset.startDateId;
         const endDateId = this.element.dataset.endDateId;
         const controlsStartId = this.element.dataset.controlsStartId;
         const controlsEndId = this.element.dataset.controlsEndId;
-        
+
         if (startDateId) {
           const startDateInput = document.getElementById(startDateId);
-          if (startDateInput) startDateInput.value = optionData.formatted_start_date;
+          if (startDateInput)
+            startDateInput.value = optionData.formatted_start_date;
         }
-        
+
         if (endDateId) {
           const endDateInput = document.getElementById(endDateId);
           if (endDateInput) endDateInput.value = optionData.formatted_end_date;
         }
-        
+
         // Sync with DatePickers - retry with delays to ensure DatePickers are initialized
         const syncDatePickers = () => {
           if (controlsStartId) {
-            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            const startPicker = document.querySelector(
+              `#${controlsStartId}`,
+            )?._flatpickr;
             if (startPicker) {
-              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+              startPicker.setDate(
+                optionData.formatted_start_date,
+                true,
+                "m/d/Y",
+              );
             }
           }
-          
+
           if (controlsEndId) {
-            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            const endPicker = document.querySelector(
+              `#${controlsEndId}`,
+            )?._flatpickr;
             if (endPicker) {
               endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
             }
           }
         };
-        
+
         // Try immediately
         syncDatePickers();
-        
+
         // Retry after short delay in case DatePickers aren't ready yet
         setTimeout(syncDatePickers, 100);
         setTimeout(syncDatePickers, 300);
@@ -596,9 +694,9 @@ export default class PbDropdown extends PbEnhancedElement {
   updatePills() {
     if (!this.isMultiSelect) return;
 
-    const wrapper = this.element.querySelector("#dropdown_pills_wrapper");
+    const wrapper = this.element.querySelector('[data-dropdown-pills-wrapper]');
     const placeholder = this.element.querySelector(
-      "#dropdown_trigger_display_multi_select"
+      '[data-dropdown-trigger-display-multi-select]',
     );
     if (!wrapper) return;
 
@@ -616,7 +714,12 @@ export default class PbDropdown extends PbEnhancedElement {
       // 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", `pb_form_pill_${color}`, "pb_form_pill_none", "mr_xs");
+      pill.classList.add(
+        "pb_form_pill_kit",
+        `pb_form_pill_${color}`,
+        "pb_form_pill_none",
+        "mr_xs",
+      );
       if (this.formPillProps.size === "small") {
         pill.classList.add("pb_form_pill_small");
       }
@@ -641,8 +744,8 @@ export default class PbDropdown extends PbEnhancedElement {
 
         const optEl = this.element.querySelector(
           `${OPTION_SELECTOR}[data-dropdown-option-label*='"id":${JSON.stringify(
-            id
-          )}']`
+            id,
+          )}']`,
         );
         if (optEl) {
           optEl.style.display = "";
@@ -671,18 +774,18 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
     const customDisplay = this.element.querySelector(
-      "#dropdown_trigger_custom_display"
+      '[data-dropdown-trigger-custom-display]',
     );
     if (customDisplay) {
       customDisplay.style.display = "none";
     }
-    
+
     // Clear quickpick hidden inputs
     const startDateId = this.element.dataset.startDateId;
     const endDateId = this.element.dataset.endDateId;
     const controlsStartId = this.element.dataset.controlsStartId;
     const controlsEndId = this.element.dataset.controlsEndId;
-    
+
     if (startDateId) {
       const startDateInput = document.getElementById(startDateId);
       if (startDateInput) startDateInput.value = "";
@@ -691,22 +794,24 @@ export default class PbDropdown extends PbEnhancedElement {
       const endDateInput = document.getElementById(endDateId);
       if (endDateInput) endDateInput.value = "";
     }
-    
+
     // Clear linked DatePickers if controlsStartId/controlsEndId are present
     if (controlsStartId) {
-      const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+      const startPicker = document.querySelector(
+        `#${controlsStartId}`,
+      )?._flatpickr;
       if (startPicker) {
         startPicker.clear();
       }
     }
-    
+
     if (controlsEndId) {
       const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
       if (endPicker) {
         endPicker.clear();
       }
     }
-    
+
     this.resetDropdownValue();
     this.updatePills();
     this.updateClearButton();
@@ -717,21 +822,24 @@ export default class PbDropdown extends PbEnhancedElement {
   // Method for DatePicker sync - only clears the dropdown, not the DatePickers
   clearSelected() {
     // Only clear if this is a single-select quickpick variant
-    if (this.element.dataset.pbDropdownVariant !== "quickpick" || this.isMultiSelect) {
+    if (
+      this.element.dataset.pbDropdownVariant !== "quickpick" ||
+      this.isMultiSelect
+    ) {
       return;
     }
-    
+
     const customDisplay = this.element.querySelector(
-      "#dropdown_trigger_custom_display"
+      '[data-dropdown-trigger-custom-display]',
     );
     if (customDisplay) {
       customDisplay.style.display = "none";
     }
-    
+
     // Clear quickpick hidden inputs only (not the DatePickers)
     const startDateId = this.element.dataset.startDateId;
     const endDateId = this.element.dataset.endDateId;
-    
+
     if (startDateId) {
       const startDateInput = document.getElementById(startDateId);
       if (startDateInput) startDateInput.value = "";
@@ -740,7 +848,7 @@ export default class PbDropdown extends PbEnhancedElement {
       const endDateInput = document.getElementById(endDateId);
       if (endDateInput) endDateInput.value = "";
     }
-    
+
     this.resetDropdownValue();
     this.updateClearButton();
     this.emitSelectionChange();
@@ -767,7 +875,7 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    
+
     // For multi-select, remove required from base input when there are selections
     // The generated inputs handle the form submission with actual values
     // Restore required attribute when there are no selections (if it was originally required)

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

@@ -19,6 +19,7 @@ type DropdownContainerProps = {
   aria?: { [key: string]: string };
   children?: React.ReactChild[] | React.ReactChild;
   className?: string;
+  constrainHeight?: boolean;
   dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -31,6 +32,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     aria = {},
     children,
     className,
+    constrainHeight = false,
     dark = false,
     data = {},
     htmlOptions = {},
@@ -54,6 +56,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   const classes = classnames(
     buildCss("pb_dropdown_container"),
     `${isDropDownClosed ? "close" : "open"}`,
+    constrainHeight && "constrain_height",
     globalProps(props),
     className
   );