RubyGems - playbook_ui - Versions diffs - 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469 - Mend

playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

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

@@ -18,10 +18,87 @@
                 </div>
               <% end %>
               <% object.filters&.each do |filter| %>
-                <% if filter[:name].present? %>
+                <% next unless filter[:name].present? %>
+                <% interactive_config = object.interactive_config_for(filter[:name]) %>
+                <% if interactive_config.present? %>
+                  <%
+                    chip_id        = "pb-interactive-filter-#{object.id || 'kit'}-#{filter[:name].to_s.parameterize}"
+                    popover_id     = "#{chip_id}-popover"
+                    type           = object.interactive_value(interactive_config, :type).to_s
+                    display_value  = object.interactive_display_value(interactive_config, filter[:value])
+                    is_date_picker = type == "date-picker"
+                    is_options     = %w[select dropdown].include?(type)
+                    chip_data_attrs = {
+                      "pb-interactive-filter" => "true",
+                      "pb-filter-name"        => filter[:name],
+                      "pb-filter-type"        => type,
+                      "pb-filter-popover-id"  => popover_id,
+                      "pb-filter-target"      => object.interactive_value(interactive_config, :target_input),
+                      "pb-filter-value"       => filter[:value],
+                      "pb-filter-auto-submit" => object.interactive_value(interactive_config, :auto_submit),
+                    }
+                    if is_date_picker
+                      chip_data_attrs.merge!(
+                        "pb-filter-date-format" => object.interactive_value(interactive_config, :format),
+                        "pb-filter-date-mode"   => object.interactive_value(interactive_config, :mode),
+                        "pb-filter-date-min"    => object.interactive_value(interactive_config, :min_date),
+                        "pb-filter-date-max"    => object.interactive_value(interactive_config, :max_date),
+                      )
+                    end
+                  %>
+                  <div class="filter interactive">
+                    <button type="button"
+                            class="pb_interactive_filter_trigger"
+                            id="<%= chip_id %>"
+                            <%= chip_data_attrs.compact_blank.map { |k, v| "data-#{k}=\"#{ERB::Util.html_escape(v)}\"" }.join(" ").html_safe %>>
+                      <div class="pb_interactive_filter_text">
+                        <%= pb_rails("caption", props: { text: filter[:name] }) %>
+                        <%= pb_rails("flex", props: { align_items: "center", gap: "xxs" }) do %>
+                          <%= pb_rails("title", props: {
+                            text: display_value.presence || "—",
+                            size: 4,
+                            data: { "pb-filter-value-display" => true },
+                          }) %>
+                          <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, size: "xs", color: "primary" }) %>
+                        <% end %>
+                      </div>
+                    </button>
+                    <%# Popover tooltip is moved to <body> in index.ts (connect)
+                        to escape the filter row's overflow-x clipping. We
+                        reuse pb_popover's CSS classes for visual consistency
+                        rather than using the popover kit directly because
+                        that kit doesn't portal its tooltip out of its DOM
+                        parent. %>
+                    <div class="pb_popover_tooltip hide pb_interactive_filter_editor pb_interactive_filter_editor--<%= type %>" id="<%= popover_id %>" role="tooltip">
+                      <div class="pb_popover_body">
+                        <% if is_options %>
+                          <ul class="pb_interactive_filter_options" role="listbox">
+                            <% object.interactive_options(interactive_config).each do |opt| %>
+                              <% opt_value = object.interactive_option_value(interactive_config, opt) %>
+                              <% is_active = opt_value.to_s == filter[:value].to_s %>
+                              <% opt_label = object.interactive_option_label(opt, opt_value) %>
+                              <li class="pb_interactive_filter_option<%= ' active' if is_active %>"
+                                  tabindex="0"
+                                  role="option"
+                                  aria-selected="<%= is_active %>"
+                                  data-pb-filter-option-value="<%= opt_value %>"
+                                  data-pb-filter-option-label="<%= opt_label %>">
+                                <span><%= opt_label %></span>
+                              </li>
+                            <% end %>
+                          </ul>
+                        <% elsif is_date_picker %>
+                          <div data-pb-filter-date-mount></div>
+                        <% end %>
+                      </div>
+                    </div>
+                  </div>
+                <% else %>
                   <div class="filter">
-                    <%= pb_rails("caption", props: { text: filter[:name]}) %>
-                    <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+                    <%= pb_rails("caption", props: { text: filter[:name] }) %>
+                    <%= pb_rails("title", props: { size: 4, tag: "h4", text: filter[:value] }) %>
                   </div>
                 <% end %>
               <% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb CHANGED Viewed

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
+require_relative "../pb_dropdown/quickpick_helper"
 module Playbook
   module PbFilter
     class Filter < Playbook::KitBase
@@ -17,11 +19,64 @@ module Playbook
                        default: "bottom-start"
       prop :popover_props, type: Playbook::Props::HashProp,
                            default: {}
+      prop :interactive_filters, type: Playbook::Props::HashArray, default: []
       def classname
         generate_classname("pb_filter_kit").rstrip
       end
+      def interactive_config_for(filter_name)
+        interactive_filters_index[filter_name.to_s]
+      end
+      def interactive_value(config, key)
+        return nil if config.nil?
+        config[key]
+      end
+      def interactive_options(config)
+        return [] if config.nil?
+        config = config.with_indifferent_access
+        if interactive_quickpick?(config) && Array(config[:options]).blank?
+          return Playbook::PbDropdown::QuickpickHelper.get_quickpick_options(
+            range_ends_today: config[:range_ends_today] || false,
+            custom_quick_pick_dates: config[:custom_quick_pick_dates] || {}
+          )
+        end
+        Array(config[:options])
+      end
+      def interactive_option_value(config, option)
+        config = config.with_indifferent_access
+        option = option.with_indifferent_access
+        if config[:type].to_s == "dropdown"
+          option[:id] || option[:value] || option[:label]
+        else
+          option[:value] || option[:text] || option[:label]
+        end
+      end
+      def interactive_option_label(option, fallback = nil)
+        option = option.with_indifferent_access
+        option[:label] || option[:text] || fallback
+      end
+      def interactive_display_value(config, raw_value)
+        return raw_value if config.nil?
+        return raw_value unless %w[select dropdown].include?(config[:type].to_s)
+        match = interactive_options(config).find do |opt|
+          interactive_option_value(config, opt).to_s == raw_value.to_s
+        end
+        return raw_value unless match
+        interactive_option_label(match, raw_value)
+      end
       def result_text
         case results
         when 1
@@ -51,6 +106,22 @@ module Playbook
           ""
         end
       end
+    private
+      def interactive_filters_index
+        @interactive_filters_index ||= Array(interactive_filters).each_with_object({}) do |entry, acc|
+          next unless entry.is_a?(Hash)
+          config = entry.with_indifferent_access
+          name = config[:name].to_s
+          acc[name] = config if name.present?
+        end
+      end
+      def interactive_quickpick?(config)
+        config[:type].to_s == "dropdown" && config[:variant].to_s == "quickpick"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_filter/filter.test.js CHANGED Viewed

@@ -6,6 +6,19 @@ import {
 } from "../utilities/test-utils";
 import { Button, Filter, Flex, Select, TextInput } from "playbook-ui";
+const mockMatchMedia = (matches) => {
+  window.matchMedia = jest.fn().mockImplementation(() => ({
+    addEventListener: jest.fn(),
+    addListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+    matches,
+    media: "",
+    onchange: null,
+    removeEventListener: jest.fn(),
+    removeListener: jest.fn(),
+  }));
+};
 function FilterTest(props) {
   const SortingChangeCallback = (sortOptions) => {
     alert(JSON.stringify(sortOptions[0]));
@@ -74,3 +87,68 @@ test("triggers popover on filter button click", () => {
 });
+test("calls onChange and closes editor when an interactive option is selected", () => {
+  mockMatchMedia(true);
+  const handleChange = jest.fn();
+  render(
+    <FilterTest
+        filters={{
+          Status: "open",
+        }}
+        interactiveFilters={{
+          Status: {
+            type: "dropdown",
+            options: [
+              { value: "open", label: "Open" },
+              { value: "closed", label: "Closed" },
+            ],
+            onChange: handleChange,
+          },
+        }}
+    />
+  );
+  const interactiveButton = screen
+    .getAllByRole("button")
+    .find((button) => button.getAttribute("aria-haspopup") === "dialog");
+  fireEvent.click(interactiveButton);
+  fireEvent.click(screen.getByRole("option", { name: "Closed" }));
+  expect(handleChange).toHaveBeenCalledWith("closed");
+  expect(screen.queryByRole("option", { name: "Closed" })).not.toBeInTheDocument();
+});
+test("generates quickpick options for interactive dropdown filters", () => {
+  mockMatchMedia(true);
+  const handleChange = jest.fn();
+  render(
+    <FilterTest
+        filters={{
+          "Date range": "quickpick-this-week",
+        }}
+        interactiveFilters={{
+          "Date range": {
+            type: "dropdown",
+            variant: "quickpick",
+            onChange: handleChange,
+          },
+        }}
+    />
+  );
+  expect(screen.getByText("This Week")).toBeInTheDocument();
+  const interactiveButton = screen
+    .getAllByRole("button")
+    .find((button) => button.getAttribute("aria-haspopup") === "dialog");
+  fireEvent.click(interactiveButton);
+  fireEvent.click(screen.getByRole("option", { name: "Last Month" }));
+  expect(handleChange).toHaveBeenCalledWith("quickpick-last-month");
+});

data/app/pb_kits/playbook/pb_filter/index.ts ADDED Viewed

@@ -0,0 +1,349 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import PbEnhancedElement from "../pb_enhanced_element";
+import { createPopper, Instance as PopperInstance } from "@popperjs/core";
+import flatpickr from "flatpickr";
+const INTERACTIVE_FILTER_SELECTOR = "[data-pb-interactive-filter]";
+/**
+ * Rails-side enhanced behavior for interactive applied-filter chips.
+ *
+ * The chip <button> is the trigger; this class owns:
+ *   - click → popover open/close + popper positioning
+ *   - option-click handling (select/dropdown editors)
+ *   - flatpickr initialization (date-picker editor)
+ *   - syncing the chosen value back to a target form input
+ *   - optional auto-submit of the parent form
+ *
+ * The tooltip is teleported to <body> at connect() so it escapes the filter
+ * row's overflow clipping (see _filter.scss for position:fixed).
+ */
+export default class PbFilter extends PbEnhancedElement {
+  _popper: PopperInstance | null = null;
+  _picker: any = null;
+  _tooltip: HTMLElement | null = null;
+  _bodyClickHandler: ((e: MouseEvent) => void) | null = null;
+  _optionClickHandler: ((e: MouseEvent) => void) | null = null;
+  _isOpen = false;
+  _type: string | undefined;
+  _popoverId: string | undefined;
+  _targetInputId: string | undefined;
+  _autoSubmit = false;
+  static get selector() {
+    return INTERACTIVE_FILTER_SELECTOR;
+  }
+  connect() {
+    const { dataset } = this.element;
+    this._type = dataset.pbFilterType;
+    this._popoverId = dataset.pbFilterPopoverId;
+    this._targetInputId = dataset.pbFilterTarget;
+    this._autoSubmit = dataset.pbFilterAutoSubmit === "true";
+    this.element.addEventListener("click", (event: MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.toggle();
+    });
+    if (this._type === "select" || this._type === "dropdown") {
+      this.bindOptionClicks();
+    }
+    const tooltip = this.tooltip;
+    if (tooltip && tooltip.parentElement !== document.body) {
+      document.body.appendChild(tooltip);
+      tooltip.style.position = "fixed";
+      tooltip.style.top = "0";
+      tooltip.style.left = "0";
+      tooltip.style.margin = "0";
+    }
+  }
+  disconnect() {
+    this._popper?.destroy();
+    this._popper = null;
+    this._picker?.destroy();
+    this._picker = null;
+    if (this._bodyClickHandler) {
+      document.removeEventListener("click", this._bodyClickHandler, true);
+      this._bodyClickHandler = null;
+    }
+    if (this._optionClickHandler) {
+      document.removeEventListener("click", this._optionClickHandler);
+      this._optionClickHandler = null;
+    }
+    if (this._tooltip && this._tooltip.parentElement === document.body) {
+      this._tooltip.remove();
+    }
+    this._tooltip = null;
+  }
+  get tooltip(): HTMLElement | null {
+    if (this._tooltip) return this._tooltip;
+    if (!this._popoverId) return null;
+    this._tooltip = document.getElementById(this._popoverId);
+    return this._tooltip;
+  }
+  toggle() {
+    this._isOpen ? this.hide() : this.show();
+  }
+  show() {
+    const tooltip = this.tooltip;
+    if (!tooltip) return;
+    if (tooltip.parentElement !== document.body) {
+      document.body.appendChild(tooltip);
+      tooltip.style.position = "fixed";
+      tooltip.style.top = "0";
+      tooltip.style.left = "0";
+      tooltip.style.margin = "0";
+    }
+    tooltip.classList.remove("hide");
+    tooltip.classList.add("show");
+    this._isOpen = true;
+    if (!this._popper) {
+      this._popper = createPopper(this.element, tooltip, {
+        placement: "bottom-start",
+        strategy: "fixed",
+        modifiers: [{ name: "offset", options: { offset: [0, 8] } }],
+      });
+    } else {
+      this._popper.update();
+    }
+    if (this._type === "date-picker" && !this._picker) {
+      this.initFlatpickr();
+    }
+    this.bindBodyClickToClose();
+  }
+  hide() {
+    const tooltip = this.tooltip;
+    if (!tooltip) return;
+    tooltip.classList.remove("show");
+    tooltip.classList.add("hide");
+    this._isOpen = false;
+    if (this._bodyClickHandler) {
+      document.removeEventListener("click", this._bodyClickHandler, true);
+      this._bodyClickHandler = null;
+    }
+  }
+  bindBodyClickToClose() {
+    if (this._bodyClickHandler) return;
+    this._bodyClickHandler = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (this.element.contains(target)) return;
+      if (this.tooltip && this.tooltip.contains(target)) return;
+      this.hide();
+    };
+    setTimeout(() => {
+      if (this._bodyClickHandler) {
+        document.addEventListener("click", this._bodyClickHandler, true);
+      }
+    }, 0);
+  }
+  bindOptionClicks() {
+    if (this._optionClickHandler || !this._popoverId) return;
+    const popoverId = this._popoverId;
+    this._optionClickHandler = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const option = target.closest(
+        "[data-pb-filter-option-value]"
+      ) as HTMLElement | null;
+      if (!option) return;
+      const popover = document.getElementById(popoverId);
+      if (!popover || !popover.contains(option)) return;
+      const value = option.dataset.pbFilterOptionValue;
+      const label = option.dataset.pbFilterOptionLabel || value;
+      if (value === undefined) return;
+      this.applyChange(value, label);
+      this.hide();
+    };
+    document.addEventListener("click", this._optionClickHandler);
+  }
+  initFlatpickr() {
+    const tooltip = this.tooltip;
+    if (!tooltip) return;
+    const mount = tooltip.querySelector(
+      "[data-pb-filter-date-mount]"
+    ) as HTMLElement | null;
+    if (!mount) return;
+    const { dataset } = this.element;
+    const mode = (dataset.pbFilterDateMode || "single") as
+      | "single"
+      | "range"
+      | "multiple";
+    this._picker = flatpickr(mount, {
+      inline: true,
+      defaultDate: dataset.pbFilterValue || undefined,
+      mode,
+      dateFormat: dataset.pbFilterDateFormat || "m/d/Y",
+      minDate: dataset.pbFilterDateMin || undefined,
+      maxDate: dataset.pbFilterDateMax || undefined,
+      nextArrow: '<i class="far fa-angle-right"></i>',
+      prevArrow: '<i class="far fa-angle-left"></i>',
+      onChange: (_dates: Date[], dateStr: string) => {
+        this.applyChange(dateStr, dateStr);
+        if (mode === "single") this.hide();
+      },
+    });
+  }
+  applyChange(value: string, label: string) {
+    const display = this.element.querySelector(
+      "[data-pb-filter-value-display]"
+    ) as HTMLElement | null;
+    if (display) display.textContent = label || "—";
+    this.element.dataset.pbFilterValue = value;
+    this.updateChipOptionActiveStates(value);
+    if (!this._targetInputId) return;
+    const target = document.getElementById(this._targetInputId) as
+      | HTMLElement
+      | null;
+    if (!target) {
+      console.warn(
+        `[PbFilter] target_input "${this._targetInputId}" not found in the DOM — verify the ID matches a form field or dropdown.`
+      );
+      return;
+    }
+    const syncTarget =
+      this._type === "dropdown"
+        ? this.resolveDropdownRoot(target) || target
+        : target;
+    if (this.syncDropdownTarget(syncTarget, value)) {
+      if (this._autoSubmit) this.maybeAutoSubmit(target);
+      return;
+    }
+    const input = target as HTMLInputElement | HTMLSelectElement;
+    input.value = value;
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    const fpHost = input as HTMLInputElement & { _flatpickr?: any };
+    if (fpHost._flatpickr?.setDate) {
+      fpHost._flatpickr.setDate(value, false);
+    }
+    if (this._autoSubmit) this.maybeAutoSubmit(input);
+  }
+  updateChipOptionActiveStates(value: string) {
+    const tooltip = this.tooltip;
+    if (!tooltip) return;
+    tooltip
+      .querySelectorAll("[data-pb-filter-option-value]")
+      .forEach((optionEl) => {
+        const option = optionEl as HTMLElement;
+        const isActive = option.dataset.pbFilterOptionValue === value;
+        option.classList.toggle("active", isActive);
+        option.setAttribute("aria-selected", String(isActive));
+        const checkIcon = option.querySelector(
+          ".pb_icon_kit, .pb_icon_kit_xs, [class*='fa-check']"
+        );
+        if (isActive && !checkIcon) {
+          const icon = document.createElement("i");
+          icon.className = "far fa-check fa-fw fa-xs";
+          option.appendChild(icon);
+        } else if (!isActive && checkIcon) {
+          checkIcon.remove();
+        }
+      });
+  }
+  resolveDropdownRoot(target: HTMLElement): HTMLElement | null {
+    if (target.matches("[data-pb-dropdown]")) return target;
+    return target.closest("[data-pb-dropdown]") as HTMLElement | null;
+  }
+  syncDropdownTarget(target: HTMLElement, value: string): boolean {
+    const dropdownRoot = this.resolveDropdownRoot(target);
+    if (!dropdownRoot) return false;
+    const dropdownId = dropdownRoot.id;
+    const applySelection = () => {
+      const instance = (
+        dropdownRoot as HTMLElement & {
+          _pbDropdownInstance?: {
+            setSelectionByOptionId: (id: string) => void,
+          },
+        }
+      )._pbDropdownInstance;
+      if (instance?.setSelectionByOptionId) {
+        instance.setSelectionByOptionId(value);
+        return true;
+      }
+      return false;
+    };
+    if (!applySelection() && dropdownId) {
+      document.dispatchEvent(
+        new CustomEvent("pb:dropdown:select", {
+          detail: { dropdownId, optionId: value },
+        })
+      );
+    }
+    if (!applySelection()) {
+      requestAnimationFrame(() => applySelection());
+    }
+    const hiddenInput = dropdownRoot.querySelector(
+      "[data-dropdown-selected-option]"
+    ) as HTMLInputElement | null;
+    if (hiddenInput && hiddenInput.value !== value) {
+      hiddenInput.value = value;
+    }
+    hiddenInput?.dispatchEvent(new Event("change", { bubbles: true }));
+    return true;
+  }
+  maybeAutoSubmit(input: HTMLElement) {
+    if (!this._autoSubmit) return;
+    const form = input.closest("form");
+    if (form) {
+      form.requestSubmit();
+    } else {
+      console.warn(
+        "[PbFilter] auto_submit: no <form> ancestor found for target input",
+        input,
+        "— verify target_input points to a field inside a <form> element."
+      );
+    }
+  }
+}