playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,6 +1,7 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { PbDropdownKeyboard } from "./keyboard_accessibility";
 import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
+import { subscribeFloatingKitReposition, positionDropdownPortalToWrapper } from "../utilities/floatingPortalHosts";
 
 const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
 const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
@@ -17,6 +18,72 @@ const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
 const CLEAR_ICON_SELECTOR = "[data-dropdown-clear-icon]";
 const LABEL_SELECTOR = '[data-dropdown="pb-dropdown-label"]';
 
+// Portal host + positioning (parity with utilities/floatingPortalHosts.ts + React Dropdown).
+const PB_DIALOG_FLOATING_ROOT = "[data-pb-dialog-floating-root]";
+const PB_FLOATING_OWNER_ATTR = "data-pb-floating-owner";
+
+function resolveFloatingOwnerId(fromElement) {
+  if (!fromElement) return null;
+  const marked = fromElement.closest(`[${PB_FLOATING_OWNER_ATTR}]`);
+  if (marked) return marked.getAttribute(PB_FLOATING_OWNER_ATTR);
+  const popoverEl = fromElement.closest(".pb_popover_tooltip");
+  if (popoverEl?.id) return popoverEl.id;
+  const dialogEl = fromElement.closest("dialog, .pb_dialog");
+  if (dialogEl?.id) return dialogEl.id;
+  return null;
+}
+
+const DIALOG_DIRECT_FLOATING_ROOT = `:scope > ${PB_DIALOG_FLOATING_ROOT}`;
+const POPOVER_FLOATING_ROOT = `:scope > .pb_popover_body > ${PB_DIALOG_FLOATING_ROOT}`;
+
+function resolveDialogFloatingPortalHost(fromElement) {
+  if (!fromElement) return null;
+  const dialogEl = fromElement.closest("dialog");
+  if (dialogEl) {
+    return dialogEl.querySelector(DIALOG_DIRECT_FLOATING_ROOT) || dialogEl;
+  }
+  const reactModalShell = fromElement.closest(".pb_dialog");
+  if (reactModalShell) {
+    return (
+      reactModalShell.querySelector(DIALOG_DIRECT_FLOATING_ROOT) ||
+      reactModalShell
+    );
+  }
+  const popoverEl = fromElement.closest(".pb_popover_tooltip");
+  if (popoverEl) {
+    return (
+      popoverEl.querySelector(POPOVER_FLOATING_ROOT) ||
+      popoverEl.querySelector(PB_DIALOG_FLOATING_ROOT) ||
+      popoverEl
+    );
+  }
+  return null;
+}
+
+function resolvePortaledKitHost(kitRoot, dialogCtxTarget) {
+  if (typeof document === "undefined") return null;
+  if (kitRoot && kitRoot.closest(".pb_popover_tooltip")) {
+    return document.body;
+  }
+  return (
+    resolveDialogFloatingPortalHost(kitRoot) || dialogCtxTarget || null
+  );
+}
+
+function clearDropdownPortalPanelStyles(panel) {
+  [
+    "position",
+    "left",
+    "top",
+    "right",
+    "bottom",
+    "width",
+    "z-index",
+    "margin",
+  ].forEach((prop) => {
+    panel.style.removeProperty(prop);
+  });
+}
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -58,6 +125,12 @@ export default class PbDropdown extends PbEnhancedElement {
     };
   }
 
+  /** Options live under `[data-dropdown-container]`; use this when the menu is portaled to body. */
+  queryAllOptions() {
+    const root = this.target || this.element;
+    return root.querySelectorAll(OPTION_SELECTOR);
+  }
+
   selectedOptions = new Set();
   clearBtn = null;
 
@@ -66,7 +139,21 @@ export default class PbDropdown extends PbEnhancedElement {
     this.element._pbDropdownInstance = this;
     this.cacheElements();
 
+    this.portalHost = null;
+    this.useMenuPortal = false;
+    this.floatingOwnerId = null;
+    this._floatingResolved = false;
+    this.portalShell = null;
+    this._portalParent = null;
+    this._portalNext = null;
+    this.boundApplyPortalPosition = () => {
+      if (this.target?.classList.contains("open")) {
+        this.applyPortalPosition();
+      }
+    };
+
     this.keyboardHandler = new PbDropdownKeyboard(this);
+    this.isDisabled = this.element.dataset.pbDropdownDisabled === "true";
     this.isMultiSelect = this.element.dataset.pbDropdownMultiSelect === "true";
     this.closeOnClick = this.element.dataset.pbDropdownCloseOnClick || "any";
     this.formPillProps = this.element.dataset.formPillProps
@@ -95,6 +182,7 @@ export default class PbDropdown extends PbEnhancedElement {
       this.clearBtn.addEventListener("click", this.clearBtnHandler);
     }
     this.updateClearButton();
+    this.applyDisabledState();
 
     // Listen for clear and select events from external source
     this.handleClearEventBound = this.handleClearEvent.bind(this);
@@ -117,6 +205,8 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   disconnect() {
+    this.unmountPortalMenu();
+
     // Clean up stored instance reference
     if (this.element._pbDropdownInstance === this) {
       delete this.element._pbDropdownInstance
@@ -193,10 +283,45 @@ export default class PbDropdown extends PbEnhancedElement {
     this.clearBtn.style.display = hasSelection ? "" : "none";
   }
 
+  applyDisabledState() {
+    if (!this.isDisabled) return;
+
+    const focusableSelector = [
+      "a[href]",
+      "button",
+      "input",
+      "select",
+      "textarea",
+      "[tabindex]",
+      "[contenteditable='true']",
+      CLEAR_ICON_SELECTOR,
+      DOWN_ARROW_SELECTOR,
+      UP_ARROW_SELECTOR,
+    ].join(",");
+
+    this.element.querySelectorAll(focusableSelector).forEach((element) => {
+      element.setAttribute("aria-disabled", "true");
+      element.setAttribute("tabindex", "-1");
+
+      if (element.matches("input, select, textarea, button")) {
+        element.setAttribute("disabled", "disabled");
+      }
+    });
+
+    this.element.querySelectorAll(`${CLEAR_ICON_SELECTOR}, ${DOWN_ARROW_SELECTOR}, ${UP_ARROW_SELECTOR}`).forEach((icon) => {
+      icon.setAttribute("aria-hidden", "true");
+      icon.setAttribute("focusable", "false");
+    });
+
+    this.hideElement(this.target);
+    this.updateArrowDisplay(false);
+  }
+
   bindEventListeners() {
     const customTrigger = this.customTrigger || this.element;
     this.customTriggerClickHandler = (e) => {
       const label = e.target.closest(LABEL_SELECTOR);
+      if (this.isDisabled) return;
       if (label && label.htmlFor) {
         const trigger = this.element.querySelector(
           `#${CSS.escape(label.htmlFor)}`,
@@ -265,6 +390,9 @@ export default class PbDropdown extends PbEnhancedElement {
           el.offsetHeight; // force reflow
           el.style.height = el.scrollHeight + "px";
         }
+        if (this.useMenuPortal) {
+          this.applyPortalPosition();
+        }
       });
     }
   }
@@ -272,6 +400,11 @@ export default class PbDropdown extends PbEnhancedElement {
   adjustDropdownPosition(container) {
     if (!container) return;
 
+    if (this.useMenuPortal) {
+      this.applyPortalPosition();
+      return;
+    }
+
     const wrapper = this.dropdownWrapper;
     if (!wrapper) return;
 
@@ -295,10 +428,93 @@ export default class PbDropdown extends PbEnhancedElement {
     }
   }
 
+  ensureFloatingPortalConfig() {
+    if (this._floatingResolved) return;
+    this.portalHost = resolvePortaledKitHost(this.element, null);
+    this.floatingOwnerId = resolveFloatingOwnerId(this.element);
+    this.useMenuPortal = Boolean(this.portalHost);
+    this._floatingResolved = true;
+  }
+
+  mountPortalMenu(container) {
+    if (!this.useMenuPortal || !this.portalHost) return;
+    if (container.dataset.pbDropdownPortaled === "true") return;
+
+    this._portalParent = container.parentNode;
+    this._portalNext = container.nextSibling;
+
+    const shell = document.createElement("div");
+    shell.className = `${this.element.className} pb_dropdown_floating_shell`.trim();
+    if (this.floatingOwnerId) {
+      shell.setAttribute(PB_FLOATING_OWNER_ATTR, this.floatingOwnerId);
+    }
+
+    const innerWrap = document.createElement("div");
+    const hasError = this.dropdownWrapper?.classList.contains("error");
+    innerWrap.className = hasError ? "dropdown_wrapper error" : "dropdown_wrapper";
+    Object.assign(innerWrap.style, {
+      background: "transparent",
+      border: "none",
+      boxShadow: "none",
+      margin: "0",
+      minHeight: "0",
+      padding: "0",
+      position: "static",
+    });
+
+    innerWrap.appendChild(container);
+    shell.appendChild(innerWrap);
+    this.portalHost.appendChild(shell);
+    this.portalShell = shell;
+    container.dataset.pbDropdownPortaled = "true";
+  }
+
+  unmountPortalMenu() {
+    if (this._unsubscribePortalReposition) {
+      this._unsubscribePortalReposition();
+      this._unsubscribePortalReposition = null;
+    }
+    if (this.boundApplyPortalPosition) {
+      window.removeEventListener("resize", this.boundApplyPortalPosition);
+    }
+    if (!this.target || this.target.dataset.pbDropdownPortaled !== "true") {
+      return;
+    }
+    delete this.target.dataset.pbDropdownPortaled;
+    clearDropdownPortalPanelStyles(this.target);
+
+    if (this._portalParent && this.target) {
+      if (this._portalNext && this._portalNext.parentNode === this._portalParent) {
+        this._portalParent.insertBefore(this.target, this._portalNext);
+      } else {
+        this._portalParent.appendChild(this.target);
+      }
+    }
+    this._portalParent = null;
+    this._portalNext = null;
+
+    if (this.portalShell) {
+      this.portalShell.remove();
+    }
+    this.portalShell = null;
+  }
+
+  applyPortalPosition() {
+    if (!this.useMenuPortal || !this.portalHost || !this.target || !this.dropdownWrapper) {
+      return;
+    }
+    positionDropdownPortalToWrapper({
+      panel: this.target,
+      wrapperViewportRect: this.dropdownWrapper.getBoundingClientRect(),
+      positionHost: this.portalHost,
+    });
+  }
+
   handleSearch(term = "") {
+    if (this.isDisabled) return;
     const lcTerm = term.toLowerCase();
     let hasMatch = false;
-    this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+    this.queryAllOptions().forEach((opt) => {
       //make it so that if the option is selected, it will not show up in the search results
       if (
         this.isMultiSelect &&
@@ -326,7 +542,7 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   showNoOptionsMessage() {
-    if (this.element.querySelector(".dropdown_no_options")) return;
+    if (this.target?.querySelector(".dropdown_no_options")) return;
 
     const noOptionElement = document.createElement("div");
     noOptionElement.className =
@@ -337,17 +553,20 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   removeNoOptionsMessage() {
-    const existing = this.element.querySelector(".dropdown_no_options");
+    const existing = this.target?.querySelector(".dropdown_no_options");
     if (existing) {
       existing.remove();
     }
   }
 
   handleOptionClick(event) {
+    if (this.isDisabled) return;
     const option = event.target.closest(OPTION_SELECTOR);
     const hiddenInput = this.baseInput;
 
     if (option) {
+      if (option.dataset.dropdownOptionDisabled === "true") return;
+
       const value = option.dataset.dropdownOptionLabel;
       if (this.isMultiSelect) {
         const alreadySelected = this.selectedOptions.has(value);
@@ -389,6 +608,7 @@ export default class PbDropdown extends PbEnhancedElement {
   // ----- External events handling section -----
   // Handles pb:dropdown:clear - clear this dropdown when event.detail.dropdownId matches.
   handleClearEvent(event) {
+    if (this.isDisabled) return;
     const targetId = event.detail?.dropdownId;
     if (targetId && this.element.id === targetId) {
       this.clearSelection();
@@ -397,6 +617,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
   // Handles custom_event_type events (e.g. turbo:submit-end) - clear when detail.dropdownId matches or is omitted.
   handleCustomClearEvent(event) {
+    if (this.isDisabled) return;
     const targetId = event.detail?.dropdownId;
     if (targetId == null || this.element.id === targetId) {
       this.clearSelection();
@@ -406,6 +627,7 @@ export default class PbDropdown extends PbEnhancedElement {
   // Handles pb:dropdown:select - set dropdown selection by option id(s).
   // Single: detail: { dropdownId, optionId }. Multi: detail: { dropdownId, optionIds: ['id1', 'id2'] }.
   handleSelectEvent(event) {
+    if (this.isDisabled) return;
     const targetId = event.detail?.dropdownId;
     if (!targetId || this.element.id !== targetId) return;
 
@@ -422,7 +644,7 @@ export default class PbDropdown extends PbEnhancedElement {
   setSelectionByOptionId(optionId) {
     if (this.isMultiSelect) return;
     const hiddenInput = this.baseInput;
-    const optionEls = Array.from(this.element.querySelectorAll(OPTION_SELECTOR));
+    const optionEls = Array.from(this.queryAllOptions());
     const selectedOption = optionEls.find((opt) => {
       try {
         return JSON.parse(opt.dataset.dropdownOptionLabel).id === optionId;
@@ -431,6 +653,7 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     });
     if (!selectedOption) return;
+    if (selectedOption.dataset.dropdownOptionDisabled === "true") return;
 
     optionEls.forEach((opt) => opt.classList.remove("pb_dropdown_option_selected"));
     selectedOption.classList.add("pb_dropdown_option_selected");
@@ -485,7 +708,7 @@ export default class PbDropdown extends PbEnhancedElement {
   // 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));
+    const optionEls = Array.from(this.queryAllOptions());
     this.selectedOptions.clear();
     optionEls.forEach((opt) => {
       opt.classList.remove("pb_dropdown_option_selected");
@@ -501,6 +724,8 @@ export default class PbDropdown extends PbEnhancedElement {
         }
       });
       if (opt) {
+        if (opt.dataset.dropdownOptionDisabled === "true") return;
+
         const raw = opt.dataset.dropdownOptionLabel;
         this.selectedOptions.add(raw);
         opt.style.display = "none";
@@ -525,7 +750,7 @@ export default class PbDropdown extends PbEnhancedElement {
       return !clickInTrigger && !clickInContainer;
     } else {
       const triggerElement = this.trigger;
-      const containerElement = this.element.querySelector(CONTAINER_SELECTOR);
+      const containerElement = this.target;
 
       const isOutsideTrigger = triggerElement
         ? !triggerElement.contains(event.target)
@@ -547,7 +772,7 @@ export default class PbDropdown extends PbEnhancedElement {
       const hiddenInput = this.baseInput;
       detail = hiddenInput.value
         ? JSON.parse(
-            this.element.querySelector(
+            (this.target || this.element).querySelector(
               OPTION_SELECTOR +
                 `[data-dropdown-option-label*='"id":"${hiddenInput.value}"']`,
             ).dataset.dropdownOptionLabel,
@@ -663,19 +888,14 @@ export default class PbDropdown extends PbEnhancedElement {
       this.emitSelectionChange();
     }
 
-    const customTrigger = this.customTrigger;
     const shouldCloseOnOptionSelect =
       this.closeOnClick === "any" || this.closeOnClick === "inside";
-    if (
-      customTrigger &&
-      shouldCloseOnOptionSelect &&
-      this.target.classList.contains("open")
-    ) {
+    if (shouldCloseOnOptionSelect && this.target.classList.contains("open")) {
       this.hideElement(this.target);
       this.updateArrowDisplay(false);
     }
 
-    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    const options = this.queryAllOptions();
     if (this.isMultiSelect) {
       this.emitSelectionChange();
       Array.from(this.selectedOptions).map((option) => {
@@ -702,9 +922,16 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   showElement(elem) {
+    if (this.isDisabled) return;
+    
+    this.ensureFloatingPortalConfig();
+    if (this.useMenuPortal) {
+      this.mountPortalMenu(elem);
+    }
+
     elem.classList.remove("close");
     elem.classList.add("open");
-    
+
     const shouldConstrain = elem.classList.contains("constrain_height");
     if (shouldConstrain) {
       // Calculate height respecting max-height constraint (18em)
@@ -716,14 +943,30 @@ export default class PbDropdown extends PbEnhancedElement {
     } else {
       elem.style.height = elem.scrollHeight + "px";
     }
-    
-    // Auto-position dropdown above if not enough space below
-    this.adjustDropdownPosition(elem);
+
+    if (this.useMenuPortal) {
+      this.applyPortalPosition();
+      window.removeEventListener("resize", this.boundApplyPortalPosition);
+      window.addEventListener("resize", this.boundApplyPortalPosition);
+      if (this._unsubscribePortalReposition) {
+        this._unsubscribePortalReposition();
+        this._unsubscribePortalReposition = null;
+      }
+      this._unsubscribePortalReposition = subscribeFloatingKitReposition(
+        this.boundApplyPortalPosition,
+      );
+      window.requestAnimationFrame(() => this.applyPortalPosition());
+    } else {
+      this.adjustDropdownPosition(elem);
+    }
   }
 
   hideElement(elem) {
     elem.style.height = elem.scrollHeight + "px";
     window.setTimeout(() => {
+      if (this.useMenuPortal) {
+        this.unmountPortalMenu();
+      }
       elem.classList.add("close");
       elem.classList.remove("open");
       this.resetFocus();
@@ -733,7 +976,7 @@ export default class PbDropdown extends PbEnhancedElement {
   resetFocus() {
     if (this.keyboardHandler) {
       this.keyboardHandler.focusedOptionIndex = -1;
-      const options = this.element.querySelectorAll(OPTION_SELECTOR);
+      const options = this.queryAllOptions();
       options.forEach((option) =>
         option.classList.remove("pb_dropdown_option_focused"),
       );
@@ -741,6 +984,7 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   toggleElement(elem) {
+    if (this.isDisabled) return;
     const isOpen = toggleVisibility({
       isVisible: elem.classList.contains("open"),
       onHide: () => this.hideElement(elem),
@@ -805,7 +1049,7 @@ export default class PbDropdown extends PbEnhancedElement {
   setDefaultValue() {
     const hiddenInput = this.baseInput;
     const optionEls = Array.from(
-      this.element.querySelectorAll(OPTION_SELECTOR),
+      this.queryAllOptions(),
     );
     const defaultValue = hiddenInput.dataset.defaultValue || "";
     if (!defaultValue) return;
@@ -917,7 +1161,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
   resetDropdownValue() {
     const hiddenInput = this.baseInput;
-    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    const options = this.queryAllOptions();
     options.forEach((option) => {
       option.classList.remove("pb_dropdown_option_selected");
       option.style.display = "";
@@ -1006,7 +1250,7 @@ export default class PbDropdown extends PbEnhancedElement {
         const id = pill.dataset.pillId;
         this.selectedOptions.delete(option);
 
-        const optEl = this.element.querySelector(
+        const optEl = (this.target || this.element).querySelector(
           `${OPTION_SELECTOR}[data-dropdown-option-label*='"id":${JSON.stringify(
             id,
           )}']`,
@@ -1028,9 +1272,10 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   clearSelection() {
+    if (this.isDisabled) return;
     if (this.isMultiSelect) {
       this.selectedOptions.clear();
-      this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+      this.queryAllOptions().forEach((opt) => {
         opt.style.display = "";
       });
       if (this.target.classList.contains("open")) {
@@ -1156,7 +1401,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleBackspaceClear() {
     if (!this.isMultiSelect) {
-      this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+      this.queryAllOptions().forEach((opt) => {
         opt.classList.remove("pb_dropdown_option_selected");
         opt.style.display = "";
         this.adjustDropdownHeight();
@@ -1170,7 +1415,7 @@ export default class PbDropdown extends PbEnhancedElement {
         this.setTriggerElementText(placeholder.dataset.dropdownPlaceholder);
     }
     if (this.isMultiSelect) {
-      this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+      this.queryAllOptions().forEach((opt) => {
         const optValue = opt.dataset.dropdownOptionLabel;
         if (
           this.selectedOptions.size > 0 &&

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

@@ -6,7 +6,7 @@ export class PbDropdownKeyboard {
     this.dropdown = dropdown;
     this.dropdownElement = dropdown.element;
     this.options = Array.from(
-      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+      (dropdown.target || this.dropdownElement).querySelectorAll(OPTION_SELECTOR),
     );
     this.focusedOptionIndex = -1;
     this.searchInput = this.dropdownElement.querySelector(
@@ -45,12 +45,17 @@ export class PbDropdownKeyboard {
 
   getVisibleOptions() {
     // We only want to return the options that are visible
-    return Array.from(
-      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
-    ).filter((opt) => opt.style.display !== "none");
+    const scope = this.dropdown.target || this.dropdownElement;
+    return Array.from(scope.querySelectorAll(OPTION_SELECTOR)).filter(
+      
+      (opt) => opt.style.display !== "none" && opt.dataset.dropdownOptionDisabled !== "true"
+    ,
+    );
   }
 
   openDropdownIfClosed() {
+    if (this.dropdown.isDisabled) return;
+
     if (!this.dropdown.target.classList.contains("open")) {
       this.dropdown.showElement(this.dropdown.target);
       this.dropdown.updateArrowDisplay(true);
@@ -58,6 +63,8 @@ export class PbDropdownKeyboard {
   }
 
   handleKeyDown(event) {
+    if (this.dropdown.isDisabled) return;
+
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -105,9 +112,8 @@ export class PbDropdownKeyboard {
   }
 
 moveFocus(direction) {
-    const allOptions = Array.from(
-      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
-    );
+    const scope = this.dropdown.target || this.dropdownElement;
+    const allOptions = Array.from(scope.querySelectorAll(OPTION_SELECTOR));
     const visible = this.getVisibleOptions();
     if (!visible.length) return;
 
@@ -133,12 +139,15 @@ moveFocus(direction) {
 
 
   selectOption() {
-    const allOptions = Array.from(
-      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
-    );
+    if (this.dropdown.isDisabled) return;
+
+    const scope = this.dropdown.target || this.dropdownElement;
+    const allOptions = Array.from(scope.querySelectorAll(OPTION_SELECTOR));
     if (this.focusedOptionIndex < 0) return;
 
     const optionEl = allOptions[this.focusedOptionIndex];
+    if (optionEl.dataset.dropdownOptionDisabled === "true") return;
+
     this.dropdown.handleOptionClick({ target: optionEl });
     this.dropdown.toggleElement(this.dropdown.target);
     this.dropdown.updateClearButton();

data/app/pb_kits/playbook/pb_dropdown/kit.schema.json

@@ -59,6 +59,14 @@
         "rails"
       ]
     },
+    "disabled": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "formPillProps": {
       "type": "GenericObject",
       "platforms": [