playbook_ui 16.1.0.pre.alpha.play276813969 → 16.1.0.pre.alpha.play277814027

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

@@ -14,7 +14,6 @@ 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";
-const LABEL_SELECTOR = '[data-dropdown="pb-dropdown-label"]';
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -31,15 +30,14 @@ 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();
@@ -77,24 +75,15 @@ export default class PbDropdown extends PbEnhancedElement {
   bindEventListeners() {
     const customTrigger =
       this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
-    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);
-    });
+    customTrigger.addEventListener("click", () =>
+      this.toggleElement(this.target)
+    );
 
     this.target.addEventListener("click", this.handleOptionClick.bind(this));
     document.addEventListener(
       "click",
       this.handleDocumentClick.bind(this),
-      true,
+      true
     );
   }
 
@@ -103,7 +92,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)
     );
   }
 
@@ -118,7 +107,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
     // Live filter
     this.searchInput.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value),
+      this.handleSearch(e.target.value)
     );
   }
 
@@ -172,31 +161,28 @@ export default class PbDropdown extends PbEnhancedElement {
 
   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()
     }
   }
 
@@ -204,8 +190,7 @@ 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);
@@ -256,8 +241,6 @@ 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);
@@ -288,8 +271,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;
     }
@@ -298,14 +281,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",
+      "#dropdown_trigger_custom_display"
     );
 
     if (triggerElement) {
@@ -313,46 +296,36 @@ 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");
             }
@@ -363,26 +336,22 @@ 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();
             }
@@ -422,9 +391,7 @@ 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 {
@@ -470,7 +437,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")
       );
     }
   }
@@ -505,7 +472,7 @@ export default class PbDropdown extends PbEnhancedElement {
           hiddenInput.closest(".dropdown_wrapper").classList.add("error");
         }
       },
-      true,
+      true
     );
   }
 
@@ -515,7 +482,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();
@@ -523,13 +490,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();
@@ -540,7 +507,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;
@@ -586,53 +553,44 @@ 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);
@@ -695,7 +653,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
     const wrapper = this.element.querySelector("#dropdown_pills_wrapper");
     const placeholder = this.element.querySelector(
-      "#dropdown_trigger_display_multi_select",
+      "#dropdown_trigger_display_multi_select"
     );
     if (!wrapper) return;
 
@@ -713,12 +671,7 @@ 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");
       }
@@ -743,8 +696,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 = "";
@@ -773,18 +726,18 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
     const customDisplay = this.element.querySelector(
-      "#dropdown_trigger_custom_display",
+      "#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 = "";
@@ -793,24 +746,22 @@ 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();
@@ -821,24 +772,21 @@ 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",
+      "#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 = "";
@@ -847,7 +795,7 @@ export default class PbDropdown extends PbEnhancedElement {
       const endDateInput = document.getElementById(endDateId);
       if (endDateInput) endDateInput.value = "";
     }
-
+    
     this.resetDropdownValue();
     this.updateClearButton();
     this.emitSelectionChange();
@@ -874,7 +822,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/DropdownTrigger.tsx

@@ -45,8 +45,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {
     autocomplete,
     clearable,
-    error,
-    errorId,
     filterItem,
     handleBackspace,
     handleChange,
@@ -55,10 +53,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     inputWrapperRef,
     isDropDownClosed,
     isInputFocused,
-    label: contextLabel,
     multiSelect,
     selected,
-    selectId,
     setIsInputFocused,
     toggleDropdown,
   } = useContext(DropdownContext);
@@ -108,10 +104,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     ? placeholder
     : "Select...";
 
-  const triggerAriaLabel = contextLabel
-    ? (children ? contextLabel : `${contextLabel}, ${defaultDisplayPlaceholder}`)
-    : undefined;
-
   return (
     <div {...ariaProps} 
         {...dataProps} 
@@ -122,10 +114,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
       {
           children ? (
             <div
-                aria-describedby={errorId}
-                aria-invalid={!!error}
-                aria-label={triggerAriaLabel}
-                id={selectId}
                 onClick={() => toggleDropdown()}
                 onKeyDown= {handleKeyDown}
                 ref={inputWrapperRef}
@@ -142,10 +130,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                   className={triggerWrapperClasses}
                   cursor={`${autocomplete ? "text" : "pointer"}`}
                   htmlOptions={{
-                    "aria-describedby": errorId,
-                    "aria-invalid": !!error,
-                    "aria-label": triggerAriaLabel,
-                    id: selectId,
                     onClick: () => handleWrapperClick(),
                     onKeyDown: handleKeyDown,
                     tabIndex: "0",

data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx

@@ -25,12 +25,6 @@ export const handleClickOutside =
       ) {
         shouldClose = false;
       }
-      // Target dropdown container to open dropdown
-      if (
-        targetElement.getAttribute("data-dropdown") === "pb-dropdown-label"
-      ) {
-        shouldClose = false;
-      }
       targetElement = targetElement.parentElement as HTMLElement;
     }
     if (

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -9,6 +9,7 @@
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -26,6 +26,10 @@ class PbFormValidation extends PbEnhancedElement {
       const isPhoneNumberInput = field.closest('.pb_phone_number_input')
       if (isPhoneNumberInput) return
 
+      // Skip TimePicker inputs - they handle their own validation
+      const isTimePickerInput = field.closest('.pb_time_picker')
+      if (isTimePickerInput) return
+
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
@@ -67,13 +71,16 @@ class PbFormValidation extends PbEnhancedElement {
 
     // Check if this is a phone number input
     const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
+    
+    // Check if this is a TimePicker input
+    const isTimePickerInput = kitElement.classList.contains('pb_time_picker')
 
     // ensure clean error message state
     this.clearError(target)
     kitElement.classList.add('error')
 
-    // Only add error message if it's NOT a phone number input
-    if (!isPhoneNumberInput) {
+    // Only add error message if it's NOT a phone number input or TimePicker input
+    if (!isPhoneNumberInput && !isTimePickerInput) {
       // set the error message element
       const errorMessageContainer = this.errorMessageContainer
 

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -39,13 +39,6 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      @include transition_default;
-
-      &:focus-within {
-        border-color: $primary;
-        background-color: $focus_input_light;
-      }
-
       .input_inner_container {
         width: 100%;
       }