RubyGems - playbook_ui - Versions diffs - 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.alpha.play266913088 - Mend

playbook_ui 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.alpha.play266913088

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx ADDED Viewed

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Typeahead from '../../pb_typeahead/_typeahead'
+const DialogOverflowVisible = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+  const typeaheadOptions = [
+    { label: "United States", value: "unitedStates", id: "us" },
+    { label: "United Kingdom", value: "unitedKingdom", id: "gb" },
+    { label: "Canada", value: "canada", id: "ca" },
+    { label: "Australia", value: "australia", id: "au" },
+    { label: "Germany", value: "germany", id: "de" },
+    { label: "France", value: "france", id: "fr" },
+    { label: "Japan", value: "japan", id: "jp" },
+    { label: "Brazil", value: "brazil", id: "br" },
+  ]
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog with Overflow Visible'}</Button>
+      <Dialog
+          onClose={close}
+          opened={isOpen}
+          overflow="visible"
+          size="md"
+      >
+        <Dialog.Header>
+          <Body>{'Select Location'}</Body>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Typeahead
+              options={typeaheadOptions}
+              placeholder="Select a location..."
+          />
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Button onClick={close}>{'Save'}</Button>
+          <Button
+              onClick={close}
+              variant="link"
+          >
+            {'Cancel'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+export default DialogOverflowVisible

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `overflow: "visible"` global prop to allow Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `overflow="visible"` global prop to allow Date Picker and Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay.

data/app/pb_kits/playbook/pb_dialog/docs/example.yml CHANGED Viewed

@@ -12,6 +12,8 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
+  - dialog_overflow_visible: Overflow Visible
+  - dialog_closeable: Close Button in Header
   react:
@@ -25,6 +27,8 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
+  - dialog_overflow_visible: Overflow Visible
+  - dialog_closeable: Close Button in Header
   swift:
   - dialog_default_swift: Simple

data/app/pb_kits/playbook/pb_dialog/docs/index.js CHANGED Viewed

@@ -8,4 +8,6 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
-export { default as DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
+export { default as DialogCloseable } from './_dialog_closeable.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb CHANGED Viewed

@@ -20,12 +20,14 @@
 %>
-<%= pb_rails("dropdown", props: {options: options}) %>
+<%= pb_rails("dropdown", props: {id: "country-dropdown", options: options}) %>
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
-    const option   = e.detail;
-    const dropdown = e.target;
-    console.log("Selected option:", option);
-})
+    if (e.target.id === "country-dropdown") {
+      const option   = e.detail;
+      const dropdown = e.target;
+      console.log("Selected option:", option);
+    }
+  });
 </script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb ADDED Viewed

@@ -0,0 +1,19 @@
+<%= pb_rails("dropdown", props: {
+  id: "date-range-with-default",
+  label: "Date Range",
+  variant: "quickpick",
+  default_value: "This Year"
+}) %>
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropdown = document.getElementById("date-range-with-default");
+    if (dropdown) {
+      dropdown.addEventListener("pb:dropdown:selected", (e) => {
+        const option = e.detail;
+        console.log("Selected option:", option);
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<%= pb_rails("dropdown", props: {id: "date-range-quickpick-1", label: "Date Range", variant: "quickpick"}) %>
+<script>
+  const dropdown = document.getElementById("date-range-quickpick-1");
+  if (dropdown) {
+    dropdown.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md ADDED Viewed

@@ -0,0 +1,26 @@
+The `quickpick` variant provides predefined date based options when `variant:"quickpick"` is used.
+Open the Dropdown above to see the default options.
+The quickpick variant automatically generates hidden inputs for `start_date` and `end_date` which are populated when a date range is selected. These inputs are ready for form submission.
+You can customize the input names and IDs using the following props:
+- `start_date_name` - The name attribute for the start date input (default: `"start_date_name"`)
+- `start_date_id` - The ID attribute for the start date input (default: `"start_date_id"`)
+- `end_date_name` - The name attribute for the end date input (default: `"end_date_name"`)
+- `end_date_id` - The ID attribute for the end date input (default: `"end_date_id"`)
+Example with custom names:
+```ruby
+pb_rails("dropdown", props: {
+  variant: "quickpick",
+  start_date_name: "filter[start_date]",
+  start_date_id: "filter_start_date",
+  end_date_name: "filter[end_date]",
+  end_date_id: "filter_end_date"
+})
+```
+The Dropdown kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
+In addition, a data attribute called data-option-selected with the selection is also rendered on the parent dropdown div.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.html.erb ADDED Viewed

@@ -0,0 +1,19 @@
+<%= pb_rails("dropdown", props: {
+  id: "date-range-quickpick-end-today",
+  label: "Date Range",
+  variant: "quickpick",
+  range_ends_today: true
+}) %>
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropdown = document.getElementById("date-range-quickpick-end-today");
+    if (dropdown) {
+      dropdown.addEventListener("pb:dropdown:selected", (e) => {
+        const option = e.detail;
+        console.log("Selected option:", option);
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `range_ends_today` prop can be used with the `quickpick` variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `range_ends_today` prop is used, end date on that range will be today's date.

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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