playbook_ui 13.26.0 → 13.27.0.pre.alpha.PBNTR294paginationstylingfix2899

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

@@ -0,0 +1,22 @@
+# 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

@@ -0,0 +1,43 @@
+<%= 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

@@ -0,0 +1,30 @@
+# 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

@@ -0,0 +1,153 @@
+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";
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+const OPTION_SELECTOR = "[data-dropdown-option-label]";
+export class PbDropdownKeyboard {
+  constructor(dropdown) {
+    this.dropdown = dropdown;
+    this.dropdownElement = dropdown.element;
+    this.options = Array.from(
+      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+    );
+    this.focusedOptionIndex = -1;
+    this.init();
+  }
+
+  init() {
+    this.dropdownElement.addEventListener(
+      "keydown",
+      this.handleKeyDown.bind(this)
+    );
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this.dropdown.target.classList.contains("open")) {
+          this.dropdown.showElement(this.dropdown.target);
+          this.dropdown.updateArrowDisplay(true);
+        }
+        this.moveFocus(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.moveFocus(-1);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.focusedOptionIndex !== -1) {
+          this.selectOption();
+        } else {
+          if (!this.dropdown.target.classList.contains("open")) {
+            this.dropdown.showElement(this.dropdown.target);
+            this.dropdown.updateArrowDisplay(true);
+          }
+        }
+        break;
+      case "Escape":
+        this.dropdown.hideElement(this.dropdown.target);
+        break;
+      case "Tab":
+        this.dropdown.hideElement(this.dropdown.target);
+        this.dropdown.updateArrowDisplay(false);
+        this.resetFocus();
+        break;
+      default:
+        break;
+    }
+  }
+
+  moveFocus(direction) {
+    if (this.focusedOptionIndex !== -1) {
+      this.options[this.focusedOptionIndex].classList.remove(
+        "pb_dropdown_option_focused"
+      );
+    }
+    this.focusedOptionIndex =
+      (this.focusedOptionIndex + direction + this.options.length) %
+      this.options.length;
+    this.options[this.focusedOptionIndex].classList.add(
+      "pb_dropdown_option_focused"
+    );
+  }
+
+  selectOption() {
+    const option = this.options[this.focusedOptionIndex];
+    this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
+    this.dropdown.hideElement(this.dropdown.target);
+  }
+}

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -50,8 +50,10 @@ const DropdownOption = (props: DropdownOptionProps) => {
     selected,
   } = useContext(DropdownContext);
 
-  const isItemMatchingFilter = (option: GenericObject) =>
-    option?.label.toLowerCase().includes(filterItem.toLowerCase());
+  const isItemMatchingFilter = (option: GenericObject) => {
+    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+    return String(label).toLowerCase().includes(filterItem.toLowerCase());
+  }
 
   if (!isItemMatchingFilter(option)) {
     return null;

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>

data/app/pb_kits/playbook/pb_flex/flex.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div,
-    style: object.style_value) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    style: object.style_value,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -33,6 +33,17 @@
         outline-offset: -1px;
       }
     }
+    .text_input_wrapper_add_on .add-on-right [class^=pb_card_kit] {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+    .text_input_wrapper_add_on .add-on-right.border_left_on .card-right-aligned {
+      border-left: 1px $border_light solid;
+      &.dark {
+        border-left: 1px rgba($white, 0.15) solid;
+      }
+    }
   }
 
   & > [class^=pb_text_input_kit]:not(:first-child) {
@@ -40,6 +51,10 @@
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
+    .text_input_wrapper_add_on .add-on-left [class^=pb_card_kit] {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
   }
 
   & > [class^=pb_button_kit]:not(:last-child) {

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:span) do %>
+<%= content_tag(:span,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:span) do %>
+<%= content_tag(:span,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
-  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>

data/app/pb_kits/playbook/pb_layout/body.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/footer.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/header.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/item.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/layout.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,4 +1,10 @@
-<%= pb_content_tag(:li,
-                   tabindex: object.tabindex) do %>
+<%= content_tag(:li,
+                aria: object.aria,
+                class: object.classname,
+                data: object.data,
+                id: object.id,
+                tabindex: object.tabindex,
+                **combined_html_options
+  ) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,7 +1,13 @@
 <%= content_tag(:div, class: object.list_classname) do %>
-  <%= pb_content_tag(:"#{object.ordered_class}",
+  <%= content_tag(:"#{object.ordered_class}",
+                  aria: object.aria,
+                  class: object.classname,
+                  data: object.data,
+                  id: object.id,
                   role: object.role,
-                  tabindex: object.tabindex) do %>
+                  tabindex: object.tabindex,
+                  **combined_html_options
+    ) do %>
       <%= content.presence %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -14,6 +14,7 @@ type LoadingInlineProps = {
   data?: { [key: string]: string },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  text?: string,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -24,6 +25,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     data = {},
     htmlOptions = {},
     id,
+    text = ' Loading',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -50,7 +52,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
             icon="spinner"
             pulse
         />
-        {' Loading'}
+        {text}
       </Body>
     </div>
   )