playbook_ui 15.6.0.pre.alpha.play266013023 → 15.6.0.pre.alpha.play266913088

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers-default",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  default_value: "This Month",
+  controls_start_id: "start-date-picker-default",
+  controls_end_id: "end-date-picker-default",
+  start_date_id: "quickpick_start_date_default",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date_default",
+  end_date_name: "end_date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker-default",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers-default"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker-default",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers-default"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md

@@ -0,0 +1,3 @@
+This example demonstrates the 3-input pattern with a default value. The dropdown is initialized with "This Month" selected, and both DatePickers are automatically populated with the corresponding start and end dates.
+
+The default value can be set using the `default_value` prop with any of the quickpick option labels.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  controls_start_id: "start-date-picker",
+  controls_end_id: "end-date-picker",
+  start_date_id: "quickpick_start_date",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date",
+  end_date_name: "end_date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md

@@ -0,0 +1,13 @@
+The quickpick variant can be synced with two DatePickers for a 3-input pattern. When a quickpick option is selected from the dropdown, both DatePickers are automatically populated. When either DatePicker is manually changed, the dropdown is cleared.
+
+#### Props for 3-Input Pattern:
+
+- `controls_start_id` - ID of the start DatePicker to sync with
+- `controls_end_id` - ID of the end DatePicker to sync with
+
+#### DatePicker Props:
+
+- `sync_start_with` - ID of the dropdown to clear when start date changes
+- `sync_end_with` - ID of the dropdown to clear when end date changes
+
+This pattern allows users to quickly select common date ranges or manually pick specific dates.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -47,7 +47,7 @@
 %>
 
 
-<%= pb_rails("dropdown", props: {options: options}) do %>
+<%= pb_rails("dropdown", props: {id: "user-dropdown", options: options}) do %>
     <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
@@ -71,6 +71,8 @@
 
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown") return;
+    
     const option   = e.detail;
     const dropdown = e.target;
 

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -22,6 +22,11 @@ examples:
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
+  - dropdown_quickpick_rails: Quick Pick Variant
+  - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
+  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
+  - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
   react:
   - dropdown_default: Default

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -10,6 +10,10 @@
             style="display: none"
             <%= object.required ? "required" : ""%>
         />
+        <% if object.variant == "quickpick" %>
+          <input id="<%= object.start_date_id %>" name="<%= object.start_date_name %>" style="display: none">
+          <input id="<%= object.end_date_id %>" name="<%= object.end_date_name %>" style="display: none">
+        <% end %>
         <% if content.present? %>
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "quickpick_helper"
+
 module Playbook
   module PbDropdown
     class Dropdown < Playbook::KitBase
@@ -14,7 +16,7 @@ module Playbook
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default subtle],
+                     values: %w[default subtle quickpick],
                      default: "default"
       prop :separators, type: Playbook::Props::Boolean,
                         default: true
@@ -26,13 +28,32 @@ module Playbook
                           default: false
       prop :form_pill_props, type: Playbook::Props::HashProp,
                              default: {}
+      prop :range_ends_today, type: Playbook::Props::Boolean,
+                              default: false
+      prop :controls_end_id, type: Playbook::Props::String,
+                             default: ""
+      prop :controls_start_id, type: Playbook::Props::String,
+                               default: ""
+      prop :start_date_id, type: Playbook::Props::String,
+                           default: "start_date_id"
+      prop :start_date_name, type: Playbook::Props::String,
+                             default: "start_date_name"
+      prop :end_date_id, type: Playbook::Props::String,
+                         default: "end_date_id"
+      prop :end_date_name, type: Playbook::Props::String,
+                           default: "end_date_name"
 
       def data
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_multi_select: multi_select,
-          form_pill_props: form_pill_props.to_json
-        )
+          pb_dropdown_variant: variant,
+          form_pill_props: form_pill_props.to_json,
+          start_date_id: variant == "quickpick" ? start_date_id : nil,
+          end_date_id: variant == "quickpick" ? end_date_id : nil,
+          controls_start_id: variant == "quickpick" && controls_start_id.present? ? controls_start_id : nil,
+          controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil
+        ).compact
       end
 
       def classname
@@ -48,7 +69,15 @@ module Playbook
       def input_default_value
         return "" unless default_value.present?
 
-        if multi_select
+        if variant == "quickpick"
+          d = default_value.to_s.downcase
+          matched_option = quickpick_options.find do |opt|
+            opt[:label].downcase == d
+          end
+          return matched_option[:id] if matched_option
+
+          ""
+        elsif multi_select
           default_value.map { |v| v.transform_keys(&:to_s)["id"] }.join(",")
         else
           default_value.transform_keys(&:to_s)["id"]
@@ -60,7 +89,12 @@ module Playbook
       end
 
       def options_with_blank
-        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
+        dropdown_options = variant == "quickpick" ? quickpick_options : options
+        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + dropdown_options : dropdown_options
+      end
+
+      def quickpick_options
+        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
       end
     end
   end

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

@@ -28,6 +28,9 @@ export default class PbDropdown extends PbEnhancedElement {
   clearBtn = null;
 
   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
@@ -252,6 +255,67 @@ 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 (endDateId) {
+            const endDateInput = document.getElementById(endDateId);
+            if (endDateInput) endDateInput.value = optionData.formatted_end_date;
+          }
+          
+          // Sync with DatePickers if controlsStartId/controlsEndId are present
+          if (controlsStartId) {
+            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            if (startPicker) {
+              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+            }
+          }
+          
+          if (controlsEndId) {
+            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            if (endPicker) {
+              endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
+            }
+          }
+        } else if (startDateId || endDateId) {
+          // Clear date inputs when option doesn't have date fields (e.g., blank selection)
+          if (startDateId) {
+            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;
+            if (startPicker) {
+              startPicker.clear();
+            }
+          }
+          
+          if (controlsEndId) {
+            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            if (endPicker) {
+              endPicker.clear();
+            }
+          }
+        }
       }
       if (customDisplayElement) {
         triggerElement.textContent = "";
@@ -432,9 +496,50 @@ export default class PbDropdown extends PbEnhancedElement {
       if (!selectedOption) return;
 
       selectedOption.classList.add("pb_dropdown_option_selected");
-      this.setTriggerElementText(
-        JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
-      );
+      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 (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;
+            if (startPicker) {
+              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+            }
+          }
+          
+          if (controlsEndId) {
+            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);
+      }
     }
   }
 
@@ -571,6 +676,37 @@ export default class PbDropdown extends PbEnhancedElement {
     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 = "";
+    }
+    if (endDateId) {
+      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;
+      if (startPicker) {
+        startPicker.clear();
+      }
+    }
+    
+    if (controlsEndId) {
+      const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+      if (endPicker) {
+        endPicker.clear();
+      }
+    }
+    
     this.resetDropdownValue();
     this.updatePills();
     this.updateClearButton();
@@ -578,6 +714,38 @@ export default class PbDropdown extends PbEnhancedElement {
     this.emitSelectionChange();
   }
 
+  // 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) {
+      return;
+    }
+    
+    const customDisplay = this.element.querySelector(
+      "#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 = "";
+    }
+    if (endDateId) {
+      const endDateInput = document.getElementById(endDateId);
+      if (endDateInput) endDateInput.value = "";
+    }
+    
+    this.resetDropdownValue();
+    this.updateClearButton();
+    this.emitSelectionChange();
+  }
+
   syncHiddenInputs() {
     if (!this.isMultiSelect) return;
     this.element

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    module QuickpickHelper
+      class << self
+        def get_quickpick_options(range_ends_today: false)
+          today = Date.today
+          yesterday = today - 1.day
+
+          this_week_start_date = first_day_of_week(today)
+          this_week_end_date = range_ends_today ? today : last_day_of_week(today)
+          last_week_start_date = previous_week_start_date(today)
+          last_week_end_date = previous_week_end_date(today)
+
+          this_month_start_date = today.beginning_of_month
+          this_month_end_date = range_ends_today ? today : today.end_of_month
+          last_month_start_date = (today - 1.month).beginning_of_month
+          last_month_end_date = (today - 1.month).end_of_month
+
+          this_quarter_start_date = today.beginning_of_quarter
+          this_quarter_end_date = range_ends_today ? today : today.end_of_quarter
+          last_quarter_start_date = (today - 3.months).beginning_of_quarter
+          last_quarter_end_date = (today - 3.months).end_of_quarter
+
+          this_year_start_date = today.beginning_of_year
+          this_year_end_date = range_ends_today ? today : today.end_of_year
+          last_year_start_date = (today - 1.year).beginning_of_year
+          last_year_end_date = (today - 1.year).end_of_year
+
+          [
+            { id: "quickpick-today", label: "Today", value: [today.to_s, today.to_s], formatted_start_date: format_date(today), formatted_end_date: format_date(today) },
+            { id: "quickpick-yesterday", label: "Yesterday", value: [yesterday.to_s, yesterday.to_s], formatted_start_date: format_date(yesterday), formatted_end_date: format_date(yesterday) },
+            { id: "quickpick-this-week", label: "This Week", value: [this_week_start_date.to_s, this_week_end_date.to_s], formatted_start_date: format_date(this_week_start_date), formatted_end_date: format_date(this_week_end_date) },
+            { id: "quickpick-this-month", label: "This Month", value: [this_month_start_date.to_s, this_month_end_date.to_s], formatted_start_date: format_date(this_month_start_date), formatted_end_date: format_date(this_month_end_date) },
+            { id: "quickpick-this-quarter", label: "This Quarter", value: [this_quarter_start_date.to_s, this_quarter_end_date.to_s], formatted_start_date: format_date(this_quarter_start_date), formatted_end_date: format_date(this_quarter_end_date) },
+            { id: "quickpick-this-year", label: "This Year", value: [this_year_start_date.to_s, this_year_end_date.to_s], formatted_start_date: format_date(this_year_start_date), formatted_end_date: format_date(this_year_end_date) },
+            { id: "quickpick-last-week", label: "Last Week", value: [last_week_start_date.to_s, last_week_end_date.to_s], formatted_start_date: format_date(last_week_start_date), formatted_end_date: format_date(last_week_end_date) },
+            { id: "quickpick-last-month", label: "Last Month", value: [last_month_start_date.to_s, last_month_end_date.to_s], formatted_start_date: format_date(last_month_start_date), formatted_end_date: format_date(last_month_end_date) },
+            { id: "quickpick-last-quarter", label: "Last Quarter", value: [last_quarter_start_date.to_s, last_quarter_end_date.to_s], formatted_start_date: format_date(last_quarter_start_date), formatted_end_date: format_date(last_quarter_end_date) },
+            { id: "quickpick-last-year", label: "Last Year", value: [last_year_start_date.to_s, last_year_end_date.to_s], formatted_start_date: format_date(last_year_start_date), formatted_end_date: format_date(last_year_end_date) },
+          ]
+        end
+
+      private
+
+        def format_date(date)
+          date.strftime("%m/%d/%Y")
+        end
+
+        def format_date_range(start_date, end_date)
+          "#{format_date(start_date)} - #{format_date(end_date)}"
+        end
+
+        def first_day_of_week(date)
+          # Monday as first day of week
+          date.beginning_of_week(:monday)
+        end
+
+        def last_day_of_week(date)
+          # Sunday as last day of week
+          date.end_of_week(:monday)
+        end
+
+        def previous_week_start_date(date)
+          first_day_of_week(date) - 1.week
+        end
+
+        def previous_week_end_date(date)
+          last_day_of_week(date) - 1.week
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -6,10 +6,10 @@ import { GlobalProps, globalProps } from '../../utilities/globalProps'
 import Card from '../../pb_card/_card'
 
 export type FilterBackgroundProps = {
-  background: boolean,
-  className: string,
+  background?: boolean,
+  className?: string,
   children?: React.ReactChild[] | React.ReactChild,
-  dark: boolean,
+  dark?: boolean,
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {