RubyGems - playbook_ui - Versions diffs - 16.3.0.pre.alpha.play284914770 → 16.3.0.pre.alpha.play285814889 - Mend

playbook_ui 16.3.0.pre.alpha.play284914770 → 16.3.0.pre.alpha.play285814889

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 (67) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b00abe84561a81194a57761780d54f66b81d7242fbd9a5375ceb53f68168b31
-  data.tar.gz: 8915da7876e7d6e0541ac17f82fc7b2dedba1cd78f41b295b2a5162d19b74e8a
+  metadata.gz: 02d49483b3956da77f73aacb7718f16ebd2b6b8782c44e80815f22be2ffcde4e
+  data.tar.gz: 693802d5534038fe8a607937538cd3b9370627d0613a09353f9c14b4ed6bb721
 SHA512:
-  metadata.gz: 5bb0b7509dcbede294e117a06019480ab186eef8306eb8bdf08210b88535739526e0b96fa696cc36e3c05c4cfa03eed520b0e177496940b9dbb6fe6ca6ebf99a
-  data.tar.gz: e56a8eef5c977851fda3ccaa58058a577e352bb051a39bd933e38267f950fd7a611f5bb090d5243dfbf1c8d6287a7e6909a9f3f93489d83228dd765ed534e18c
+  metadata.gz: 9878ce5bb1f4e16cd4dad4389e981eacc4ce7aab095d9c39fa0f3b9411768b0732ff6e96b12d35eaf67d0f34f0fdf85e71b5b063d406c3e44bd9f1d6d2389625
+  data.tar.gz: 4bc358a3ec5ede3933e21e49627d59353a776ed6ff602da16d0c2c509df8297486c56c7b10470504f37040d61e04ca8635e597181cab5eb9c9386635ebe3781b

data/app/pb_kits/playbook/pb_button/_button_mixins.scss CHANGED Viewed

@@ -57,7 +57,7 @@ $pb_button_border_width: 0px;
   }
   .loading-icon {
-    position: absolute;
+    position: static;
     display: none;
   }
   .pb_button_content {
@@ -158,10 +158,15 @@ $pb_button_border_width: 0px;
 // Loading =====================
 @mixin pb_button_loading($loading: false) {
   @if $loading == true {
+    display: inline-grid;
+    place-items: center;
     .loading-icon {
+      grid-area: 1 / 1;
       display: block;
     }
     .pb_button_content {
+      grid-area: 1 / 1;
       visibility: hidden;
     }
   }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb CHANGED Viewed

@@ -28,7 +28,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx CHANGED Viewed

@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
 import Button from '../../pb_button/_button'
 import Caption from '../../pb_caption/_caption'
 import Dialog from '../../pb_dialog/_dialog'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 const DialogCompound = () => {
@@ -25,8 +25,11 @@ const DialogCompound = () => {
           <Body>{'What do you need us to take care of?'}</Body>
         </Dialog.Header>
         <Dialog.Body>
-          <Caption marginBottom="xs">{'Description'}</Caption>
-          <RichTextEditor />
+          <Textarea
+              id="default-example-1"
+              label="Description"
+              rows={4}
+          />
           <br />
           <Caption>
             {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb CHANGED Viewed

@@ -1,11 +1,20 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
-<%= pb_rails("dialog", props: {
-    id:"dialog-1",
-    size: "sm",
-    title: "Header Title is the Title Prop",
-    text: "Hello Body Text, Nice to meet ya.",
-    cancel_button: "Cancel Button",
-    confirm_button: "Okay",
-    confirm_button_id: "confirm-button-1"
-}) %>
+<%= pb_rails("dialog", props: {
+        id:"dialog-1",
+        size: "md",
+        title: "Header Title is the Title Prop"
+}) do %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
+        <div style="height: 800px; background-color: lightgray;"></div>
+        <%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
+            <%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx CHANGED Viewed

@@ -12,16 +12,35 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
-          cancelButton="Cancel Button"
-          confirmButton="Okay"
           onCancel={close}
           onClose={close}
           onConfirm={close}
           opened={isOpen}
-          size="sm"
-          text="Hello Body Text, Nice to meet ya."
+          size="md"
           title="Header Title is the Title Prop"
-      />
+      >
+        <Dialog.Body>
+            <Button
+                aria={{ label: 'Loading' }}
+                loading
+                text="Button Primary"
+            />
+            <div style={{height: '800px', backgroundColor: 'lightgray'}} />
+            <Button
+                loading
+                text="Loading..."
+            />
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button
+                loading
+                text="Send My Issue"
+            />
+            <Button  variant="link">
+              {"Back"}
+            </Button>
+          </Dialog.Footer>
+        </Dialog>
     </>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb CHANGED Viewed

@@ -12,7 +12,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-7"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
@@ -31,7 +31,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-8"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
@@ -49,7 +49,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-9"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 const useDialog = (visible = false) => {
@@ -77,8 +77,11 @@ const DialogFullHeight = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id="default-example-1"
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb CHANGED Viewed

@@ -13,7 +13,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-2"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     <% end %>
@@ -32,7 +32,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-3"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>
@@ -50,7 +50,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-4"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from "../../pb_textarea/_textarea";
 import Typeahead from '../../pb_typeahead/_typeahead'
 const useDialog = (visible = false) => {
@@ -76,8 +76,11 @@ const DialogFullHeightPlacement = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id={`default-example-2-${index}`}
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss CHANGED Viewed

@@ -15,6 +15,9 @@
 .pb_dropdown_quickpick,
 .pb_dropdown_default_separators_hidden,
 .pb_dropdown_subtle_separators_hidden {
+  label {
+    display: block !important;
+  }
   .dropdown_wrapper {
     .dropdown_trigger_wrapper,
     .dropdown_trigger_wrapper_focus,

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx CHANGED Viewed

@@ -441,6 +441,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                 value={{
                     activeStyle,
                     autocomplete,
+                    blankSelection,
                     clearable,
                     dropdownContainerRef,
                     error,

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

@@ -0,0 +1,16 @@
+<%
+  options = [
+    { label: "United States", value: "unitedStates", id: "us" },
+    { label: "Canada", value: "canada", id: "ca" },
+    { label: "Pakistan", value: "pakistan", id: "pk" },
+  ]
+%>
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Any" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "any", margin_bottom: "md" }) %>
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outside" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "outside", margin_bottom: "md" }) %>
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Inside" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "inside" }) %>

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

@@ -0,0 +1 @@

+ The `close_on_click` prop allows you to control when the Dropdown closes in response to click interactions. The value `any` reflects the default behavior, where the dropdown will close after any click. Set it to `outside` to ensure interactive elements as dropdown options are able to be interacted with or modified. Set it to `inside` for a dropdown that only closes when the input or dropdown menu is clicked.

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

@@ -25,6 +25,7 @@ examples:
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_clearable: Clearable
   - dropdown_with_constrain_height_rails: Constrain Height
+  - dropdown_closing_options_rails: Closing Options
   - 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)
@@ -32,7 +33,6 @@ examples:
   - 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)
   - dropdown_required_indicator: Required Indicator
-  - dropdown_custom_event_type: Custom Event Type
   react:
   - dropdown_default: Default

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

@@ -39,6 +39,9 @@ module Playbook
                                default: ""
       prop :clearable, type: Playbook::Props::Boolean,
                        default: true
+      prop :close_on_click, type: Playbook::Props::Enum,
+                            values: %w[outside inside any],
+                            default: "any"
       prop :start_date_id, type: Playbook::Props::String,
                            default: "start_date_id"
       prop :start_date_name, type: Playbook::Props::String,
@@ -52,8 +55,6 @@ module Playbook
                               default: false
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
-      prop :custom_event_type, type: Playbook::Props::String,
-                               default: ""
       def data
         Hash(prop(:data)).merge(
@@ -61,12 +62,12 @@ module Playbook
           pb_dropdown_multi_select: multi_select,
           pb_dropdown_variant: variant,
           pb_dropdown_clearable: clearable,
+          pb_dropdown_close_on_click: close_on_click,
           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,
-          custom_event_type: custom_event_type.presence
+          controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil
         ).compact
       end

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

@@ -68,6 +68,7 @@ export default class PbDropdown extends PbEnhancedElement {
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.isMultiSelect = this.element.dataset.pbDropdownMultiSelect === "true";
+    this.closeOnClick = this.element.dataset.pbDropdownCloseOnClick || "any";
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
@@ -94,25 +95,6 @@ export default class PbDropdown extends PbEnhancedElement {
       this.clearBtn.addEventListener("click", this.clearBtnHandler);
     }
     this.updateClearButton();
-    // Listen for clear and select events from external source
-    this.handleClearEventBound = this.handleClearEvent.bind(this);
-    document.addEventListener("pb:dropdown:clear", this.handleClearEventBound);
-    this.handleSelectEventBound = this.handleSelectEvent.bind(this);
-    document.addEventListener("pb:dropdown:select", this.handleSelectEventBound);
-    // Listen for custom_event_type to clear on custom events
-    const customEventTypeString = this.element.dataset.customEventType;
-    if (customEventTypeString) {
-      this.customClearEventTypes = customEventTypeString
-        .split(",")
-        .map((e) => e.trim())
-        .filter(Boolean);
-      this.handleCustomClearBound = this.handleCustomClearEvent.bind(this);
-      this.customClearEventTypes.forEach((eventType) => {
-        document.addEventListener(eventType, this.handleCustomClearBound);
-      });
-    }
   }
   disconnect() {
@@ -164,19 +146,6 @@ export default class PbDropdown extends PbEnhancedElement {
     if (this.clearBtn && this.clearBtnHandler) {
       this.clearBtn.removeEventListener('click', this.clearBtnHandler)
     }
-    // Clean up external clear/select listeners
-    if (this.handleClearEventBound) {
-      document.removeEventListener("pb:dropdown:clear", this.handleClearEventBound)
-    }
-    if (this.handleSelectEventBound) {
-      document.removeEventListener("pb:dropdown:select", this.handleSelectEventBound)
-    }
-    if (this.customClearEventTypes && this.handleCustomClearBound) {
-      this.customClearEventTypes.forEach((eventType) => {
-        document.removeEventListener(eventType, this.handleCustomClearBound)
-      })
-    }
   }
   updateClearButton() {
@@ -204,6 +173,12 @@ export default class PbDropdown extends PbEnhancedElement {
           trigger.focus();
         }
       }
+      if (
+        this.closeOnClick === "outside" &&
+        this.target?.contains(e.target)
+      ) {
+        return;
+      }
       this.toggleElement(this.target);
     }
     customTrigger.addEventListener("click", this.customTriggerClickHandler);
@@ -367,151 +342,29 @@ export default class PbDropdown extends PbEnhancedElement {
   handleDocumentClick(event) {
     if (event.target.closest(SEARCH_BAR_SELECTOR)) return;
-    if (this.isClickOutside(event) && this.target.classList.contains("open")) {
+    const shouldCloseOnOutsideClick =
+      this.closeOnClick === "outside" || this.closeOnClick === "any";
+    if (
+      shouldCloseOnOutsideClick &&
+      this.isClickOutside(event) &&
+      this.target.classList.contains("open")
+    ) {
       this.hideElement(this.target);
       this.updateArrowDisplay(false);
     }
   }
-  // ----- External events handling section -----
-  // Handles pb:dropdown:clear - clear this dropdown when event.detail.dropdownId matches.
-  handleClearEvent(event) {
-    const targetId = event.detail?.dropdownId;
-    if (targetId && this.element.id === targetId) {
-      this.clearSelection();
-    }
-  }
-  // Handles custom_event_type events (e.g. turbo:submit-end) - clear when detail.dropdownId matches or is omitted.
-  handleCustomClearEvent(event) {
-    const targetId = event.detail?.dropdownId;
-    if (targetId == null || this.element.id === targetId) {
-      this.clearSelection();
-    }
-  }
-  // Handles pb:dropdown:select - set dropdown selection by option id(s).
-  // Single: detail: { dropdownId, optionId }. Multi: detail: { dropdownId, optionIds: ['id1', 'id2'] }.
-  handleSelectEvent(event) {
-    const targetId = event.detail?.dropdownId;
-    if (!targetId || this.element.id !== targetId) return;
-    const optionId = event.detail?.optionId;
-    const optionIds = event.detail?.optionIds;
-    if (optionId != null) {
-      this.setSelectionByOptionId(optionId);
-    } else if (Array.isArray(optionIds)) {
-      this.setSelectionByOptionIds(optionIds);
-    }
-  }
-  // Set single-select dropdown to the option with the given id. No-op if id not found.
-  setSelectionByOptionId(optionId) {
-    if (this.isMultiSelect) return;
-    const hiddenInput = this.baseInput;
-    const optionEls = Array.from(this.element.querySelectorAll(OPTION_SELECTOR));
-    const selectedOption = optionEls.find((opt) => {
-      try {
-        return JSON.parse(opt.dataset.dropdownOptionLabel).id === optionId;
-      } catch {
-        return false;
-      }
-    });
-    if (!selectedOption) return;
-    optionEls.forEach((opt) => opt.classList.remove("pb_dropdown_option_selected"));
-    selectedOption.classList.add("pb_dropdown_option_selected");
-    hiddenInput.value = optionId;
-    const optionData = JSON.parse(selectedOption.dataset.dropdownOptionLabel);
-    const customDisplayElement = this.element.querySelector(
-      '[data-dropdown-trigger-custom-display]',
-    );
-    if (customDisplayElement) {
-      this.setTriggerElementText("");
-      customDisplayElement.style.display = "block";
-      customDisplayElement.style.paddingRight = "8px";
-    } else {
-      this.setTriggerElementText(optionData.label);
-    }
-    if (this.searchInput) {
-      this.searchInput.value = optionData.label;
-    }
-    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;
-      }
-      const syncDatePickers = () => {
-        if (controlsStartId) {
-          const startPicker = document.querySelector(`#${CSS.escape(controlsStartId)}`)?._flatpickr;
-          if (startPicker) startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
-        }
-        if (controlsEndId) {
-          const endPicker = document.querySelector(`#${CSS.escape(controlsEndId)}`)?._flatpickr;
-          if (endPicker) endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
-        }
-      };
-      syncDatePickers();
-      setTimeout(syncDatePickers, 100);
-      setTimeout(syncDatePickers, 300);
-    }
-    this.updateClearButton();
-    this.emitSelectionChange();
-  }
-  // Set multi-select dropdown to the options with the given ids. Invalid ids are skipped.
-  setSelectionByOptionIds(optionIds) {
-    if (!this.isMultiSelect || !optionIds.length) return;
-    const optionEls = Array.from(this.element.querySelectorAll(OPTION_SELECTOR));
-    this.selectedOptions.clear();
-    optionEls.forEach((opt) => {
-      opt.classList.remove("pb_dropdown_option_selected");
-      opt.style.display = "";
-    });
-    optionIds.forEach((id) => {
-      const opt = optionEls.find((o) => {
-        try {
-          return JSON.parse(o.dataset.dropdownOptionLabel).id === id;
-        } catch {
-          return false;
-        }
-      });
-      if (opt) {
-        const raw = opt.dataset.dropdownOptionLabel;
-        this.selectedOptions.add(raw);
-        opt.style.display = "none";
-      }
-    });
-    this.updatePills();
-    this.updateClearButton();
-    this.adjustDropdownHeight();
-    this.syncHiddenInputs();
-    this.emitSelectionChange();
-  }
-  // ----- End External events handling section -----
   isClickOutside(event) {
     const label = event.target.closest(LABEL_SELECTOR);
     if (label && this.element.contains(label)) return false;
     const customTrigger = this.customTrigger;
     if (customTrigger) {
-      return !customTrigger.contains(event.target);
+      const clickInTrigger = customTrigger.contains(event.target);
+      const clickInContainer = this.target?.contains(event.target);
+      return !clickInTrigger && !clickInContainer;
     } else {
       const triggerElement = this.trigger;
-      const containerElement =
-        this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+      const containerElement = this.element.querySelector(CONTAINER_SELECTOR);
       const isOutsideTrigger = triggerElement
         ? !triggerElement.contains(event.target)
@@ -650,11 +503,15 @@ export default class PbDropdown extends PbEnhancedElement {
     }
     const customTrigger = this.customTrigger;
-    if (customTrigger) {
-      if (this.target.classList.contains("open")) {
-        this.hideElement(this.target);
-        this.updateArrowDisplay(false);
-      }
+    const shouldCloseOnOptionSelect =
+      this.closeOnClick === "any" || this.closeOnClick === "inside";
+    if (
+      customTrigger &&
+      shouldCloseOnOptionSelect &&
+      this.target.classList.contains("open")
+    ) {
+      this.hideElement(this.target);
+      this.updateArrowDisplay(false);
     }
     const options = this.element.querySelectorAll(OPTION_SELECTOR);

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx CHANGED Viewed

@@ -44,6 +44,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {
     autocomplete,
+    blankSelection,
     clearable,
     error,
     errorId,
@@ -57,6 +58,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     isInputFocused,
     label: contextLabel,
     multiSelect,
+    optionsWithBlankSelection,
     selected,
     selectId,
     setIsInputFocused,
@@ -240,20 +242,22 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  >
-                  {
-                    clearable !== false && selectedArray.length > 0 && (
-                      <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
-                        <Icon
-                            cursor="pointer"
-                            dark={dark}
-                            icon="times"
-                            paddingRight="xs"
-                            size="sm"
-                        />
-                      </div>
-                    )
-                  }
+                  >
+                    {(!blankSelection || selected?.value !== optionsWithBlankSelection?.[0]?.value) && (
+                      <>
+                        {clearable !== false && selectedArray.length > 0 && (
+                          <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
+                            <Icon
+                                cursor="pointer"
+                                dark={dark}
+                                icon="times"
+                                paddingRight="xs"
+                                size="sm"
+                            />
+                          </div>
+                        )}
+                      </>
+                    )}
                     <Icon
                         cursor="pointer"
                         dark={dark}
@@ -261,6 +265,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         size="sm"
                     />
                   </Body>
                 </FlexItem>
               </Flex>
             </>