playbook_ui 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840 → 13.26.0.pre.alpha.jasoncypretpatch12816

data/lib/playbook/kit_base.rb

@@ -81,7 +81,7 @@ module Playbook
     end
 
     # rubocop:disable Style/OptionalBooleanParameter
-    def pb_content_tag(name, content_or_options_with_block = nil, options = {}, escape = true, &block)
+    def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape = true, &block)
       combined_options = options
                          .merge(combined_html_options)
                          .merge(default_options.merge(content_or_options_with_block))

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.26.0"
-  VERSION = "13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840"
+  VERSION = "13.26.0.pre.alpha.jasoncypretpatch12816"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840
+  version: 13.26.0.pre.alpha.jasoncypretpatch12816
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-06 00:00:00.000000000 Z
+date: 2024-05-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1044,48 +1044,31 @@ files:
 - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/context/index.tsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
 - app/pb_kits/playbook/pb_dropdown/docs/example.yml
 - app/pb_kits/playbook/pb_dropdown/docs/index.js
-- app/pb_kits/playbook/pb_dropdown/dropdown.html.erb
-- app/pb_kits/playbook/pb_dropdown/dropdown.rb
 - app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx
-- app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb
-- app/pb_kits/playbook/pb_dropdown/dropdown_container.rb
-- app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb
-- app/pb_kits/playbook/pb_dropdown/dropdown_option.rb
-- app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb
-- app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb
 - app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx
-- app/pb_kits/playbook/pb_dropdown/index.js
-- app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js
 - app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss
 - app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx
 - app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

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

@@ -1,10 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) %>

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

@@ -1,17 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") %>
-    <%= pb_rails("dropdown/dropdown_container") do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,60 +0,0 @@
-<% 
-  options = [
-    {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Senior UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
-    },
-    {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
-    },
-    {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
-      territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "UX Design Mentor",
-      id: "courtney-long",
-      status: "Online"
-    }
-  ]
-
-%>
-
-<%
-  custom_display = capture do
-    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
-  end
-%>
-
-
-<%= pb_rails("dropdown", props: {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| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,45 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") %>
-    <%= pb_rails("dropdown/dropdown_container") do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,17 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") %>
-    <%= pb_rails("dropdown/dropdown_container") do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option, padding:"sm"}) %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,47 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") do %>
-        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
-    <% end %>
-    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,10 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>

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

@@ -1,26 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
-    <% if object.label.present? %>
-        <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
-    <% end %>
-    <div class="dropdown_wrapper" style="position: relative">
-    <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
-    <% if content.present? %>
-        <%= content.presence %>
-    <% else %>
-        <%= pb_rails("dropdown/dropdown_trigger") %>
-        <%= pb_rails("dropdown/dropdown_container") do %>
-            <% if object.options.present? %>
-                <% object.options.each do |option| %>
-                    <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-    </div>
-<% end %>
-  

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

@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    class Dropdown < Playbook::KitBase
-      prop :options, type: Playbook::Props::Array,
-                     default: []
-      prop :label, type: Playbook::Props::String
-      prop :name, type: Playbook::Props::String
-
-      def data
-        Hash(prop(:data)).merge(pb_dropdown: true)
-      end
-
-      def classname
-        generate_classname("pb_dropdown")
-      end
-    end
-  end
-end

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

@@ -1,21 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    style: object.container_style,
-    **combined_html_options) do %>
-    <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %> 
-                <%= content.presence %>
-            <% else %> 
-                <%= pb_rails("list/item", props: {
-                    display: "flex", 
-                    justify_content: "center", 
-                    padding:"xs", 
-                    }) do %> 
-                        <%= pb_rails("body", props: {text: "No option"}) %>
-                <% end %>
-            <% end %>
-    <% end %>        
-<% end %>

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

@@ -1,19 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    class DropdownContainer < Playbook::KitBase
-      def classname
-        generate_classname("pb_dropdown_container", "close", separator: " ")
-      end
-
-      def container_style
-        "position: absolute"
-      end
-
-      def data
-        Hash(prop(:data)).merge(dropdown_container: true)
-      end
-    end
-  end
-end

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

@@ -1,27 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.option[:id],
-    **combined_html_options) do %>
-    <%= pb_rails("list/item", props: {
-        display: "flex", 
-        justify_content: "center", 
-        padding:"none", 
-        cursor: "pointer"
-        }) do %> 
-            <%= pb_rails("flex", props: {
-                align: "center",
-                classname:"dropdown_option_wrapper",
-                justify: "between",
-                padding_x:"sm",
-                padding_y:"xxs",
-                }) do %>
-                <% if content.present? %>
-                    <%= content.presence %>
-                <% else %>
-                    <%= pb_rails("body", props: {text: object.option[:label]}) %>
-                <% end %>
-            <% end %>
-    <% end %>
-<% end %>

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

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    class DropdownOption < Playbook::KitBase
-      prop :option, type: Playbook::Props::String
-      prop :id, type: Playbook::Props::String
-
-      def data
-        Hash(prop(:data)).merge("dropdown_option_label": option)
-      end
-
-      def padding_helper
-        " p_xs"
-      end
-
-      def classname
-        generate_classname("pb_dropdown_option", "list") + padding_helper
-      end
-    end
-  end
-end

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

@@ -1,43 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
-    <% if content.present? %>
-        <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
-          <%= content.presence %>
-        </div>
-    <% else %>
-    <%= pb_rails("flex", props: {
-        align: "center", 
-        border_radius:"lg", 
-        classname: object.trigger_wrapper_classes, 
-        cursor: "pointer", 
-        justify: "between", 
-        padding_x:"sm", 
-        padding_y:"xs",
-        html_options: {tabindex:"0"}
-        }) do %>
-        <%= pb_rails("flex/flex_item") do %>
-            <%= pb_rails("flex", props: {align: "center"}) do %>
-                <% if object.custom_display.present?  %>
-                    <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
-                            <%= object.custom_display %>
-                        </div>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
-                    <% end %>
-                <% else %>
-                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-            <%= pb_rails("body", props: {display: "flex"}) do  %>
-                <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
-                <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
-            <% end %>
-    <% end %>
-    <% end %>
-<% end %>
-      

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

@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    class DropdownTrigger < Playbook::KitBase
-      prop :options, type: Playbook::Props::Array,
-                     default: []
-      prop :id, type: Playbook::Props::String,
-                default: ""
-      prop :placeholder, type: Playbook::Props::String
-      prop :custom_display
-
-      def data
-        Hash(prop(:data)).merge(dropdown_trigger: true)
-      end
-
-      def classname
-        generate_classname("pb_dropdown_trigger")
-      end
-
-      def default_display_placeholder
-        placeholder || "Select..."
-      end
-
-      def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", "select_only")
-      end
-    end
-  end
-end

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

@@ -1,153 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-import { PbDropdownKeyboard } from "./keyboard_accessibility";
-
-const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
-const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
-const CONTAINER_SELECTOR = "[data-dropdown-container]";
-const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
-const UP_ARROW_SELECTOR = "#dropdown_close_icon";
-const OPTION_SELECTOR = "[data-dropdown-option-label]";
-const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-
-export default class PbDropdown extends PbEnhancedElement {
-  static get selector() {
-    return DROPDOWN_SELECTOR;
-  }
-
-  connect() {
-    this.keyboardHandler = new PbDropdownKeyboard(this);
-    this.bindEventListeners();
-    this.updateArrowDisplay(false);
-  }
-
-  bindEventListeners() {
-    const customTrigger =
-      this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
-    customTrigger.addEventListener("click", () =>
-      this.toggleElement(this.target)
-    );
-
-    this.target.addEventListener("click", this.handleOptionClick.bind(this));
-    document.addEventListener(
-      "click",
-      this.handleDocumentClick.bind(this),
-      true
-    );
-  }
-
-  handleOptionClick(event) {
-    const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    if (option) {
-      const value = option.dataset.dropdownOptionLabel;
-      hiddenInput.value = JSON.parse(value).id;
-      this.onOptionSelected(value, option);
-    }
-  }
-
-  handleDocumentClick(event) {
-    if (this.isClickOutside(event) && this.target.classList.contains("open")) {
-      this.hideElement(this.target);
-      this.updateArrowDisplay(false);
-    }
-  }
-
-  isClickOutside(event) {
-    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
-    if (customTrigger) {
-      return !customTrigger.contains(event.target);
-    } else {
-      const triggerElement = this.element.querySelector(TRIGGER_SELECTOR);
-      const containerElement =
-        this.element.parentNode.querySelector(CONTAINER_SELECTOR);
-
-      const isOutsideTrigger = triggerElement
-        ? !triggerElement.contains(event.target)
-        : true;
-      const isOutsideContainer = containerElement
-        ? !containerElement.contains(event.target)
-        : true;
-
-      return isOutsideTrigger && isOutsideContainer;
-    }
-  }
-
-  onOptionSelected(value, selectedOption) {
-    const triggerElement = this.element.querySelector(
-      "#dropdown_trigger_display"
-    );
-    const customDisplayElement = this.element.querySelector(
-      "#dropdown_trigger_custom_display"
-    );
-    if (triggerElement) {
-      const selectedLabel = JSON.parse(value).label;
-      triggerElement.textContent = selectedLabel;
-      if (customDisplayElement) {
-        customDisplayElement.style.display = "block";
-        customDisplayElement.style.paddingRight = "8px";
-      }
-    }
-
-    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
-    if (customTrigger) {
-      if (this.target.classList.contains("open")) {
-        this.hideElement(this.target);
-        this.updateArrowDisplay(false);
-      }
-    }
-
-    const options = this.element.querySelectorAll(OPTION_SELECTOR);
-    options.forEach((option) => {
-      option.classList.remove("pb_dropdown_option_selected");
-    });
-    selectedOption.classList.add("pb_dropdown_option_selected");
-  }
-
-  get target() {
-    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
-  }
-
-  showElement(elem) {
-    elem.classList.remove("close");
-    elem.classList.add("open");
-    elem.style.height = elem.scrollHeight + "px";
-  }
-
-  hideElement(elem) {
-    elem.style.height = elem.scrollHeight + "px";
-    window.setTimeout(() => {
-      elem.classList.add("close");
-      elem.classList.remove("open");
-      this.resetFocus();
-    }, 0);
-  }
-
-  resetFocus() {
-    if (this.keyboardHandler) {
-      this.keyboardHandler.focusedOptionIndex = -1;
-      const options = this.element.querySelectorAll(OPTION_SELECTOR);
-      options.forEach((option) =>
-        option.classList.remove("pb_dropdown_option_focused")
-      );
-    }
-  }
-
-  toggleElement(elem) {
-    if (elem.classList.contains("open")) {
-      this.hideElement(elem);
-      this.updateArrowDisplay(false);
-      return;
-    }
-    this.showElement(elem);
-    this.updateArrowDisplay(true);
-  }
-
-  updateArrowDisplay(isOpen) {
-    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
-    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
-    if (downArrow && upArrow) {
-      downArrow.style.display = isOpen ? "none" : "inline-block";
-      upArrow.style.display = isOpen ? "inline-block" : "none";
-    }
-  }
-}